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

Merge pull request #1295 from prymitive/tweak-dark-theme

Browse Source 
fix(ui): tweak dark theme css
This commit is contained in:
Łukasz Mierzwa
2019-12-25 20:22:38 +00:00
committed by GitHub
parent 5cfe01642e 96f9df7e50
commit ef7df246e1
18 changed files with 51 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -307,7 +307,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
<div class=\\"font-italic components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite mt-1\\">

6
ui/src/Components/ManagedSilence/SilenceComment.js
View File

@@ -28,7 +28,9 @@ const SilenceComment = ({
target="_blank"
rel="noopener noreferrer"
className={
collapsed ? "text-dark mw-100 text-truncate d-block" : "text-dark"
collapsed
? "components-managed-silence-comment mw-100 text-truncate d-block"
: "components-managed-silence-comment"
}
>
<FontAwesomeIcon className="mr-2" icon={faExternalLinkAlt} />
@@ -53,7 +55,7 @@ const SilenceComment = ({
</div>
<div className="mx-2 flex-shrink-1 flex-grow-1 mw-1p">
<div
className={`font-italic text-dark components-managed-silence-comment ${
className={`font-italic components-managed-silence-comment ${
collapsed ? "text-truncate overflow-hidden" : ""
}`}
>

8
ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
View File

@@ -20,7 +20,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
<div class=\\"font-italic components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite mt-1\\">
@@ -89,7 +89,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
<div class=\\"font-italic components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite mt-1\\">
@@ -164,7 +164,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark components-managed-silence-comment \\">
<div class=\\"font-italic components-managed-silence-comment \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite mt-1\\">
@@ -227,7 +227,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark components-managed-silence-comment \\">
<div class=\\"font-italic components-managed-silence-comment \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite mt-1\\">

4
ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
View File

@@ -22,7 +22,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
<div class=\\"font-italic components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite mt-1\\">
@@ -105,7 +105,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark components-managed-silence-comment \\">
<div class=\\"font-italic components-managed-silence-comment \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite mt-1\\">

2
ui/src/Components/NavBar/FilterInput/History.js
View File

@@ -125,7 +125,7 @@ const HistoryMenuContent = ({
afterClick={afterClick}
/>
<ActionButton
color="dark"
color="secondary"
icon={faTrash}
title="Clear history"
action={onClear}

2
ui/src/Components/OverviewModal/OverviewModalContent.js
View File

@@ -16,7 +16,7 @@ const TableRows = observer(({ alertStore, nameStats }) =>
nameStats.map(nameStats => (
<tr key={nameStats.name}>
<td width="25%" className="text-nowrap mw-100 p-1">
<span className="badge badge-secondary components-label mx-0 mt-0 mb-auto pl-0 text-left">
<span className="badge badge-light components-label mx-0 mt-0 mb-auto pl-0 text-left">
<span className="bg-primary text-white mr-1 px-1 components-labelWithPercent-percent">
{nameStats.hits}
</span>

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

@@ -24,7 +24,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
<td width=\\"25%\\"
class=\\"text-nowrap mw-100 p-1\\"
>
<span class=\\"badge badge-secondary components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
<span class=\\"badge badge-light components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
<span class=\\"bg-primary text-white mr-1 px-1 components-labelWithPercent-percent\\">
16
</span>
@@ -131,7 +131,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
<td width=\\"25%\\"
class=\\"text-nowrap mw-100 p-1\\"
>
<span class=\\"badge badge-secondary components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
<span class=\\"badge badge-light components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
<span class=\\"bg-primary text-white mr-1 px-1 components-labelWithPercent-percent\\">
20
</span>
@@ -439,7 +439,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
<td width=\\"25%\\"
class=\\"text-nowrap mw-100 p-1\\"
>
<span class=\\"badge badge-secondary components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
<span class=\\"badge badge-light components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
<span class=\\"bg-primary text-white mr-1 px-1 components-labelWithPercent-percent\\">
5
</span>

2
ui/src/Components/SilenceModal/Browser/index.js
View File

@@ -208,7 +208,7 @@ const Browser = observer(
/>
<button
type="button"
className="btn btn-primary flex-grow-0 flex-shrink-0"
className="btn btn-secondary flex-grow-0 flex-shrink-0"
onClick={() => {
this.dataSource.toggleSortReverse();
this.onDebouncedFetch();

2
ui/src/Components/SilenceModal/Browser/index.test.js
View File

@@ -111,7 +111,7 @@ describe("<Browser />", () => {
);
const tree = MountedBrowser();
const sortOrder = tree.find("button.btn-primary").at(0);
const sortOrder = tree.find("button.btn-secondary").at(0);
expect(sortOrder.text()).toBe("Sort order");
sortOrder.simulate("click");

18
ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
View File

@@ -8,7 +8,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Starts
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
now
</span>
</span>
@@ -18,7 +18,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Ends
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
in 366d
</span>
</span>
@@ -28,7 +28,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Duration
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
366d
</span>
</span>
@@ -235,7 +235,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Starts
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
now
</span>
</span>
@@ -245,7 +245,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Ends
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
in 366d
</span>
</span>
@@ -255,7 +255,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Duration
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
366d
</span>
</span>
@@ -688,7 +688,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Starts
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
now
</span>
</span>
@@ -698,7 +698,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Ends
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
in 366d
</span>
</span>
@@ -708,7 +708,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
<span class=\\"mr-1\\">
Duration
</span>
<span class=\\"badge badge-primary\\">
<span class=\\"badge badge-light\\">
366d
</span>
</span>

2
ui/src/Components/SilenceModal/DateTimeSelect/index.js
View File

@@ -18,7 +18,7 @@ const OffsetBadge = ({ startDate, endDate, prefixLabel }) => {
const minutes = endDate.diff(startDate, "minutes") % 60;
return (
<span className="badge badge-primary">
<span className="badge badge-light">
{days <= 0 && hours <= 0 && minutes <= 0 ? "now" : prefixLabel}
{days > 0 ? `${days}d ` : null}
{hours > 0 ? `${hours}h ` : null}

2
ui/src/Components/SilenceModal/SilenceForm.js
View File

@@ -170,7 +170,7 @@ const SilenceForm = observer(
<TooltipWrapper title="Add a matcher">
<button
type="button"
className="btn btn-primary mb-3"
className="btn btn-secondary mb-3"
onClick={this.addMore}
>
<FontAwesomeIcon icon={faPlus} />

2
ui/src/Components/Theme/ReactSelect.js
View File

@@ -18,7 +18,7 @@ const ReactSelectColors = {
borderColor: "#444",
focusedBoxShadow: "rgba(69, 90, 100, 0.25)",
focusedBorderColor: "#819ba8",
menuBackground: "#222",
menuBackground: "#2b2b2b",
optionHoverBackground: "#455a64",
valueContainerBackground: "#444",
disabledValueContainerBackground: "#fff"

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

@@ -57,7 +57,7 @@
}
&.badge-dark,
&.btn-dark {
border: 1px solid lighten($dark, 2%);
border: 1px solid darken($dark, 2%);
}
}

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

@@ -1,7 +1,5 @@
$input-range-font-family: $font-family-sans-serif;
$input-range-primary-color: $primary;
$input-range-neutral-color: $dark;
$input-range-neutral-light-color: $secondary;
$input-range-disabled-color: $secondary;
$input-range-disabled-color: $text-muted;
@import "~react-input-range/src/scss/input-range/input-range";

1
ui/src/Styles/Components/ManagedSilence.scss
View File

@@ -17,6 +17,7 @@
.components-managed-silence-comment {
line-height: 1.4rem;
color: $silence-comment-color;
}
.components-managed-silence-cite {

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

@@ -5,8 +5,6 @@ $blue: #455a64;
// default is ~0.97rem
$font-size-base: 1rem;
$dark: #87949e;
$enable-shadows: true;
$btn-box-shadow: 0;
@@ -16,15 +14,19 @@ $btn-active-box-shadow: 0;
@import "Styles/Fonts";
@import "~bootswatch/dist/darkly/variables";
// revert to bootswatch 4.3.1 colors
$light: $gray-800;
$dark: darken($dark, 4%);
// revert to bootswatch 4.3.1 colors but adjust a bit so it doesn't end
// up with same color as modal content background
$light: lighten($gray-800, 5%);
// make links light gray by default instead of green
$link-color: $gray-400;
$custom-control-indicator-bg: $gray-100;
$custom-control-indicator-checked: $blue;
$custom-control-indicator-disabled-bg: $gray-700;
$custom-control-indicator-checked-disabled-bg: $blue;
$custom-control-indicator-checked-disabled-bg: $gray-700;
$navbar-dark-brand-color: $navbar-dark-color;
$navbar-dark-brand-hover-color: $white;
@@ -52,6 +54,8 @@ $card-cap-bg: inherit;
$progress-bg: $black;
$dropdown-bg: darken($gray-800, 2%);
@import "Styles/RebootlessBootstrap";
@import "~bootswatch/dist/darkly/bootswatch";
@@ -66,9 +70,10 @@ $progress-bg: $black;
$alert-bg: $list-group-bg;
$alertgroup-body-bg: lighten($gray-700, 5%);
$alertgroup-footer-bg: lighten($gray-800, 5%);
$alertgroup-footer-bg: lighten($gray-700, 2%);
$silence-bg: $gray-900;
$silence-border: $black;
$silence-comment-color: $gray-400;
$accordion-active-bg: $gray-700;
$filter-input-hoover-bg: $gray-700;
$filter-input-hoover-color: $white;
@@ -89,6 +94,9 @@ $datepicker__border-radius: 0.25rem;
$datepicker__day-name-color: $white;
$datepicker__day-hover-color: $white;
$input-range-neutral-color: $gray-300;
$input-range-neutral-light-color: $secondary;
$color-default: #708090;
@import "Styles/Components/Accordion";

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

@@ -56,6 +56,7 @@ $alertgroup-body-bg: $white;
$alertgroup-footer-bg: $gray-100;
$silence-bg: $gray-100;
$silence-border: $gray-700;
$silence-comment-color: $gray-800;
$accordion-active-bg: $gray-200;
$filter-input-hoover-bg: $white;
$filter-input-hoover-color: $black;
@@ -76,6 +77,9 @@ $datepicker__border-radius: 0.25rem;
$datepicker__day-name-color: $black;
$datepicker__day-hover-color: $black;
$input-range-neutral-color: $dark;
$input-range-neutral-light-color: $gray-400;
$color-default: #708090;
@import "Styles/Components/Accordion";