Fix design of account-storage opt-in buttons banner

The CL fixes minor UI details in passwords settings, namely:
- The color of the computer icon should be grey-200. The same is done
for the analog icon in the dialog to move a password to the account.
- The icon is resized to be 40px size instead of 42px.
- A gray separator is now displayed between the opt-in buttons and the
link to the device passwords page, with a 16px spacing between them.

Before the CL:
https://screenshot.googleplex.com/ce9c4b15-1427-4cad-8ca0-ab009f14851d
After the CL:
https://screenshot.googleplex.com/5c84c711-7527-4938-a7f4-17ae9f789b45

Bug: 1115955
Change-Id: I61d76f6ca5b522bba99d27b9bc0bead6ac3f3088
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2352806Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Victor Vianna <victorvianna@google.com>
Cr-Commit-Position: refs/heads/master@{#798577}

chrome/browser/resources/settings/autofill_page/password_move_to_account_dialog.html

@@ -4,6 +4,7 @@
       --computer-icon-padding-bottom: 10px;
       --computer-icon-padding-sides: 8px;
       --hairline-border: 1px;
+      --hairline-color : var(--google-grey-200);
       --outer-icon-size: 48px;
    }
 
@@ -18,7 +19,7 @@
   }
 
   settings-avatar-icon {
-    border: var(--hairline-border) solid var(--google-grey-refresh-100);
+    border: var(--hairline-border) solid var(--hairline-color);
     border-radius: 50%;
     display: flex;
     flex-shrink: 0;
@@ -32,7 +33,7 @@
         - var(--computer-icon-padding-bottom));
     --iron-icon-width: calc(var(--outer-icon-size) - 2 * var(--hairline-border)
         - 2 * var(--computer-icon-padding-sides));
-    border: var(--hairline-border) solid var(--google-grey-refresh-100);
+    border: var(--hairline-border) solid var(--hairline-color);
     border-radius: 50%;
     flex-shrink: 0;
     padding-bottom: var(--computer-icon-padding-bottom);

chrome/browser/resources/settings/autofill_page/passwords_section.html

@@ -52,22 +52,27 @@
         width: 40px;
       }
 
+      #accountStorageOptInButtonsContainer {
+        padding-bottom: 16px;
+      }
+
       #devicePasswordsLink {
         cursor: pointer;
+        padding-top: 16px;
       }
 
       #devicePasswordsLinkIcon {
-        border-color: gray;
+        border-color: var(--google-grey-200);
         border-radius: 20px;
         border-style: solid;
         border-width: 1px;
-        height: 19px;
+        height: 17px;
         margin-inline-end: 16px;
         padding-bottom: 10px;
         padding-inline-end: 8px;
         padding-inline-start: 8px;
         padding-top: 11px;
-        width: 24px;
+        width: 22px;
       }
    </style>
     <settings-toggle-button id="passwordToggle"
@@ -166,7 +171,8 @@
       <div slot="body" class="list-frame">
         <div hidden$="[[!eligibleForAccountStorage_]]"
             id="accountStorageButtonsContainer">
-          <div class="cr-row first two-line list-item">
+          <div class="cr-row first two-line list-item"
+              id="accountStorageOptInButtonsContainer">
             <settings-avatar-icon id="profileIcon"></settings-avatar-icon>
             <div class="flex cr-padded-text">
               <div id="accountStorageOptInBody"
@@ -188,7 +194,7 @@
               $i18n{optOutAccountStorageLabel}
             </cr-button>
           </div>
-          <div id="devicePasswordsLink" class="cr-row first two-line list-item"
+          <div id="devicePasswordsLink" class="cr-row two-line list-item"
               hidden$="[[!shouldShowDevicePasswordsLink_]]"
               on-click="onDevicePasswordsLinkClicked_">
             <iron-icon id="devicePasswordsLinkIcon" icon="cr:computer">