Scanning: Style scan button and add localized string for button text

Screenshot: http://shortn/_OHS9E7XPgF

Bug: 1059779
Test: browser_tests --gtest_filter=ScanningAppBrowserTest.All
Change-Id: Ida6b9bccfeb781d353ccb944713e4c95b1735387
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2506304
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#823667}

chromeos/chromeos_strings.grd

@@ -516,6 +516,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_SCANNING_APP_SCAN_PREVIEW_HELPER_TEXT" desc="The text displayed in the scan preview that explains how to scan a document.">
         Place your document, and click Scan to get started
       </message>
+      <message name="IDS_SCANNING_APP_SCAN_BUTTON_TEXT" desc="The text displayed for the button that starts a scan.">
+        Scan
+      </message>
 
       <!-- Diagnostics App -->
       <!-- TODO(michaelcheco): Update with finalized copies of the strings -->

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_SCAN_BUTTON_TEXT.png.sha1

+060cd6b0821e9366279825855946c1f925853044
\ No newline at end of file

chromeos/components/scanning/resources/scanning_app.html

@@ -62,6 +62,12 @@
     margin-bottom: var(--panel-container-margin-bottom);
     margin-top: var(--panel-container-margin-top);
   }
+
+  .scan-button-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 289px;
+  }
 </style>
 <div id="scanningContainer">
   <div class="panel-container">
@@ -105,11 +111,12 @@
             selected-resolution="{{selectedResolution}}">
         </resolution-select>
       </iron-collapse>
-      <!-- TODO(jschettler): Replace button label with finalized i18n string. -->
-      <cr-button id="scanButton" on-click="onScanClick_"
-          disabled$="[[scanButtonDisabled_]]">
-        Scan
-      </cr-button>
+      <div class="scan-button-container">
+        <cr-button id="scanButton" class="action-button" on-click="onScanClick_"
+            disabled$="[[scanButtonDisabled_]]">
+          [[i18n('scanButtonText')]]
+        </cr-button>
+      </div>
       <p id="statusText">[[statusText_]]</p>
     </div>
   </div>

chromeos/components/scanning/scanning_ui.cc

@@ -61,6 +61,7 @@ void AddScanningAppStrings(content::WebUIDataSource* html_source) {
       {"pageSizeDropdownLabel", IDS_SCANNING_APP_PAGE_SIZE_DROPDOWN_LABEL},
       {"resolutionDropdownLabel", IDS_SCANNING_APP_RESOLUTION_DROPDOWN_LABEL},
       {"resolutionOptionText", IDS_SCANNING_APP_RESOLUTION_OPTION_TEXT},
+      {"scanButtonText", IDS_SCANNING_APP_SCAN_BUTTON_TEXT},
       {"scanPreviewHelperText", IDS_SCANNING_APP_SCAN_PREVIEW_HELPER_TEXT},
       {"scanToDropdownLabel", IDS_SCANNING_APP_SCAN_TO_DROPDOWN_LABEL},
       {"scannerDropdownLabel", IDS_SCANNING_APP_SCANNER_DROPDOWN_LABEL},