Rework quick unlock settings to follow new specs.

chrome/browser/resources/settings/people_page/setup_pin_dialog.html

Index: chrome/browser/resources/settings/people_page/setup_pin_dialog.html
diff --git a/chrome/browser/resources/settings/people_page/setup_pin_dialog.html b/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
new file mode 100644
index 0000000000000000000000000000000000000000..0c6ab823ea8bef1e021d573be1cb65a92573850b
--- /dev/null
+++ b/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
@@ -0,0 +1,68 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="/people_page/pin_keyboard.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-setup-pin-dialog">
+  <template>
+    <style include="settings-shared"></style>
+    <style>
+      iron-icon {
+        -webkit-margin-end: var(--iron-icon-spacing);
+      }
+
+      .warning {
+        color: var(--paper-grey-500);
+      }
+
+      .warning > iron-icon {
+        --iron-icon-fill-color: var(--paper-grey-500);
+      }
+
+      .error {
+        color: var(--paper-red-500);
+      }
+
+      .error > iron-icon {
+        --iron-icon-fill-color: var(--paper-red-500);
+      }
+
+      .align-center {
+        justify-content: center;
+      }
+    </style>
+
+    <dialog is="cr-dialog" id="dialog" on-close="close">
+      <div class="title">[[getTitleMessage_(isConfirmStep_)]]</div>
+      <div class="body">
+        <!-- Warning/error; only shown if title is hidden. -->
+        <div class$="[[problemClass_]] settings-box first"
+             hidden$="[[!hasProblem_(problemMessage_)]]">
+          <iron-icon icon="icons:warning"></iron-icon>
+          <span>[[problemMessage_]]</span>
+        </div>
+
+        <!-- Pin keyboard -->
+        <div class="align-center settings-box continuation">
+          <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
+                        on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}">
+          </pin-keyboard>
+        </div>
+
+        <div class="button-strip">
+          <paper-button class="cancel-button" on-tap="onCancelTap_">
+            $i18n{cancel}
+          </paper-button>
+
+          <paper-button class="action-button" on-tap="onPinSubmit_"
+                        disabled$="[[!enableSubmit_]]">
+            <span>[[getContinueMessage_(isConfirmStep_)]]</span>
+          </paper-button>
+        </div>
+      </div>
+    </dialog>
+  </template>
+
+  <script src="setup_pin_dialog.js"></script>
+</dom-module>