Match e2e icons on events to expectations

Fixes https://github.com/vector-im/riot-web/issues/11547

Steps taken:
* Convert `E2ePadlock` to a class-style component so the hover state can be tracked (tooltips).
* Convert the image mask to a background image to keep the `!` in the shield.
* Update copy.
This commit is contained in:
Travis Ralston 2019-12-03 22:41:22 -07:00
parent f34347b08c
commit 33044d713e
3 changed files with 69 additions and 22 deletions

View file

@ -347,27 +347,28 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile_e2eIcon {
display: block;
position: absolute;
top: 8px;
top: 6px;
left: 46px;
width: 15px;
height: 15px;
cursor: pointer;
mask-size: 14px;
mask-repeat: no-repeat;
mask-position: 0;
display: block;
bottom: 0;
right: 0;
opacity: 0.2;
background-repeat: no-repeat;
background-size: contain;
}
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $warning-color;
background-image: url('$(res)/img/e2e/warning.svg');
opacity: 1;
}
.mx_EventTile_e2eIcon_unencrypted {
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $composer-e2e-icon-color;
background-image: url('$(res)/img/e2e/warning.svg');
opacity: 1;
}
.mx_EventTile_e2eIcon_hidden {