Add EDU login flow: CSS fixes

Address comments to UI implementation - update margins and logo size.
New screenshots:
http://slides/1Trd6FeBKqts4iAfYpE8lzzgpeaB_hE8vL8tTY5YA2PI

Bug: 1054798
Change-Id: Ic7bf2d72f5cb6cf07b27b95159b06d838283255b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132398Reviewed-by: Kush Sinha <sinhak@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Anastasiia Nikolaienko <anastasiian@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756012}

chrome/browser/resources/chromeos/edu_login/edu_login_css.html

@@ -8,11 +8,12 @@
       font-size: 2em;
       font-weight: normal;
       margin-bottom: 16px;
-      margin-top: 28px;
+      margin-top: 20px;
     }
 
     p {
       line-height: 1.5;
+      margin: 0;
       white-space: pre-line;
     }
 

chrome/browser/resources/chromeos/edu_login/edu_login_parent_info.html

@@ -6,8 +6,8 @@
   .info-item {
     display: flex;
     flex: auto;
-    padding-bottom: 10px;
-    padding-top: 10px;
+    padding-bottom: 16px;
+    padding-top: 16px;
   }
 
   .info-item:not(:last-child) {
@@ -16,11 +16,13 @@
 
   .info-icon {
     flex-basis: 24px;
-    padding-top: 10px;
   }
 
   .info-title {
+    display: flex;
     flex: 1;
+    flex-direction: column;
+    justify-content: center;
     padding-inline-start: 24px;
   }
 </style>
@@ -29,8 +31,8 @@
   <span slot="main">
     <div class="main-padding">
       <if expr="_google_chrome">
-        <img id="google-full-logo" src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"
-          alt="">
+        <img class="google-full-logo"
+            src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
       </if>
 
       <h1>$i18n{parentInfoTitle}</h1>

chrome/browser/resources/chromeos/edu_login/edu_login_parent_signin.html

@@ -8,6 +8,7 @@
     display: inline-flex;
     font-weight: 500;
     letter-spacing: .25px;
+    margin-bottom: 16px;
     max-width: 100%;
     min-width: 240px;
     padding: 3px 5px;
@@ -44,6 +45,7 @@
 
   .input-group {
     margin-bottom: 40px;
+    margin-top: 32px;
   }
 
   .field-wrapper {
@@ -136,8 +138,8 @@
   <span slot="main">
     <div class="main-padding">
       <if expr="_google_chrome">
-        <img id="google-full-logo" src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"
-            alt="">
+        <img class="google-full-logo"
+            src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
       </if>
       <h1>[[getParentSigninTitle_(parent)]]</h1>
 

chrome/browser/resources/chromeos/edu_login/edu_login_parents.html

@@ -31,6 +31,10 @@
     height: var(--profile-icon-size);
     width: var(--profile-icon-size);
   }
+
+  #parentsListBody {
+    margin-bottom: 16px;
+  }
 </style>
 
 <edu-login-template>
@@ -41,8 +45,8 @@
             src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
       </if>
       <h1>$i18n{parentsListTitle}</h1>
-      <p id="parentsListBody" aria-hidden="true" class="secondary">
-        $i18n{parentsListBody}
+      <p id="parentsListBody" aria-hidden="true"
+          class="secondary">$i18n{parentsListBody}
       </p>
     </div>
     <div tabindex="0" role="listbox" aria-labelledby="parentsListBody">

chrome/browser/resources/chromeos/edu_login/edu_login_welcome.html

@@ -2,6 +2,7 @@
   .main-padding {
     display: flex;
     flex-direction: column;
+    height: calc(100% - 90px);
   }
 
   .image-container {