mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

Deduplicate more icons using Compound Design Tokens (#132)

Browse source 
* Deduplicate more icons using Compound Design Tokens

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

* Iterate

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
(cherry picked from commit 7448bd52e2ff354917d6e5f769ca052961c13aa0)
This commit is contained in:
Michael Telatynski 2024-10-15 11:19:06 +01:00
parent a22e9e8f13
commit 146968da2c
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
68 changed files with 358 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

BIN
playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

1
res/css/components/views/context_menus/_KebabContextMenu.pcss
View file

@ -8,5 +8,6 @@ Please see LICENSE files in the repository root for full details.
.mx_KebabContextMenu_icon {
width: 24px;
height: 24px;
color: $icon-button-color;
}

4
res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
View file

@ -12,8 +12,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_PollDetailHeader_icon {
height: 15px;
width: 15px;
height: 16px;
width: 16px;
margin-right: $spacing-8;
vertical-align: middle;
}

5
res/css/components/views/location/_ShareDialogButtons.pcss
View file

@ -40,6 +40,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ShareDialogButtons_button-icon {
height: 10px;
margin-top: 3px;
width: 20px;
height: 20px;
margin: 2px;
}

2
res/css/components/views/polls/_PollOption.pcss
View file

@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
border-width: 2px;
border-color: var(--cpd-color-icon-accent-tertiary);
background-color: var(--cpd-color-icon-accent-tertiary);
background-image: url("$(res)/img/element-icons/check-white.svg");
background-image: url("@vector-im/compound-design-tokens/icons/check.svg");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;

2
res/css/structures/_SpaceHierarchy.pcss
View file

@ -211,7 +211,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background-color: $accent;
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
}
}

2
res/css/structures/_SpacePanel.pcss
View file

@ -258,7 +258,7 @@ 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/context-menu.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
background: $primary-content;
}
}

2
res/css/views/context_menus/_IconizedContextMenu.pcss
View file

@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_IconizedContextMenu_checked::before {
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
.mx_IconizedContextMenu_unchecked::before {

8
res/css/views/context_menus/_MessageContextMenu.pcss
View file

@ -49,7 +49,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconEndPoll::before {
mask-image: url("$(res)/img/element-icons/check-white.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
.mx_MessageContextMenu_iconForward::before {
@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconCopy::before {
height: 12px;
left: 2px;
height: 16px;
mask-image: url($copy-button-url);
position: relative;
width: 12px;
top: 3px;
width: 16px;
}
.mx_MessageContextMenu_iconEdit::before {

2
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
View file

@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
mask-size: contain;
mask-repeat: no-repeat;
background-color: $accent;
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
}
}

14
res/css/views/dialogs/_SpotlightDialog.pcss
View file

@ -121,14 +121,12 @@ Please see LICENSE files in the repository root for full details.
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 8px;
height: 8px;
mask-size: 14px;
width: inherit;
height: inherit;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/cancel-small.svg");
left: 0;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
}
@ -358,7 +356,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_option--menu::before {
mask-image: url("$(res)/img/element-icons/context-menu.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&:hover,

8
res/css/views/directory/_NetworkDropdown.pcss
View file

@ -64,14 +64,14 @@ Please see LICENSE files in the repository root for full details.
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 8px;
height: 8px;
mask-size: 14px;
width: inherit;
height: inherit;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/cancel-small.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}

2
res/css/views/elements/_FacePile.pcss
View file

@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
}

4
res/css/views/elements/_TagComposer.pcss
View file

@ -68,8 +68,8 @@ Please see LICENSE files in the repository root for full details.
position: relative;
svg {
width: 0.5em;
vertical-align: middle;
width: 16px;
height: 16px;
}
}
}

2
res/css/views/elements/_UseCaseSelectionButton.pcss
View file

@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
width: 12px;
height: 12px;
mask-image: url("$(res)/img/element-icons/check-white.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
}

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

@ -97,7 +97,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ExtensionsCard_app_options {
right: 32px; /* 24 + 8 */
&::before {
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
}

2
res/css/views/rooms/_LegacyRoomHeader.pcss
View file

@ -240,7 +240,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyRoomHeader_closeButton {
&::before {
mask-image: url("$(res)/img/cancel.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-size: 20px;
mask-position: center;
}

4
res/css/views/rooms/_LinkPreviewGroup.pcss
View file

@ -12,14 +12,14 @@ Please see LICENSE files in the repository root for full details.
width: 18px;
height: 18px;
img {
svg {
flex: 0 0 40px;
visibility: hidden;
}
}
&:hover .mx_LinkPreviewGroup_hide img,
.mx_LinkPreviewGroup_hide:focus-visible:focus img {
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
visibility: visible;
}

12
res/css/views/rooms/_ReplyPreview.pcss
View file

@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details.
.mx_ReplyPreview_header_cancel {
background-color: $primary-content;
mask: url("$(res)/img/cancel.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 18px;
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
mask-size: contain;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
}
}
}

2
res/css/views/rooms/_RoomSublist.pcss
View file

@ -131,7 +131,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomSublist_menuButton::before {
mask-image: url("$(res)/img/element-icons/context-menu.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
.mx_RoomSublist_headerText {

2
res/css/views/rooms/_RoomTile.pcss
View file

@ -133,7 +133,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomTile_menuButton::before {
mask-image: url("$(res)/img/element-icons/context-menu.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {

6
res/css/views/rooms/_TopUnreadMessagesBar.pcss
View file

@ -63,9 +63,9 @@ Please see LICENSE files in the repository root for full details.
position: absolute;
width: 18px;
height: 18px;
mask-image: url("$(res)/img/cancel.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-size: 10px;
mask-position: 4px 4px;
mask-size: 16px;
mask-position: center;
background: var(--cpd-color-icon-tertiary);
}

2
res/css/views/toasts/_IncomingCallToast.pcss
View file

@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
&::before {
content: "";
mask-image: url("$(res)/img/cancel.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
height: inherit;
width: inherit;

13
res/css/views/user-onboarding/_UserOnboardingButton.pcss
View file

@ -52,14 +52,13 @@ Please see LICENSE files in the repository root for full details.
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 7px;
height: 7px;
mask-size: 12px;
width: inherit;
height: inherit;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/element-icons/cancel-rounded.svg");
left: -1px;
top: -1px;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
}

12
res/css/views/user-onboarding/_UserOnboardingTask.pcss
View file

@ -75,13 +75,13 @@ Please see LICENSE files in the repository root for full details.
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 16px;
height: 16px;
mask-size: 24px;
width: inherit;
height: inherit;
position: absolute;
left: calc(50% - 8px);
top: calc(50% - 8px);
mask-image: url("$(res)/img/element-icons/check-white.svg");
left: 0;
top: 0;
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
animation-duration: 300ms;
animation-fill-mode: both;

13
res/img/cancel-small.svg
View file

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>Line + Line</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
<path d="M8,0 L0,8" id="Line" sketch:type="MSShapeGroup"></path>
<path d="M0,0 L8,8" id="Line" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 873 B

3
res/img/cancel.svg
View file

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.2756 4.69628C21.8922 4.07969 21.8922 3.08 21.2756 2.46342C20.659 1.84683 19.6593 1.84683 19.0427 2.46342L11.8917 9.61447L4.74063 2.46342C4.12404 1.84683 3.12436 1.84683 2.50777 2.46342C1.89118 3.08 1.89118 4.07969 2.50777 4.69628L9.65882 11.8473L2.20145 19.3047C1.58487 19.9213 1.58487 20.921 2.20145 21.5376C2.81804 22.1541 3.81773 22.1541 4.43431 21.5376L11.8917 14.0802L19.349 21.5375C19.9656 22.1541 20.9653 22.1541 21.5819 21.5375C22.1985 20.921 22.1985 19.9213 21.5819 19.3047L14.1245 11.8473L21.2756 4.69628Z" fill="#737D8C"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 650 B

3
res/img/element-icons/back.svg
View file

@ -1,3 +0,0 @@
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 227 B

4
res/img/element-icons/cancel-rounded.svg
View file

@ -1,4 +0,0 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M9.00098 1L1.00098 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 285 B

3
res/img/element-icons/caret-left.svg
View file

@ -1,3 +0,0 @@
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.63679 0.707107C8.02732 1.09763 8.02834 1.73182 7.63909 2.1236L2.70538 7.08934L7.65512 12.0391C8.04565 12.4296 8.04667 13.0638 7.65742 13.4556C7.26816 13.8474 6.63602 13.8484 6.24549 13.4579L0.588639 7.80101C0.198115 7.41049 0.197089 6.7763 0.586348 6.38452L6.22487 0.709391C6.61413 0.317605 7.24627 0.316582 7.63679 0.707107Z" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 502 B

3
res/img/element-icons/check-white.svg
View file

@ -1,3 +0,0 @@
<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.54541 5.8884L4.80299 9.24274L12.4545 1.36395" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 248 B

20
res/img/element-icons/check.svg
View file

@ -1,20 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="18.86364"
height="14.318086"
viewBox="0 0 18.86364 14.318086"
fill="none"
version="1.1"
id="svg4"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8" />
<path
d="M 1.25,8.03668 6.13636,13.06814 17.61364,1.25"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
id="path2" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 488 B

5
res/img/element-icons/context-menu.svg
View file

@ -1,5 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4.25" cy="9" r="1.25" fill="currentColor"/>
<circle cx="9" cy="9" r="1.25" fill="currentColor"/>
<circle cx="13.75" cy="9" r="1.25" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 269 B

3
res/img/element-icons/copy.svg
View file

@ -1,3 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C1.34315 0 0 1.34315 0 3V10C0 11.6569 1.34315 13 3 13H5V15C5 16.6569 6.34315 18 8 18H15C16.6569 18 18 16.6569 18 15V8C18 6.34315 16.6569 5 15 5H13V3C13 1.34315 11.6569 0 10 0H3ZM11 5V3C11 2.44772 10.5523 2 10 2H3C2.44772 2 2 2.44772 2 3V10C2 10.5523 2.44772 11 3 11H5V8C5 6.34315 6.34315 5 8 5H11ZM7 8C7 7.44772 7.44772 7 8 7H15C15.5523 7 16 7.44772 16 8V15C16 15.5523 15.5523 16 15 16H8C7.44772 16 7 15.5523 7 15V8Z" fill="#737D8C"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 590 B

5
res/img/element-icons/room/ellipsis.svg
View file

@ -1,5 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.5" cy="10" r="1.5" transform="rotate(180 15.5 10)" fill="currentColor"/>
<circle cx="10" cy="10" r="1.5" transform="rotate(180 10 10)" fill="currentColor"/>
<circle cx="4.5" cy="10" r="1.5" transform="rotate(180 4.5 10)" fill="currentColor"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 373 B

3
res/img/element-icons/roomlist/checkmark.svg
View file

@ -1,3 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8.81818L7.125 12L14 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 228 B

25
res/img/ellipsis.svg
View file

@ -1,25 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>icons_archive</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ellipsis" sketch:type="MSLayerGroup">
<g id="03-Input" sketch:type="MSShapeGroup">
<g id="03_3-Input-filled">
<g id="right_default">
<g id="right_middle">
<g id="Left-panel">
<g id="icons_archive">
<rect id="Rectangle-1" fill="#ECECEC" x="0" y="0" width="24" height="24"></rect>
<path d="M7.338,13.154 C7.842,13.154 8.164,12.776 8.164,12.272 C8.164,11.754 7.842,11.39 7.338,11.39 C6.848,11.39 6.512,11.754 6.512,12.272 C6.498,12.776 6.848,13.154 7.338,13.154 L7.338,13.154 L7.338,13.154 Z M12,13.154 C12.504,13.154 12.84,12.776 12.84,12.272 C12.826,11.754 12.504,11.39 12.014,11.39 C11.524,11.39 11.174,11.754 11.174,12.272 C11.16,12.776 11.51,13.154 12,13.154 L12,13.154 L12,13.154 Z M16.662,13.154 C17.18,13.154 17.502,12.776 17.502,12.272 C17.502,11.754 17.166,11.39 16.676,11.39 C16.186,11.39 15.836,11.754 15.836,12.272 C15.836,12.776 16.172,13.154 16.662,13.154 L16.662,13.154 L16.662,13.154 Z" id="Matrix-HQ-Copy-15" fill="#454545"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.8 KiB

2
res/themes/legacy-light/css/_legacy-light.pcss
View file

@ -239,7 +239,7 @@ $event-highlight-bg-color: $yellow-background;
/* event timestamp */
$event-timestamp-color: #acacac;
$copy-button-url: "$(res)/img/element-icons/copy.svg";
$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
/* e2e */
$e2e-verified-color: #0dbd8b;

2
res/themes/light/css/_light.pcss
View file

@ -345,7 +345,7 @@ $focus-brightness: 105%;
/* Icon URLs */
/* ******************** */
$copy-button-url: "$(res)/img/element-icons/copy.svg";
$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
/* ******************** */
/* Location sharing */

2
src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
View file

@ -14,6 +14,7 @@ import { AuthDict, CrossSigningKeys, MatrixError, UIAFlow, UIAResponse } from "m
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import classNames from "classnames";
import { BackupTrustInfo, GeneratedSecretStorageKey, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
import CheckmarkIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
import { _t, _td } from "../../../../languageHandler";
@ -37,7 +38,6 @@ import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
import Spinner from "../../../../components/views/elements/Spinner";
import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog";
import { IValidationResult } from "../../../../components/views/elements/Validation";
import { Icon as CheckmarkIcon } from "../../../../../res/img/element-icons/check.svg";
import PassphraseConfirmField from "../../../../components/views/auth/PassphraseConfirmField";
import { initialiseDehydration } from "../../../../utils/device/dehydration";

2
src/components/views/context_menus/KebabContextMenu.tsx
View file

@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
import { ChevronFace, ContextMenuButton, MenuProps, useContextMenu } from "../../structures/ContextMenu";
import { ButtonProps } from "../elements/AccessibleButton";
import IconizedContextMenu, { IconizedContextMenuOptionList } from "./IconizedContextMenu";

6
src/components/views/dialogs/ForwardDialog.tsx
View file

@ -279,7 +279,11 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
<EntityTile
className="mx_EntityTile_ellipsis"
avatarJsx={
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
<BaseAvatar
url={require("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg").default}
name="..."
size="36px"
/>
}
name={text}
showPresence={false}

4
src/components/views/elements/AppTile.tsx
View file

@ -16,6 +16,7 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { logger } from "matrix-js-sdk/src/logger";
import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import AccessibleButton from "./AccessibleButton";
import { _t } from "../../../languageHandler";
@ -37,7 +38,6 @@ import { Icon as CollapseIcon } from "../../../../res/img/element-icons/minimise
import { Icon as MaximiseIcon } from "../../../../res/img/element-icons/maximise-expand.svg";
import { Icon as MinimiseIcon } from "../../../../res/img/element-icons/minus-button.svg";
import { Icon as PopoutIcon } from "../../../../res/img/feather-customised/widget/external-link.svg";
import { Icon as MenuIcon } from "../../../../res/img/element-icons/room/ellipsis.svg";
import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@ -806,7 +806,7 @@ export default class AppTile extends React.Component<IProps, IState> {
ref={this.contextMenuButton}
onClick={this.onContextMenuClick}
>
<MenuIcon className="mx_Icon mx_Icon_12" />
<EllipsisIcon className="mx_Icon mx_Icon_12" />
</ContextMenuButton>
)}
</span>

2
src/components/views/elements/FilterDropdown.tsx
View file

@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
import React, { ReactElement } from "react";
import classNames from "classnames";
import CheckmarkIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
import { Icon as CheckmarkIcon } from "../../../../res/img/element-icons/roomlist/checkmark.svg";
import Dropdown, { DropdownProps } from "./Dropdown";
import { NonEmptyArray } from "../../../@types/common";

4
src/components/views/elements/Tag.tsx
View file

@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import AccessibleButton from "./AccessibleButton";
import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
icon?: () => JSX.Element;
@ -30,7 +30,7 @@ export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = f
onClick={onDeleteClick}
disabled={disabled}
>
<CancelRounded />
<CloseIcon />
</AccessibleButton>
)}
</div>

4
src/components/views/location/ShareDialogButtons.tsx
View file

@ -7,10 +7,10 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
import AccessibleButton from "../elements/AccessibleButton";
import { Icon as BackIcon } from "../../../../res/img/element-icons/caret-left.svg";
import { Icon as CloseIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
import { _t } from "../../../languageHandler";
interface Props {

2
src/components/views/messages/MessageActionBar.tsx
View file

@ -23,8 +23,8 @@ import {
import classNames from "classnames";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin";
import ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg";
import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
import { Icon as ResendIcon } from "../../../../res/img/element-icons/retry.svg";

2
src/components/views/pips/WidgetPip.tsx
View file

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { FC, MutableRefObject, useCallback, useMemo } from "react";
import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";
import PersistentApp from "../elements/PersistentApp";
import defaultDispatcher from "../../../dispatcher/dispatcher";
@ -19,7 +20,6 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
import { Icon as BackIcon } from "../../../../res/img/element-icons/back.svg";
import { Icon as HangupIcon } from "../../../../res/img/element-icons/call/hangup.svg";
import { _t } from "../../../languageHandler";
import { WidgetType } from "../../../widgets/WidgetType";

2
src/components/views/polls/pollHistory/PollDetailHeader.tsx
View file

@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import LeftCaretIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
import { Icon as LeftCaretIcon } from "../../../../../res/img/element-icons/caret-left.svg";
import { _t } from "../../../../languageHandler";
import AccessibleButton from "../../elements/AccessibleButton";
import { PollHistoryFilter } from "./types";

11
src/components/views/rooms/LinkPreviewGroup.tsx
View file

@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useContext, useEffect } from "react";
import { MatrixEvent, MatrixError, IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
import { useStateToggle } from "../../../hooks/useStateToggle";
import LinkPreviewWidget from "./LinkPreviewWidget";
@ -66,15 +67,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
onClick={onCancelClick}
aria-label={_t("timeline|url_preview|close")}
>
<img
className="mx_filterFlipColor"
alt=""
role="presentation"
src={require("../../../../res/img/cancel.svg").default}
width="18"
height="18"
draggable="false"
/>
<CloseIcon width="20px" height="20px" />
</AccessibleButton>
) : undefined}
</LinkPreviewWidget>

6
src/components/views/rooms/MemberList.tsx
View file

@ -238,7 +238,11 @@ export default class MemberList extends React.Component<IProps, IState> {
<EntityTile
className="mx_EntityTile_ellipsis"
avatarJsx={
<BaseAvatar url={require("../../../../res/img/ellipsis.svg").default} name="..." size="36px" />
<BaseAvatar
url={require("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg").default}
name="..."
size="36px"
/>
}
name={text}
showPresence={false}

2
src/components/views/spaces/QuickSettingsButton.tsx
View file

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import classNames from "classnames";
import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import { _t } from "../../../languageHandler";
import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
@ -21,7 +22,6 @@ import { Action } from "../../../dispatcher/actions";
import { UserTab } from "../dialogs/UserTab";
import QuickThemeSwitcher from "./QuickThemeSwitcher";
import { Icon as PinUprightIcon } from "../../../../res/img/element-icons/room/pin-upright.svg";
import { Icon as EllipsisIcon } from "../../../../res/img/element-icons/room/ellipsis.svg";
import { Icon as MembersIcon } from "../../../../res/img/element-icons/room/members.svg";
import { Icon as FavoriteIcon } from "../../../../res/img/element-icons/roomlist/favorite.svg";
import Modal from "../../../Modal";

39
test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View file

@ -175,9 +175,18 @@ exports[`AppTile for a pinned widget should render 1`] = `
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</span>
</div>
@ -260,9 +269,18 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</span>
</div>
@ -424,9 +442,18 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
role="button"
tabindex="0"
>
<div
<svg
class="mx_Icon mx_Icon_12"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</span>
</div>

13
test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap
View file

@ -16,9 +16,18 @@ exports[`<FilterDropdown /> renders dropdown options in menu 1`] = `
class="mx_FilterDropdown_option"
data-testid="filter-option-one"
>
<div
<svg
class="mx_FilterDropdown_optionSelectedIcon"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
<span
class="mx_FilterDropdown_optionLabel"
>

13
test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
View file

@ -22,9 +22,18 @@ exports[`<PollHistory /> Poll detail navigates back to poll list from detail vie
role="button"
tabindex="0"
>
<div
<svg
class="mx_PollDetailHeader_icon"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
Active polls
</div>
`;

36
test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
View file

@ -130,7 +130,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
role="button"
tabindex="-1"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
</div>
@ -246,7 +256,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
role="button"
tabindex="-1"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
</div>
@ -362,7 +382,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
role="button"
tabindex="-1"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
</div>

39
test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
View file

@ -146,9 +146,18 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
role="button"
tabindex="0"
>
<div
<svg
class="mx_KebabContextMenu_icon"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
<div
@ -181,9 +190,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
role="button"
tabindex="0"
>
<div
<svg
class="mx_KebabContextMenu_icon"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
<div
@ -325,9 +343,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
role="button"
tabindex="0"
>
<div
<svg
class="mx_KebabContextMenu_icon"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
<div

108
test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
View file

@ -1399,7 +1399,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
<div
@ -1413,7 +1423,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
<div
@ -1427,7 +1447,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
<div
@ -1441,7 +1471,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
<div
@ -1455,7 +1495,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
<div
@ -1469,7 +1519,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
<div
@ -1483,7 +1543,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
<div
@ -1497,7 +1567,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
<div
@ -1511,7 +1591,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button"
tabindex="0"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>
</div>
</div>

36
test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
View file

@ -273,7 +273,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
role="button"
tabindex="-1"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
</div>
@ -389,7 +399,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
role="button"
tabindex="-1"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
</div>
@ -505,7 +525,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
role="button"
tabindex="-1"
>
<div />
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
</div>

26
test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
View file

@ -90,9 +90,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
role="button"
tabindex="0"
>
<div
<svg
class="mx_KebabContextMenu_icon"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
<div
@ -220,9 +229,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
role="button"
tabindex="0"
>
<div
<svg
class="mx_KebabContextMenu_icon"
/>
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div>
</div>
<div