Skip to content
This repository was archived by the owner on Oct 22, 2024. It is now read-only.

Commit 7448bd5

Browse files
t3chguyt3chguy
authored
Deduplicate more icons using Compound Design Tokens (#132)
* Deduplicate more icons using Compound Design Tokens Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 3256499 commit 7448bd5

File tree

68 files changed

+358
-210
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+358
-210
lines changed

Diff for: ‎playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png

-93 Bytes

Diff for: ‎playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png

-100 Bytes

Diff for: ‎playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png

-47 Bytes

Diff for: ‎playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png

-23 Bytes

Diff for: ‎playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png

-24 Bytes

Diff for: ‎playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png

-108 Bytes

Diff for: ‎playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png

-174 Bytes

Diff for: ‎playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png

-3 Bytes

Diff for: ‎playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png

-1021 Bytes

Diff for: ‎res/css/components/views/context_menus/_KebabContextMenu.pcss

+1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@ Please see LICENSE files in the repository root for full details.
88

99
.mx_KebabContextMenu_icon {
1010
width: 24px;
11+
height: 24px;
1112
color: $icon-button-color;
1213
}

Diff for: ‎res/css/components/views/dialogs/polls/_PollDetailHeader.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ Please see LICENSE files in the repository root for full details.
1212
}
1313

1414
.mx_PollDetailHeader_icon {
15-
height: 15px;
16-
width: 15px;
15+
height: 16px;
16+
width: 16px;
1717
margin-right: $spacing-8;
1818
vertical-align: middle;
1919
}

Diff for: ‎res/css/components/views/location/_ShareDialogButtons.pcss

+3-2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ Please see LICENSE files in the repository root for full details.
4040
}
4141

4242
.mx_ShareDialogButtons_button-icon {
43-
height: 10px;
44-
margin-top: 3px;
43+
width: 20px;
44+
height: 20px;
45+
margin: 2px;
4546
}

Diff for: ‎res/css/components/views/polls/_PollOption.pcss

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

Diff for: ‎res/css/structures/_SpaceHierarchy.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ Please see LICENSE files in the repository root for full details.
211211
mask-size: contain;
212212
mask-repeat: no-repeat;
213213
background-color: $accent;
214-
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
214+
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
215215
}
216216
}
217217
}

Diff for: ‎res/css/structures/_SpacePanel.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ Please see LICENSE files in the repository root for full details.
258258
mask-position: center;
259259
mask-size: contain;
260260
mask-repeat: no-repeat;
261-
mask-image: url("$(res)/img/element-icons/context-menu.svg");
261+
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
262262
background: $primary-content;
263263
}
264264
}

Diff for: ‎res/css/views/context_menus/_IconizedContextMenu.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details.
160160
}
161161

162162
.mx_IconizedContextMenu_checked::before {
163-
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
163+
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
164164
}
165165

166166
.mx_IconizedContextMenu_unchecked::before {

Diff for: ‎res/css/views/context_menus/_MessageContextMenu.pcss

+3-5
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ Please see LICENSE files in the repository root for full details.
4949
}
5050

5151
.mx_MessageContextMenu_iconEndPoll::before {
52-
mask-image: url("$(res)/img/element-icons/check-white.svg");
52+
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
5353
}
5454

5555
.mx_MessageContextMenu_iconForward::before {
@@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details.
8181
}
8282

8383
.mx_MessageContextMenu_iconCopy::before {
84-
height: 12px;
85-
left: 2px;
84+
height: 16px;
8685
mask-image: url($copy-button-url);
8786
position: relative;
88-
width: 12px;
89-
top: 3px;
87+
width: 16px;
9088
}
9189

9290
.mx_MessageContextMenu_iconEdit::before {

Diff for: ‎res/css/views/dialogs/_AddExistingToSpaceDialog.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
197197
mask-size: contain;
198198
mask-repeat: no-repeat;
199199
background-color: $accent;
200-
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
200+
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
201201
}
202202
}
203203
}

Diff for: ‎res/css/views/dialogs/_SpotlightDialog.pcss

+6-8
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,12 @@ Please see LICENSE files in the repository root for full details.
121121
content: "";
122122
mask-repeat: no-repeat;
123123
mask-position: center;
124-
mask-size: contain;
125-
width: 8px;
126-
height: 8px;
124+
mask-size: 14px;
125+
width: inherit;
126+
height: inherit;
127127
position: absolute;
128-
left: 50%;
129-
top: 50%;
130-
transform: translate(-50%, -50%);
131-
mask-image: url("$(res)/img/cancel-small.svg");
128+
left: 0;
129+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
132130
}
133131
}
134132
}
@@ -358,7 +356,7 @@ Please see LICENSE files in the repository root for full details.
358356
}
359357

360358
.mx_SpotlightDialog_option--menu::before {
361-
mask-image: url("$(res)/img/element-icons/context-menu.svg");
359+
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
362360
}
363361

364362
&:hover,

Diff for: ‎res/css/views/directory/_NetworkDropdown.pcss

+4-4
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,14 @@ Please see LICENSE files in the repository root for full details.
6464
content: "";
6565
mask-repeat: no-repeat;
6666
mask-position: center;
67-
mask-size: contain;
68-
width: 8px;
69-
height: 8px;
67+
mask-size: 14px;
68+
width: inherit;
69+
height: inherit;
7070
position: absolute;
7171
left: 50%;
7272
top: 50%;
7373
transform: translate(-50%, -50%);
74-
mask-image: url("$(res)/img/cancel-small.svg");
74+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
7575
}
7676
}
7777

Diff for: ‎res/css/views/elements/_FacePile.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
2828
mask-position: center;
2929
mask-size: 20px;
3030
mask-repeat: no-repeat;
31-
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
31+
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
3232
}
3333
}
3434

Diff for: ‎res/css/views/elements/_TagComposer.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ Please see LICENSE files in the repository root for full details.
6868
position: relative;
6969

7070
svg {
71-
width: 0.5em;
72-
vertical-align: middle;
71+
width: 16px;
72+
height: 16px;
7373
}
7474
}
7575
}

Diff for: ‎res/css/views/elements/_UseCaseSelectionButton.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
8080
width: 12px;
8181
height: 12px;
8282

83-
mask-image: url("$(res)/img/element-icons/check-white.svg");
83+
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
8484
}
8585
}
8686

Diff for: ‎res/css/views/right_panel/_ExtensionsCard.pcss

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

Diff for: ‎res/css/views/rooms/_LegacyRoomHeader.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ Please see LICENSE files in the repository root for full details.
283283

284284
.mx_LegacyRoomHeader_closeButton {
285285
&::before {
286-
mask-image: url("$(res)/img/cancel.svg");
286+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
287287
mask-size: 20px;
288288
mask-position: center;
289289
}

Diff for: ‎res/css/views/rooms/_LinkPreviewGroup.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ Please see LICENSE files in the repository root for full details.
1212
width: 18px;
1313
height: 18px;
1414

15-
img {
15+
svg {
1616
flex: 0 0 40px;
1717
visibility: hidden;
1818
}
1919
}
2020

2121
&:hover .mx_LinkPreviewGroup_hide img,
22-
.mx_LinkPreviewGroup_hide:focus-visible:focus img {
22+
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
2323
visibility: visible;
2424
}
2525

Diff for: ‎res/css/views/rooms/_ReplyPreview.pcss

+6-6
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details.
3131

3232
.mx_ReplyPreview_header_cancel {
3333
background-color: $primary-content;
34-
mask: url("$(res)/img/cancel.svg");
34+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
3535
mask-repeat: no-repeat;
3636
mask-position: center;
37-
mask-size: 18px;
38-
width: 18px;
39-
height: 18px;
40-
min-width: 18px;
41-
min-height: 18px;
37+
mask-size: contain;
38+
width: 20px;
39+
height: 20px;
40+
min-width: 20px;
41+
min-height: 20px;
4242
}
4343
}
4444
}

Diff for: ‎res/css/views/rooms/_RoomSublist.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ Please see LICENSE files in the repository root for full details.
131131
}
132132

133133
.mx_RoomSublist_menuButton::before {
134-
mask-image: url("$(res)/img/element-icons/context-menu.svg");
134+
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
135135
}
136136

137137
.mx_RoomSublist_headerText {

Diff for: ‎res/css/views/rooms/_RoomTile.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ Please see LICENSE files in the repository root for full details.
133133
}
134134

135135
.mx_RoomTile_menuButton::before {
136-
mask-image: url("$(res)/img/element-icons/context-menu.svg");
136+
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
137137
}
138138

139139
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {

Diff for: ‎res/css/views/rooms/_TopUnreadMessagesBar.pcss

+3-3
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ Please see LICENSE files in the repository root for full details.
6363
position: absolute;
6464
width: 18px;
6565
height: 18px;
66-
mask-image: url("$(res)/img/cancel.svg");
66+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
6767
mask-repeat: no-repeat;
68-
mask-size: 10px;
69-
mask-position: 4px 4px;
68+
mask-size: 16px;
69+
mask-position: center;
7070
background: var(--cpd-color-icon-tertiary);
7171
}

Diff for: ‎res/css/views/toasts/_IncomingCallToast.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
8989
&::before {
9090
content: "";
9191

92-
mask-image: url("$(res)/img/cancel.svg");
92+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
9393

9494
height: inherit;
9595
width: inherit;

Diff for: ‎res/css/views/user-onboarding/_UserOnboardingButton.pcss

+6-7
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,13 @@ Please see LICENSE files in the repository root for full details.
5252
content: "";
5353
mask-repeat: no-repeat;
5454
mask-position: center;
55-
mask-size: contain;
56-
width: 7px;
57-
height: 7px;
55+
mask-size: 12px;
56+
width: inherit;
57+
height: inherit;
5858
position: absolute;
59-
left: 50%;
60-
top: 50%;
61-
transform: translate(-50%, -50%);
62-
mask-image: url("$(res)/img/element-icons/cancel-rounded.svg");
59+
left: -1px;
60+
top: -1px;
61+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
6362
}
6463
}
6564
}

Diff for: ‎res/css/views/user-onboarding/_UserOnboardingTask.pcss

+6-6
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,13 @@ Please see LICENSE files in the repository root for full details.
7575
content: "";
7676
mask-repeat: no-repeat;
7777
mask-position: center;
78-
mask-size: contain;
79-
width: 16px;
80-
height: 16px;
78+
mask-size: 24px;
79+
width: inherit;
80+
height: inherit;
8181
position: absolute;
82-
left: calc(50% - 8px);
83-
top: calc(50% - 8px);
84-
mask-image: url("$(res)/img/element-icons/check-white.svg");
82+
left: 0;
83+
top: 0;
84+
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
8585

8686
animation-duration: 300ms;
8787
animation-fill-mode: both;

Diff for: ‎res/img/cancel-small.svg

-13
This file was deleted.

Diff for: ‎res/img/cancel.svg

-3
This file was deleted.

Diff for: ‎res/img/element-icons/back.svg

-3
This file was deleted.

Diff for: ‎res/img/element-icons/cancel-rounded.svg

-4
This file was deleted.

Diff for: ‎res/img/element-icons/caret-left.svg

-3
This file was deleted.

Diff for: ‎res/img/element-icons/check-white.svg

-3
This file was deleted.

Diff for: ‎res/img/element-icons/check.svg

-20
This file was deleted.

Diff for: ‎res/img/element-icons/context-menu.svg

-5
This file was deleted.

Diff for: ‎res/img/element-icons/copy.svg

-3
This file was deleted.

Diff for: ‎res/img/element-icons/room/ellipsis.svg

-5
This file was deleted.

Diff for: ‎res/img/element-icons/roomlist/checkmark.svg

-3
This file was deleted.

0 commit comments

Comments
 (0)