From a83f50accbd9eeabeebf419d74e4094f9fe1f594 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 25 Dec 2019 21:06:55 +0000
Subject: [PATCH] fix(ui): brighter silence background

---
 .../AlertGroup/GroupFooter/__snapshots__/index.test.js.snap | 2 +-
 .../ManagedSilence/__snapshots__/index.test.js.snap         | 4 ++--
 ui/src/Components/ManagedSilence/index.js                   | 2 +-
 ui/src/Styles/Components/AlertGroup.scss                    | 4 ----
 ui/src/Styles/Components/ManagedSilence.scss                | 6 +++---
 ui/src/Styles/DarkTheme.scss                                | 2 +-
 6 files changed, 8 insertions(+), 12 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 634dafe9b..278be5eda 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
@@ -288,7 +288,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
   </a>
   <div class=\\"components-grid-alertgrid-alertgroup-shared-silence rounded-0 border-0\\">
     <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
-      <div class=\\"card-header border-bottom-0 px-3\\">
+      <div class=\\"card-header rounded-0 border-bottom-0 px-3\\">
         <div class=\\"d-flex flex-row\\">
           <div class=\\"flex-shrink-0 flex-grow-0\\">
             <svg aria-hidden=\\"true\\"
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index 9aadcda12..96901dbff 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
 "
 <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
-  <div class=\\"card-header border-bottom-0 px-3\\">
+  <div class=\\"card-header rounded-0 border-bottom-0 px-3\\">
     <div class=\\"d-flex flex-row\\">
       <div class=\\"flex-shrink-0 flex-grow-0\\">
         <svg aria-hidden=\\"true\\"
@@ -86,7 +86,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
 exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
 "
 <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
-  <div class=\\"card-header border-bottom-0 px-3\\">
+  <div class=\\"card-header rounded-0 border-bottom-0 px-3\\">
     <div class=\\"d-flex flex-row\\">
       <div class=\\"flex-shrink-0 flex-grow-0\\">
         <svg aria-hidden=\\"true\\"
diff --git a/ui/src/Components/ManagedSilence/index.js b/ui/src/Components/ManagedSilence/index.js
index 1f416df2d..a5c65f346 100644
--- a/ui/src/Components/ManagedSilence/index.js
+++ b/ui/src/Components/ManagedSilence/index.js
@@ -79,7 +79,7 @@ const ManagedSilence = observer(
       return (
         <MountFade in={true}>
           <div className="card my-1 components-managed-silence">
-            <div className="card-header border-bottom-0 px-3">
+            <div className="card-header rounded-0 border-bottom-0 px-3">
               <SilenceComment
                 alertStore={alertStore}
                 cluster={cluster}
diff --git a/ui/src/Styles/Components/AlertGroup.scss b/ui/src/Styles/Components/AlertGroup.scss
index e8136f84a..45ad075a9 100644
--- a/ui/src/Styles/Components/AlertGroup.scss
+++ b/ui/src/Styles/Components/AlertGroup.scss
@@ -7,10 +7,6 @@
   border-style: solid;
 }
 
-.components-grid-alertgrid-alertgroup-shared-silence > .card {
-  background-color: inherit;
-}
-
 .card-footer.components-grid-alertgrid-alertgroup-footer {
   background-color: $alertgroup-footer-bg;
 }
diff --git a/ui/src/Styles/Components/ManagedSilence.scss b/ui/src/Styles/Components/ManagedSilence.scss
index d3119a24a..e03097a43 100644
--- a/ui/src/Styles/Components/ManagedSilence.scss
+++ b/ui/src/Styles/Components/ManagedSilence.scss
@@ -1,7 +1,7 @@
 .components-managed-silence {
-  .card,
-  .card-header,
-  .card-body {
+  &.card,
+  & > .card-header,
+  & > .card-body {
     background-color: $silence-bg;
   }
 
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index 562b9aa1b..0f0b67961 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -71,7 +71,7 @@ $dropdown-bg: darken($gray-800, 2%);
 $alert-bg: $list-group-bg;
 $alertgroup-body-bg: lighten($gray-700, 5%);
 $alertgroup-footer-bg: lighten($gray-700, 2%);
-$silence-bg: $gray-900;
+$silence-bg: lighten($gray-900, 2%);
 $silence-border: $black;
 $silence-comment-color: $gray-400;
 $accordion-active-bg: $gray-700;