From 1eebec0a03752dbfffa26ce9abce8542017d4a4b Mon Sep 17 00:00:00 2001
From: Jai Bhagat <jaybhagat841@gmail.com>
Date: Tue, 11 Jan 2022 13:05:33 -0500
Subject: [PATCH] styling:  update styling to match new figma mocks

---
 ui/app/styles/charts/distribution-bar.scss         |  2 --
 .../job-page/parts/summary-legend-item.hbs         | 14 ++++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/app/styles/charts/distribution-bar.scss b/ui/app/styles/charts/distribution-bar.scss
index 507f8bdb9..021b70b38 100644
--- a/ui/app/styles/charts/distribution-bar.scss
+++ b/ui/app/styles/charts/distribution-bar.scss
@@ -59,7 +59,6 @@
         display: block;
         background-color: transparent;
         transition: background-color 0.1s ease-in-out;
-        border: 1px solid $grey-blue;
         padding: 0.25em 0.75em;
         margin: 0.25em;
         border-radius: $radius;
@@ -111,7 +110,6 @@
 
         &.is-empty {
           color: darken($grey-blue, 20%);
-          border: none;
 
           .label {
             color: darken($grey-blue, 20%);
diff --git a/ui/app/templates/components/job-page/parts/summary-legend-item.hbs b/ui/app/templates/components/job-page/parts/summary-legend-item.hbs
index ab7997fbe..d5bd34922 100644
--- a/ui/app/templates/components/job-page/parts/summary-legend-item.hbs
+++ b/ui/app/templates/components/job-page/parts/summary-legend-item.hbs
@@ -1,12 +1,18 @@
 <div class="legend-item">
-  <span class="color-swatch {{if @datum.className @datum.className (concat "swatch-" @index)}}" />
+  <span
+    class="color-swatch {{if @datum.className @datum.className (concat "swatch-" @index)}}"
+  ></span>
   <span class="text">
-    <span class="value" data-test-legend-value="{{@datum.className}}">{{@datum.value}}</span>
-    <span class="label">{{@datum.label}}</span>
+    <span class="value" data-test-legend-value="{{@datum.className}}">
+      {{@datum.value}}
+    </span>
+    <span>
+      {{@datum.label}}
+    </span>
   </span>
   {{#if @datum.help}}
     <span class="tooltip multiline" role="tooltip" aria-label="{{@datum.help}}">
       {{x-icon "info-circle-outline" class="is-faded"}}
     </span>
   {{/if}}
-</div>
+</div>
\ No newline at end of file