Merge pull request #5020 from matrix-org/t3chguy/fix/14649

Update crypto event icon to match rest of app styling
pull/21833/head
Michael Telatynski 2020-07-20 15:21:03 +01:00 committed by GitHub
commit ee8d885e70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 8 deletions

View File

@ -15,28 +15,45 @@ limitations under the License.
*/ */
.mx_cryptoEvent { .mx_cryptoEvent {
display: grid; display: grid;
grid-template-columns: 24px minmax(0, 1fr) min-content; grid-template-columns: 24px minmax(0, 1fr) min-content;
&.mx_cryptoEvent_icon::before,
&.mx_cryptoEvent_icon::after { &.mx_cryptoEvent_icon::after {
grid-column: 1; grid-column: 1;
grid-row: 1 / 3; grid-row: 1 / 3;
width: 16px; width: 16px;
height: 16px; height: 16px;
content: ""; content: "";
background-image: url("$(res)/img/e2e/normal.svg"); top: 0;
background-repeat: no-repeat; bottom: 0;
background-size: 100%; left: 0;
right: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $composer-e2e-icon-color;
margin-top: 4px; margin-top: 4px;
} }
// white infill for the transparency
&.mx_cryptoEvent_icon::before {
background-color: #ffffff;
mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat;
mask-position: center;
mask-size: 90%;
}
&.mx_cryptoEvent_icon_verified::after { &.mx_cryptoEvent_icon_verified::after {
background-image: url("$(res)/img/e2e/verified.svg"); mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $accent-color;
} }
&.mx_cryptoEvent_icon_warning::after { &.mx_cryptoEvent_icon_warning::after {
background-image: url("$(res)/img/e2e/warning.svg"); mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $notice-primary-color;
} }
.mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state { .mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {

View File

@ -42,7 +42,7 @@ limitations under the License.
// white infill for the transparency // white infill for the transparency
.mx_E2EIcon::before { .mx_E2EIcon::before {
background-color: #ffffff; background-color: #ffffff;
mask: url('$(res)/img/e2e/normal.svg'); mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 90%; mask-size: 90%;

View File

@ -355,7 +355,7 @@ $left-gutter: 64px;
&::before { &::before {
background-color: #ffffff; background-color: #ffffff;
mask: url('$(res)/img/e2e/normal.svg'); mask-image: url('$(res)/img/e2e/normal.svg');
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 90%; mask-size: 90%;