commit 4b366b5aeb97b35ab3612bfe1dc7d93a1f8a6e79
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Tue Sep 24 08:32:42 2019 -0700
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Wed Oct 02 07:02:24 2019 -0700
tree 5e184f589c9ddad570f582d8b5818ac933c89e14
parent ea4968c0e8e6a71a7a23263bd05e04147339e6c5

Clean up icons

Clean up duplicate svg icons from assets directory.
Created a statusIcon component to dynamically render
status icons instead of using background-image in
scss files.

- Moved/removed on, off, critical, warning svg icons from
  assets directory
- Updated background-image status icons to use <icon>
  or <status-icon> directive

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic0f06d78b0861d6f60d40b2dcc0b80fd6dad2a88

app/common/styles/elements/alerts.scss

diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss
index fe1082e..694d2a6 100644
--- a/app/common/styles/elements/alerts.scss
+++ b/app/common/styles/elements/alerts.scss
@@ -31,6 +31,7 @@
   margin-bottom: 24px;
   border-style: solid;
   border-width: 1px;
+  position: relative;
 }
 
 .notification-banner__text {
@@ -47,15 +48,16 @@
 .notification-banner--warning {
   background-color: $accent-03--03;
   border-color: $accent-03--02;
+  .icon {
+    position: absolute;
+    left: 10px;
+    top: 8px;
+    bottom: 8px;
+    width: 18px;
+    height: 30px;
+    margin: auto;
+  }
   .notification-banner__text {
-    &::before {
-      content: '';
-      display: inline-block;
-      width: 18px;
-      height: 18px;
-      vertical-align: bottom;
-      margin-right: 0.5em;
-      background-image: url(../assets/images/icon-warning.svg);
-    }
+    padding-left: 24px;
   }
 }