[ProfilePicker]: Implement hover + focus on profile card.

As requested by UX, the profile card should have a transparent
background with a border. The color switched on focus or hover.

This CL also reduces the gap on the profiles grid to be 16px in total.

Screenshots:
https://drive.google.com/file/d/1kRnl-yEAKTbuT5Jei5U5h0468BYODUpi/view?usp=sharing&resourcekey=0-xjmIvYdm0vqr64uNCT8Y2Q
https://drive.google.com/file/d/1uMuHJ_RguX0cM54UFMsUztVo6gRMWFiv/view?usp=sharing&resourcekey=0-ZXmsutBgDbe5DN9pfCGLYw

Fixed: 1167101
Change-Id: I0114a80efbcd545d19e34006ea85b3800b131fb8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2632746
Commit-Queue: Monica Basta <msalama@chromium.org>
Auto-Submit: Monica Basta <msalama@chromium.org>
Reviewed-by: David Roger <droger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844067}

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

@@ -9,9 +9,8 @@
   }
 
   cr-button {
-    background-color: var(--profile-card-background-color);
+    --hover-bg-color: none; /* Stick to the profile card hover color. */
     border: none;
-    border-radius: inherit;
     box-shadow: none;
     flex-direction: column;
     height: inherit;
@@ -19,10 +18,6 @@
     width: inherit;
   }
 
-  :host-context(.focus-outline-visible) cr-button:focus {
-    box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
-  }
-
   #avatarContainer {
     height: var(--avatar-icon-size);
     position: relative;
@@ -35,7 +30,8 @@
     --domain-icon-border-size: 2px;
     align-items: center;
     background-color: white;
-    border: var(--domain-icon-border-size) solid var(--profile-card-background-color);
+    border:
+      var(--domain-icon-border-size) solid var(--profile-card-hover-color);
     border-radius: 50%;
     box-shadow: 0 0 2px rgba(60, 64, 67, 0.12), 0 0 6px rgba(60, 64, 67, 0.15);
     display: flex;
@@ -123,7 +119,8 @@
 
 <div id="profileCardContainer">
   <cr-button on-click="onProfileClick_"
-      aria-label="[[i18n('profileCardButtonLabel', profileState.localProfileName)]]">
+      aria-label="[[i18n(
+          'profileCardButtonLabel', profileState.localProfileName)]]">
     <div id="avatarContainer">
       <img class="profile-avatar" alt="" src="[[profileState.avatarIcon]]">
       <div id="iconContainer" hidden="[[!profileState.isManaged]]">

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

@@ -51,7 +51,7 @@
 
   #profileCardContainer {
     align-items: center;
-    background-color: var(--profile-card-background-color);
+    background-color: var(--profile-card-hover-color);
     border-radius: 12px 0 0 12px;
     display: flex;
     flex-direction: column;

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

@@ -55,9 +55,10 @@
   }
 
   .profiles-container {
-    --grid-gutter: 16px;
+    --grid-gutter: 8px;
     align-items: center;
     display: grid;
+    /* Actual gap: --grid-gutter + 2 * --profile-item-margin = 16px */
     grid-column-gap: var(--grid-gutter);
     grid-row-gap: var(--grid-gutter);
     grid-template-columns: repeat(auto-fit, calc(var(--profile-item-width) +
@@ -74,7 +75,8 @@
 
   .profile-item {
     align-items: center;
-    border-radius: 12px;
+    border: 1px solid var(--google-grey-300);
+    border-radius: 8px;
     display: flex;
     flex-direction: column;
     height: var(--profile-item-height);
@@ -83,9 +85,13 @@
     width: var(--profile-item-width);
   }
 
-  #addProfile {
-    border: 1px dashed;
-    border-color: var(--google-grey-400);
+  .profile-item:focus-within,
+  .profile-item:hover {
+    background-color: var(--profile-card-hover-color);
+  }
+
+  #addProfile.profile-item {
+    border: 1px dashed var(--google-grey-300);
     position: relative;
   }
 
@@ -130,9 +136,9 @@
       background: url(images/dark_mode_right_banner_image.svg);
     }
 
-    #addProfile {
+    .profile-item,
+    #addProfile.profile-item {
       border-color: var(--google-grey-refresh-700);
-      position: relative;
     }
 
     cr-icon-button[iron-icon='profiles:add'] {

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

@@ -5,13 +5,13 @@
       --scrollbar-width: 4px;
       --scrollbar-background: var(--google-grey-refresh-100);
       --footer-margin: 40px;
-      --profile-card-background-color: var(--md-background-color);
+      --profile-card-hover-color: var(--md-background-color);
     }
 
     @media (prefers-color-scheme: dark) {
       :host {
         --scrollbar-background: var(--google-grey-800);
-        --profile-card-background-color: var(--google-grey-800);
+        --profile-card-hover-color: var(--google-grey-800);
       }
     }