Diagnostics: Update data points layout to be closer to mocks

- Will be updated to adhere to the spec in the future.

Screenshot: http://shortn/_17jazhYXnr

Bug: 1125150
Test: browser_tests --gtest_Filter=DiagnosticsApp*
Change-Id: I55770ae52546b055f77766eb31644d3218ec8658
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2530452
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828824}

chromeos/components/diagnostics_ui/resources/battery_status_card.html

-<style include="diagnostics-shared">
-</style>
+<style include="diagnostics-shared diagnostics-fonts"></style>
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('batteryTitle')]]</div>
@@ -14,9 +13,11 @@
     header="[[i18n('batteryHealthLabel')]]"
     value="[[getBatteryHealth_(batteryHealth_.batteryWearPercentage)]]">
   </data-point>
+  <div slot="body" class="divider"></div>
   <data-point slot="body" id="cycleCount" header="[[i18n('cycleCount')]]"
     value="[[batteryHealth_.cycleCount]]">
   </data-point>
+  <div slot="body" class="divider"></div>
   <data-point slot="body" id="currentNow" header="[[i18n('currentNowLabel')]]"
     value="[[getCurrentNow_(batteryChargeStatus_.currentNowMilliamps)]]">
   </data-point>

chromeos/components/diagnostics_ui/resources/cpu_card.html

-<style include="diagnostics-shared diagnostics-fonts">
-</style>
+<style include="diagnostics-shared diagnostics-fonts"></style>
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('cpuTitle')]]</div>
@@ -14,9 +13,11 @@
     value="[[getCurrentlyUsing_(cpuUsage_.percentUsageSystem,
         cpuUsage_.percentUsageUser)]]">
   </data-point>
+  <div slot="body" class="divider"></div>
   <data-point slot="body" id="cpuTemp" header="[[i18n('cpuTempLabel')]]"
     value="[[getCpuTemp_(cpuUsage_.averageCpuTempCelsius)]]">
   </data-point>
+  <div slot="body" class="divider"></div>
   <!-- TODO(michaelcheco): Add value for CPU speed. -->
   <data-point slot="body" id="cpuTemp" header="[[i18n('cpuSpeedLabel')]]"
     value="">

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

@@ -6,11 +6,6 @@
     padding: 4px 8px;
   }
 
-  .card-columns {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
   .card-container {
     display: flex;
     flex-direction: column;
@@ -32,11 +27,10 @@
   }
 
   .data-points {
-    column-gap: 10px;
+    border-bottom: 1px solid var(--diagnostics-border-color);
     display: grid;
-    grid-template-columns: repeat(auto-fill, 100px);
-    justify-content: end;
-    row-gap: 5px;
+    grid-template-columns: 1.5fr 0fr 1fr 0fr 1.5fr;
+    padding-bottom: 8px;
   }
 
   .routine-container {
@@ -48,6 +42,15 @@
     padding-inline-end: 15px;
     padding-inline-start: 15px;
   }
+
+  .top-section {
+    border-bottom: 1px solid var(--diagnostics-border-color);
+    margin-bottom: 6px;
+    margin-top: 12px;
+    padding-bottom: 12px;
+    padding-inline-end: 15px;
+    padding-inline-start: 15px;
+  }
 </style>
 <div class="card-container">
   <div id="title" class="card-header">
@@ -55,15 +58,12 @@
     <slot name="chip"></slot>
   </div>
   <div class="card-wrapper">
-    <div class="card-columns spacing">
-      <div>
-        <slot name="left-panel"></slot>
-      </div>
-      <div id="body" class="data-points" hidden$="[[hideDataPoints]]">
-        <slot name="body"></slot>
-      </div>
+    <div class="top-section">
+      <slot name="left-panel"></slot>
+    </div>
+    <div id="body" class="data-points" hidden$="[[hideDataPoints]]">
+      <slot name="body"></slot>
     </div>
-
     <div id="routines" class="routine-container spacing">
       <slot name="routines"></slot>
     </div>

chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html

@@ -12,5 +12,13 @@
     html {
       background-color: var(--cros-bg-color);
     }
+
+    .divider {
+      border-left: 1px solid var(--diagnostics-border-color);
+      height: 36px;
+      padding-inline-start: 20px;
+      position: relative;
+      top: 12%;
+  }
   </style>
 </template>