mgr/dashboard: Change icon color in notifications

- Use CSS filters to convert the existing icons to white.
- Add new Prometheus SVG image, the previous PNG image has used the color white instead or transparent to fill some areas.

Signed-off-by: Volker Theile <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/prometheus_logo.png b/src/pybind/mgr/dashboard/frontend/src/assets/prometheus_logo.png
deleted file mode 100644 (file)
index 2ef6172..0000000
Binary files a/src/pybind/mgr/dashboard/frontend/src/assets/prometheus_logo.png and /dev/null differ

diff --git a/src/pybind/mgr/dashboard/frontend/src/assets/prometheus_logo.svg b/src/pybind/mgr/dashboard/frontend/src/assets/prometheus_logo.svg
new file mode 100644 (file)
index 0000000..5c51f66
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/assets/prometheus_logo.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="115.333px"
+   height="114px"
+   viewBox="0 0 115.333 114"
+   enable-background="new 0 0 115.333 114"
+   xml:space="preserve"
+   sodipodi:docname="prometheus_logo_orange.svg"
+   inkscape:version="0.92.1 r15371"><metadata
+     id="metadata4495"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs4493" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1484"
+     inkscape:window-height="886"
+     id="namedview4491"
+     showgrid="false"
+     inkscape:zoom="5.2784901"
+     inkscape:cx="60.603667"
+     inkscape:cy="60.329656"
+     inkscape:window-x="54"
+     inkscape:window-y="7"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1" /><g
+     id="Layer_2" /><path
+     style="fill:#e6522c;fill-opacity:1"
+     inkscape:connector-curvature="0"
+     id="path4486"
+     d="M 56.667,0.667 C 25.372,0.667 0,26.036 0,57.332 c 0,31.295 25.372,56.666 56.667,56.666 31.295,0 56.666,-25.371 56.666,-56.666 0,-31.296 -25.372,-56.665 -56.666,-56.665 z m 0,106.055 c -8.904,0 -16.123,-5.948 -16.123,-13.283 H 72.79 c 0,7.334 -7.219,13.283 -16.123,13.283 z M 83.297,89.04 H 30.034 V 79.382 H 83.298 V 89.04 Z M 83.106,74.411 H 30.186 C 30.01,74.208 29.83,74.008 29.66,73.802 24.208,67.182 22.924,63.726 21.677,60.204 c -0.021,-0.116 6.611,1.355 11.314,2.413 0,0 2.42,0.56 5.958,1.205 -3.397,-3.982 -5.414,-9.044 -5.414,-14.218 0,-11.359 8.712,-21.285 5.569,-29.308 3.059,0.249 6.331,6.456 6.552,16.161 3.252,-4.494 4.613,-12.701 4.613,-17.733 0,-5.21 3.433,-11.262 6.867,-11.469 -3.061,5.045 0.793,9.37 4.219,20.099 1.285,4.03 1.121,10.812 2.113,15.113 C 63.797,33.534 65.333,20.5 71,16 c -2.5,5.667 0.37,12.758 2.333,16.167 3.167,5.5 5.087,9.667 5.087,17.548 0,5.284 -1.951,10.259 -5.242,14.148 3.742,-0.702 6.326,-1.335 6.326,-1.335 l 12.152,-2.371 c 10e-4,-10e-4 -1.765,7.261 -8.55,14.254 z" /></svg>
\ No newline at end of file

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index dfa92f0775b4ca28a2a67c0dd6fb719f08c07976..f3c27494fb8d53248cc5189128e511ac3110f243 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -345,7 +345,7 @@ uib-accordion .panel-title,
   background: url('assets/Ceph_Logo_Stacked_RGB_120411_fa_228x228.png');
 }
 .prometheus-icon {
-  background: url('assets/prometheus_logo.png');
+  background: url('assets/prometheus_logo.svg');
 }
 .custom-icon {
   padding: 10px;
@@ -354,6 +354,15 @@ uib-accordion .panel-title,
   background-size: contain;
   background-repeat: no-repeat;
 }
+/* Notification icons */
+.toast-message .custom-icon {
+  /* Display icons in white, regardless of their origin color. */
+  filter: brightness(0) invert(1);
+  -webkit-filter: brightness(0) invert(1);
+  -moz-filter: brightness(0) invert(1);
+  -o-filter: brightness(0) invert(1);
+  -ms-filter: brightness(0) invert(1);
+}
 /* Block UI */
 .block-ui-wrapper {
   background: $color-transparent-black !important;