github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): change default label color to gray

Browse Source 
Orange color isn't very readable and stands out on the page, use
more neutral and more readable gray
This commit is contained in:
Łukasz Mierzwa
2019-12-16 21:42:17 +00:00
parent b78b799a27
commit e7d6edc163
16 changed files with 71 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/Common/Colors.js
View File

@@ -1,7 +1,7 @@
// fallback class for labels
const DefaultLabelClassMap = Object.freeze({
badge: "badge-warning components-label-dark",
btn: "btn-warning components-label-dark"
badge: "badge-default components-label-dark",
btn: "btn-default components-label-dark"
});
// same but for borders

8
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
View File

@@ -111,7 +111,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
aria-describedby=\\"tippy-tooltip-8\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
job:
</span>
@@ -126,7 +126,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
aria-describedby=\\"tippy-tooltip-9\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
cluster:
</span>
@@ -248,7 +248,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
aria-describedby=\\"tippy-tooltip-3\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
job:
</span>
@@ -263,7 +263,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
aria-describedby=\\"tippy-tooltip-4\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
cluster:
</span>

2
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.js
View File

@@ -49,7 +49,7 @@ const Alert = observer(
"my-1",
"rounded-0",
"border-left-1 border-right-0 border-top-0 border-bottom-0",
BorderClassMap[alert.state] || "border-warning"
BorderClassMap[alert.state] || "border-default"
];
const silences = {};

4
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.js
View File

@@ -238,7 +238,7 @@ describe("<Alert />", () => {
).toBe(true);
});
it("uses 'border-warning' with unknown @state", () => {
it("uses 'border-default' with unknown @state", () => {
jest.spyOn(console, "error").mockImplementation(() => {});
const alert = MockedAlert();
@@ -248,7 +248,7 @@ describe("<Alert />", () => {
expect(
tree
.find(".components-grid-alertgrid-alertgroup-alert")
.hasClass("border-warning")
.hasClass("border-default")
).toBe(true);
});

16
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View File

@@ -66,7 +66,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
aria-describedby=\\"tippy-tooltip-3\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
label1:
</span>
@@ -81,7 +81,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
aria-describedby=\\"tippy-tooltip-4\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
label2:
</span>
@@ -96,7 +96,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
aria-describedby=\\"tippy-tooltip-5\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@alertmanager:
</span>
@@ -111,7 +111,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
aria-describedby=\\"tippy-tooltip-6\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@receiver:
</span>
@@ -211,7 +211,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
aria-describedby=\\"tippy-tooltip-27\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
label1:
</span>
@@ -226,7 +226,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
aria-describedby=\\"tippy-tooltip-28\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
label2:
</span>
@@ -241,7 +241,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
aria-describedby=\\"tippy-tooltip-29\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@alertmanager:
</span>
@@ -256,7 +256,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
aria-describedby=\\"tippy-tooltip-30\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@receiver:
</span>

8
ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
View File

@@ -9,7 +9,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
<div>
<ul class=\\"list-group list-group-flush mb-3\\">
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
foo:
</span>
@@ -19,7 +19,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
job:
</span>
@@ -29,7 +29,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
instance:
</span>
@@ -39,7 +39,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
cluster:
</span>

12
ui/src/Components/Labels/FilterInputLabel/index.test.js
View File

@@ -64,13 +64,13 @@ describe("<FilterInputLabel /> className", () => {
}
});
it("applied filter with '=' matcher and no color should use 'btn-warning' class", () => {
ValidateClass("=", true, "btn-warning");
it("applied filter with '=' matcher and no color should use 'btn-default' class", () => {
ValidateClass("=", true, "btn-default");
});
it("applied filter with any matcher other than '=' and no color should use 'btn-warning' class", () => {
it("applied filter with any matcher other than '=' and no color should use 'btn-default' class", () => {
for (const matcher of NonEqualMatchers) {
ValidateClass(matcher, true, "btn-warning");
ValidateClass(matcher, true, "btn-default");
}
});
@@ -79,10 +79,10 @@ describe("<FilterInputLabel /> className", () => {
ValidateClass("=", true, "btn-info");
});
it("applied filter included in staticColorLabels with any matcher other than '=' should use 'btn-warning' class", () => {
it("applied filter included in staticColorLabels with any matcher other than '=' should use 'btn-default' class", () => {
alertStore.settings.values.staticColorLabels = ["foo"];
for (const matcher of NonEqualMatchers) {
ValidateClass(matcher, true, "btn-warning");
ValidateClass(matcher, true, "btn-default");
}
});
});

2
ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap
View File

@@ -8,7 +8,7 @@ exports[`<FilteringLabel /> matches snapshot 1`] = `
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
foo:
</span>

6
ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
View File

@@ -3,7 +3,7 @@
exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
"
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
25
</span>
@@ -48,7 +48,7 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
"
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
25
</span>
@@ -78,7 +78,7 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
"
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
25
</span>

2
ui/src/Components/Labels/StaticLabel/__snapshots__/index.test.js.snap
View File

@@ -2,7 +2,7 @@
exports[`<StaticLabel /> matches snapshot 1`] = `
"
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
foo:
</span>

24
ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
View File

@@ -35,7 +35,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
class=\\"mw-100 p-1\\"
>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
8
</span>
@@ -60,7 +60,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
4
</span>
@@ -93,7 +93,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
4
</span>
@@ -142,7 +142,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
class=\\"mw-100 p-1\\"
>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
@@ -167,7 +167,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
@@ -200,7 +200,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
@@ -233,7 +233,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
@@ -266,7 +266,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
@@ -299,7 +299,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
@@ -332,7 +332,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
@@ -365,7 +365,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
@@ -398,7 +398,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</div>
<div class=\\"d-inline-block mw-100\\">
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>

12
ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
View File

@@ -18,7 +18,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
foo
</span>
</span>
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
job:
</span>
@@ -26,7 +26,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
foo
</span>
</span>
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
instance:
</span>
@@ -44,7 +44,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
bar
</span>
</span>
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
job:
</span>
@@ -52,7 +52,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
bar
</span>
</span>
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
instance:
</span>
@@ -70,7 +70,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
bar
</span>
</span>
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
job:
</span>
@@ -78,7 +78,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
bar
</span>
</span>
<span class=\\"components-label badge badge-warning components-label-dark \\">
<span class=\\"components-label badge badge-default components-label-dark \\">
<span class=\\"components-label-name\\">
instance:
</span>

13
ui/src/Styles/Components/BaseLabel.scss
View File

@@ -19,7 +19,20 @@
margin-bottom: 2px;
}
.btn-default,
.badge-default {
background-color: $color-default;
}
.border-default {
border: 1px solid $color-default;
}
.components-label:not(.badge-pill) {
&.badge-default,
&.btn-default {
border: 1px solid darken($color-default, 2%);
}
&.badge-primary,
&.btn-primary {
border: 1px solid lighten($primary, 2%);

4
ui/src/Styles/Components/FilterInputLabel.scss
View File

@@ -43,6 +43,10 @@ button.btn.components-filteredinputlabel {
}
button.components-label.btn {
&.btn-default:hover {
background-color: $color-default;
}
&.btn-primary:hover {
background-color: $primary;
}

2
ui/src/Styles/DarkTheme.scss
View File

@@ -85,6 +85,8 @@ $datepicker__border-radius: 0.25rem;
$datepicker__day-name-color: $white;
$datepicker__day-hover-color: $white;
$color-default: #7080a7;
@import "Styles/Components/Accordion";
@import "Styles/Components/Alert";
@import "Styles/Components/AlertGroup";

2
ui/src/Styles/LightTheme.scss
View File

@@ -76,6 +76,8 @@ $datepicker__border-radius: 0.25rem;
$datepicker__day-name-color: $black;
$datepicker__day-hover-color: $black;
$color-default: #7080a7;
@import "Styles/Components/Accordion";
@import "Styles/Components/Alert";
@import "Styles/Components/AlertGroup";