Implement new design for expanded public session pod design

chrome/browser/resources/login/user_pod_template.html

-<div id="user-pod-template" class="pod need-password" hidden>
+<div id="user-pod-template" class="pod" hidden>
+  <div class="user-image-pane">
+    <div class="user-image-container">
+      <img class="user-image" alt>
+    </div>
+    <div class="signed-in-indicator" i18n-content="signedIn"></div>
+    <div class="locked-indicator"></div>
+    <div class="supervised-indicator"></div>
+  </div>
   <div class="main-pane">
-    <div class="signed-in-indicator" i18n-content="signedIn" hidden></div>
-    <div class="user-image-container">
-      <img class="user-image" alt="">
+    <div class="name-container">
+      <div class="name"></div>
+      <div class="learn-more-container">
+        <div class="learn-more"></div>
+      </div>
     </div>
-    <div class="name"></div>
-    <div class="password-area">
-      <div class="password-input-container">
-        <!-- Password Authentication -->
-        <input type="password" class="password"
-               i18n-values="placeholder:passwordHint">
-        <img class="capslock-hint"
-             src="chrome://theme/IDR_LOGIN_PASSWORD_CAPS_LOCK" alt="">
-
-        <!-- User Click Authentication -->
-        <div class="password-label"></div>
+    <div class="auth-container">
+      <!-- Password Authentication -->
+      <div class="password-entry-container">
+        <div class="password-container">
+          <input type="password" class="password"
+                 i18n-values="placeholder:passwordHint">
+        </div>
+        <div class="capslock-hint-container">
+          <img class="capslock-hint"
+               src="chrome://theme/IDR_LOGIN_PASSWORD_CAPS_LOCK" alt>
+        </div>
       </div>
+      <!-- User Click Authentication -->
+      <div class="password-label"></div>
       <div class="custom-icon" hidden></div>
+      <div class="signin-button-container">
+        <button class="signin-button" i18n-content="signinButton"></button>
+      </div>
+      <div class="launch-app-button-container" hidden>
+        <button class="launch-app-button" i18n-content="launchAppButton">
+        </button>
+      </div>
     </div>
-    <button class="signin-button" i18n-content="signinButton"></button>
-    <button class="launch-app-button" i18n-content="launchAppButton" hidden>
-    </button>
-    <div class="locked-indicator" hidden></div>
-    <div class="supervised-indicator" hidden></div>
   </div>
   <div class="action-box-area">
     <div class="custom-appearance action-box-button"></div>
   </div>
   <div class="user-type-icon-area" hidden>
     <div class="custom-appearance user-type-icon-image"></div>
   </div>
   <div class="action-box-menu">
     <div class="action-box-menu-title">
       <span class="action-box-menu-title-name"></span>
       <span class="action-box-menu-title-email"></span>
     </div>
     <div class="action-box-menu-remove">
       <span class="action-box-menu-remove-command"/>
     </div>
     <div class="action-box-remove-user-warning" hidden>
       <div class="action-box-remove-user-warning-text"
           i18n-content="removeUserWarningText" hidden></div>
       <div class="action-box-remove-supervised-user-warning-text"
           i18n-content="removeSupervisedUserWarningText"></div>
       <button class="remove-warning-button
                      custom-appearance button-fancy button-red"
           i18n-content="removeUserWarningButtonTitle"></button>
     </div>
   </div>
   <div class="user-type-bubble">
     <div class="user-type-bubble-header">
       <span class="mp-policy-title"
-          i18n-content="multiProfilesRestrictedPolicyTitle" hidden></span>
+          i18n-content="multiProfilesRestrictedPolicyTitle"></span>
     </div>
     <div class="user-type-bubble-body">
       <span class="mp-policy-not-allowed-msg"
           i18n-content="multiProfilesNotAllowedPolicyMsg" hidden></span>
       <span class="mp-policy-primary-only-msg"
           i18n-content="multiProfilesPrimaryOnlyPolicyMsg" hidden></span>
       <span class="mp-owner-primary-only-msg"
           i18n-content="multiProfilesOwnerPrimaryOnlyMsg" hidden></span>
     </div>
   </div>
 </div>
 
 <!-- Extra elements that are appended to above "user-pod-template" for public
      account user pod. Note that only the children of the template div are
      appended. -->
 <div id="public-account-user-pod-extras-template" hidden>
-  <div class="learn-more"></div>
-  <div class="side-pane-divider"></div>
-  <div class="side-pane-container">
-    <div class="side-pane-contents">
-      <div class="side-pane-name-plus-learn">
-        <div class="side-pane-name"></div>
-        <div class="side-pane-learn-more"></div>
+  <div class="expanded-pane">
+    <div class="expanded-pane-contents">
+      <div class="expanded-pane-name"></div>
+      <div class="reminder" i18n-content="publicAccountReminder"></div>
+      <div class="bottom-container">
+        <div class="expanded-pane-learn-more-container">
+          <div class="expanded-pane-learn-more"></div>
+        </div>
+        <div class="info"></div>
+        <button class="enter-button"
+                i18n-content="publicAccountEnter"
+                i18n-values="aria-label:publicAccountEnterAccessibleName">
+        </button>
       </div>
-      <p class="info"></p>
-      <p class="reminder" i18n-content="publicAccountReminder"></p>
-      <button class="enter-button"
-              i18n-content="publicAccountEnter"
-              i18n-values="aria-label:publicAccountEnterAccessibleName">
-      </button>
     </div>
   </div>
 </div>