Diagnostics: Base card styling and app layout

Description:
 * These styles are subject to change and are only for
   the base template.

 - Adds container styles to diagnostics app
 - Adds some styling to diagnostics-card
 - displays cards vertically

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

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

chromeos/components/diagnostics_ui/resources/diagnostics_app.html

 <style include="cr-shared-style diagnostics-shared diagnostics-fonts">
+  .diagonstics-cards-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #diagnosticsContainer {
+    --cr-centered-card-max-width: 820px;
+  }
+
   #header {
    @apply --diagnostics-header-font;
     margin-bottom: 10px;
@@ -8,13 +17,15 @@
     margin-bottom: 10px;
   }
 </style>
-<div class="main-container">
+<div id="diagnosticsContainer"class="cr-centered-card-container">
   <!-- TODO(zentaro) Localize once strings are confirmed -->
   <div id="header">Diagnostics</div>
   <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>
+  <div class="diagonstics-cards-container">
+    <memory-card id="memoryCard"></memory-card>
+    <cpu-card id="cpuCard"></cpu-card>
+    <battery-status-card id="batteryStatusCard"></battery-status-card>
+  </div>
 </div>

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

 <style include="diagnostics-shared diagnostics-fonts">
+  #card-wrapper {
+    border: 1px solid var(--diagnostics-border-color);
+    border-radius: 14px;
+    height: 180px;
+    margin: 10px 0;
+  }
+
   .title-container {
     @apply --diagnostics-default-font;
   }
+
+  .spacing {
+    margin-top: 18px;
+    padding-inline-end: 15px;
+    padding-inline-start: 15px;
+  }
 </style>
 
 <div id="card-wrapper">
-  <div id="title" class="title-container">
+  <div id="title" class="title-container spacing">
     <slot name="title"></slot>
   </div>
 
-  <div id="body" class="body-container">
+  <div id="body" class="body-container spacing">
     <slot name="body"></slot>
   </div>
 </div>

chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html

@@ -4,6 +4,11 @@
 <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
 <template>
   <style include="cr-shared-style diagnostics-fonts">
+    :host {
+      /* TODO(michael) Replace temp hex code when colors are finalized. */
+      --diagnostics-border-color: #c5c7ca;
+    }
+
     html {
       background-color: var(--cros-bg-color);
     }