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

Use Compound close icon in favour of mishmash of x/close icons #108

Merged
merged 5 commits into from
Oct 2, 2024
Merged

Use Compound close icon in favour of mishmash of x/close icons #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ffe530d
Use Compound close icon in favour of mishmash of x/close icons
t3chguy Oct 1, 2024
5b3d7cd
Update snapshots
t3chguy Oct 1, 2024
c769459
Remove stale CSS
t3chguy Oct 1, 2024
eae7e94
Iterate
t3chguy Oct 1, 2024
dd9b854
Update snapshot
t3chguy Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion res/css/components/views/beacon/_DialogSidebar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ Please see LICENSE files in the repository root for full details.

.mx_DialogSidebar_closeButtonIcon {
color: $tertiary-content;
height: 12px;
}
}

Expand Down
8 changes: 5 additions & 3 deletions res/css/structures/_SearchBox.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ Please see LICENSE files in the repository root for full details.

.mx_SearchBox_closeButton {
cursor: pointer;
background-image: url("$(res)/img/icons-close.svg");
background-repeat: no-repeat;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
width: 16px;
height: 16px;
background-position: center;
padding: 9px;
background-color: var(--cpd-color-icon-secondary);
}
}
2 changes: 1 addition & 1 deletion res/css/structures/_UploadBar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,5 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url("$(res)/img/icons-close.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
63 changes: 0 additions & 63 deletions res/css/structures/_UserMenu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,66 +204,3 @@ Please see LICENSE files in the repository root for full details.
mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
}
}

.mx_UserMenu_CustomStatusSection {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This css is not used anymore?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It wasn't used since we removed custom status labs over a year ago, but finally cleaning it up here as it was referencing an x/close svg and updating it felt moot

margin: 0 12px 8px;

.mx_UserMenu_CustomStatusSection_field {
position: relative;
display: flex;

&.mx_UserMenu_CustomStatusSection_field_hasQuery {
.mx_UserMenu_CustomStatusSection_clear {
display: block;
}
}

> .mx_UserMenu_CustomStatusSection_input {
border: 1px solid $accent;
border-radius: 8px;
width: 100%;

&:focus + .mx_UserMenu_CustomStatusSection_clear {
display: block;
}
}

> .mx_UserMenu_CustomStatusSection_clear {
display: none;

position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);

width: 16px;
height: 16px;
margin-right: 8px;
background-color: $quinary-content;
border-radius: 50%;

&::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
mask-image: url("$(res)/img/feather-customised/x.svg");
mask-position: center;
mask-size: 12px;
mask-repeat: no-repeat;
background-color: $secondary-content;
}
}
}

> p {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
margin: 4px 0;
}

.mx_AccessibleButton_kind_primary_outline {
display: block;
}
}
10 changes: 4 additions & 6 deletions res/css/views/dialogs/_PollCreateDialog.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,13 @@ Please see LICENSE files in the repository root for full details.

&::before {
content: "";
mask: url("$(res)/img/element-icons/x-8px.svg");
mask: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 8px;
height: 8px;
mask-size: 16px;
width: inherit;
height: inherit;
position: absolute;
top: 6px;
left: 6px;
background-color: $secondary-content;
}
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert;

&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert;
}
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/elements/_AccessibleButton.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ Please see LICENSE files in the repository root for full details.
background-color: var(--cpd-color-bg-critical-primary);

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

Expand Down
4 changes: 2 additions & 2 deletions res/css/views/elements/_ImageView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,8 @@ $button-gap: 24px;
&::before {
width: $button-size;
height: $button-size;
mask-image: url("$(res)/img/image-view/close.svg");
mask-size: 40%;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-size: 24px;
}
}

Expand Down
2 changes: 1 addition & 1 deletion res/css/views/elements/_Validation.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert;

&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert;
}
}
Expand Down
3 changes: 0 additions & 3 deletions res/img/compound/close-16px.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions res/img/compound/close-8px.svg
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions res/img/element-icons/x-8px.svg
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions res/img/feather-customised/x.svg
View file
Open in desktop

This file was deleted.

96 changes: 0 additions & 96 deletions res/img/icons-close.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions res/img/image-view/close.svg
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/components/views/beacon/DialogSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.

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

import { Icon as CloseIcon } from "../../../../res/img/image-view/close.svg";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import Heading from "../typography/Heading";
Expand All @@ -32,7 +32,7 @@ const DialogSidebar: React.FC<Props> = ({ beacons, onBeaconClick, requestClose }
title={_t("location_sharing|close_sidebar")}
data-testid="dialog-sidebar-close"
>
<CloseIcon className="mx_DialogSidebar_closeButtonIcon" />
<CloseIcon className="mx_DialogSidebar_closeButtonIcon" height="24px" width="24px" />
</AccessibleButton>
</div>
{beacons?.length ? (
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/beacon/RoomLiveShareWarning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

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

import { _t } from "../../../languageHandler";
import { useEventEmitterState } from "../../../hooks/useEventEmitter";
Expand All @@ -16,7 +17,6 @@ import { useOwnLiveBeacons } from "../../../utils/beacon";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import Spinner from "../elements/Spinner";
import StyledLiveBeaconIcon from "./StyledLiveBeaconIcon";
import { Icon as CloseIcon } from "../../../../res/img/image-view/close.svg";
import LiveTimeRemaining from "./LiveTimeRemaining";
import dispatcher from "../../../dispatcher/dispatcher";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/rooms/RoomKnocksBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";

import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg";
import { Icon as XIcon } from "../../../../res/img/feather-customised/x.svg";
import dis from "../../../dispatcher/dispatcher";
import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import { _t } from "../../../languageHandler";
Expand Down Expand Up @@ -92,7 +92,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
onClick={() => handleDeny(knockMembers[0].userId)}
title={_t("action|deny")}
>
<XIcon width={18} height={18} />
<CloseIcon width={18} height={18} />
</AccessibleButton>
<AccessibleButton
className="mx_RoomKnocksBar_action"
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import React, { useCallback, useState, VFC } from "react";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";

import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg";
import { Icon as XIcon } from "../../../../../../res/img/feather-customised/x.svg";
import { formatRelativeTime } from "../../../../../DateUtils";
import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter";
import { _t } from "../../../../../languageHandler";
Expand Down Expand Up @@ -89,7 +89,7 @@ const Knock: VFC<{
onClick={() => handleDeny(roomMember.userId)}
title={_t("action|deny")}
>
<XIcon width={18} height={18} />
<CloseIcon width={18} height={18} />
</AccessibleButton>
<AccessibleButton
className="mx_PeopleRoomSettingsTab_action"
Expand Down
4 changes: 2 additions & 2 deletions src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";

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

const closeButton = showClose && (
<AccessibleButton onClick={onCloseClick}>
<XIcon className="mx_Icon mx_Icon_16" />
<CloseIcon className="mx_Icon mx_Icon_16" />
</AccessibleButton>
);

Expand Down
4 changes: 2 additions & 2 deletions src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ 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 {
VoiceBroadcastHeader,
Expand All @@ -16,7 +17,6 @@ import {
} from "../..";
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
import { Icon as XIcon } from "../../../../res/img/compound/close-8px.svg";

interface VoiceBroadcastSmallPlaybackBodyProps {
playback: VoiceBroadcastPlayback;
Expand All @@ -37,7 +37,7 @@ export const VoiceBroadcastSmallPlaybackBody: React.FC<VoiceBroadcastSmallPlayba
/>
<VoiceBroadcastPlaybackControl state={playbackState} onClick={toggle} />
<AccessibleButton onClick={() => playback.stop()}>
<XIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" />
<CloseIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" />
</AccessibleButton>
</div>
);
Expand Down
Loading
Loading