fix(ui): tweak display of labels on the overview modal

prymitive · Jul 11, 2019 · 6201133 · 6201133
1 parent c0c429b
commit 6201133
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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%;\\"