md settings: Move setup pin error message.

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

 <link rel="import" href="chrome://resources/html/assert.html">
 <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="../i18n_setup.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="lock_screen_constants.html">
 <link rel="import" href="pin_keyboard.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <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);
       }
 
       .error > iron-icon {
         --iron-icon-fill-color: var(--paper-red-500);
       }
 
+      .warning {
+        color: var(--paper-grey-700);
+      }
+
+      .warning > iron-icon {
+        --iron-icon-fill-color: var(--paper-grey-700);
+      }
+
       #pinKeyboardDiv {
         justify-content: center;
       }
+
+      #problemMessage {
+        font-size: 10px;
+      }
     </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. -->

[stevenjb, 2017/05/15 18:51:12]

nit: 'Id is needed for tests' is common enough that we generally don't comment
it.

[sammiequon, 2017/05/15 19:45:15]

Done.

+            <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>
 
         <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>