Chrome OS OOBE: Update HID detection screen style.

This CL updates HID detection screen with new style.

Bug: 852046
Change-Id: Ibba68ae848efeb7518ec1942719da666f5f92f24
Reviewed-on: https://chromium-review.googlesource.com/1150970Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#578470}

chrome/browser/resources/chromeos/login/oobe_hid_detection.css

@@ -2,15 +2,34 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#continue-button-text {
-  text-transform: none;
+:root {
+  --oobe-hid-detection-item-border: 1px solid var(--google-grey-200);
+}
+
+#status-container {
+  margin: 15px 0;
+}
+
+.hid-selection-entry:first-of-type {
+  margin-top: 8px;
+}
+
+.hid-selection-entry {
+  border-top: var(--oobe-hid-detection-item-border);
+  color: var(--google-grey-900);
+  font-size: 13px;
+  min-height: 48px;
+}
+
+.hid-selection-entry:last-of-type {
+  border-bottom: var(--oobe-hid-detection-item-border);
 }
 
 #keyboard-icon,
 #mouse-icon {
-  --iron-icon-height: 32px;
-  --iron-icon-width: 32px;
-  padding-right: 8px;
+  --iron-icon-height: 20px;
+  --iron-icon-width: 20px;
+  padding-inline-end: 8px;
 }
 
 #keyboard-tick,
@@ -21,23 +40,44 @@
 }
 
 #hid-keyboard-pincode {
-  padding-bottom: 4px;
+ padding 15px 0;
 };
 
-#hid-continue-button {
-  padding-inline-end: 18px;
+.bluetooth-keyboard-button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #222;
+  color: #222;
+  display: inline-block;
+  font-size: 16px;
+  height: 38px;
+  line-height: 38px;
+  margin: 0 5px;
+  padding: 0 15px;
+  position: relative;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  vertical-align: baseline;
 }
 
-[slot='bottom-buttons'] {
-  padding: 0 6px; /* = 8px - 2px back button border */
+#bluetooth-enter-key {
+  min-width: 54px;
 }
 
-.hid-selection-entry {
-  border-top: 1px solid lightgrey;
-  min-height: 44px;
-  padding: 0 20px;
+.key-typed {
+  color: #222;
 }
 
-.hid-selection-entry:last-of-type {
-  border-bottom: 1px solid lightgrey;
+.key-next {
+  background: rgb(77, 144, 254);
+  background-image: none;
+  border: 2px solid rgb(77, 144, 254);
+  box-shadow: none;
+  color: #fff;
+}
+
+.key-untyped {
+  border: 1px solid #d4d4d4;
+  box-shadow: 0 0 0 1px #888;
+  color: #666;
 }

chrome/browser/resources/chromeos/login/oobe_hid_detection.html

@@ -84,7 +84,7 @@
           </div>
         </div>
         <div class="layout vertical hid-selection-entry">
-          <div class="flex layout horizontal center">
+          <div id="status-container" class="flex layout horizontal center">
             <hd-iron-icon id="keyboard-icon" alt=""
                 icon1x="oobe-hid-detection-20:keyboard"
                 icon2x="oobe-hid-detection-40:keyboard">
@@ -138,10 +138,9 @@
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal end-justified">
-        <oobe-text-button id="hid-continue-button"
-            inverse on-tap="onHIDContinueTap_"
+        <oobe-text-button inverse on-tap="onHIDContinueTap_"
             disabled="[[continueButtonDisabled]]">
-          <div i18n-content="hidDetectionContinue" id="continue-button-text">
+          <div i18n-content="hidDetectionContinue">
           </div>
         </oobe-text-button>
       </div>

chrome/browser/resources/chromeos/login/oobe_hid_detection.js

@@ -13,6 +13,8 @@
 Polymer({
   is: 'oobe-hid-detection-md',
 
+  behaviors: [I18nBehavior, OobeDialogHostBehavior],
+
   properties: {
     /** "Continue" button is disabled until HID devices are paired. */
     continueButtonDisabled: {

chrome/browser/resources/chromeos/login/oobe_screen_hid_detection.html

 <div class="step hidden" id="hid-detection" hidden role="group"
     i18n-values="aria-label:hidDetectionInvitation">
-  <oobe-hid-detection-md id="oobe-hid-detection-md">
+  <oobe-hid-detection-md id="oobe-hid-detection-md" full-screen-dialog>
   </oobe-hid-detection-md>
 </div>