Commit 20706426 authored by Viktor Semeniuk's avatar Viktor Semeniuk Committed by Commit Bot

[Passwords] Applied different styling for icon on dark theme

This change adds different dark theme styling for icon which indicates
exesting of compromised passwords on password check and passwords
section.

Bug: 1047726
Change-Id: I555c1fd1fcc37b71dd65ce3d1ef09c2d6729c24a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2128074
Commit-Queue: Viktor Semeniuk <vsemeniuk@google.com>
Reviewed-by: default avatarJan Wilken Dörrie <jdoerrie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#755295}
parent 53189b68
...@@ -47,6 +47,15 @@ ...@@ -47,6 +47,15 @@
padding-top: 4px; padding-top: 4px;
} }
@media (prefers-color-scheme: dark) {
iron-icon.has-leaks {
--iron-icon-fill-color: var(--google-red-refresh-300);
background: radial-gradient(circle 12px at 12px,
var(--google-grey-900) 100%,
transparent 100%);
}
}
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; background-size: 16px 16px;
...@@ -70,7 +79,6 @@ ...@@ -70,7 +79,6 @@
<div class="settings-box first two-line" id="leakCheckHeader"> <div class="settings-box first two-line" id="leakCheckHeader">
<!-- If the password check concluded, show only a status Icon. --> <!-- If the password check concluded, show only a status Icon. -->
<template is="dom-if" if="[[!isCheckInProgress_(status_)]]"> <template is="dom-if" if="[[!isCheckInProgress_(status_)]]">
<!--TODO(https://crbug.com/1047726) add background to icon-->
<iron-icon class$="[[getStatusIconClass_(status_, leakedPasswords)]]" <iron-icon class$="[[getStatusIconClass_(status_, leakedPasswords)]]"
icon="[[getStatusIcon_(status_, leakedPasswords)]]"> icon="[[getStatusIcon_(status_, leakedPasswords)]]">
</iron-icon> </iron-icon>
......
...@@ -82,7 +82,15 @@ ...@@ -82,7 +82,15 @@
padding-inline-start: 4px; padding-inline-start: 4px;
padding-top: 4px; padding-top: 4px;
width: 16px; width: 16px;
}
@media (prefers-color-scheme: dark) {
#checkPasswordsLinkRow iron-icon {
--iron-icon-fill-color: var(--google-red-refresh-300);
background: radial-gradient(circle 12px at 12px,
var(--google-grey-900) 100%,
transparent 100%);
}
} }
</style> </style>
<settings-toggle-button id="passwordToggle" <settings-toggle-button id="passwordToggle"
......
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