sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Switch from svg masks to svg rendering in more places (#31652)

Browse Source 
* Replace icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace more icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Swap for outline icons in spotlight & update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch emoji picker to use emoji for header icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update football emoji

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in ExtensionsCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in BaseCard

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in EmojiPicker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in Spotlight

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak emoji and fix disabled state

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in HomePage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in DecoratedRoomAvatar

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in SpaceRoomView

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in DialPadBackspaceButton

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in NewRoomIntro

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in SpaceCreateMenu

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in InlineTermsAgreement

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in PollCreateDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch from svg masks to svg rendering in ServerPicker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert size change

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-01-08 11:20:55 +00:00
committed by GitHub
parent 2c90eee2dd
commit 220e93596a
21 changed files with 183 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/structures/_HomePage.pcss
+2 -18
View File
@@ -70,29 +70,13 @@ Please see LICENSE files in the repository root for full details.
color: #fff; /* on all themes */
background-color: $accent;
&::before {
svg {
top: 20px;
left: 60px; /* (160px-40px)/2 */
width: 40px;
height: 40px;
content: "";
position: absolute;
background-color: #fff; /* on all themes */
mask-repeat: no-repeat;
mask-size: contain;
}
&.mx_HomePage_button_sendDm::before {
mask-image: url("@vector-im/compound-design-tokens/icons/chat-solid.svg");
}
&.mx_HomePage_button_explore::before {
mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
}
&.mx_HomePage_button_createGroup::before {
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
color: #fff; /* on all themes */
}
}
}
res/css/structures/_SpaceRoomView.pcss
+10 -29
View File
@@ -144,11 +144,8 @@ Please see LICENSE files in the repository root for full details.
.mx_SpaceRoomView_landing_settingsButton {
position: relative;
&::before {
svg {
position: absolute;
content: "";
mask-position: center;
mask-repeat: no-repeat;
}
}
@@ -156,13 +153,11 @@ Please see LICENSE files in the repository root for full details.
padding: 4px 18px 4px 40px;
height: min-content;
&::before {
svg {
left: 8px;
height: 16px;
width: 16px;
background: var(--cpd-color-icon-on-solid-primary);
mask-size: 16px;
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
color: var(--cpd-color-icon-on-solid-primary);
}
}
@@ -170,14 +165,12 @@ Please see LICENSE files in the repository root for full details.
width: 24px;
height: 24px;
&::before {
svg {
left: 0;
top: 0;
height: 24px;
width: 24px;
background: $tertiary-content;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
color: $tertiary-content;
}
}
}
@@ -207,35 +200,23 @@ Please see LICENSE files in the repository root for full details.
display: inline-block;
padding-left: 32px;
line-height: 24px; /* to center icons */
color: var(--cpd-color-text-primary);
font-weight: var(--cpd-font-weight-semibold);
text-decoration: underline;
&::before {
content: "";
svg {
position: absolute;
height: 24px;
width: 24px;
top: 0;
left: 0;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
color: var(--cpd-color-icon-primary);
}
& + .mx_AccessibleButton {
margin-left: 32px;
}
}
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
color: var(--cpd-color-text-primary);
font-weight: var(--cpd-font-weight-semibold);
text-decoration: underline;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
background-color: var(--cpd-color-icon-primary);
}
}
}
}
}
res/css/views/avatars/_DecoratedRoomAvatar.pcss
+4 -6
View File
@@ -38,12 +38,10 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px;
}
.mx_DecoratedRoomAvatar_icon_globe::before {
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-content;
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
.mx_DecoratedRoomAvatar_icon_globe svg {
width: inherit;
height: inherit;
color: $secondary-content;
}
.mx_DecoratedRoomAvatar_icon_offline::before {
res/css/views/dialogs/_PollCreateDialog.pcss
+5 -11
View File
@@ -43,23 +43,17 @@ Please see LICENSE files in the repository root for full details.
.mx_PollCreateDialog_removeOption {
margin-left: 12px;
width: 20px;
height: 20px;
width: 16px;
height: 16px;
padding: var(--cpd-space-0-5x);
border-radius: 50%;
background-color: $quinary-content;
cursor: pointer;
position: relative;
&::before {
content: "";
mask: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
svg {
width: inherit;
height: inherit;
position: absolute;
background-color: $secondary-content;
color: $secondary-content;
}
}
}
res/css/views/elements/_DialPadBackspaceButton.pcss
+5 -17
View File
@@ -7,26 +7,14 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_DialPadBackspaceButton {
position: relative;
height: 28px;
width: 28px;
height: 20px;
width: 20px;
padding: var(--cpd-space-1x);
&::before {
/* force this element to appear on the DOM */
content: "";
background-color: #8d97a5;
svg {
color: #8d97a5;
width: inherit;
height: inherit;
top: 0px;
left: 0px;
position: absolute;
display: inline-block;
vertical-align: middle;
mask-image: url("@vector-im/compound-design-tokens/icons/backspace-solid.svg");
mask-position: 8px;
mask-size: 20px;
mask-repeat: no-repeat;
}
}
res/css/views/elements/_ServerPicker.pcss
+8 -17
View File
@@ -23,28 +23,19 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ServerPicker_help {
width: 20px;
height: 20px;
width: 24px;
height: 24px;
border-radius: 10px;
grid-column: 2;
grid-row: 1;
margin-left: auto;
text-align: center;
font-size: 16px;
position: relative;
margin-top: -2px;
margin-right: -2px;
&::before {
content: "";
width: 24px;
height: 24px;
position: absolute;
top: -2px;
left: -2px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
background: $icon-button-color;
svg {
width: inherit;
height: inherit;
color: $icon-button-color;
}
}
res/css/views/rooms/_NewRoomIntro.pcss
+2 -10
View File
@@ -25,23 +25,15 @@ Please see LICENSE files in the repository root for full details.
line-height: $font-24px;
display: inline-block;
&:not(.mx_AccessibleButton_kind_primary_outline)::before {
content: "";
svg {
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 20px;
color: $button-fg-color;
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: text-bottom;
}
}
.mx_NewRoomIntro_inviteButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
}
}
> h2 {
res/css/views/spaces/_SpaceCreateMenu.pcss
+5 -16
View File
@@ -35,26 +35,15 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpaceCreateMenu_back {
width: 28px;
height: 28px;
position: relative;
width: 24px;
height: 24px;
padding: var(--cpd-space-0-5x);
background-color: $panel-actions;
border-radius: 14px;
margin-bottom: 12px;
&::before {
content: "";
position: absolute;
height: 28px;
width: 28px;
top: 0;
left: 0;
background-color: $tertiary-content;
transform: rotate(90deg);
mask-repeat: no-repeat;
mask-position: 2px 3px;
mask-size: 24px;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
svg {
color: $tertiary-content;
}
}
res/css/views/terms/_InlineTermsAgreement.pcss
-12
View File
@@ -24,15 +24,3 @@ Please see LICENSE files in the repository root for full details.
}
}
}
.mx_InlineTermsAgreement_link {
display: inline-block;
mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg");
background-color: $accent;
mask-repeat: no-repeat;
mask-size: contain;
width: 12px;
height: 12px;
margin-left: 3px;
vertical-align: middle;
}