Diagnostics: Basic structural styling for percent bar chart

https://screenshot.googleplex.com/6FwB36oBkNRFgnJ

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

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

@@ -9,6 +9,7 @@
       --diagnostics-data-point-title-font-size: 12px;
       --diagnostics-data-point-subtitle-font-size: 15px;
       --diagnostics-overview-font-size: 13px;
+      --diagnostics-chart-label-font-size: 15px;
 
       --diagnostics-default-font-weight: 500;
       --diagnostics-header-font-weight: 600;
@@ -45,6 +46,14 @@
           font-size: var(--diagnostics-overview-font-size);
           font-weight: var(--diagnostics-overview-font-weight);
       };
+      --diagnostics-chart-title-font: {
+          font-family: var(--diagnostics-default-font-family);
+          font-size: var(--diagnostics-default-font-size);
+      };
+      --diagnostics-chart-label-font: {
+          font-family: var(--diagnostics-default-font-family);
+          font-size: var(--diagnostics-chart-label-font-size);
+      };
     }
   </style>
 </template>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/percent_bar_chart.html

 <style include="diagnostics-shared diagnostics-fonts">
+  #barChartContainer > label {
+    @apply --diagnostics-chart-title-font;
+    color: var(--diagnostics-overview-text-color);
+  }
+
   paper-progress {
+    border-radius: 5px;
+    display: inline-block;
+    width: 300px;
     --paper-progress-active-color: var(--google-blue-500);
     --paper-progress-container-color: var(--google-blue-100);
+    --paper-progress-height: 8px;
   }
+
+  #percentageLabel {
+    @apply --diagnostics-chart-label-font;
+    display: inline;
+    padding-left: 5px;
+  }
+
 </style>
 
 <div id="barChartContainer">
   <label id="chartName">[[header]]</label>
-  <paper-progress id="barChart" value="[[value]]" max="[[max]]"></paper-progress>
-  <!-- TODO(joonbug): Add i18n string for percent number format -->
-  <label id="percentageLabel">[[computePercentage_(value, max)]]</label>
+  <div class="body">
+    <paper-progress id="barChart" value="[[value]]" max="[[max]]"></paper-progress>
+    <!-- TODO(joonbug): Add i18n string for percent number format -->
+    <label id="percentageLabel">[[computePercentage_(value, max)]]</label>
+  </div>
 </div>