Converted all status icons to be managed by scss colors only and deleted any classes or styles within the svg's, plus gave status badges a hover style only if clickable

1 files changed, 46 insertions, 7 deletions

diff --git a/app/assets/stylesheets/pages/icons.scss b/app/assets/stylesheets/pages/icons.scss
index 407c8db211d..3293dc2029d 100644
--- a/app/assets/stylesheets/pages/icons.scss
+++ b/app/assets/stylesheets/pages/icons.scss
@@ -1,12 +1,51 @@
-// CI icon colors
+.ci-status-icon-success {
+  color: $gl-success;
 
-.ci-status-icon {
-  &-created {
-    fill: $gray-darkest;
+  svg {
+    fill: $gl-success;
+  }
+}
+
+.ci-status-icon-failed {
+  color: $gl-danger;
+
+  svg {
+    fill: $gl-danger;
+  }
+}
+
+.ci-status-icon-pending,
+.ci-status-icon-success_with_warning {
+  color: $gl-warning;
+
+  svg {
+    fill: $gl-warning;
+  }
+}
+
+.ci-status-icon-running {
+  color: $blue-normal;
+
+  svg {
+    fill: $blue-normal;
+  }
+}
+
+.ci-status-icon-canceled,
+.ci-status-icon-disabled,
+.ci-status-icon-not-found {
+  color: $gl-gray;
+
+  svg {
+    fill: $gl-gray;
   }
+}
 
-  &-skipped,
-  &-canceled {
-    fill: $gl-text-color;
+.ci-status-icon-created,
+.ci-status-icon-skipped {
+  color: $gray-darkest;
+
+  svg {
+    fill: $gray-darkest;
   }
 }