From 9489daa46899a268725300eb8d208575aca6f0be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 30 Mar 2020 22:06:11 +0100
Subject: [PATCH] fix(ui): tweak grid header style

---
 ui/src/Components/Grid/AlertGrid/Grid.js | 52 ++++++++++++------------
 ui/src/Styles/Components/AlertGrid.scss  |  4 ++
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js
index bf7687023..6ffe147af 100644
--- a/ui/src/Components/Grid/AlertGrid/Grid.js
+++ b/ui/src/Components/Grid/AlertGrid/Grid.js
@@ -118,32 +118,30 @@ const Grid = observer(
       return (
         <React.Fragment>
           {alertStore.data.grids.length > 1 && (
-            <h5 className="d-flex flex-row justify-content-between px-2 py-1 mx-0 mt-2 mb-0 bg-light">
-              {grid.alertGroups.length > 1 && (
-                <span className="flex-shrink-0 flex-grow-0 ml-0 mr-2">
-                  <FilteringCounterBadge
-                    name="@state"
-                    value="unprocessed"
-                    counter={grid.stateCount.unprocessed}
-                    themed={true}
-                    alertStore={alertStore}
-                  />
-                  <FilteringCounterBadge
-                    name="@state"
-                    value="suppressed"
-                    counter={grid.stateCount.suppressed}
-                    themed={true}
-                    alertStore={alertStore}
-                  />
-                  <FilteringCounterBadge
-                    name="@state"
-                    value="active"
-                    counter={grid.stateCount.active}
-                    themed={true}
-                    alertStore={alertStore}
-                  />
-                </span>
-              )}
+            <h5 className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 mx-1 mt-2 mb-0">
+              <span className="flex-shrink-0 flex-grow-0 ml-0 mr-2">
+                <FilteringCounterBadge
+                  name="@state"
+                  value="unprocessed"
+                  counter={grid.stateCount.unprocessed}
+                  themed={true}
+                  alertStore={alertStore}
+                />
+                <FilteringCounterBadge
+                  name="@state"
+                  value="suppressed"
+                  counter={grid.stateCount.suppressed}
+                  themed={true}
+                  alertStore={alertStore}
+                />
+                <FilteringCounterBadge
+                  name="@state"
+                  value="active"
+                  counter={grid.stateCount.active}
+                  themed={true}
+                  alertStore={alertStore}
+                />
+              </span>
               <span
                 className="flex-shrink-1 flex-grow-1 text-center"
                 style={{ minWidth: "0px" }}
@@ -158,7 +156,7 @@ const Grid = observer(
                 )}
               </span>
               <span
-                className="flex-shrink-0 flex-grow-0 text-white cursor-pointer badge px-0 components-label ml-2 mr-0"
+                className="flex-shrink-0 flex-grow-0 text-muted cursor-pointer badge px-0 components-label ml-2 mr-0"
                 onClick={this.gridToggle.toggle}
               >
                 <TooltipWrapper title="Click to toggle this grid details">
diff --git a/ui/src/Styles/Components/AlertGrid.scss b/ui/src/Styles/Components/AlertGrid.scss
index 756dd044b..4347eb82d 100644
--- a/ui/src/Styles/Components/AlertGrid.scss
+++ b/ui/src/Styles/Components/AlertGrid.scss
@@ -6,3 +6,7 @@
   transition-duration: 0.4s;
   transition-timing-function: ease;
 }
+
+.components-grid-swimlane {
+  background-color: $dark;
+}