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

1 files changed, 10 insertions, 33 deletions

diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index 9a9646b..0d91f1d 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -50,39 +50,6 @@
     color: $text-02;
   }
 }
-//Status icons
-@mixin status-icon {
-  background-repeat: no-repeat;
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
-  margin-right: .4em;
-}
-
-.icon__warning {
-  @include status-icon;
-  background-image: url(../assets/images/icon-warning.svg);
-}
-
-.modal .icon__warning {
-  width: 30px;
-  height: 30px;
-}
-
-.icon__critical {
-  @include status-icon;
-  background-image: url(../assets/images/icon-critical.svg);
-}
-
-.icon__good {
-  @include status-icon;
-  background-image: url(../assets/images/icon-on.svg);
-}
-
-.icon__off {
-  @include status-icon;
-  background-image: url(../assets/images/icon-off.svg);
-}
 
 .icon__info{
   margin-top: -4px;
@@ -108,3 +75,13 @@
   @extend .icon__up-arrow;
   transform: rotate(180deg);
 }
+
+.icon__info-tooltip {
+  fill: $primary-accent;
+}
+
+.status-icon {
+  width: 1rem;
+  vertical-align: text-bottom;
+  margin-right: 0.25em;
+}