md settings: Move setup pin error message.

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
index 040c5cbc932ba25c5920f9ee7f196d66a5b87ddf..9dd1aab049b83f6aac2c09d75b49683bc4cf6d20 100644
--- a/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
+++ b/chrome/browser/resources/settings/people_page/setup_pin_dialog.html
@@ -11,14 +11,6 @@
 <dom-module id="settings-setup-pin-dialog">
   <template>
     <style include="settings-shared">
-      .warning {
-        color: var(--paper-grey-700);
-      }
-
-      .warning > iron-icon {
-        --iron-icon-fill-color: var(--paper-grey-700);
-      }
-
       .error {
         color: var(--paper-red-500);
       }
@@ -30,24 +22,36 @@
       #pinKeyboardDiv {
         justify-content: center;
       }
+
+      #problemMessage {
+        font-size: 10px;
+      }
+
+      .warning {
+        color: var(--paper-grey-700);

[jdufault, 2017/05/11 18:55:32]

Why did you move the warning classes? It'd be nice to keep it next to the error
classes.

[sammiequon, 2017/05/11 19:03:17]

Done. I just liked them alphabetized :-P.

+      }
+
+      .warning > iron-icon {
+        --iron-icon-fill-color: var(--paper-grey-700);
+      }
     </style>
 
     <dialog is="cr-dialog" id="dialog" on-close="close"
         close-text="$i18n{close}">
       <div class="title">[[getTitleMessage_(isConfirmStep_)]]</div>
       <div class="body">
-        <!-- Warning/error; only shown if title is hidden. Id is needed for
-             tests. -->
-        <div id="problemDiv" class$="[[problemClass_]] settings-box first"
-             hidden$="[[!hasProblem_(problemMessage_)]]">
-          <iron-icon icon="settings:warning"></iron-icon>
-          <span class="middle">[[problemMessage_]]</span>
-        </div>
-
         <!-- Pin keyboard -->
         <div id="pinKeyboardDiv" class="settings-box continuation">
           <pin-keyboard id="pinKeyboard" on-pin-change="onPinChange_"
-              on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}">
+              on-submit="onPinSubmit_" value="{{pinKeyboardValue_}}"
+              has-error$="[[hasError_(problemMessage_, problemClass_)]]">
+            <!-- Warning/error; only shown if title is hidden. Id is needed for
+                 tests. -->
+            <div id="problemDiv" class$="[[problemClass_]]"
+                hidden$="[[!problemMessage_]]" problem>
+              <iron-icon icon="settings:error-outline"></iron-icon>
+              <span id="problemMessage">[[problemMessage_]]</span>
+            </div>
           </pin-keyboard>
         </div>