luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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

This commit is contained in:
John Cowen 2022-01-07 16:15:22 +00:00 committed by GitHub
parent 048d9b69ba
commit a08f2927fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/11959.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:bug
ui: Fixes a visual issue with some border colors
```

10
ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
View File

@ -37,7 +37,10 @@
} }
%chain-group { %chain-group {
border-radius: var(--decor-radius-100); 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)); background-color: rgb(var(--tone-gray-100));
pointer-events: none; pointer-events: none;
@ -102,7 +105,10 @@
background-color: rgb(var(--tone-gray-000)); background-color: rgb(var(--tone-gray-000));
border-radius: var(--decor-radius-full); 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 { %discovery-chain circle {
stroke-width: 2; stroke-width: 2;

5
ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
View File

@ -9,7 +9,10 @@
overflow: hidden; overflow: hidden;
background-color: rgb(var(--tone-gray-000)); background-color: rgb(var(--tone-gray-000));
border-radius: var(--decor-radius-100); 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 { p {
padding: 12px 12px 0 12px; padding: 12px 12px 0 12px;
font-size: var(--typo-size-500); font-size: var(--typo-size-500);

5
ui/packages/consul-ui/app/components/topology-metrics/skin.scss
View File

@ -6,8 +6,11 @@
#downstream-container, #downstream-container,
#metrics-container, #metrics-container,
#upstream-container { #upstream-container {
border: 1px solid rgb(var(--tone-gray-200));
border-radius: var(--decor-radius-100); 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, #downstream-container,
#upstream-container { #upstream-container {