ChromeOS Gaia: Polishing Offline UI and Password changed UI according to specs

https://folio.googleplex.com/login-m44/Redlines

BUG=478449
TEST=manual

Review URL: https://codereview.chromium.org/1100623003

Cr-Commit-Position: refs/heads/master@{#326772}

chrome/browser/resources/chromeos/login/gaia_card.css

@@ -23,29 +23,18 @@
   position: relative;
 }
 
-.top-padding {
-  padding-top: 34px;
+.header-container {
+  padding: 34px 40px 16px;
 }
 
-.bottom-padding {
-  padding-bottom: 34px;
-}
-
-.side-padding {
-  padding-left: 40px;
-  padding-right: 40px;
-}
-
-::content /deep/ a.newgaia-link {
-  color: rgb(66, 133, 244);
-  font-size: 14px;
-  text-decoration: none;
+.footer-container {
+  padding: 24px 40px 34px;
 }
 
 ::content /deep/ .blue-button {
   background-color: rgb(66, 133, 244);
   color: rgb(255, 255, 255);
-  min-width: 88px
+  min-width: 90px;
 }
 
 ::content /deep/ .link-button {
@@ -65,8 +54,23 @@
 }
 
 ::content /deep/ p.gaia-body-text {
-  color: rgb(0, 0, 0);
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 14px;
+  margin: 0;
+}
+
+::content /deep/ p.email,
+::content /deep/ p.enterprise-info {
+  color: rgb(255, 255, 255);
   font-size: 15px;
+  margin: 8px 0 0 0;
+}
+
+::content /deep/ h1.welcome-message {
+  color: rgb(255, 255, 255);
+  font-size: 20px;
+  font-weight: normal;
+  margin-bottom: 0;
 }
 
 #bottom-overlay {

chrome/browser/resources/chromeos/login/gaia_card.html

@@ -22,13 +22,13 @@
   <template>
     <link rel="stylesheet" href="gaia_card.css">
     <div class="gaia-header" vertical layout>
-      <div class="side-padding top-padding" flex vertical layout>
+      <div class="header-container" flex vertical layout>
         <content select=".header"></content>
       </div>
     </div>
     <paper-progress id="progress-bar" indeterminate></paper-progress>
     <div class="gaia-footer" flex vertical layout>
-      <div class="side-padding bottom-padding" flex vertical layout>
+      <div class="footer-container" flex vertical layout>
         <content select=".footer"></content>
       </div>
       <div id="bottom-overlay">

chrome/browser/resources/chromeos/login/gaia_header.html

@@ -17,7 +17,7 @@
     <div flex vertical justified layout start>
       <img self-start src="chrome://theme/IDR_LOGO_AVATAR_CIRCLE_BLUE_COLOR"
            alt>
-      <p id="email">{{email}}</p>
+      <p class="email">{{email}}</p>
     </div>
   </template>
 </polymer-element>

chrome/browser/resources/chromeos/login/gaia_input_form.css

@@ -11,7 +11,21 @@ paper-input-decorator {
   margin-bottom: 50px;
 }
 
-paper-input-decorator /deep/ .unfocused-underline {
-  /* line color when the input is unfocused */
-  background-color: rgb(224, 224, 224);
+#paperInputDecorator /deep/ .unfocused-underline {
+  background-color: rgb(212, 212, 212);
+}
+
+#paperInputDecorator /deep/ .focused-underline {
+  background-color: rgb(66, 133, 244);
+}
+
+#paperInputDecorator /deep/ ::-webkit-input-placeholder,
+#paperInputDecorator /deep/ .label-text {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+#paperInputDecorator {
+  font-size: 15px;
+  margin-bottom: 28px;
+  padding: 0;
 }

chrome/browser/resources/chromeos/login/gaia_password_changed.css

@@ -31,5 +31,5 @@ core-icon[icon='warning'] {
 }
 
 div.margined {
-  margin-top: 30px;
+  margin-bottom: 24px;
 }

chrome/browser/resources/chromeos/login/gaia_password_changed.html

@@ -43,9 +43,11 @@
         <gaia-card id="oldPasswordCard">
           <gaia-header class="header" email="{{email}}">
           </gaia-header>
-          <p class="footer gaia-body-text"
-              i18n-content="passwordChangedTitle">
-          </p>
+          <div horizontal layout center class="footer margined">
+            <p class="gaia-body-text"
+                i18n-content="passwordChangedTitle">
+            </p>
+          </div>
           <gaia-input-form class="footer" id="oldPasswordInput"
               inputtype="password"
               i18n-values="errorMsg:oldPasswordIncorrect;
@@ -63,13 +65,13 @@
           <gaia-header class="header" email="{{email}}">
           </gaia-header>
           <div class="footer">
-            <div horizontal layout center>
+            <div horizontal layout center class="margined">
               <core-icon icon="warning"></core-icon>
               <p flex class="gaia-body-text"
                   i18n-content="passwordChangedProceedAnywayTitle">
               </p>
             </div>
-            <div horizontal layout justified center class="margined">
+            <div horizontal layout justified center>
               <gaia-paper-button noink i18n-content="passwordChangedTryAgain"
                   class="link-button"
                   on-tap="{{onTryAgainClicked}}">

chrome/browser/resources/chromeos/login/offline_gaia.css

@@ -10,16 +10,6 @@
   width: 100%;
 }
 
-p {
-  font-size: 14px;
-  margin-top: 0;
-}
-
-h1 {
-  font-size: 20px;
-  font-weight: normal;
-}
-
 #backButton {
   color: rgb(255, 255, 255);
   left: 0;

chrome/browser/resources/chromeos/login/offline_gaia.html

@@ -41,8 +41,8 @@
       <section flex>
         <gaia-card>
           <div class="header" flex vertical layout end-justified start>
-            <h1 i18n-content="offlineLoginWelcome"></h1>
-            <p hidden?="{{!enterpriseInfo}}">
+            <h1 class="welcome-message" i18n-content="offlineLoginWelcome"></h1>
+            <p class="enterprise-info"  hidden?="{{!enterpriseInfo}}">
               {{enterpriseInfo}}
             </p>
           </div>
@@ -66,12 +66,10 @@
               i18n-values="errorMsg:offlineLoginInvalidPassword;
                            inputLabel:offlineLoginPassword;
                            buttonText:offlineLoginNextBtn">
-            <a href="#" class="newgaia-link"
-                on-tap="{{onForgotPasswordClicked}}"
-                on-keydown="{{onForgotPasswordKeyDown}}"
-                tabindex="0"
-                i18n-content="offlineLoginForgotPasswordBtn">
-            </a>
+            <gaia-paper-button noink class="link-button"
+                i18n-content="offlineLoginForgotPasswordBtn"
+                on-tap="{{onForgotPasswordClicked}}">
+            </gaia-paper-button>
             <paper-action-dialog id="forgotPasswordDlg" autoCloseDisabled
                 backdrop on-keydown="{{onKeyDownOnDialog}}">
               <p i18n-content="offlineLoginForgotPasswordDlg"></p>

chrome/browser/resources/chromeos/login/offline_gaia.js

@@ -75,6 +75,7 @@ Polymer('offline-gaia', (function() {
     switchToEmailCard() {
       this.$.passwordInput.inputValue = '';
       this.$.passwordInput.setValid(true);
+      this.$.emailInput.setValid(true);
       this.$.backButton.hidden = true;
       this.$.animatedPages.selected = 0;
     },