Update topology for colored and animated icons

hashicorp · Mar 7, 2022 · 070b44d · 070b44d
1 parent e6187b6
commit 070b44d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@@ -56,23 +56,23 @@
     .partition dt::before,
     .nspace dt::before,
     .health dt::before {
-      background-color: rgb(var(--tone-gray-500));
+      --icon-color: rgb(var(--tone-gray-500));
     }
     .passing::before {
       @extend %with-check-circle-fill-mask, %as-pseudo;
-      background-color: rgb(var(--tone-green-500));
+      --icon-color: rgb(var(--tone-green-500));
     }
     .warning::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: rgb(var(--tone-orange-500));
+      --icon-color: rgb(var(--tone-orange-500));
     }
     .critical::before {
       @extend %with-cancel-square-fill-mask, %as-pseudo;
-      background-color: rgb(var(--tone-red-500));
+      --icon-color: rgb(var(--tone-red-500));
     }
     .empty::before {
       @extend %with-minus-square-fill-mask, %as-pseudo;
-      color: rgb(var(--tone-gray-500));
+      --icon-color: rgb(var(--tone-gray-500));
     }
   }
   .details {
@@ -96,7 +96,7 @@
       span::before {
         margin-right: 0px;
         @extend %with-union-mask, %as-pseudo;
-        background-color: rgb(var(--tone-gray-500));
+        --icon-color: rgb(var(--tone-gray-500));
       }
       dl:first-child {
         grid-area: partition;

diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
@@ -21,16 +21,16 @@
   &.deny > button::before,
   &.deny .tippy-arrow::after {
     @extend %with-cancel-square-fill-mask, %as-pseudo;
-    background-color: rgb(var(--tone-red-500));
+    --icon-color: rgb(var(--tone-red-500));
   }
   &.l7 > button::before,
   &.l7 .tippy-arrow::after {
     @extend %with-layers-mask, %as-pseudo;
-    background-color: rgb(var(--tone-gray-300));
+    --icon-color: rgb(var(--tone-gray-300));
   }
   &.not-defined > button::before,
   &.not-defined .tippy-arrow::after {
     @extend %with-alert-triangle-mask, %as-pseudo;
-    color: rgb(var(--tone-yellow-500));
+    --icon-color: rgb(var(--tone-yellow-500));
   }
 }
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
@@ -14,5 +14,7 @@
 }
 
 span.topology-metrics-status-loader::after {
-  @extend %with-loading-icon, %as-pseudo;
+  --icon-name: var(--icon-loading);
+  content: '';
+  margin-left: 0.5rem; /* 8px */
 }