Use compound colours for verification badges (#9794)

* update e2e colour variables to compound colours

* use e2e colour vars for e2e icons
This commit is contained in:
Kerry 2022-12-20 15:07:28 +13:00 committed by GitHub
parent 0485b74acb
commit d3ab11928b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 12 additions and 12 deletions

View file

@ -77,7 +77,7 @@ limitations under the License.
&::after { &::after {
mask-image: url("$(res)/img/e2e/warning.svg"); mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $alert; background-color: $e2e-warning-color;
} }
} }

View file

@ -38,7 +38,7 @@ limitations under the License.
&.mx_cryptoEvent_icon_warning::after { &.mx_cryptoEvent_icon_warning::after {
mask-image: url("$(res)/img/e2e/warning.svg"); mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $alert; background-color: $e2e-warning-color;
} }
.mx_cryptoEvent_state, .mx_cryptoEvent_state,

View file

@ -75,14 +75,14 @@ limitations under the License.
} }
.mx_RoomSummaryCard_e2ee_verified { .mx_RoomSummaryCard_e2ee_verified {
background-color: #0dbd8b; background-color: #$e2e-verified-color;
&::before { &::before {
mask-image: url("$(res)/img/e2e/verified.svg"); mask-image: url("$(res)/img/e2e/verified.svg");
} }
} }
.mx_RoomSummaryCard_e2ee_warning { .mx_RoomSummaryCard_e2ee_warning {
background-color: #ff5b55; background-color: $e2e-warning-color;
&::before { &::before {
mask-image: url("$(res)/img/e2e/warning.svg"); mask-image: url("$(res)/img/e2e/warning.svg");
} }

View file

@ -29,7 +29,7 @@ limitations under the License.
width: 24px; width: 24px;
height: 24px; height: 24px;
mask-image: url("$(res)/img/e2e/decryption-failure.svg"); mask-image: url("$(res)/img/e2e/decryption-failure.svg");
background-color: $alert; background-color: $e2e-warning-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;

View file

@ -66,7 +66,7 @@ limitations under the License.
.mx_E2EIcon_warning::after { .mx_E2EIcon_warning::after {
mask-image: url("$(res)/img/e2e/warning.svg"); mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $alert; background-color: $e2e-warning-color;
} }
.mx_E2EIcon_normal::after { .mx_E2EIcon_normal::after {
@ -76,5 +76,5 @@ limitations under the License.
.mx_E2EIcon_verified::after { .mx_E2EIcon_verified::after {
mask-image: url("$(res)/img/e2e/verified.svg"); mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $accent; background-color: $e2e-verified-color;
} }

View file

@ -678,7 +678,7 @@ $left-gutter: 64px;
&.mx_EventTile_e2eIcon_warning::after { &.mx_EventTile_e2eIcon_warning::after {
mask-image: url("$(res)/img/e2e/warning.svg"); mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $alert; background-color: $e2e-warning-color;
} }
&.mx_EventTile_e2eIcon_normal::after { &.mx_EventTile_e2eIcon_normal::after {

View file

@ -215,10 +215,10 @@ $event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/element-icons/copy.svg"; $copy-button-url: "$(res)/img/element-icons/copy.svg";
/* e2e */ /* e2e */
$e2e-verified-color: #76cfa5; /* N.B. *NOT* the same as $accent */ $e2e-verified-color: #0dbd8b;
$e2e-unknown-color: #e8bf37; $e2e-unknown-color: #e8bf37;
$e2e-unverified-color: #e8bf37; $e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363; $e2e-warning-color: #ff5b55;
$e2e-verified-color-light: rgba($e2e-verified-color, 0.06); $e2e-verified-color-light: rgba($e2e-verified-color, 0.06);
$e2e-warning-color-light: rgba($e2e-warning-color, 0.06); $e2e-warning-color-light: rgba($e2e-warning-color, 0.06);

View file

@ -183,10 +183,10 @@ $roomtile-default-badge-bg-color: $muted-fg-color;
/* e2e */ /* e2e */
/* ******************** */ /* ******************** */
$e2e-verified-color: #76cfa5; /* N.B. *NOT* the same as $accent */ $e2e-verified-color: #0dbd8b;
$e2e-unknown-color: #e8bf37; $e2e-unknown-color: #e8bf37;
$e2e-unverified-color: #e8bf37; $e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363; $e2e-warning-color: #ff5b55;
$e2e-verified-color-light: rgba($e2e-verified-color, 0.06); $e2e-verified-color-light: rgba($e2e-verified-color, 0.06);
$e2e-warning-color-light: rgba($e2e-warning-color, 0.06); $e2e-warning-color-light: rgba($e2e-warning-color, 0.06);
/* ******************** */ /* ******************** */