ui: Fix dark borders on certain visualizations (#11959)

hashicorp · Jan 7, 2022 · 580bf36 · 580bf36
1 parent bd6b345
commit 580bf36
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/.changelog/11959.txt b/.changelog/11959.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixes a visual issue with some border colors
+```
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
@@ -37,7 +37,10 @@
 }
 %chain-group {
   border-radius: var(--decor-radius-100);
-  border: 1px solid rgb(var(--tone-gray-200));
+  border: 1px solid;
+  /* TODO: If this color is combined with the above */
+  /* border property then the compressor removes the color */
+  border-color: rgb(var(--tone-gray-200));
   background-color: rgb(var(--tone-gray-100));
 
   pointer-events: none;
@@ -102,7 +105,10 @@
   background-color: rgb(var(--tone-gray-000));
 
   border-radius: var(--decor-radius-full);
-  border: 2px solid rgb(var(--tone-gray-400));
+  border: 2px solid;
+  /* TODO: If this color is combined with the above */
+  /* border property then the compressor removes the color */
+  border-color: rgb(var(--tone-gray-400));
 }
 %discovery-chain circle {
   stroke-width: 2;

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
@@ -9,7 +9,10 @@
   overflow: hidden;
   background-color: rgb(var(--tone-gray-000));
   border-radius: var(--decor-radius-100);
-  border: 1px solid rgb(var(--tone-gray-200));
+  border: 1px solid;
+  /* TODO: If this color is combined with the above */
+  /* border property then the compressor removes the color */
+  border-color: rgb(var(--tone-gray-200));
   p {
     padding: 12px 12px 0 12px;
     font-size: var(--typo-size-500);

diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
@@ -6,8 +6,11 @@
 #downstream-container,
 #metrics-container,
 #upstream-container {
-  border: 1px solid rgb(var(--tone-gray-200));
   border-radius: var(--decor-radius-100);
+  border: 1px solid;
+  /* TODO: If this color is combined with the above */
+  /* border property then the compressor removes the color */
+  border-color: rgb(var(--tone-gray-200));
 }
 #downstream-container,
 #upstream-container {