UX corrections to new FRE Welcome page.

chrome/browser/resources/welcome/welcome.css

Index: chrome/browser/resources/welcome/welcome.css
diff --git a/chrome/browser/resources/welcome/welcome.css b/chrome/browser/resources/welcome/welcome.css
index 7476dd2149cf66d319fdf0c1366dd83959e68a7c..be1f26192615ebda04b692ec06adada5262c0166 100644
--- a/chrome/browser/resources/welcome/welcome.css
+++ b/chrome/browser/resources/welcome/welcome.css
@@ -9,9 +9,8 @@ body {
   flex-direction: column;
   font-size: 100%;
   justify-content: center;
-  min-height: 96vh;
+  min-height: 100vh;
   overflow-y: hidden;
-  padding: 16px;
 }
 
 @keyframes slideUpContent {
@@ -42,14 +41,14 @@ body {
 
 @keyframes spin {
   from {
-    transform: rotate(-1440deg);
+    transform: rotate(-1440deg) scale(0.8);
   }
 }
 
 @keyframes fadeInAndSlideDownShadow {
   from {
     opacity: .6;
-    top: 8px;
+    top: 0;
   }
 }
 
@@ -59,9 +58,44 @@ body {
   }
 }
 
-.spacer {
-  flex: 1;
-  max-height: 96px;
+@keyframes colorize {
+  from {
+    -webkit-filter: grayscale(100%);
+    opacity: .6;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  7.61% {
+    transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  11.41% {
+    transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  15.12% {
+    transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  18.92% {
+    transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  22.72% {
+    transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  30.23% {
+    transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  50.25% {
+    transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  70.27% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  100% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
 }
 
 .content {
@@ -79,6 +113,7 @@ body {
   font-size: 2.125em;
   margin-bottom: .25em;
   margin-top: 1.5em;
+  text-align: center;
 }
 
 .subheading {
@@ -86,41 +121,25 @@ body {
   color: var(--google-grey-500);
   font-size: 1em;
   margin-top: .25em;
+  text-align: center;
 }
 
 .logo {
-  animation: fadeIn 600ms both;
+  animation: fadeIn 600ms both, bounce 1s 600ms linear both;
   height: 96px;
   position: relative;
   width: 96px;
 }
 
 .logo-icon {
-  animation: scaleUp 600ms 500ms cubic-bezier(.5, -.5, 0, 2.25) both;
-  background: white;
-  border-radius: 50%;
+  animation: spin 2.4s cubic-bezier(.4, .2, 0, 1) both,
+             colorize 300ms 700ms linear both;
+  content: -webkit-image-set(url(chrome://welcome/logo.png) 1x,
+                             url(chrome://welcome/logo2x.png) 2x);
   height: 96px;
-  width: 96px;
-}
-
-.logo-bw,
-.logo-color {
-  animation: fadeIn 600ms 500ms both,
-             spin 2.4s cubic-bezier(.4, .2, 0, 1) both;
-  content: -webkit-image-set(url(logo.png) 1x, url(logo2x.png) 2x);
-  left: -5px;
+  left: 0;
   position: absolute;
-  top: -5px;
-  width: 106px;
-}
-
-.logo-bw {
-  -webkit-filter: grayscale(100%);
-}
-
-.logo-color {
-  animation: fadeIn 300ms 700ms both,
-             spin 2.4s cubic-bezier(.4, .2, 0, 1) both;
+  width: 96px;
 }
 
 .logo-shadow {
@@ -157,10 +176,14 @@ body {
 .action {
   background: var(--google-blue-500);
   color: white;
-  font-size: .75em;
+  font-size: .875em;
   font-weight: 500;
   line-height: 2.5em;
-  padding: 0 1.25em;
+  padding: 0.1em 1.5em;
+}
+
+.action:active {
+  background: var(--google-blue-500);
 }
 
 .action:focus {
@@ -168,9 +191,9 @@ body {
 }
 
 .link {
-  color: var(--google-blue-500);
+  color: var(--google-blue-700);
   display: inline-block;
-  font-size: .75em;
+  font-size: .875em;
   margin: 1.5em;
   text-align: center;
   text-decoration: none;
@@ -184,8 +207,10 @@ body {
   -webkit-mask-image: url(chrome://welcome/watermark.svg);
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 100%;
+  animation: fadeIn 1s cubic-bezier(0, 0, .2, 1) both;
   background: var(--paper-grey-400);
+  bottom: 24px;
   height: 24px;
-  margin-top: 48px;
+  position: absolute;
   width: 74px;
 }