[ProfilePicker]: Polish based on implementation review.

Bug: 1063856
Change-Id: I718631d454bcd8df2dda8f2d8e55533cb59f2f94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2480566
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: David Roger <droger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#818447}

chrome/app/chromium_strings.grd

@@ -1176,7 +1176,7 @@ Chromium is unable to recover your settings.
           Set up your new Chromium profile
         </message>
         <message name="IDS_PROFILE_PICKER_ASK_ON_STARTUP" desc="Text for the checkbox on the profile picker main view">
-          Ask when I open Chromium
+          Ask when Chromium opens
         </message>
       </if>
     </messages>

chrome/app/chromium_strings_grd/IDS_PROFILE_PICKER_ASK_ON_STARTUP.png.sha1

-630ac6a34bb1915cfee2dd9e8ce472a56e302874
+4cb9c6b65bb30ae0d4391ab58ca3a0d184460e51
\ No newline at end of file

chrome/app/google_chrome_strings.grd

@@ -1192,7 +1192,7 @@ Google Chrome is unable to recover your settings.
           Set up your new Chrome profile
         </message>
         <message name="IDS_PROFILE_PICKER_ASK_ON_STARTUP" desc="Text for the checkbox on the profile picker main view">
-          Ask when I open Chrome
+          Ask when Chrome opens
         </message>
       </if>
 

chrome/app/google_chrome_strings_grd/IDS_PROFILE_PICKER_ASK_ON_STARTUP.png.sha1

-630ac6a34bb1915cfee2dd9e8ce472a56e302874
+4cb9c6b65bb30ae0d4391ab58ca3a0d184460e51
\ No newline at end of file

chrome/browser/resources/signin/profile_picker/icons.js

@@ -18,7 +18,7 @@ element.innerHTML = `
       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
     </g>
 
-    <g id="customize-banner" viewBox="0 0 678 266" width="678" height="266" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="customize-banner" viewBox="0 0 678 180" width="678" height="180" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M70.51 115.677c-2.425 3.218-7.276 3.053-9.621-.248-6.711-9.738-6.63-23.107.97-32.928 7.762-9.903 20.538-12.957 31.453-8.5 3.639 1.65 4.852 6.272 2.426 9.408l-25.227 32.268zM531.612 112.52c1.744-1.18 4.236-.252 4.818 1.77 1.744 6.069-.582 12.811-6.064 16.351-5.566 3.624-12.544 2.95-17.279-1.18-1.578-1.433-1.412-3.961.332-5.141l18.193-11.8zM140 128.499c0 2.519-1.98 4.498-4.5 4.498-2.52.09-4.5-1.979-4.5-4.498 0-2.52 1.98-4.499 4.5-4.499 2.43 0 4.5 1.979 4.5 4.499z" fill="var(--theme-shape-color)"/><path d="M160.541 53.57c.993-4.303 5.297-7.035 9.601-6.042l18.294 4.222c4.304.993 7.035 5.297 6.042 9.602-.993 4.304-5.297 7.036-9.602 6.042L166.5 63.173c-4.304-.91-6.953-5.298-5.959-9.602z" stroke="var(--theme-shape-color)" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M526 69c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11zM608.042 81.007L630.448 83c.944.08 1.631.876 1.545 1.753l-2.146 20.805c-.086.877-.945 1.515-1.889 1.435L605.552 105c-.944-.079-1.631-.876-1.545-1.753l2.146-20.805c.086-.877.945-1.515 1.889-1.435z" stroke="var(--theme-shape-color)" stroke-width="2"/>
     </g>
   </defs>

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

@@ -57,10 +57,10 @@
   }
 
   #removeConfirmationButton {
-    --active-shadow-action-rgb: var(--google-red-500-rgb);
-    --bg-action: var(--google-red-700);
+    --active-shadow-action-rgb: var(--google-red-300-rgb);
+    --bg-action: var(--google-red-300);
     --hover-bg-action: rgba(var(--google-red-700-rgb), .9);
-    --hover-shadow-action-rgb: var(--google-red-500-rgb);
+    --hover-shadow-action-rgb: var(--google-red-300-rgb);
     background-color: var(--bg-action);
     border-radius: 4px;
     color: var(--ink-color-action);
@@ -75,6 +75,16 @@
   #removeConfirmationButton:hover {
     background-color: var(--hover-bg-action);
   }
+
+  @media (prefers-color-scheme: dark) {
+    .warning-message {
+      color: var(--google-grey-500);
+    }
+
+    .statistics {
+      border-color: var(--google-grey-refresh-700);
+    }
+  }
 </style>
 
 <cr-icon-button class="icon-more-vert" id="moreActionsButton"
@@ -97,7 +107,7 @@
       $i18n{profileMenuRemoveText}
       <span class="key-text">[[profileState.localProfileName]]</span>
     </div>
-    <div>
+    <div class="warning-message">
       [[removeWarningText_]]
       <span hidden$="[[!profileState.isSyncing]]" class="key-text">
         [[profileState.userName]]

chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.html

@@ -11,7 +11,6 @@
   }
 
   #wrapperContainer {
-    align-items: center;
     display: flex;
     height: calc(max(100vh, var(--view-min-size)) -
       (var(--banner-height) + var(--avatar-size)/2 + var(--vertical-gap) +

chrome/browser/resources/signin/profile_picker/profile_creation_flow/shared_css.html

@@ -22,9 +22,9 @@
 
     #backButton {
       --cr-icon-button-fill-color: var(--theme-text-color);
-      --cr-icon-button-icon-size: 14px;
+      --cr-icon-button-icon-size: 20px;
       --cr-icon-button-margin-start: 4px;
-      --cr-icon-button-size: 25px;
+      --cr-icon-button-size: 36px;
       margin-top: 4px;
     }
 

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

@@ -14,6 +14,7 @@
 
       @media (prefers-color-scheme: dark) {
         html {
+          --md-background-color: rgba(41, 42, 45, 1);
           background: var(--md-background-color);
         }
       }

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

@@ -96,10 +96,6 @@
     --cr-icon-button-stroke-color: var(--google-grey-refresh-700);
   }
 
-  .footer > * {
-    background-color: rgba(255, 255, 255, .8);
-  }
-
   #browseAsGuestButton {
     margin-inline-start: var(--footer-margin);
   }
@@ -136,10 +132,6 @@
       --cr-icon-button-stroke-color: rgb(48, 48, 50);
       color: var(--google-grey-refresh-500);
     }
-
-    .footer > * {
-      background-color: rgba(0, 0, 0, .5);
-    }
   }
 </style>