[ProfilePicker]: Improve css and dark mode support.

Screenshot:
https://drive.google.com/file/d/1Dzm0pf53Dt8vpupSamZnmApXmWRAPhoY/view?usp=sharing
https://drive.google.com/file/d/13uoDJZewRqDM5PE9cUoWtFXUFy1E1mIY/view?usp=sharing

Bug: 1063856
Change-Id: I2cbaa99ac61ea87ce1caa7a58952b7437f388769
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2339486Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795398}

chrome/browser/resources/signin/profile_picker/profile_card.html

 <style>
   cr-button {
-    --text-color: inherit;
     background-color: rgb(248, 249, 250);
     border: none;
     border-radius: inherit;
     box-shadow: none;
+    color: var(--cr-primary-text-color);
     flex-direction: column;
     height: inherit;
     padding: 0;
     width: inherit;
   }
 
+  @media (prefers-color-scheme: dark) {
+    cr-button {
+      background-color: var(--google-grey-800);
+    }
+  }
+
   :host-context(.focus-outline-visible) cr-button:focus {
     box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
   }

chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html

-<style include="profile-picker-shared">
+<style include="profile-picker-shared ">
   :host {
     --avatar-icon-size: 74px;
     --banner-img-height: 628px;
     --banner-img-width: 250px;
+    --main-view-min-height: 620px;
+    min-height: var(--main-view-min-height);
+    min-width: 500px;
   }
 
   .banner {
@@ -25,10 +28,17 @@
   }
 
   .title-container {
-    margin: 30px auto;
+    margin: 30px auto 0 auto;
     text-align: center;
   }
 
+  #wrapper {
+    display: flex;
+    height: calc(max(100vh, var(--main-view-min-height)) - 260px);
+    margin-inline-end: 140px;
+    margin-inline-start: 140px;
+  }
+
   .profiles-container {
     --grid-gutter: 24px;
     --profile-item-height:178px;
@@ -41,13 +51,12 @@
     grid-template-columns: repeat(auto-fit, var(--profile-item-width));
     justify-content: center;
     margin: auto;
-    margin-inline-end: 140px;
-    margin-inline-start: 140px;
-    max-height: calc((var(--profile-item-height) + var(--grid-gutter)) * 2 +
-        30px);
+    max-height: 100%;
+    overflow-x: hidden;
     overflow-y: auto;
     padding-inline-end: var(--scrollbar-width);
     padding-inline-start: var(--scrollbar-width);
+    width: 100%;
   }
 
   .profiles-container::-webkit-scrollbar {
@@ -77,7 +86,7 @@
 
   #addProfile {
     border: 1px dashed;
-    border-color:  var(--google-grey-400);
+    border-color: var(--google-grey-400);
   }
 
   cr-icon-button[iron-icon='profiles:add'] {
@@ -110,21 +119,31 @@
   }
 
   cr-checkbox {
-    --cr-checkbox-label-color:  var(--google-grey-refresh-700);
+    --cr-checkbox-label-color:  var(--cr-secondary-text-color);
     --cr-checkbox-label-padding-start: 8px;
     justify-content: flex-end;
     margin-inline-end: 40px;
     margin-inline-start: auto;
+    padding-inline-end: 5px;
+    padding-inline-start: 5px;
   }
 
   @media (prefers-color-scheme: dark) {
-    /* TODO(msalama): Dark mode mocks not ready yet.*/
-    .footer > * {
-      background-color: rgba(0, 0, 0, .5);
+    .profiles-container::-webkit-scrollbar-thumb {
+      background: var(--google-grey-800);
+    }
+
+    #addProfile {
+      border-color: var(--google-grey-refresh-700);
     }
 
-    cr-checkbox {
-      --cr-checkbox-label-color: var(--google-grey-refresh-500);
+    cr-icon-button[iron-icon='profiles:add'] {
+      --cr-icon-button-fill-color: var(--google-grey-refresh-500);
+      --cr-icon-button-stroke-color: rgb(48, 48, 50);
+    }
+
+    .footer > * {
+      background-color: rgba(0, 0, 0, .5);
     }
   }
 </style>
@@ -138,16 +157,20 @@
   <h2>$i18n{mainViewTitle}</h2>
   <h3>$i18n{mainViewSubtitle}</h3>
 </div>
-<div class="profiles-container">
-  <template is="dom-repeat"
-      hidden="[[!profilesList_]]" items="[[profilesList_]]">
-    <profile-card class="profile-item" profile-state="[[item]]"></profile-card>
-  </template>
-  <div id="addProfile" class="profile-item">
-    <!-- TODO(msalama): Add title, aria-label once strings are ready-->
-    <cr-icon-button iron-icon="profiles:add"
-        on-click="onAddProfileClick_">
-    </cr-icon-button>
+<div id="wrapper">
+  <div class="profiles-container">
+    <template is="dom-repeat"
+        hidden="[[!profilesList_]]" items="[[profilesList_]]">
+      <profile-card
+          class="profile-item" profile-state="[[item]]">
+      </profile-card>
+    </template>
+    <div id="addProfile" class="profile-item">
+      <!-- TODO(msalama): Add title, aria-label once strings are ready-->
+      <cr-icon-button iron-icon="profiles:add"
+          on-click="onAddProfileClick_">
+      </cr-icon-button>
+    </div>
   </div>
 </div>
 <div id="rightBanner" class="banner"></div>

chrome/browser/resources/signin/profile_picker/profile_picker_shared_css.html

@@ -5,12 +5,13 @@
     }
 
     h2 {
+      color: var(--cr-primary-text-color);
       font-size: 1.85em;
       font-weight: normal;
     }
 
     h3 {
-      color: var(--google-grey-refresh-700);
+      color: var(--cr-secondary-text-color);
       font-weight: normal;
     }
   </style>