diff --git a/CHANGELOG.md b/CHANGELOG.md
index a14226d3..477743c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,11 @@
# Changelog
All notable changes to this project will be documented in this file.
+## v1.22.0 - Unreleased
+
+### Improvements
+- Use multicolor channel icons for better appearance in the dark mode
+
## v1.21.0 - 2020-07-02
### Improvements
diff --git a/static/css/icomoon.css b/static/css/icomoon.css
index 689e8e77..a1e48463 100644
--- a/static/css/icomoon.css
+++ b/static/css/icomoon.css
@@ -1,11 +1,12 @@
@font-face {
font-family: 'icomoon';
src:
- url('../fonts/icomoon.ttf?nsf0dg') format('truetype'),
- url('../fonts/icomoon.woff?nsf0dg') format('woff'),
- url('../fonts/icomoon.svg?nsf0dg#icomoon') format('svg');
+ url('../fonts/icomoon.ttf?h8x72b') format('truetype'),
+ url('../fonts/icomoon.woff?h8x72b') format('woff'),
+ url('../fonts/icomoon.svg?h8x72b#icomoon') format('svg');
font-weight: normal;
font-style: normal;
+ font-display: block;
}
[class^="ic-"], [class*=" ic-"] {
@@ -23,57 +24,96 @@
-moz-osx-font-smoothing: grayscale;
}
+.ic-call:before {
+ content: "\e91a";
+ color: rgb(255, 255, 255);
+}
+.ic-call:after {
+ content: "\e91d";
+ margin-left: -1em;
+ color: rgb(232, 26, 52);
+ opacity: 0.98;
+}
.ic-victorops:before {
content: "\e900";
+ color: rgb(255, 255, 255);
+}
+.ic-victorops:after {
+ content: "\e91e";
+ margin-left: -1em;
+ color: rgb(44, 45, 46);
}
.ic-zulip:before {
content: "\e90f";
- color: #6492fe;
+ color: rgb(255, 255, 255);
+}
+.ic-zulip:after {
+ content: "\e91f";
+ margin-left: -1em;
+ color: rgb(100, 146, 254);
}
-.ic-signal:before {
+.ic-signal:after {
content: "\e91c";
color: #2592e9;
}
.ic-linenotify:before {
content: "\e91b";
- color: #00c300;
+ color: rgb(255, 255, 255);
}
-.ic-call:before {
- content: "\e91a";
- color: #e81a34;
+.ic-linenotify:after {
+ content: "\e920";
+ margin-left: -1em;
+ color: rgb(0, 195, 0);
}
.ic-spike:before {
content: "\e919";
- color: #007bff;
+ color: rgb(255, 255, 255);
+}
+.ic-spike:after {
+ content: "\e921";
+ margin-left: -1em;
+ color: rgb(0, 123, 255);
}
.ic-pd:before {
content: "\e90b";
- color: #04ac38;
+ color: rgb(255, 255, 255);
+}
+.ic-pd:after {
+ content: "\e922";
+ margin-left: -1em;
+ color: rgb(4, 172, 56);
}
.ic-shell:before {
content: "\e917";
+ color: rgb(255, 255, 255);
+}
+.ic-shell:after {
+ content: "\e923";
+ margin-left: -1em;
+ color: rgb(34, 34, 34);
}
.ic-msteams:before {
content: "\e916";
- color: #4e56be;
+ color: rgb(255, 255, 255);
+}
+.ic-msteams:after {
+ content: "\e924";
+ margin-left: -1.056640625em;
+ color: rgb(78, 86, 190);
}
-.ic-opsgenie:before {
+.ic-opsgenie:after {
content: "\e910";
color: #2684ff;
}
-.ic-mattermost:before {
+.ic-mattermost:after {
content: "\e907";
color: #045acc;
}
-.ic-pagerteam:before {
- content: "\e914";
- color: #cd2a00;
-}
-.ic-apprise:before {
+.ic-apprise:after {
content: "\e915";
color: #236b6b;
}
-.ic-matrix:before {
+.ic-matrix:after {
content: "\e901";
}
.ic-started:before {
@@ -81,34 +121,61 @@
}
.ic-pagertree:before {
content: "\e90d";
- color: #33ade2;
+ color: rgb(255, 255, 255);
+}
+.ic-pagertree:after {
+ content: "\e929";
+ margin-left: -1em;
+ color: rgb(51, 173, 226);
}
.ic-po:before {
content: "\e90e";
- color: #249df1;
+ color: rgb(255, 255, 255);
+}
+.ic-po:after {
+ content: "\e92a";
+ margin-left: -1em;
+ color: rgb(36, 157, 241);
}
.ic-email:before {
content: "\e90a";
- color: #4f5d73;
+ color: rgb(255, 255, 255);
}
-body.dark .ic-email:before {
- color: #76a6f0;
+.ic-email:after {
+ content: "\e92b";
+ margin-left: -1em;
+ color: rgb(79, 93, 115);
}
-.ic-webhook:before {
+.ic-webhook:after {
content: "\e908";
color: #c73a63;
}
.ic-sms:before {
content: "\e904";
- color: #95c144;
+ color: rgb(255, 255, 255);
+}
+.ic-sms:after {
+ content: "\e92c";
+ margin-left: -1em;
+ color: rgb(149, 193, 68);
}
.ic-pushbullet:before {
content: "\e909";
- color: #67bf79;
+ color: rgb(255, 255, 255);
+}
+.ic-pushbullet:after {
+ content: "\e92d";
+ margin-left: -1em;
+ color: rgb(103, 191, 121);
}
.ic-discord:before {
content: "\e90c";
- color: #7289da;
+ color: rgb(255, 255, 255);
+}
+.ic-discord:after {
+ content: "\e92e";
+ margin-left: -1em;
+ color: rgb(114, 137, 218);
}
.ic-hipchat:before {
content: "\e902";
@@ -116,17 +183,27 @@ body.dark .ic-email:before {
}
.ic-slack:before {
content: "\e905";
- color: #56b68b;
+ color: rgb(255, 255, 255);
}
-.ic-telegram:before {
+.ic-slack:after {
+ content: "\e92f";
+ margin-left: -1em;
+ color: rgb(86, 182, 139);
+}
+.ic-telegram:after {
content: "\e906";
color: #2ca5e0;
}
.ic-trello:before {
content: "\e911";
- color: #0079bf;
+ color: rgb(255, 255, 255);
+}
+.ic-trello:after {
+ content: "\e931";
+ margin-left: -1em;
+ color: rgb(0, 121, 191);
}
-.ic-whatsapp:before {
+.ic-whatsapp:after {
content: "\e903";
color: #25d366;
}
@@ -136,7 +213,13 @@ body.dark .ic-email:before {
.ic-cancel:before {
content: "\e5c9";
}
-.ic-up:before, .ic-new:before, .ic-ok:before {
+.ic-up:before {
+ content: "\e86c";
+}
+.ic-new:before {
+ content: "\e86c";
+}
+.ic-ok:before {
content: "\e86c";
}
.ic-grace:before {
diff --git a/static/css/my_checks_desktop.css b/static/css/my_checks_desktop.css
index cf1686c0..a2ec4477 100644
--- a/static/css/my_checks_desktop.css
+++ b/static/css/my_checks_desktop.css
@@ -63,6 +63,10 @@
}
#checks-table .integrations span.off:before {
+ color: var(--channel-off-inside-color);
+}
+
+#checks-table .integrations span.off:after {
color: var(--channel-off-color);
}
diff --git a/static/css/variables.css b/static/css/variables.css
index 438c86ce..64d0ac2c 100644
--- a/static/css/variables.css
+++ b/static/css/variables.css
@@ -21,6 +21,7 @@
--btn-remove-color: #d43f3a;
--btn-remove-hover: #ffebea;
--channel-off-color: #ddd;
+ --channel-off-inside-color: #FFF;
--close-color: #000;
--debug-warning-bg: #eee;
--dropdown-bg: #fff;
@@ -93,7 +94,8 @@ body.dark {
--btn-remove-bg: #202024;
--btn-remove-color: #ff4c46;
--btn-remove-hover: #3f1a22;
- --channel-off-color: hsl(240, 2%, 40%);
+ --channel-off-color: hsl(240, 6.7%, 23.5%);
+ --channel-off-inside-color: hsl(240, 3.7%, 43.5%);
--close-color: #fff;
--debug-warning-bg: #60002d;
--dropdown-bg: hsl(240, 6%, 16%);
diff --git a/static/fonts/icomoon.svg b/static/fonts/icomoon.svg
index 19cd74f2..ef85ef3d 100644
--- a/static/fonts/icomoon.svg
+++ b/static/fonts/icomoon.svg
@@ -17,34 +17,50 @@
-
-
+
+
-
-
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
-
-
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf
index d0bfd010..93c60827 100644
Binary files a/static/fonts/icomoon.ttf and b/static/fonts/icomoon.ttf differ
diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff
index e538de6d..e79dd404 100644
Binary files a/static/fonts/icomoon.woff and b/static/fonts/icomoon.woff differ