Diagnostics: data points section styling

Screenshot: http://shortn/_ldNJuxuRhF

Spec: https://carbon.googleplex.com/cros-ux/pages/diagnostics/mvp#dd35f9cb-3d67-452e-a98c-89635d8c31c3

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

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -14,7 +14,8 @@
   <data-point slot="body" id="batteryHealth"
     header="[[i18n('batteryHealthLabel')]]"
     value="[[getBatteryHealth_(batteryHealth_.batteryWearPercentage)]]"
-    tooltip-text="[[i18n('batteryHealthTooltipText')]]">
+    tooltip-text="[[i18n('batteryHealthTooltipText')]]"
+    class="data-point-margin-start">
   </data-point>
   <div slot="body" class="divider"></div>
   <data-point slot="body" id="cycleCount" header="[[i18n('cycleCount')]]"
@@ -24,7 +25,8 @@
   <div slot="body" class="divider"></div>
   <data-point slot="body" id="currentNow" header="[[i18n('currentNowLabel')]]"
     value="[[getCurrentNow_(batteryChargeStatus_.currentNowMilliamps)]]"
-    tooltip-text="[[i18n('currentNowTooltipText')]]">
+    tooltip-text="[[i18n('currentNowTooltipText')]]"
+    class="data-point-margin-end">
   </data-point>
 
   <routine-section slot="routines" routines="[[routines_]]"

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -14,14 +14,16 @@
     header="[[i18n('cpuUsageLabel')]]"
     value="[[getCurrentlyUsing_(cpuUsage_.percentUsageSystem,
         cpuUsage_.percentUsageUser)]]"
-    tooltip-text="[[getCpuUsageTooltipText_()]]">
+    tooltip-text="[[getCpuUsageTooltipText_()]]"
+    class="data-point-margin-start">
   </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>
-  <data-point slot="body" id="cpuSpeed" header="[[i18n('cpuSpeedLabel')]]"
+  <data-point slot="body" id="cpuSpeed" class="data-point-margin-end"
+    header="[[i18n('cpuSpeedLabel')]]"
     value="[[getCpuSpeed_(cpuUsage_.scalingCurrentFrequencyKhz)]]">
   </data-point>
   <routine-section slot="routines" routines="[[routines_]]"

chromeos/components/diagnostics_ui/resources/data_point.html

@@ -2,24 +2,27 @@
   .data-point {
     display: flex;
     flex-direction: column;
-    height: 45px;
+    height: 40px;
     justify-content: space-between;
+    margin: 12px 0;
   }
 
   .header {
     @apply --diagnostics-data-point-title-font;
-    color: var(--diagnostics-overview-text-color);
+    color: var(--diagnostics-data-point-title-color);
   }
 
   #infoIcon {
-    fill:  var(--google-grey-600);
-    height: 18px;
+    bottom: 1px;
+    fill:  var(--google-grey-700);
+    height: 20px;
     left: 4px;
-    width: 18px;
+    width: 20px;
   }
 
   .value {
     @apply --diagnostics-data-point-subtitle-font;
+    color: var(--diagnostics-data-point-subtitle-color);
   }
 </style>
 <div class="data-point">

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

@@ -40,8 +40,8 @@
   .data-points {
     border-bottom: 1px solid var(--diagnostics-border-color);
     display: grid;
-    grid-template-columns: 1.5fr 0fr 1fr 0fr 1.5fr;
-    padding-bottom: 8px;
+    grid-template-columns: 1fr 0fr 1fr 0fr 1fr;
+    padding-inline: var(--data-point-container-padding);
   }
 
   .icon {

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

@@ -3,11 +3,12 @@
     :host {
       --diagnostics-default-font-family: "Google Sans", Roboto, sans-serif;
       --diagnostics-header-font-family: Roboto, sans-serif;
+      --diagnostics-data-point-font-family: Roboto, sans-serif;
 
       --diagnostics-default-font-size: 14px;
       --diagnostics-header-font-size: 22px;
-      --diagnostics-data-point-title-font-size: 12px;
-      --diagnostics-data-point-subtitle-font-size: 15px;
+      --diagnostics-data-point-title-font-size: 13px;
+      --diagnostics-data-point-subtitle-font-size: 13px;
       --diagnostics-overview-font-size: 13px;
       --diagnostics-chart-label-font-size: 15px;
       --diagnostics-chart-tick-font-size: 12px;
@@ -15,13 +16,16 @@
 
       --diagnostics-default-font-weight: 500;
       --diagnostics-header-font-weight: 600;
-      --diagnostics-data-point-title-font-weight: 500;
-      --diagnostics-data-point-subtitle-font-weight: 550;
+      --diagnostics-data-point-title-font-weight: 400;
+      --diagnostics-data-point-subtitle-font-weight: 450;
       --diagnostics-overview-font-weight: 500;
 
       --diagnostics-default-text-color: var(--google-grey-900);
       --diagnostics-header-text-color: var(--google-grey-900);
       --diagnostics-overview-text-color: var(--google-grey-600);
+      --diagnostics-data-point-title-color: var(--google-grey-900);
+      --diagnostics-data-point-subtitle-color: var(--google-grey-700);
+
       --diagnostics-default-font: {
           font-family: var(--diagnostics-default-font-family);
           font-size: var(--diagnostics-default-font-size);
@@ -34,12 +38,12 @@
           font-weight: var(--diagnostics-header-font-weight);
       }
       --diagnostics-data-point-title-font: {
-          font-family: var(--diagnostics-default-font-family);
+          font-family: --diagnostics-data-point-font-family
           font-size: var(--diagnostics-data-point-title-font-size);
           font-weight: var(--diagnostics-data-point-title-font-weight);
       };
       --diagnostics-data-point-subtitle-font: {
-          font-family: var(--diagnostics-default-font-family);
+          font-family: --diagnostics-data-point-font-family
           font-size: var(--diagnostics-data-point-subtitle-font-size);
           font-weight: var(--diagnostics-data-point-subtitle-font-weight);
       };

chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html

@@ -13,12 +13,20 @@
       background-color: var(--cros-bg-color);
     }
 
+    .data-point-margin-end {
+      margin-right: 20px;
+    }
+
+    .data-point-margin-start {
+      margin-left: 20px;
+    }
+
     .divider {
-      border-left: 1px solid var(--diagnostics-border-color);
-      height: 36px;
-      padding-inline-start: 20px;
+      border-left: 1px solid var(--google-grey-200);
+      height: 32px;
+      padding-inline: 16px;
       position: relative;
-      top: 12%;
+      top: 24%;
     }
 
     @media (min-width:600px) {
@@ -26,6 +34,7 @@
         --container-padding: 24px;
         --content-container-width: 552px;
         --chart-width: 452px;
+        --data-point-container-padding: 44px;
         }
     }
 
@@ -34,6 +43,7 @@
         --container-padding: 64px;
         --content-container-width: 640px;
         --chart-width: 540px;
+        --data-point-container-padding: 64px;
         }
     }
 
@@ -42,6 +52,7 @@
         --container-padding: 160px;
         --content-container-width: 640px;
         --chart-width: 540px;
+        --data-point-container-padding: 64px;
       }
     }
 
@@ -50,6 +61,7 @@
         --container-padding: 160px;
         --content-container-width: 680px;
         --chart-width: 580px;
+        --data-point-container-padding: 64px;
       }
     }
 
@@ -58,6 +70,7 @@
         --container-padding: 360px;
         --content-container-width: 720px;
         --chart-width: 620px;
+        --data-point-container-padding: 64px;
       }
     }
   </style>