chromeos: Fix styling for OOBE OS sync consent dialog

Update styles for the dialog used with SplitSettingsSync to match
go/cros-sync-mock. Remove an unused style from the legacy dialog.

Legacy dialog (unchanged):
https://screenshot.googleplex.com/1P8qoyMnKOX

SplitSettingsSync dialog (updated):
https://screenshot.googleplex.com/mXsGDhWqWsC

Bug: 1023854
Change-Id: Iba6aaad03db7d9d457d8d32a15db4e51cb0e33df
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2006487
Commit-Queue: James Cook <jamescook@chromium.org>
Reviewed-by: Toni Baržić <tbarzic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#733832}

chrome/browser/resources/chromeos/login/sync_consent.css

@@ -32,3 +32,19 @@ cr-checkbox {
   --cr-checkbox-label-padding-start: 12px;
 }
 
+/* Styles used with SplitSettingsSync. */
+
+#osSyncConsentFooter {
+  border-bottom: solid 1px var(--google-grey-300);
+  border-top: solid 1px var(--google-grey-300);
+  padding: 16px 0;
+}
+
+#osSyncConsentToggleName {
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+#osSyncConsentToggleDescription {
+  color: var(--google-grey-700);
+}

chrome/browser/resources/chromeos/login/sync_consent.html

@@ -29,8 +29,7 @@
               src1x="chrome://oobe/logo_24px-1x.svg"
               src2x="chrome://oobe/logo_24px-2x.svg">
           </hd-iron-icon>
-          <div class="overview-list-item-text flex layout vertical
-              center-justified">
+          <div class="flex layout vertical center-justified">
             <div role="heading" aria-level="2" class="overview-list-item-title"
               consent-description>
                 [[i18nDynamic(locale, 'syncConsentScreenChromeSyncName')]]
@@ -44,8 +43,7 @@
           <hd-iron-icon class="overview-list-item-icon"
               icon1x="sync-consent-32:googleg" icon2x="sync-consent-64:googleg">
           </hd-iron-icon>
-          <div class="overview-list-item-text flex layout vertical
-              center-justified">
+          <div class="flex layout vertical center-justified">
             <div role ="heading" aria-level="2" class="overview-list-item-title"
               consent-description>
                 [[i18nDynamic(locale,
@@ -82,19 +80,18 @@
         [[i18nDynamic(locale, 'osSyncConsentTitle')]]
       </h1>
       <div slot="footer" class="layout vertical">
-        <div class="overview-list-item flex layout horizontal center">
-          <div class="overview-list-item-text flex layout vertical
-              center-justified">
-            <div role="heading" aria-level="2" class="overview-list-item-title"
-                id="enableOsSyncLabel" consent-description>
+        <div id="osSyncConsentFooter" class="flex layout horizontal center">
+          <div class="flex layout vertical center-justified">
+            <div role="heading" aria-level="2"  id="osSyncConsentToggleName"
+                consent-description>
               [[i18nDynamic(locale, 'osSyncConsentToggleName')]]
             </div>
-            <div class="overview-list-item-description" consent-description>
+            <div id="osSyncConsentToggleDescription" consent-description>
               [[i18nDynamic(locale, 'osSyncConsentToggleDescription')]]
             </div>
           </div>
           <cr-toggle id="enableOsSyncToggle" checked
-              aria-labelledby="enableOsSyncLabel">
+              aria-labelledby="osSyncConsentToggleName">
           </cr-toggle>
         </div>
       </div>