[am] Add dark-mode support
Screenshots:
* "Mine"- https://screenshot.googleplex.com/5u5SEwC3uKcviau.png
* "Alerts"- https://screenshot.googleplex.com/F5eybAht6sRcEpd.png
* "Alerts" Bot-centric view- https://screenshot.googleplex.com/4ADVcHaiiLkRikk.png
* "Silences"- https://screenshot.googleplex.com/4fnBAJPD2TEnT8k.png
* "Stats"- https://screenshot.googleplex.com/54SUuPEngQjUMVR.png
Improvements:
* Made widths of all comments/matches/history/silences consistent.
* All sections have “border-radius: 0.5em” for consistency.
* Added background for notes/matches of silences.
Before: https://screenshot.googleplex.com/3Gd752YGc4xuWzk
After: https://screenshot.googleplex.com/7EjjsATRvLMh3jS
Bug: skia:11231
Change-Id: Iabd89f3d04e2e55b3d1cdb9516816e7aee0836af
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/364637
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Commit-Queue: Ravi Mistry <rmistry@google.com>
diff --git a/am/modules/alert-manager-sk/alert-manager-sk.scss b/am/modules/alert-manager-sk/alert-manager-sk.scss
index 9e69b46..9a3be57 100644
--- a/am/modules/alert-manager-sk/alert-manager-sk.scss
+++ b/am/modules/alert-manager-sk/alert-manager-sk.scss
@@ -1,4 +1,4 @@
-@import '~elements-sk/colors';
+@import '../themes/themes.scss';
alert-manager-sk {
spinner-sk[active] {
@@ -40,7 +40,7 @@
}
.bot-incident-list {
- color: var(--gray);
+ color: var(--inactive);
}
.bot-incident-elem {
@@ -50,7 +50,7 @@
h2 {
align-items: center;
- color: var(--red);
+ color: var(--active);
margin: 0;
padding: 0;
font-size: 14px;
@@ -62,23 +62,23 @@
}
h2.assigned {
- color: var(--orange);
+ color: var(--assigned);
}
h2.inactive {
- color: var(--gray);
+ color: var(--inactive);
}
h2.selected {
- background: var(--white);
+ background: var(--selected);
}
h2.silenced {
- color: var(--green);
+ color: var(--silenced);
}
.silences h2.inactive {
- color: var(--gray);
+ color: var(--inactive);
}
footer {
@@ -101,12 +101,13 @@
tabs-sk {
padding: 5px 0 0 5px;
- border-bottom: dotted var(--gray) 1px;
+ border-bottom: dotted var(--on-background) 1px;
button {
border: none;
- background: var(--white);
- color: var(--gray);
+ background: var(--surface);
+ color: var(--on-surface);
+ fill: var(--on-surface);
}
}
@@ -150,36 +151,36 @@
padding: 1em;
h2 {
- color: var(--blue);
+ color: var(--primary);
display: flex;
justify-content: space-between;
}
}
comment-icon-sk, alarm-off-icon-sk, thumbs-up-down-icon-sk {
- fill: var(--green);
+ fill: var(--icons);
padding: 0.2em 0.6em;
}
.inactive comment-icon-sk {
- fill: gray;
+ fill: var(--inactive);
}
person-icon-sk {
- fill: var(--light-orange);
+ fill: var(--assigned-person);
}
.assigned-circle {
border: solid;
- border-color: var(--light-orange);
+ border-color: var(--assigned-person);
border-radius: 50%;
- color: var(--light-orange);
+ color: var(--assigned-person);
padding: 0.2em;
}
notifications-icon-sk {
padding: 0 0.6em;
- fill: var(--blue);
+ fill: var(--primary);
}
.invisible {
@@ -193,22 +194,22 @@
header {
grid-area: header;
- color: var(--blue);
- fill: var(--blue);
+ color: var(--primary);
+ fill: var(--primary);
padding: 0.4em;
justify-content: flex-end;
display: flex;
login-sk .email,
login-sk .logInOut {
- color: var(--blue);
+ color: var(--primary);
}
}
header,
.edit,
footer {
- border-left: solid 1px black;
+ border-left: solid 1px var(--on-background);
}
display: grid;
diff --git a/am/modules/alert-manager-sk/alert-manager-sk.ts b/am/modules/alert-manager-sk/alert-manager-sk.ts
index 6c76b39..ab702e0 100644
--- a/am/modules/alert-manager-sk/alert-manager-sk.ts
+++ b/am/modules/alert-manager-sk/alert-manager-sk.ts
@@ -34,6 +34,7 @@
import { Login } from '../../../infra-sk/modules/login';
import { BotChooserSk } from '../bot-chooser-sk/bot-chooser-sk';
import { EmailChooserSk } from '../email-chooser-sk/email-chooser-sk';
+import '../../../infra-sk/modules/theme-chooser-sk';
import * as paramset from '../paramset';
import { displaySilence, expiresIn } from '../am';
@@ -130,7 +131,10 @@
}
private static template = (ele: AlertManagerSk) => html`
-<header>${ele.infraGardener()}</header>
+<header>
+ ${ele.infraGardener()}
+ <theme-chooser-sk></theme-chooser-sk>
+</header>
<section class=nav>
<tabs-sk @tab-selected-sk=${ele.tabSwitch} selected=${ele.state.tab}>
<button>Mine</button>
diff --git a/am/modules/bot-chooser-sk/bot-chooser-sk.scss b/am/modules/bot-chooser-sk/bot-chooser-sk.scss
index 4d6591d..2942272 100644
--- a/am/modules/bot-chooser-sk/bot-chooser-sk.scss
+++ b/am/modules/bot-chooser-sk/bot-chooser-sk.scss
@@ -3,7 +3,7 @@
bot-chooser-sk {
dialog-sk {
h2 {
- color: var(--blue);
+ color: var(--primary);
margin: 0;
}
}
diff --git a/am/modules/email-chooser-sk/email-chooser-sk.scss b/am/modules/email-chooser-sk/email-chooser-sk.scss
index c2cc020..1336aeb 100644
--- a/am/modules/email-chooser-sk/email-chooser-sk.scss
+++ b/am/modules/email-chooser-sk/email-chooser-sk.scss
@@ -3,7 +3,7 @@
email-chooser-sk {
dialog-sk {
h2 {
- color: var(--blue);
+ color: var(--primary);
margin: 0;
}
}
diff --git a/am/modules/incident-sk/incident-sk.scss b/am/modules/incident-sk/incident-sk.scss
index 49c1e07..0348d5d 100644
--- a/am/modules/incident-sk/incident-sk.scss
+++ b/am/modules/incident-sk/incident-sk.scss
@@ -39,7 +39,7 @@
}
td a {
- color: var(--blue);
+ color: var(--primary);
}
textarea {
@@ -48,7 +48,7 @@
}
p {
- background: var(--white);
+ background: var(--comments);
padding: 0.5em;
display: block;
border-radius: 0.5em;
@@ -65,27 +65,27 @@
.date {
margin: 0 1em;
- color: var(--orange);
+ color: var(--assigned);
}
.author {
- color: var(--green);
+ color: var(--icons);
}
.flaky,
.recently-expired-silence {
font-size: 0.75em;
- color: var(--black);
+ color: var(--background);
}
delete-icon-sk {
- fill: var(--gray);
+ fill: var(--on-background);
cursor: pointer;
border: solid transparent 1px;
}
delete-icon-sk:hover {
- border: solid var(--gray) 1px;
+ border: solid var(--on-background) 1px;
}
.meta {
@@ -121,5 +121,6 @@
incident-sk[minimized] {
margin: 1em;
- background: var(--dark-white);
+ background: var(--minimized);
+ border-radius: 0.5em;
}
diff --git a/am/modules/silence-sk/silence-sk.scss b/am/modules/silence-sk/silence-sk.scss
index 273c3fe..6508df4 100644
--- a/am/modules/silence-sk/silence-sk.scss
+++ b/am/modules/silence-sk/silence-sk.scss
@@ -35,21 +35,21 @@
.date {
margin: 0 1em;
- color: var(--orange);
+ color: var(--assigned);
}
.author {
- color: var(--green);
+ color: var(--icons);
}
delete-icon-sk {
- fill: var(--gray);
+ fill: var(--on-background);
cursor: pointer;
border: solid transparent 1px;
}
delete-icon-sk:hover {
- border: solid var(--gray) 1px;
+ border: solid var(--on-background) 1px;
}
input.duration {
@@ -66,7 +66,6 @@
section.notes,
section.addNote {
- max-width: 40em;
margin: 1em;
}
@@ -80,6 +79,9 @@
.matches {
margin: 1em;
+ background-color: var(--selected);
+ border-radius: 0.5em;
+ padding: 0.5em;
h1 {
margin: 0;
@@ -88,26 +90,26 @@
h2 {
padding: 0.2em 1em;
- color: var(--blue);
+ color: var(--primary);
}
}
h2 {
align-items: center;
- color: var(--red);
+ color: var(--active);
margin: 0;
padding: 0.2em 1em;
font-size: 14px;
cursor: pointer;
- color: var(--blue);
+ color: var(--primary);
}
h2.inactive {
- color: var(--gray);
+ color: var(--inactive);
}
p {
- background: var(--white);
+ background: var(--comments);
padding: 0.5em;
display: block;
border-radius: 0.5em;
@@ -130,5 +132,9 @@
silence-sk[collapsable] {
margin: 1em;
- background: var(--dark-white);
+ background: var(--minimized);
+ border-radius: 0.5em;
+ p, input, textarea {
+ background: var(--background);
+ }
}
diff --git a/am/modules/themes/themes.scss b/am/modules/themes/themes.scss
new file mode 100644
index 0000000..472e74e
--- /dev/null
+++ b/am/modules/themes/themes.scss
@@ -0,0 +1,48 @@
+@import '~elements-sk/themes/themes';
+
+.body-sk.darkmode {
+ --primary: var(--light-blue);
+ --primary-variant: var(--light-blue-200);
+ --on-primary-variant: var(--black);
+ --dark-grayish-blue: #8899A6;
+ --dark-desaturated-blue: #192734;
+
+ --active: var(--red-300);
+ --inactive: var(--dark-grayish-blue);
+ --silenced: var(--green-300);
+ --assigned: var(--orange-300);
+ --selected: var(--dark-desaturated-blue);
+
+ --minimized: var(--dark-desaturated-blue);
+ --comments: var(--dark-desaturated-blue);
+ --icons: var(--green-300);
+ --disabled: var(--grey-700);
+}
+
+.body-sk {
+ --primary: var(--blue-800);
+ --primary-variant: var(--light-blue-600);
+ --secondary: var(--green-500);
+ --very-dark-gray: #4F4F4F;
+
+ --active: var(--red);
+ --inactive: var(--very-dark-gray);
+ --silenced: var(--green);
+ --assigned: var(--orange);
+ --assigned-person: var(--light-orange);
+ --selected: var(--dark-white);
+
+ --minimized: var(--dark-white);
+ --comments: var(--dark-white);
+ --icons: var(--green);
+
+ input, textarea {
+ border: solid 1px var(--on-surface);
+ color: solid 1px var(--on-surface);
+ background: solid 1px var(--surface);
+ }
+
+ a {
+ color: var(--primary);
+ }
+}
diff --git a/am/pages/index.html b/am/pages/index.html
index 16def70..9f9b56d 100644
--- a/am/pages/index.html
+++ b/am/pages/index.html
@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id=favicon rel="icon" type="image/png" href="/static/icon-active.png">
</head>
-<body>
+<body class="body-sk">
<alert-manager-sk></alert-manager-sk>
</body>
</html>
