scanning: Update done section layout

Update the layout of the elements in the done section to conform to the
spec.

Spec: https://carbon.googleplex.com/cros-ux/pages/scanning

Screenshot: http://shortn/_b4ThkiWjXu

Bug: 1059779
Change-Id: If058edfe23fa4ef15fa2e85931d72e4867ba3756
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2586764Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#836210}

chromeos/components/scanning/resources/icons.html

@@ -2,9 +2,11 @@
   <svg>
     <defs>
       <g id="check-mark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" width="20" height="20" viewBox="0 0 20 20">
+        <g transform="translate(2.000000, 2.000000)">
           <path fill="#1A73E8" d="M8,16 C12.4183,16 16,12.4183 16,8 C16,3.58172 12.4183,0 8,0 C3.58172,0 0,3.58172 0,8 C0,12.4183 3.58172,16 8,16 Z M8,14 C11.3137,14 14,11.3137 14,8 C14,4.68629 11.3137,2 8,2 C4.68629,2 2,4.68629 2,8 C2,11.3137 4.68629,14 8,14 Z"></path>
           <polygon fill="#1A73E8" fill-rule="nonzero" points="11.3310353 4.75670585 12.6689647 6.24329415 6.96376255 11.3779761 3.79289322 8.20710678 5.20710678 6.79289322 7.036 8.621"></polygon>
         </g>
+      </g>
     </defs>
   </svg>
 </iron-iconset-svg>

chromeos/components/scanning/resources/scan_done_section.html

 <style include="scanning-fonts">
+  #titleContainer {
+    align-items: center;
+    display: flex;
+    margin-bottom: 24px;
+    margin-inline-start: 32px;
+    margin-top: 0;
+  }
+
   .container {
     @apply --scanning-done-page-option-font;
+    align-items: center;
     color: var(--scanning-done-page-option-text-color);
     display: flex;
+    height: 36px;
+    margin-bottom: 8px;
+    margin-inline-end: 32px;
+    margin-inline-start: 32px;
+    margin-top: 0;
+    padding-inline-end: 16px;
+    width: 272px;
   }
 
   #checkMarkIcon {
+    height: 20px;
     margin-inline-end: 12px;
-    min-width: 24px;
-    padding-bottom: 2px;
+    width: 20px;
   }
 
   .done-button-container {
     display: flex;
     justify-content: flex-end;
+    margin-bottom: 0;
+    margin-inline-end: 32px;
+    margin-inline-start: 32px;
     margin-top: 32px;
-    width: 264px;
+    padding-inline-end: 16px;
+    width: 272px;
   }
 
   #title {
     @apply --scanning-done-section-title-font;
     color: var(--scanning-done-section-title-text-color);
-    display: inline-block;
+    flex-direction: column;
+    margin: 0;
   }
 
-  .button,
-  .label {
+  .button {
     flex-direction: column;
-    min-height: 32px;
+    height: 20px;
+    margin: 0;
+    width: 20px;
   }
 
   .label {
-    flex-basis: 222px;
+    flex-basis: 252px;
     flex-grow: 0;
     flex-shrink: 0;
-    margin-top: 5px;
-    padding-top: 8px;
   }
 </style>
-<iron-icon id="checkMarkIcon" icon="scanning:check-mark"></iron-icon>
-<h1 id="title">
+<div id="titleContainer">
+  <iron-icon id="checkMarkIcon" icon="scanning:check-mark"></iron-icon>
+  <h1 id="title">
     [[titleText_]]
-</h1>
+  </h1>
+</div>
 <div class="container">
   <span id="showFileLocationLabel" class="label" aria-hidden="true">
     [[i18n('showFileLocationLabel')]]