[a11y] Update style of blocked websites page to improve contrast

The designer (@johnpcassidy) proposed a new layout for the supervised
users page: https://markup.googleplex.com/projects/1499

Due to urgency, we decided to apply first the changes related to
accessibility (see b/72032640).

Refactoring the layout was postponed to b/123570920, since it requires
major changes in configuration for different devices (phone, tablet,
etc.).

Before this CL:
https://screenshot.googleplex.com/yJoLNh5Mgq8
https://screenshot.googleplex.com/sxHTcQEf5Vz

After this CL:
https://screenshot.googleplex.com/LybxVLYWU69
https://screenshot.googleplex.com/n2mXDnWmweF

Changes:
1) Updated font colors, size and line heights.
2) Changed the size of the avatar from 45px to 36px to
   make it more proportional.
3) Deleted some unused tags.

Bug: 923026,b/72032640
Change-Id: If5c7e70c7253988728f6369efc9aa789256ce0da
Reviewed-on: https://chromium-review.googlesource.com/c/1443691
Commit-Queue: Felipe Cerqueira <cerqueira@google.com>
Reviewed-by: Henrique Grandinetti <hgrandinetti@chromium.org>
Reviewed-by: Marc Treib <treib@chromium.org>
Cr-Commit-Position: refs/heads/master@{#627985}

components/supervised_user_error_page/resources/supervised_user_block_interstitial.css

@@ -12,30 +12,23 @@ a {
 }
 
 button {
+  background: #1A73E8;
   border: 0;
   border-radius: 2px;
   box-sizing: border-box;
-  color: #fff;
+  color: #ffffff;
   cursor: pointer;
-  float: right;
-  font-family: Roboto;
+  font-family: 'Google Sans', Roboto, sans-serif;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 550;
+  line-height: 16pt;
   margin: 0;
-  padding: 10px 24px;
+  padding: 7px 24px;
   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
   user-select: none;
 }
 
-[dir='rtl'] button {
-  float: left;
-}
-
-.primary-button {
-  background: rgb(66, 133, 244);
-}
-
-.primary-button:active {
+button:active {
   background: rgb(50, 102, 213);
   outline: 0;
 }
@@ -44,6 +37,18 @@ button:hover {
   box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
 }
 
+[dir='rtl'] button {
+  float: left;
+}
+
+.ask-permission-button {
+  float: right;
+}
+
+.go-back-button {
+  float: left;
+}
+
 #details {
   color: #696969;
   margin: 45px 0 50px;
@@ -83,11 +88,6 @@ h1 {
   margin-bottom: 16px;
 }
 
-h2 {
-  font-size: 1.2em;
-  font-weight: normal;
-}
-
 html {
   -webkit-text-size-adjust: 100%;
   font-size: 125%;
@@ -103,13 +103,28 @@ html {
 
 .main-frame-blocked {
   box-sizing: border-box;
-  font-size: 1em;
-  line-height: 1.6em;
   margin: 100px auto 0;
   max-width: 600px;
   width: 100%;
 }
 
+/* "Ask your Parent" title */
+.main-frame-blocked h1 {
+  color: #202124;
+  font-family: 'Google Sans', Roboto, sans-serif;
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 32px;
+}
+
+/* "You need permission..." message */
+.main-frame-blocked p {
+  color: #3c4043;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: normal;
+}
+
 #main-message > p:not([hidden]) {
   display: inline;
 }
@@ -138,13 +153,13 @@ html {
   content: -webkit-image-set(
       url(default_100_percent/logo_avatar_circle_blue_color.png) 1x,
       url(default_200_percent/logo_avatar_circle_blue_color.png) 2x);
-  height: 45px;
+  height: 36px;
   margin-bottom: 5px;
   margin-right: 15px;
   margin-top: 5px;
   position: relative;
   user-select: none;
-  width: 45px;
+  width: 36px;
 }
 
 #feedback {
@@ -154,20 +169,22 @@ html {
 .custodian-information {
   align-items: center;
   display: flex;
-  font-size: 15px;
+  font-family: Roboto;
   font-weight: 400;
   line-height: normal;
   margin-top: 14px;
 }
 
 .custodian-name {
-  color: rgba(0, 0, 0, 0.87);
-  padding: 1px 0;
+  color: #202124;
+  font-size: 16px;
+  line-height: 24px;
 }
 
 .custodian-email {
-  color: rgb(0, 0, 0, 0.54);
-  padding: 1px 0;
+  color: #5f6368;
+  font-size: 14px;
+  line-height: 20px;
 }
 
 

components/supervised_user_error_page/resources/supervised_user_block_interstitial.html

@@ -5,6 +5,7 @@
 <meta name="viewport"
     content="initial-scale=1, minimum-scale=1, width=device-width">
 <title>$i18n{blockPageTitle}</title>
+<link href="https://fonts.googleapis.com/css?family=Google+Sans" rel="stylesheet">
 <link rel="stylesheet" href="supervised_user_block_interstitial.css">
 <script src="../../../ui/webui/resources/js/cr.js"></script>
 <script src="../../../ui/webui/resources/js/util.js"></script>
@@ -38,7 +39,7 @@
     </div>
   </div>
   <div class="button-container">
-    <button id="request-access-button" class="primary-button">
+    <button id="request-access-button" class="ask-permission-button">
       $i18n{requestAccessButton}
     </button>
     <div id="details-button-container">
@@ -49,7 +50,7 @@
         $i18n{hideDetailsLink}
       </button>
     </div>
-    <button id="back-button" class="details-button small-link" hidden>
+    <button id="back-button" class="go-back-button" hidden>
       $i18n{backButton}
     </button>
   </div>

components/supervised_user_error_page/supervised_user_error_page.cc

@@ -20,8 +20,8 @@ namespace supervised_user_error_page {
 
 namespace {
 
-static const int kAvatarSize1x = 45;
-static const int kAvatarSize2x = 90;
+static const int kAvatarSize1x = 36;
+static const int kAvatarSize2x = 72;
 
 bool ReasonIsAutomatic(FilteringBehaviorReason reason) {
   return reason == ASYNC_CHECKER || reason == BLACKLIST;