Diagnostics: Overview section styling

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

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

chromeos/components/diagnostics_ui/resources/diagnostics_app.html

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

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

@@ -12,7 +12,7 @@
 
       --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-default-font: {
           font-family: var(--diagnostics-default-font-family);
           font-size: var(--diagnostics-default-font-size);

chromeos/components/diagnostics_ui/resources/overview_card.html

-<style include="diagnostics-shared">
-</style>
+<style include="diagnostics-shared diagnostics-fonts">
+  #overviewCardContainer {
+    color: var(--diagnostics-overview-text-color);
+    display: flex;
+  }
+
+  #overviewCardContainer > div {
+    margin-right: 15px;
+  }
 
+  #version {
+    margin-right: 0;
+  }
+</style>
 <div id="overviewCardContainer">
   <div id="boardName">[[systemInfo_.board_name]]</div>
   <div id="cpuModelName">[[systemInfo_.cpu_model_name]]</div>

chromeos/components/diagnostics_ui/resources/overview_card.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './diagnostics_fonts_css.js';
 import './diagnostics_shared_css.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';