[CrOS MultiDevice] Setup Flow Password Page synced to red line specs

Note that fixing the bolded header in this CL applies to all the setup
flow headers. I also refactored so that top margin of the 'additional
content' slot is determined page-by-page and made a min-height for the
'message' slot because it made the padding a little easier to follow.

Spec:
https://drive.google.com/file/d/1UqHV67OrdGT0_G0L98nV5IVr26OkHu9F/view?usp=sharing

Screenshot of new Password page: http://screen/dZpuf7kq8Mp

There were two minor changes made since that annotated screenshot.
  (1) The margin between the photo and email was increased from 4 to 8 px
  (2) The email is set slightly lower relative to the user photo (the <div>
     containing them is not using 'align-item: center'

Change (1) is straight out of the spec above. Change (2) is tentative
pending confirmation or explicit specs from UX.


Bug: 878643
Change-Id: I3032617f8bd14ee74973dcbf5727e83e1f0e7438
Reviewed-on: https://chromium-review.googlesource.com/1246960
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#594538}

ui/webui/resources/cr_components/chromeos/multidevice_setup/password_page.html

@@ -11,20 +11,22 @@
     <style include="multidevice-setup-shared">
       #user-info-container  {
         @apply --layout-horizontal;
-        border: 1px solid rgb(95, 99, 104);
-        border-radius: 15px;
-        color: rgb(95, 99, 104);
-        margin: 35px 0;
-        padding: 5px 20px 5px 5px;
-        width: fit-content;
+        align-items: center;
+        color: var(--paper-grey-600);
       }
 
       #profile-photo {
         border-radius: 50%;
         height: 20px;
-        margin-right: 4px;
+        margin-right: 8px;
         width: 20px;
       }
+
+      #passwordInput {
+        height: 32px;
+        margin-top: 64px;
+        width: 560px;
+      }
     </style>
     <ui-page header-text="[[headerText]]" icon-name="google-g">
       <div id="content-container" slot="additional-content">
@@ -38,7 +40,8 @@
             error-message="[[i18n('wrongPassword')]]"
             value="{{inputValue_}}"
             aria-disabled="false"
-            on-change="onUserPressedEnter_">
+            on-change="onUserPressedEnter_"
+            autofocus>
         </cr-input>
       </div>
     </ui-page>

ui/webui/resources/cr_components/chromeos/multidevice_setup/password_page.js

@@ -99,8 +99,6 @@ Polymer({
       this.profilePhotoUrl_ = profileInfo.profilePhotoUrl;
       this.email_ = profileInfo.email;
     });
-
-    this.$.passwordInput.focus();
   },
 
   /** Overridden from UiPageContainerBehavior. */

ui/webui/resources/cr_components/chromeos/multidevice_setup/setup_succeeded_page.html

@@ -19,7 +19,7 @@
                               url(setup_succeeded_icon_1x.png) 1x,
                               url(setup_succeeded_icon_2x.png) 2x);
         height: 156px;
-        margin-top: 20px;
+        margin-top: 64px;
         width: 416px;
       }
     </style>

ui/webui/resources/cr_components/chromeos/multidevice_setup/start_setup_page.html

@@ -12,6 +12,7 @@
     <style include="multidevice-setup-shared">
       #selector-and-details-container {
         @apply --layout-horizontal;
+        margin-top: 48px;
       }
 
       #deviceDropdown {

ui/webui/resources/cr_components/chromeos/multidevice_setup/ui_page.html

@@ -16,18 +16,17 @@
         color: var(--google-grey-900);
         font-family: 'Google Sans';
         font-size: 28px;
+        font-weight: normal;
         line-height: 28px;
         margin: 0;
         padding-top: 36px;
       }
 
       #message-container {
+        box-sizing: border-box;
+        min-height: 32px;
         padding-top: 16px;
       }
-
-      #additional-content-container {
-        padding-top: 48px;
-      }
     </style>
     <iron-icon icon="[[computeIconIdentifier_(iconName)]]"></iron-icon>
     <h1>[[headerText]]</h1>