Diagnostics: Style diagnostics page header

Description:
 remove "hr" tags from diagnostics_app and add
 styling to page header

Screenshots:
 - Diagnostics Page (before) http://shortn/_YdImFO55AY
 - Diagnostics Page (after) http://shortn/_k8NLMVtA6A

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

chromeos/components/diagnostics_ui/resources/diagnostics_app.html

+<style include="cr-shared-style diagnostics-shared diagnostics-fonts">
+  #header {
+   @apply --diagnostics-header-font;
+    margin-bottom: 10px;
+  }
+</style>
 <div class="main-container">
-    <!-- TODO(zentaro) Localize once strings are confirmed -->
-    <div id="header">Diagnostics</div>
-    <hr>
-    <overview-card id="overviewCard"></overview-card>
-    <hr>
-    <memory-card id="memoryCard"></memory-card>
-    <hr>
-    <cpu-card id="cpuCard"></cpu-card>
-    <hr>
-    <battery-status-card id="batteryStatusCard"></battery-status-card>
-    <hr>
+  <!-- TODO(zentaro) Localize once strings are confirmed -->
+  <div id="header">Diagnostics</div>
+  <overview-card id="overviewCard"></overview-card>
+  <memory-card id="memoryCard"></memory-card>
+  <cpu-card id="cpuCard"></cpu-card>
+  <battery-status-card id="batteryStatusCard"></battery-status-card>
 </div>

chromeos/components/diagnostics_ui/resources/diagnostics_app.js

@@ -4,6 +4,7 @@
 
 import './battery_status_card.js';
 import './cpu_card.js';
+import './diagnostics_fonts_css.js';
 import './diagnostics_shared_css.js';
 import './memory_card.js';
 import './overview_card.js';

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

@@ -2,14 +2,28 @@
   <style>
     :host {
       --diagnostics-default-font-family: "Google Sans", Roboto, sans-serif;
-      --diagnostics-default-font-size: 22px;
-      --diagnostics-default-font-weight: 500; /* medium */
+      --diagnostics-header-font-family: Roboto, sans-serif;
+
+      --diagnostics-default-font-size: 14px;
+      --diagnostics-header-font-size: 22px;
+
+      --diagnostics-default-font-weight: 500;
+      --diagnostics-header-font-weight: 600;
+
       --diagnostics-default-text-color: var(--google-grey-900);
+      --diagnostics-header-text-color: var(--google-grey-900);
+
       --diagnostics-default-font: {
           font-family: var(--diagnostics-default-font-family);
           font-size: var(--diagnostics-default-font-size);
           font-weight: var(--diagnostics-default-font-weight);
       };
+
+      --diagnostics-header-font: {
+          font-family: var(--diagnostics-header-font-family);
+          font-size: var(--diagnostics-header-font-size);
+          font-weight: var(--diagnostics-header-font-weight);
+      };
     }
   </style>
 </template>
\ No newline at end of file