From 96f9df7e5053e05ee10942fab894e95746780785 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 25 Dec 2019 19:18:18 +0000
Subject: [PATCH] fix(ui): tweak dark theme css

---
 .../__snapshots__/index.test.js.snap          |  2 +-
 .../ManagedSilence/SilenceComment.js          |  6 ++++--
 .../__snapshots__/SilenceComment.test.js.snap |  8 ++++----
 .../__snapshots__/index.test.js.snap          |  4 ++--
 .../Components/NavBar/FilterInput/History.js  |  2 +-
 .../OverviewModal/OverviewModalContent.js     |  2 +-
 .../OverviewModalContent.test.js.snap         |  6 +++---
 .../Components/SilenceModal/Browser/index.js  |  2 +-
 .../SilenceModal/Browser/index.test.js        |  2 +-
 .../__snapshots__/index.test.js.snap          | 18 ++++++++---------
 .../SilenceModal/DateTimeSelect/index.js      |  2 +-
 ui/src/Components/SilenceModal/SilenceForm.js |  2 +-
 ui/src/Components/Theme/ReactSelect.js        |  2 +-
 ui/src/Styles/Components/BaseLabel.scss       |  2 +-
 ui/src/Styles/Components/InputRange.scss      |  4 +---
 ui/src/Styles/Components/ManagedSilence.scss  |  1 +
 ui/src/Styles/DarkTheme.scss                  | 20 +++++++++++++------
 ui/src/Styles/LightTheme.scss                 |  4 ++++
 18 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index 57d660381..634dafe9b 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -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\\">
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js
index 1c09b57e9..78f8202f6 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -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" : ""
             }`}
           >
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
index c311ce334..e6ad918af 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
@@ -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\\">
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index 6b0ae6795..9aadcda12 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -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\\">
diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index daceee0c6..4c91d5151 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -125,7 +125,7 @@ const HistoryMenuContent = ({
           afterClick={afterClick}
         />
         <ActionButton
-          color="dark"
+          color="secondary"
           icon={faTrash}
           title="Clear history"
           action={onClear}
diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.js b/ui/src/Components/OverviewModal/OverviewModalContent.js
index 8da5c548b..bc9b189dc 100644
--- a/ui/src/Components/OverviewModal/OverviewModalContent.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.js
@@ -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>
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
index 246a31b2f..842cf92bb 100644
--- a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
+++ b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
@@ -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>
diff --git a/ui/src/Components/SilenceModal/Browser/index.js b/ui/src/Components/SilenceModal/Browser/index.js
index 2a379f70c..eb0e1f333 100644
--- a/ui/src/Components/SilenceModal/Browser/index.js
+++ b/ui/src/Components/SilenceModal/Browser/index.js
@@ -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();
diff --git a/ui/src/Components/SilenceModal/Browser/index.test.js b/ui/src/Components/SilenceModal/Browser/index.test.js
index 534106ef3..2c0642fdc 100644
--- a/ui/src/Components/SilenceModal/Browser/index.test.js
+++ b/ui/src/Components/SilenceModal/Browser/index.test.js
@@ -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");
 
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
index 2cd715480..6670002c8 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
@@ -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>
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
index 2049f0671..a09a381c9 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -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}
diff --git a/ui/src/Components/SilenceModal/SilenceForm.js b/ui/src/Components/SilenceModal/SilenceForm.js
index 0df9aec18..511f9a8be 100644
--- a/ui/src/Components/SilenceModal/SilenceForm.js
+++ b/ui/src/Components/SilenceModal/SilenceForm.js
@@ -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} />
diff --git a/ui/src/Components/Theme/ReactSelect.js b/ui/src/Components/Theme/ReactSelect.js
index 8345331cc..34ed98fc3 100644
--- a/ui/src/Components/Theme/ReactSelect.js
+++ b/ui/src/Components/Theme/ReactSelect.js
@@ -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"
diff --git a/ui/src/Styles/Components/BaseLabel.scss b/ui/src/Styles/Components/BaseLabel.scss
index 22428dd62..6477e16ad 100644
--- a/ui/src/Styles/Components/BaseLabel.scss
+++ b/ui/src/Styles/Components/BaseLabel.scss
@@ -57,7 +57,7 @@
   }
   &.badge-dark,
   &.btn-dark {
-    border: 1px solid lighten($dark, 2%);
+    border: 1px solid darken($dark, 2%);
   }
 }
 
diff --git a/ui/src/Styles/Components/InputRange.scss b/ui/src/Styles/Components/InputRange.scss
index a1bf3d904..107b1df51 100644
--- a/ui/src/Styles/Components/InputRange.scss
+++ b/ui/src/Styles/Components/InputRange.scss
@@ -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";
diff --git a/ui/src/Styles/Components/ManagedSilence.scss b/ui/src/Styles/Components/ManagedSilence.scss
index 5a464431c..d3119a24a 100644
--- a/ui/src/Styles/Components/ManagedSilence.scss
+++ b/ui/src/Styles/Components/ManagedSilence.scss
@@ -17,6 +17,7 @@
 
 .components-managed-silence-comment {
   line-height: 1.4rem;
+  color: $silence-comment-color;
 }
 
 .components-managed-silence-cite {
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index bb1d20265..562b9aa1b 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -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";
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index 8af7c43b7..c276a293e 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -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";