Use theme-capable icons in the user menu

They're still inconsistent weights, but at least they are the right color on non-light-theme clients.
This commit is contained in:
Travis Ralston 2020-06-23 21:17:39 -06:00
parent 74e4ea7d48
commit 5c7e59b132
2 changed files with 73 additions and 9 deletions

View file

@ -15,7 +15,26 @@ limitations under the License.
*/
.mx_UserMenuButton {
// No special styles on the button itself
> span {
width: 16px;
height: 16px;
position: relative;
display: block;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
top: 0;
left: 0;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
}
}
}
.mx_UserMenuButton_contextMenu {
@ -79,4 +98,49 @@ limitations under the License.
justify-content: center;
}
}
.mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
&::before {
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
}
}
.mx_UserMenuButton_iconHome::before {
mask-image: url('$(res)/img/feather-customised/home.svg');
}
.mx_UserMenuButton_iconBell::before {
mask-image: url('$(res)/img/feather-customised/notifications.svg');
}
.mx_UserMenuButton_iconLock::before {
mask-image: url('$(res)/img/feather-customised/lock.svg');
}
.mx_UserMenuButton_iconSettings::before {
mask-image: url('$(res)/img/feather-customised/settings.svg');
}
.mx_UserMenuButton_iconArchive::before {
mask-image: url('$(res)/img/feather-customised/archive.svg');
}
.mx_UserMenuButton_iconMessage::before {
mask-image: url('$(res)/img/feather-customised/message-circle.svg');
}
.mx_UserMenuButton_iconSignOut::before {
mask-image: url('$(res)/img/feather-customised/sign-out.svg');
}
}