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 (#31650)

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>

* Revert size change

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

* Delint

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

* Add test

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 10:44:54 +00:00
committed by GitHub
parent 15c409491d
commit edd4eab195
13 changed files with 930 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/right_panel/_ExtensionsCard.pcss
+9 -21
View File
@@ -58,7 +58,13 @@ Please see LICENSE files in the repository root for full details.
width: 24px;
padding: var(--cpd-space-3x) var(--cpd-space-1x);
box-sizing: border-box;
min-width: 24px; /* prevent flexbox crushing */
flex-shrink: 0;
svg {
width: 16px;
height: 16px;
color: $icon-button-color;
}
&:hover {
&::after {
@@ -72,32 +78,14 @@ Please see LICENSE files in the repository root for full details.
background-color: rgb(141, 151, 165, 0.1);
}
}
&::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
background-color: $icon-button-color;
}
}
.mx_ExtensionsCard_app_pinToggle {
right: 8px;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/pin-solid.svg");
}
}
.mx_ExtensionsCard_app_options {
right: 32px; /* 24 + 8 */
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
}
&.mx_ExtensionsCard_Button_pinned {
@@ -105,8 +93,8 @@ Please see LICENSE files in the repository root for full details.
opacity: 0.2;
}
.mx_ExtensionsCard_app_pinToggle::before {
background-color: $accent;
.mx_ExtensionsCard_app_pinToggle svg {
color: $accent;
}
}