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 {
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;

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

@ -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);

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

@ -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 {