Commit f0a14007 authored by Victor Hugo Vianna Silva's avatar Victor Hugo Vianna Silva Committed by Commit Bot

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: default avatarJan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Victor Vianna <victorvianna@google.com>
Cr-Commit-Position: refs/heads/master@{#798577}
parent 944fde32
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
--computer-icon-padding-bottom: 10px; --computer-icon-padding-bottom: 10px;
--computer-icon-padding-sides: 8px; --computer-icon-padding-sides: 8px;
--hairline-border: 1px; --hairline-border: 1px;
--hairline-color : var(--google-grey-200);
--outer-icon-size: 48px; --outer-icon-size: 48px;
} }
...@@ -18,7 +19,7 @@ ...@@ -18,7 +19,7 @@
} }
settings-avatar-icon { settings-avatar-icon {
border: var(--hairline-border) solid var(--google-grey-refresh-100); border: var(--hairline-border) solid var(--hairline-color);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
...@@ -32,7 +33,7 @@ ...@@ -32,7 +33,7 @@
- var(--computer-icon-padding-bottom)); - var(--computer-icon-padding-bottom));
--iron-icon-width: calc(var(--outer-icon-size) - 2 * var(--hairline-border) --iron-icon-width: calc(var(--outer-icon-size) - 2 * var(--hairline-border)
- 2 * var(--computer-icon-padding-sides)); - 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%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
padding-bottom: var(--computer-icon-padding-bottom); padding-bottom: var(--computer-icon-padding-bottom);
......
...@@ -52,22 +52,27 @@ ...@@ -52,22 +52,27 @@
width: 40px; width: 40px;
} }
#accountStorageOptInButtonsContainer {
padding-bottom: 16px;
}
#devicePasswordsLink { #devicePasswordsLink {
cursor: pointer; cursor: pointer;
padding-top: 16px;
} }
#devicePasswordsLinkIcon { #devicePasswordsLinkIcon {
border-color: gray; border-color: var(--google-grey-200);
border-radius: 20px; border-radius: 20px;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
height: 19px; height: 17px;
margin-inline-end: 16px; margin-inline-end: 16px;
padding-bottom: 10px; padding-bottom: 10px;
padding-inline-end: 8px; padding-inline-end: 8px;
padding-inline-start: 8px; padding-inline-start: 8px;
padding-top: 11px; padding-top: 11px;
width: 24px; width: 22px;
} }
</style> </style>
<settings-toggle-button id="passwordToggle" <settings-toggle-button id="passwordToggle"
...@@ -166,7 +171,8 @@ ...@@ -166,7 +171,8 @@
<div slot="body" class="list-frame"> <div slot="body" class="list-frame">
<div hidden$="[[!eligibleForAccountStorage_]]" <div hidden$="[[!eligibleForAccountStorage_]]"
id="accountStorageButtonsContainer"> 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> <settings-avatar-icon id="profileIcon"></settings-avatar-icon>
<div class="flex cr-padded-text"> <div class="flex cr-padded-text">
<div id="accountStorageOptInBody" <div id="accountStorageOptInBody"
...@@ -188,7 +194,7 @@ ...@@ -188,7 +194,7 @@
$i18n{optOutAccountStorageLabel} $i18n{optOutAccountStorageLabel}
</cr-button> </cr-button>
</div> </div>
<div id="devicePasswordsLink" class="cr-row first two-line list-item" <div id="devicePasswordsLink" class="cr-row two-line list-item"
hidden$="[[!shouldShowDevicePasswordsLink_]]" hidden$="[[!shouldShowDevicePasswordsLink_]]"
on-click="onDevicePasswordsLinkClicked_"> on-click="onDevicePasswordsLinkClicked_">
<iron-icon id="devicePasswordsLinkIcon" icon="cr:computer"> <iron-icon id="devicePasswordsLinkIcon" icon="cr:computer">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment