From c74d697596cb528cbd347b280c7841a7654aed7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 27 Mar 2019 14:53:35 -0700
Subject: [PATCH] refactor(ui): add background color to the alert group title

Right now the title and the body blends together in the UI, add background color to make it easier to show where title bar ends and where the alert body starts
---
 .../AlertGrid/AlertGroup/GroupHeader/index.js |  6 ++++-
 .../Grid/AlertGrid/AlertGroup/index.js        | 24 ++++++++-----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
index 479942187..1765f8978 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
@@ -29,7 +29,11 @@ const GroupHeader = observer(
       const { collapseStore, group, silenceFormStore } = this.props;
 
       return (
-        <h5 className="card-title mb-0 d-flex flex-row">
+        <h5
+          className={`card-header bg-light mb-0 d-flex flex-row px-2 py-1 ${
+            collapseStore.value ? "border-bottom-0" : ""
+          }`}
+        >
           <span className="flex-shrink-0 flex-grow-0">
             <GroupMenu group={group} silenceFormStore={silenceFormStore} />
           </span>
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
index 8ede3fadb..7acccbcae 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
@@ -162,18 +162,14 @@ const AlertGroup = observer(
         <MountFade>
           <div className="components-grid-alertgrid-alertgroup p-1">
             <div className="card">
-              <div
-                className={`card-body ${
-                  this.collapse.value ? "p-2" : "px-2 pt-2 pb-1"
-                }`}
-              >
-                <GroupHeader
-                  collapseStore={this.collapse}
-                  group={group}
-                  silenceFormStore={silenceFormStore}
-                />
-                {this.collapse.value ? null : (
-                  <ul className="list-group mt-1">
+              <GroupHeader
+                collapseStore={this.collapse}
+                group={group}
+                silenceFormStore={silenceFormStore}
+              />
+              {this.collapse.value ? null : (
+                <div className="card-body px-2 py-1">
+                  <ul className="list-group">
                     {group.alerts
                       .slice(0, this.renderConfig.alertsToRender)
                       .map(alert => (
@@ -212,8 +208,8 @@ const AlertGroup = observer(
                       </li>
                     ) : null}
                   </ul>
-                )}
-              </div>
+                </div>
+              )}
               {this.collapse.value === false && group.alerts.length > 1 ? (
                 <GroupFooter
                   group={group}