From 46dcf09e28538b86d79ed5cd182b5662f8fdb73b Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 6 Jan 2022 19:22:39 +0000 Subject: [PATCH 1/2] ui: Fix dark borders on certain visualizations --- .../app/components/consul/discovery-chain/skin.scss | 10 ++++++++-- .../app/components/topology-metrics/card/index.scss | 5 ++++- .../app/components/topology-metrics/skin.scss | 5 ++++- 3 files changed, 16 insertions(+), 4 deletions(-) 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 index 30055d3aa766..03c367537ff0 100644 --- 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 index 7a08492cafc1..72d5c4ee1c4b 100644 --- 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 index 8b6fc0fda313..026db0f670bc 100644 --- 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 { From bddcd050215c262ef1df2288f8475b599b9acc90 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 7 Jan 2022 13:05:24 +0000 Subject: [PATCH 2/2] Changelog --- .changelog/11959.txt | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .changelog/11959.txt diff --git a/.changelog/11959.txt b/.changelog/11959.txt new file mode 100644 index 000000000000..592a83667d3b --- /dev/null +++ b/.changelog/11959.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: Fixes a visual issue with some border colors +```