Deduplicate more icons using Compound Design Tokens (#132)

* 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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

View file

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

View file

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

View file

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

View file

@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
border-width: 2px; border-width: 2px;
border-color: var(--cpd-color-icon-accent-tertiary); border-color: var(--cpd-color-icon-accent-tertiary);
background-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-size: 12px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;

View file

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

View file

@ -258,7 +258,7 @@ Please see LICENSE files in the repository root for full details.
mask-position: center; mask-position: center;
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; 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; background: $primary-content;
} }
} }

View file

@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_IconizedContextMenu_checked::before { .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 { .mx_IconizedContextMenu_unchecked::before {

View file

@ -49,7 +49,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_MessageContextMenu_iconEndPoll::before { .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 { .mx_MessageContextMenu_iconForward::before {
@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_MessageContextMenu_iconCopy::before { .mx_MessageContextMenu_iconCopy::before {
height: 12px; height: 16px;
left: 2px;
mask-image: url($copy-button-url); mask-image: url($copy-button-url);
position: relative; position: relative;
width: 12px; width: 16px;
top: 3px;
} }
.mx_MessageContextMenu_iconEdit::before { .mx_MessageContextMenu_iconEdit::before {

View file

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

View file

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

View file

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

View file

@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
mask-position: center; mask-position: center;
mask-size: 20px; mask-size: 20px;
mask-repeat: no-repeat; 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");
} }
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details.
.mx_ReplyPreview_header_cancel { .mx_ReplyPreview_header_cancel {
background-color: $primary-content; 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-repeat: no-repeat;
mask-position: center; mask-position: center;
mask-size: 18px; mask-size: contain;
width: 18px; width: 20px;
height: 18px; height: 20px;
min-width: 18px; min-width: 20px;
min-height: 18px; min-height: 20px;
} }
} }
} }

View file

@ -131,7 +131,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_RoomSublist_menuButton::before { .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 { .mx_RoomSublist_headerText {

View file

@ -133,7 +133,7 @@ Please see LICENSE files in the repository root for full details.
} }
.mx_RoomTile_menuButton::before { .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) { &:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {

View file

@ -63,9 +63,9 @@ Please see LICENSE files in the repository root for full details.
position: absolute; position: absolute;
width: 18px; width: 18px;
height: 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-repeat: no-repeat;
mask-size: 10px; mask-size: 16px;
mask-position: 4px 4px; mask-position: center;
background: var(--cpd-color-icon-tertiary); background: var(--cpd-color-icon-tertiary);
} }

View file

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

View file

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

View file

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

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>

Before

Width:  |  Height:  |  Size: 873 B

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>

Before

Width:  |  Height:  |  Size: 650 B

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>

Before

Width:  |  Height:  |  Size: 227 B

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>

Before

Width:  |  Height:  |  Size: 285 B

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>

Before

Width:  |  Height:  |  Size: 502 B

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>

Before

Width:  |  Height:  |  Size: 248 B

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>

Before

Width:  |  Height:  |  Size: 488 B

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>

Before

Width:  |  Height:  |  Size: 269 B

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>

Before

Width:  |  Height:  |  Size: 590 B

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>

Before

Width:  |  Height:  |  Size: 373 B

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>

Before

Width:  |  Height:  |  Size: 228 B

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>

Before

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -239,7 +239,7 @@ $event-highlight-bg-color: $yellow-background;
/* event timestamp */ /* event timestamp */
$event-timestamp-color: #acacac; $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 */
$e2e-verified-color: #0dbd8b; $e2e-verified-color: #0dbd8b;

View file

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

View file

@ -14,6 +14,7 @@ import { AuthDict, CrossSigningKeys, MatrixError, UIAFlow, UIAResponse } from "m
import { CryptoEvent } from "matrix-js-sdk/src/crypto"; import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import classNames from "classnames"; import classNames from "classnames";
import { BackupTrustInfo, GeneratedSecretStorageKey, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api"; 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 { MatrixClientPeg } from "../../../../MatrixClientPeg";
import { _t, _td } from "../../../../languageHandler"; import { _t, _td } from "../../../../languageHandler";
@ -37,7 +38,6 @@ import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
import Spinner from "../../../../components/views/elements/Spinner"; import Spinner from "../../../../components/views/elements/Spinner";
import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog"; import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog";
import { IValidationResult } from "../../../../components/views/elements/Validation"; 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 PassphraseConfirmField from "../../../../components/views/auth/PassphraseConfirmField";
import { initialiseDehydration } from "../../../../utils/device/dehydration"; import { initialiseDehydration } from "../../../../utils/device/dehydration";

View file

@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; 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 { ChevronFace, ContextMenuButton, MenuProps, useContextMenu } from "../../structures/ContextMenu";
import { ButtonProps } from "../elements/AccessibleButton"; import { ButtonProps } from "../elements/AccessibleButton";
import IconizedContextMenu, { IconizedContextMenuOptionList } from "./IconizedContextMenu"; import IconizedContextMenu, { IconizedContextMenuOptionList } from "./IconizedContextMenu";

View file

@ -279,7 +279,11 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
<EntityTile <EntityTile
className="mx_EntityTile_ellipsis" className="mx_EntityTile_ellipsis"
avatarJsx={ 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} name={text}
showPresence={false} showPresence={false}

View file

@ -16,6 +16,7 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; 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 AccessibleButton from "./AccessibleButton";
import { _t } from "../../../languageHandler"; 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 MaximiseIcon } from "../../../../res/img/element-icons/maximise-expand.svg";
import { Icon as MinimiseIcon } from "../../../../res/img/element-icons/minus-button.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 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 { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@ -806,7 +806,7 @@ export default class AppTile extends React.Component<IProps, IState> {
ref={this.contextMenuButton} ref={this.contextMenuButton}
onClick={this.onContextMenuClick} onClick={this.onContextMenuClick}
> >
<MenuIcon className="mx_Icon mx_Icon_12" /> <EllipsisIcon className="mx_Icon mx_Icon_12" />
</ContextMenuButton> </ContextMenuButton>
)} )}
</span> </span>

View file

@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import classNames from "classnames"; 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 Dropdown, { DropdownProps } from "./Dropdown";
import { NonEmptyArray } from "../../../@types/common"; import { NonEmptyArray } from "../../../@types/common";

View file

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

View file

@ -7,10 +7,10 @@ Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; 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 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"; import { _t } from "../../../languageHandler";
interface Props { interface Props {

View file

@ -23,8 +23,8 @@ import {
import classNames from "classnames"; import classNames from "classnames";
import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin"; 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 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 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 EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
import { Icon as ResendIcon } from "../../../../res/img/element-icons/retry.svg"; import { Icon as ResendIcon } from "../../../../res/img/element-icons/retry.svg";

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 React, { FC, MutableRefObject, useCallback, useMemo } from "react";
import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; 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 PersistentApp from "../elements/PersistentApp";
import defaultDispatcher from "../../../dispatcher/dispatcher"; import defaultDispatcher from "../../../dispatcher/dispatcher";
@ -19,7 +20,6 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter"; import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import Toolbar from "../../../accessibility/Toolbar"; import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex"; 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 { Icon as HangupIcon } from "../../../../res/img/element-icons/call/hangup.svg";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { WidgetType } from "../../../widgets/WidgetType"; import { WidgetType } from "../../../widgets/WidgetType";

View file

@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
*/ */
import React from "react"; 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 { _t } from "../../../../languageHandler";
import AccessibleButton from "../../elements/AccessibleButton"; import AccessibleButton from "../../elements/AccessibleButton";
import { PollHistoryFilter } from "./types"; import { PollHistoryFilter } from "./types";

View file

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

View file

@ -238,7 +238,11 @@ export default class MemberList extends React.Component<IProps, IState> {
<EntityTile <EntityTile
className="mx_EntityTile_ellipsis" className="mx_EntityTile_ellipsis"
avatarJsx={ 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} name={text}
showPresence={false} showPresence={false}

View file

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

View file

@ -175,9 +175,18 @@ exports[`AppTile for a pinned widget should render 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_12" 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> </div>
</span> </span>
</div> </div>
@ -260,9 +269,18 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_12" 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> </div>
</span> </span>
</div> </div>
@ -424,9 +442,18 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_Icon mx_Icon_12" 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> </div>
</span> </span>
</div> </div>

View file

@ -16,9 +16,18 @@ exports[`<FilterDropdown /> renders dropdown options in menu 1`] = `
class="mx_FilterDropdown_option" class="mx_FilterDropdown_option"
data-testid="filter-option-one" data-testid="filter-option-one"
> >
<div <svg
class="mx_FilterDropdown_optionSelectedIcon" 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 <span
class="mx_FilterDropdown_optionLabel" class="mx_FilterDropdown_optionLabel"
> >

View file

@ -22,9 +22,18 @@ exports[`<PollHistory /> Poll detail navigates back to poll list from detail vie
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_PollDetailHeader_icon" 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 Active polls
</div> </div>
`; `;

View file

@ -130,7 +130,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
role="button" role="button"
tabindex="-1" 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> </div>
</div> </div>
@ -246,7 +256,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
role="button" role="button"
tabindex="-1" 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> </div>
</div> </div>
@ -362,7 +382,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
role="button" role="button"
tabindex="-1" 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> </div>
</div> </div>

View file

@ -146,9 +146,18 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_KebabContextMenu_icon" 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> </div>
<div <div
@ -181,9 +190,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_KebabContextMenu_icon" 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> </div>
<div <div
@ -325,9 +343,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_KebabContextMenu_icon" 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> </div>
<div <div

View file

@ -1399,7 +1399,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
<div <div
@ -1413,7 +1423,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
<div <div
@ -1427,7 +1447,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
<div <div
@ -1441,7 +1471,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
<div <div
@ -1455,7 +1495,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
<div <div
@ -1469,7 +1519,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
<div <div
@ -1483,7 +1543,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
<div <div
@ -1497,7 +1567,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
<div <div
@ -1511,7 +1591,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
role="button" role="button"
tabindex="0" 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> </div>
</div> </div>

View file

@ -273,7 +273,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
role="button" role="button"
tabindex="-1" 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> </div>
</div> </div>
@ -389,7 +399,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
role="button" role="button"
tabindex="-1" 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> </div>
</div> </div>
@ -505,7 +525,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
role="button" role="button"
tabindex="-1" 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> </div>
</div> </div>

View file

@ -90,9 +90,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_KebabContextMenu_icon" 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> </div>
<div <div
@ -220,9 +229,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
class="mx_KebabContextMenu_icon" 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> </div>
<div <div