Switch to Compound icons in more places (#31560)
* 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
@@ -162,7 +162,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
width: 16px;
|
||||
background: var(--cpd-color-icon-on-solid-primary);
|
||||
mask-size: 16px;
|
||||
mask-image: url("$(res)/img/element-icons/room/invite.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -232,7 +232,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
text-decoration: underline;
|
||||
|
||||
&::before {
|
||||
mask-image: url("$(res)/img/element-icons/room/invite.svg");
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg width="12" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M6.806 16c-1.211 0-2.242-.336-3.091-1.008-.85-.673-1.458-1.48-1.826-2.425L.217 8.25c-.206-.533-.265-.93-.179-1.192.087-.26.282-.391.585-.391.4 0 .714.12.941.358.227.239.411.542.552.908l.714 1.884c.01.033.097.094.26.183h.227V2.2c0-.233.084-.436.251-.608a.8.8 0 011.177 0 .858.858 0 01.244.608v5.467c0 .089.032.166.097.233a.307.307 0 00.454 0 .324.324 0 00.098-.233v-6.8c0-.234.084-.436.251-.609A.8.8 0 016.482 0a.8.8 0 01.592.258.843.843 0 01.252.609v6.8c0 .089.032.166.097.233a.307.307 0 00.455 0 .324.324 0 00.097-.233v-5.8c0-.234.084-.436.252-.609A.8.8 0 018.819 1a.8.8 0 01.592.258.843.843 0 01.252.609v5.8c0 .089.032.166.097.233a.307.307 0 00.455 0 .324.324 0 00.097-.233v-3.8c0-.234.084-.436.252-.609A.8.8 0 0111.156 3a.8.8 0 01.592.258.843.843 0 01.252.609v6.966c0 1.523-.495 2.764-1.485 3.725C9.525 15.52 8.289 16 6.806 16z" fill="currentColor"/></svg>
|
||||
|
Before Width: | Height: | Size: 932 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10ZM11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15.5H13.5C14.0523 15.5 14.5 15.9477 14.5 16.5C14.5 17.0523 14.0523 17.5 13.5 17.5H12C11.4477 17.5 11 17.0523 11 16.5L11 13Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 516 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="-0.4 1 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.1001 9C18.7779 9 18.5168 8.73883 18.5168 8.41667V6.08333H16.1834C15.8613 6.08333 15.6001 5.82217 15.6001 5.5C15.6001 5.17783 15.8613 4.91667 16.1834 4.91667H18.5168V2.58333C18.5168 2.26117 18.7779 2 19.1001 2C19.4223 2 19.6834 2.26117 19.6834 2.58333V4.91667H22.0168C22.3389 4.91667 22.6001 5.17783 22.6001 5.5C22.6001 5.82217 22.3389 6.08333 22.0168 6.08333H19.6834V8.41667C19.6834 8.73883 19.4223 9 19.1001 9ZM19.6001 11C20.0669 11 20.5212 10.9467 20.9574 10.8458C21.1161 11.5383 21.2 12.2594 21.2 13C21.2 16.1409 19.6917 18.9294 17.3598 20.6808V20.6807C16.0014 21.7011 14.3635 22.3695 12.5815 22.5505C12.2588 22.5832 11.9314 22.6 11.6 22.6C6.29807 22.6 2 18.302 2 13C2 7.69809 6.29807 3.40002 11.6 3.40002C12.3407 3.40002 13.0618 3.48391 13.7543 3.64268C13.6534 4.07884 13.6001 4.53319 13.6001 5C13.6001 8.31371 16.2864 11 19.6001 11ZM11.5999 20.68C13.6754 20.68 15.5585 19.8567 16.9407 18.5189C16.0859 16.4086 14.0167 14.92 11.5998 14.92C9.18298 14.92 7.11378 16.4086 6.25901 18.5189C7.64115 19.8567 9.52436 20.68 11.5999 20.68ZM11.7426 7.41172C10.3168 7.54168 9.2 8.74043 9.2 10.2C9.2 11.7464 10.4536 13 12 13C13.0308 13 13.9315 12.443 14.4176 11.6135C13.0673 10.6058 12.0929 9.12248 11.7426 7.41172Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -1,7 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 18.5982V15H13V18.5982C13 20.5 12.2383 22 12 22C11.7617 22 11 20.5 11 18.5982Z" fill="black"/>
|
||||
<path d="M9.5 6C9.17534 5.83333 7.78566 5.2 6.61693 4C5.4482 2.8 6.12239 2 7.13026 2H12V6H9.5Z" fill="black"/>
|
||||
<path d="M14.5 6C14.8247 5.83333 16.2143 5.2 17.3831 4C18.5518 2.8 17.8776 2 16.8697 2H12V6H14.5Z" fill="black"/>
|
||||
<path d="M9.42857 6H14.5714L15 10H9L9.42857 6Z" fill="black"/>
|
||||
<path d="M12 9C8.93114 9 6.32353 10.6927 5.37867 13.0483C4.96746 14.0735 5.89543 15 7 15H17C18.1046 15 19.0325 14.0735 18.6213 13.0483C17.6765 10.6927 15.0689 9 12 9Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 681 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14ZM16 11C16 12.0191 15.6951 12.967 15.1716 13.7574L17.2071 15.7929C17.5976 16.1834 17.5976 16.8166 17.2071 17.2071C16.8166 17.5976 16.1834 17.5976 15.7929 17.2071L13.7574 15.1716C12.967 15.6951 12.0191 16 11 16C8.23858 16 6 13.7614 6 11C6 8.23858 8.23858 6 11 6C13.7614 6 16 8.23858 16 11Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 682 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="14" stroke="#E3E8F0" stroke-width="2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 170 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M29 15C29 12.4307 28.293 9.91095 26.9563 7.7167C25.6197 5.52246 23.705 3.73836 21.4219 2.55979C19.1389 1.38123 16.5755 0.853662 14.0126 1.03487C11.4497 1.21607 8.98611 2.09906 6.8916 3.58713" stroke="#737D8C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 387 B |
Reference in New Issue
Block a user