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

Commit 5d9996c

Browse files
t3chguyt3chguy
authored
Use Compound close icon in favour of mishmash of x/close icons (#108)
* Use Compound close icon in favour of mishmash of x/close icons Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Remove stale CSS Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update snapshot Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent c2c3168 commit 5d9996c

File tree

26 files changed

+143
-225
lines changed

26 files changed

+143
-225
lines changed

‎res/css/components/views/beacon/_DialogSidebar.pcss

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

3535
.mx_DialogSidebar_closeButtonIcon {
3636
color: $tertiary-content;
37-
height: 12px;
3837
}
3938
}
4039

‎res/css/structures/_SearchBox.pcss

+5-3
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@ Please see LICENSE files in the repository root for full details.
1616

1717
.mx_SearchBox_closeButton {
1818
cursor: pointer;
19-
background-image: url("$(res)/img/icons-close.svg");
20-
background-repeat: no-repeat;
19+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
20+
mask-repeat: no-repeat;
21+
mask-position: center;
22+
mask-size: 16px;
2123
width: 16px;
2224
height: 16px;
23-
background-position: center;
2425
padding: 9px;
26+
background-color: var(--cpd-color-icon-secondary);
2527
}
2628
}

‎res/css/structures/_UploadBar.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,5 +55,5 @@ Please see LICENSE files in the repository root for full details.
5555
mask-repeat: no-repeat;
5656
mask-position: center;
5757
background-color: $muted-fg-color;
58-
mask-image: url("$(res)/img/icons-close.svg");
58+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
5959
}

‎res/css/structures/_UserMenu.pcss

-63
Original file line numberDiff line numberDiff line change
@@ -204,66 +204,3 @@ Please see LICENSE files in the repository root for full details.
204204
mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
205205
}
206206
}
207-
208-
.mx_UserMenu_CustomStatusSection {
209-
margin: 0 12px 8px;
210-
211-
.mx_UserMenu_CustomStatusSection_field {
212-
position: relative;
213-
display: flex;
214-
215-
&.mx_UserMenu_CustomStatusSection_field_hasQuery {
216-
.mx_UserMenu_CustomStatusSection_clear {
217-
display: block;
218-
}
219-
}
220-
221-
> .mx_UserMenu_CustomStatusSection_input {
222-
border: 1px solid $accent;
223-
border-radius: 8px;
224-
width: 100%;
225-
226-
&:focus + .mx_UserMenu_CustomStatusSection_clear {
227-
display: block;
228-
}
229-
}
230-
231-
> .mx_UserMenu_CustomStatusSection_clear {
232-
display: none;
233-
234-
position: absolute;
235-
top: 50%;
236-
right: 0;
237-
transform: translateY(-50%);
238-
239-
width: 16px;
240-
height: 16px;
241-
margin-right: 8px;
242-
background-color: $quinary-content;
243-
border-radius: 50%;
244-
245-
&::before {
246-
content: "";
247-
position: absolute;
248-
width: inherit;
249-
height: inherit;
250-
mask-image: url("$(res)/img/feather-customised/x.svg");
251-
mask-position: center;
252-
mask-size: 12px;
253-
mask-repeat: no-repeat;
254-
background-color: $secondary-content;
255-
}
256-
}
257-
}
258-
259-
> p {
260-
font-size: $font-12px;
261-
line-height: $font-15px;
262-
color: $secondary-content;
263-
margin: 4px 0;
264-
}
265-
266-
.mx_AccessibleButton_kind_primary_outline {
267-
display: block;
268-
}
269-
}

‎res/css/views/dialogs/_PollCreateDialog.pcss

+4-6
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,13 @@ Please see LICENSE files in the repository root for full details.
5252

5353
&::before {
5454
content: "";
55-
mask: url("$(res)/img/element-icons/x-8px.svg");
55+
mask: url("@vector-im/compound-design-tokens/icons/close.svg");
5656
mask-repeat: no-repeat;
5757
mask-position: center;
58-
mask-size: cover;
59-
width: 8px;
60-
height: 8px;
58+
mask-size: 16px;
59+
width: inherit;
60+
height: inherit;
6161
position: absolute;
62-
top: 6px;
63-
left: 6px;
6462
background-color: $secondary-content;
6563
}
6664
}

‎res/css/views/dialogs/security/_AccessSecretStorageDialog.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
color: $alert;
9090

9191
&::before {
92-
mask-image: url("$(res)/img/feather-customised/x.svg");
92+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
9393
background-color: $alert;
9494
}
9595
}

‎res/css/views/elements/_AccessibleButton.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ Please see LICENSE files in the repository root for full details.
7272
background-color: var(--cpd-color-bg-critical-primary);
7373

7474
&::before {
75-
mask-image: url("$(res)/img/feather-customised/x.svg");
75+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
7676
}
7777
}
7878

‎res/css/views/elements/_ImageView.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@ $button-gap: 24px;
139139
&::before {
140140
width: $button-size;
141141
height: $button-size;
142-
mask-image: url("$(res)/img/image-view/close.svg");
143-
mask-size: 40%;
142+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
143+
mask-size: 24px;
144144
}
145145
}
146146

‎res/css/views/elements/_Validation.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
5353
color: $alert;
5454

5555
&::before {
56-
mask-image: url("$(res)/img/feather-customised/x.svg");
56+
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
5757
background-color: $alert;
5858
}
5959
}

‎res/img/compound/close-16px.svg

-3
This file was deleted.

‎res/img/compound/close-8px.svg

-3
This file was deleted.

‎res/img/element-icons/x-8px.svg

-4
This file was deleted.

‎res/img/feather-customised/x.svg

-4
This file was deleted.

‎res/img/icons-close.svg

-96
This file was deleted.

‎res/img/image-view/close.svg

-3
This file was deleted.

‎src/components/views/beacon/DialogSidebar.tsx

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

99
import React from "react";
1010
import { Beacon } from "matrix-js-sdk/src/matrix";
11+
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
1112

12-
import { Icon as CloseIcon } from "../../../../res/img/image-view/close.svg";
1313
import { _t } from "../../../languageHandler";
1414
import AccessibleButton from "../elements/AccessibleButton";
1515
import Heading from "../typography/Heading";
@@ -32,7 +32,7 @@ const DialogSidebar: React.FC<Props> = ({ beacons, onBeaconClick, requestClose }
3232
title={_t("location_sharing|close_sidebar")}
3333
data-testid="dialog-sidebar-close"
3434
>
35-
<CloseIcon className="mx_DialogSidebar_closeButtonIcon" />
35+
<CloseIcon className="mx_DialogSidebar_closeButtonIcon" height="24px" width="24px" />
3636
</AccessibleButton>
3737
</div>
3838
{beacons?.length ? (

‎src/components/views/beacon/RoomLiveShareWarning.tsx

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

99
import React from "react";
1010
import { Room } from "matrix-js-sdk/src/matrix";
11+
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
1112

1213
import { _t } from "../../../languageHandler";
1314
import { useEventEmitterState } from "../../../hooks/useEventEmitter";
@@ -16,7 +17,6 @@ import { useOwnLiveBeacons } from "../../../utils/beacon";
1617
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
1718
import Spinner from "../elements/Spinner";
1819
import StyledLiveBeaconIcon from "./StyledLiveBeaconIcon";
19-
import { Icon as CloseIcon } from "../../../../res/img/image-view/close.svg";
2020
import LiveTimeRemaining from "./LiveTimeRemaining";
2121
import dispatcher from "../../../dispatcher/dispatcher";
2222
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";

‎src/components/views/rooms/RoomKnocksBar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
99
import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
1010
import { KnownMembership } from "matrix-js-sdk/src/types";
1111
import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react";
12+
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
1213

1314
import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg";
14-
import { Icon as XIcon } from "../../../../res/img/feather-customised/x.svg";
1515
import dis from "../../../dispatcher/dispatcher";
1616
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
1717
import { _t } from "../../../languageHandler";
@@ -92,7 +92,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
9292
onClick={() => handleDeny(knockMembers[0].userId)}
9393
title={_t("action|deny")}
9494
>
95-
<XIcon width={18} height={18} />
95+
<CloseIcon width={18} height={18} />
9696
</AccessibleButton>
9797
<AccessibleButton
9898
className="mx_RoomKnocksBar_action"

‎src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
99
import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
1010
import { KnownMembership } from "matrix-js-sdk/src/types";
1111
import React, { useCallback, useState, VFC } from "react";
12+
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
1213

1314
import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg";
14-
import { Icon as XIcon } from "../../../../../../res/img/feather-customised/x.svg";
1515
import { formatRelativeTime } from "../../../../../DateUtils";
1616
import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter";
1717
import { _t } from "../../../../../languageHandler";
@@ -89,7 +89,7 @@ const Knock: VFC<{
8989
onClick={() => handleDeny(roomMember.userId)}
9090
title={_t("action|deny")}
9191
>
92-
<XIcon width={18} height={18} />
92+
<CloseIcon width={18} height={18} />
9393
</AccessibleButton>
9494
<AccessibleButton
9595
className="mx_PeopleRoomSettingsTab_action"

‎src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ Please see LICENSE files in the repository root for full details.
99
import React from "react";
1010
import { Room } from "matrix-js-sdk/src/matrix";
1111
import classNames from "classnames";
12+
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
1213

1314
import { LiveBadge, VoiceBroadcastLiveness } from "../..";
1415
import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg";
1516
import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg";
1617
import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg";
17-
import { Icon as XIcon } from "../../../../res/img/compound/close-16px.svg";
1818
import { _t } from "../../../languageHandler";
1919
import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
2020
import AccessibleButton, { ButtonEvent } from "../../../components/views/elements/AccessibleButton";
@@ -65,7 +65,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
6565

6666
const closeButton = showClose && (
6767
<AccessibleButton onClick={onCloseClick}>
68-
<XIcon className="mx_Icon mx_Icon_16" />
68+
<CloseIcon className="mx_Icon mx_Icon_16" />
6969
</AccessibleButton>
7070
);
7171

‎src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
77
*/
88

99
import React from "react";
10+
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
1011

1112
import {
1213
VoiceBroadcastHeader,
@@ -16,7 +17,6 @@ import {
1617
} from "../..";
1718
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
1819
import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
19-
import { Icon as XIcon } from "../../../../res/img/compound/close-8px.svg";
2020

2121
interface VoiceBroadcastSmallPlaybackBodyProps {
2222
playback: VoiceBroadcastPlayback;
@@ -37,7 +37,7 @@ export const VoiceBroadcastSmallPlaybackBody: React.FC<VoiceBroadcastSmallPlayba
3737
/>
3838
<VoiceBroadcastPlaybackControl state={playbackState} onClick={toggle} />
3939
<AccessibleButton onClick={() => playback.stop()}>
40-
<XIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" />
40+
<CloseIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" />
4141
</AccessibleButton>
4242
</div>
4343
);

0 commit comments

Comments
 (0)