From 6201133df974dbdff0264b4708346929e518aae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 11 Jul 2019 17:42:32 +0100
Subject: [PATCH] fix(ui): tweak display of labels on the overview modal

---
 .../LabelWithPercent/__snapshots__/index.test.js.snap     | 2 +-
 ui/src/Components/Labels/LabelWithPercent/index.js        | 2 +-
 ui/src/Components/Labels/LabelWithPercent/index.scss      | 8 ++++++++
 .../__snapshots__/OverviewModalContent.test.js.snap       | 6 +++---
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
index 1166f3198..78fa95ee5 100644
--- a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
@@ -19,7 +19,7 @@ exports[`<MountedLabelWithPercent /> matches snapshot 1`] = `
       bar
     </span>
   </span>
-  <div class=\\"progress silence-progress bg-white pr-1\\">
+  <div class=\\"progress components-labelWithPercent-progress mr-1\\">
     <div class=\\"progress-bar bg-warning\\"
          role=\\"progressbar\\"
          style=\\"width: 50%;\\"
diff --git a/ui/src/Components/Labels/LabelWithPercent/index.js b/ui/src/Components/Labels/LabelWithPercent/index.js
index 24a42b958..6ff8c7eae 100644
--- a/ui/src/Components/Labels/LabelWithPercent/index.js
+++ b/ui/src/Components/Labels/LabelWithPercent/index.js
@@ -49,7 +49,7 @@ const LabelWithPercent = inject("alertStore")(
               <span className="components-label-name">{name}:</span>{" "}
               <span className="components-label-value">{value}</span>
             </span>
-            <div className="progress silence-progress bg-white pr-1">
+            <div className="progress components-labelWithPercent-progress mr-1">
               <div
                 className={`progress-bar ${progressBarBg}`}
                 role="progressbar"
diff --git a/ui/src/Components/Labels/LabelWithPercent/index.scss b/ui/src/Components/Labels/LabelWithPercent/index.scss
index c6589aa4d..45ea4f2f2 100644
--- a/ui/src/Components/Labels/LabelWithPercent/index.scss
+++ b/ui/src/Components/Labels/LabelWithPercent/index.scss
@@ -1,4 +1,12 @@
+@import "~bootswatch/dist/flatly/variables";
+
 .components-labelWithPercent-percent {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+
+.components-labelWithPercent-progress {
+  height: 2px;
+  margin-top: 2px;
+  background-color: darken($light, 10%);
+}
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
index e3b8fdc7b..c5af0ee00 100644
--- a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
+++ b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
@@ -51,7 +51,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   bar1
                 </span>
               </span>
-              <div class=\\"progress silence-progress bg-white pr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
                 <div class=\\"progress-bar bg-warning\\"
                      role=\\"progressbar\\"
                      style=\\"width: 50%;\\"
@@ -79,7 +79,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   bar2
                 </span>
               </span>
-              <div class=\\"progress silence-progress bg-white pr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
                 <div class=\\"progress-bar bg-success\\"
                      role=\\"progressbar\\"
                      style=\\"width: 25%;\\"
@@ -107,7 +107,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   bar3
                 </span>
               </span>
-              <div class=\\"progress silence-progress bg-white pr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
                 <div class=\\"progress-bar bg-success\\"
                      role=\\"progressbar\\"
                      style=\\"width: 25%;\\"