Merge pull request #2036 from hashicorp/ui/ui-tweaks

UI: Change layout of status-row

Author: sabrinako

Diff for: .changelog/2036.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Improve design of status row on Build/Deployment/Release detail pages
+```

Diff for: ui/app/components/status-report-bar/index.hbs

@@ -2,6 +2,11 @@
   {{#if this.statusReport}}
     <div class="item">
       <StatusReportIndicator @statusReport={{this.statusReport}} />
+      {{#if this.statusReport.status.completeTime.seconds}}
+      <div data-test-complete-time-status-report>
+        Last checked {{date-format-distance-to-now this.statusReport.status.completeTime.seconds }}
+      </div>
+      {{/if}}
     </div>
   {{/if}}
 
@@ -14,13 +19,11 @@
     </div>
   {{/if}}
   {{yield}}
-  {{#if this.statusReport.status.completeTime.seconds}}
-    <div class="item" data-test-complete-time-status-report>
-      Last checked {{date-format-distance-to-now this.statusReport.status.completeTime.seconds }}
-    </div>
-  {{/if}}
+
+  
   {{#if this.statusReport}}
     <div class="item">
+
       <Pds::Button @variant="ghost" @iconStart="refresh-default" disabled={{this.isRefreshRunning}} {{on "click" this.refreshHealthCheck}}>
         Re-run health check
       </Pds::Button>

Diff for: ui/app/styles/_layout.scss

@@ -85,6 +85,7 @@ ul.list {
   @include Typography.Interface(M);
 
   .item {
+    display: flex;
     a {
       text-decoration: none;
 
@@ -93,8 +94,13 @@ ul.list {
       }
     }
 
+    .status-report-indicator__label,
+    .operation-status-indicator__label {
+      @include Typography.Interface(M);
+      margin-right: scale.$lg-1;
+    }
+
     .badge {
-      font-size: 0.75rem;
       padding: scale.$sm-3 scale.$sm-2;
     }
   }