nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Switch to Compound icons in more places (#31560)

Browse Source 
* Switch to Compound icons in ServerPicker

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

* Switch to Compound ask-to-join icon

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

* Switch to Compound invite icon

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

* Switch to Compound pin icon

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

* Switch to Compound Spinner

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

* Update snapshots

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

* Fix ServerPicker icon rendering

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

* Update screenshots

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

* Update screenshot

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

* Replace search-inset.svg with Compound Message icon

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-17 11:17:11 +00:00
committed by GitHub
parent 48c360f688
commit e696f92bd3
88 changed files with 460 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/views/auth/_AuthBody.pcss
View File

@@ -237,7 +237,7 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-15px;
line-height: $font-24px;
.mx_InlineSpinner img {
.mx_InlineSpinner svg {
vertical-align: sub;
margin-right: 5px;
}

2
res/css/views/dialogs/_SpotlightDialog.pcss
View File

@@ -454,7 +454,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_searchMessages::before {
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chat.svg");
}
.mx_SpotlightDialog_otherSearches_messageSearchText {

14
res/css/views/elements/_InlineSpinner.pcss
View File

@@ -7,14 +7,10 @@ Please see LICENSE files in the repository root for full details.
.mx_InlineSpinner {
display: inline;
}
.mx_InlineSpinner img,
.mx_InlineSpinner_icon {
margin: 0px 6px;
vertical-align: -3px;
}
.mx_InlineSpinner_icon {
display: inline-block !important; /* Override regular mx_Spinner_icon */
svg {
margin: 0px 6px;
vertical-align: -3px;
display: inline-block;
}
}

6
res/css/views/elements/_ServerPicker.pcss
View File

@@ -25,13 +25,11 @@ Please see LICENSE files in the repository root for full details.
.mx_ServerPicker_help {
width: 20px;
height: 20px;
background-color: $icon-button-color;
border-radius: 10px;
grid-column: 2;
grid-row: 1;
margin-left: auto;
text-align: center;
color: #ffffff;
font-size: 16px;
position: relative;
@@ -45,8 +43,8 @@ Please see LICENSE files in the repository root for full details.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/i.svg");
background: #ffffff;
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
background: $icon-button-color;
}
}

36
res/css/views/elements/_Spinner.pcss
View File

@@ -19,39 +19,3 @@ Please see LICENSE files in the repository root for full details.
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}
@keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.mx_Spinner_icon {
background-color: $quinary-content;
mask: url("$(res)/img/spinner/spinner-background.svg");
mask-size: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
&::before {
background-color: $secondary-content;
mask: url("$(res)/img/spinner/spinner-foreground.svg");
mask-size: 100%;
width: 100%;
height: 100%;
content: "";
display: flex;
animation: 1s linear spin infinite;
}
}

2
res/css/views/right_panel/_ExtensionsCard.pcss
View File

@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
right: 8px;
&::before {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/pin-solid.svg");
}
}

2
res/css/views/rooms/_NewRoomIntro.pcss
View File

@@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_NewRoomIntro_inviteButton::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
}
}

4
res/css/views/rooms/_NotificationBadge.pcss
View File

@@ -56,8 +56,8 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_NotificationBadge_knocked {
mask-image: url("$(res)/img/element-icons/ask-to-join.svg");
width: 12px;
mask-image: url("@vector-im/compound-design-tokens/icons/ask-to-join.svg");
width: 16px;
height: 16px;
}

2
res/css/views/voip/_LegacyCallViewHeader.pcss
View File

@@ -66,7 +66,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_LegacyCallViewHeader_button_pin {
&::before {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/pin-solid.svg");
}
}