Commit 592b710e authored by Friedrich Horschig's avatar Friedrich Horschig Committed by Commit Bot

[Passwords] Unify leak check icon sizes

This CL ensures that the icons align exactly with our mocks:
- the blue icon is filled instead of only a blue checkmark
- the red warning triangle has a light-red halo
- the spinner has the same size as the icons

Additionally, the sum of paddings, margins and sizes is now constant for
all icons which ensures that the title doesn't jump when icons change.

Find screenshots in https://crbug.com/1047726#c50

Bug: 1047726
Change-Id: I4c96bf197d6b670ff2b1788ff5f2b8ce493212fe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2096744Reviewed-by: default avatarJan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Friedrich [CET] <fhorschig@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748818}
parent ae9aeb4b
...@@ -17,15 +17,27 @@ ...@@ -17,15 +17,27 @@
<style include="settings-shared"> <style include="settings-shared">
iron-icon, iron-icon,
#progressSpinner { #progressSpinner {
--paper-spinner-stroke-width: 2px;
height: 16px;
padding-inline-end: 20px; padding-inline-end: 20px;
width: 16px;
} }
iron-icon.has-leaks { iron-icon.has-leaks {
--iron-icon-fill-color: var(--google-red-600); --iron-icon-fill-color: var(--google-red-600);
background: radial-gradient(circle 12px at 12px,
#FCE8E6 100%,
transparent 100%);
margin-inline-start: -4px;
padding-bottom: 4px;
padding-inline-end: 20px;
padding-inline-start: 4px;
padding-top: 4px;
} }
iron-icon.no-leaks { iron-icon.no-leaks {
--iron-icon-fill-color: var(--google-blue-600); --iron-icon-fill-color: var(--google-blue-600);
background-size: 16px 16px;
} }
</style> </style>
......
...@@ -199,7 +199,7 @@ Polymer({ ...@@ -199,7 +199,7 @@ Polymer({
*/ */
getStatusIcon_(status, leakedPasswords) { getStatusIcon_(status, leakedPasswords) {
if (!this.hasLeaksOrErrors_(status, leakedPasswords)) { if (!this.hasLeaksOrErrors_(status, leakedPasswords)) {
return 'cr:check'; return 'settings:check-circle';
} }
if (this.hasLeakedCredentials_(leakedPasswords)) { if (this.hasLeakedCredentials_(leakedPasswords)) {
return 'cr:warning'; return 'cr:warning';
......
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