From 5d9996c2812f465c8bda7a74d20692a1d2687a7b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 2 Oct 2024 11:06:17 +0100 Subject: [PATCH] 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 <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove stale CSS Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/beacon/_DialogSidebar.pcss | 1 - res/css/structures/_SearchBox.pcss | 8 +- res/css/structures/_UploadBar.pcss | 2 +- res/css/structures/_UserMenu.pcss | 63 ------------ res/css/views/dialogs/_PollCreateDialog.pcss | 10 +- .../security/_AccessSecretStorageDialog.pcss | 2 +- res/css/views/elements/_AccessibleButton.pcss | 2 +- res/css/views/elements/_ImageView.pcss | 4 +- res/css/views/elements/_Validation.pcss | 2 +- res/img/compound/close-16px.svg | 3 - res/img/compound/close-8px.svg | 3 - res/img/element-icons/x-8px.svg | 4 - res/img/feather-customised/x.svg | 4 - res/img/icons-close.svg | 96 ------------------- res/img/image-view/close.svg | 3 - src/components/views/beacon/DialogSidebar.tsx | 4 +- .../views/beacon/RoomLiveShareWarning.tsx | 2 +- src/components/views/rooms/RoomKnocksBar.tsx | 4 +- .../tabs/room/PeopleRoomSettingsTab.tsx | 4 +- .../components/atoms/VoiceBroadcastHeader.tsx | 4 +- .../VoiceBroadcastSmallPlaybackBody.tsx | 4 +- .../__snapshots__/DialogSidebar-test.tsx.snap | 26 ++++- .../RoomLiveShareWarning-test.tsx.snap | 13 ++- .../PeopleRoomSettingsTab-test.tsx.snap | 22 ++++- ...oiceBroadcastPreRecordingPip-test.tsx.snap | 13 ++- ...ceBroadcastSmallPlaybackBody-test.tsx.snap | 65 +++++++++++-- 26 files changed, 143 insertions(+), 225 deletions(-) delete mode 100644 res/img/compound/close-16px.svg delete mode 100644 res/img/compound/close-8px.svg delete mode 100644 res/img/element-icons/x-8px.svg delete mode 100644 res/img/feather-customised/x.svg delete mode 100644 res/img/icons-close.svg delete mode 100644 res/img/image-view/close.svg diff --git a/res/css/components/views/beacon/_DialogSidebar.pcss b/res/css/components/views/beacon/_DialogSidebar.pcss index 4ff9c6da7e..577a8f19c1 100644 --- a/res/css/components/views/beacon/_DialogSidebar.pcss +++ b/res/css/components/views/beacon/_DialogSidebar.pcss @@ -34,7 +34,6 @@ Please see LICENSE files in the repository root for full details. .mx_DialogSidebar_closeButtonIcon { color: $tertiary-content; - height: 12px; } } diff --git a/res/css/structures/_SearchBox.pcss b/res/css/structures/_SearchBox.pcss index 457f238f3a..316294462d 100644 --- a/res/css/structures/_SearchBox.pcss +++ b/res/css/structures/_SearchBox.pcss @@ -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); } } diff --git a/res/css/structures/_UploadBar.pcss b/res/css/structures/_UploadBar.pcss index ec274a585b..f28b2fe23a 100644 --- a/res/css/structures/_UploadBar.pcss +++ b/res/css/structures/_UploadBar.pcss @@ -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"); } diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index 543f84bcf2..abc3ed2083 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -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 { - 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; - } -} diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 0dfe695645..b0d89c4676 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -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; } } diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss index 6e8309370f..372b41042b 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss @@ -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; } } diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index 24a6c6d01b..3101520bd4 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -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"); } } diff --git a/res/css/views/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss index a1622fe522..2d48dea994 100644 --- a/res/css/views/elements/_ImageView.pcss +++ b/res/css/views/elements/_ImageView.pcss @@ -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; } } diff --git a/res/css/views/elements/_Validation.pcss b/res/css/views/elements/_Validation.pcss index e92ab9c40c..24953216df 100644 --- a/res/css/views/elements/_Validation.pcss +++ b/res/css/views/elements/_Validation.pcss @@ -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; } } diff --git a/res/img/compound/close-16px.svg b/res/img/compound/close-16px.svg deleted file mode 100644 index 6929ae3f90..0000000000 --- a/res/img/compound/close-16px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/compound/close-8px.svg b/res/img/compound/close-8px.svg deleted file mode 100644 index a7d7977149..0000000000 --- a/res/img/compound/close-8px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/x-8px.svg b/res/img/element-icons/x-8px.svg deleted file mode 100644 index c9730ed619..0000000000 --- a/res/img/element-icons/x-8px.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/feather-customised/x.svg b/res/img/feather-customised/x.svg deleted file mode 100644 index a4f6c4a81a..0000000000 --- a/res/img/feather-customised/x.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/icons-close.svg b/res/img/icons-close.svg deleted file mode 100644 index b2dd44fc26..0000000000 --- a/res/img/icons-close.svg +++ /dev/null @@ -1,96 +0,0 @@ - - - -image/svg+xmlicons_create_room - -icons_create_room -Created with sketchtool. - - - - - - - - - - - - - - diff --git a/res/img/image-view/close.svg b/res/img/image-view/close.svg deleted file mode 100644 index d603b7f5cc..0000000000 --- a/res/img/image-view/close.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/views/beacon/DialogSidebar.tsx b/src/components/views/beacon/DialogSidebar.tsx index 638330b961..824d772bce 100644 --- a/src/components/views/beacon/DialogSidebar.tsx +++ b/src/components/views/beacon/DialogSidebar.tsx @@ -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"; @@ -32,7 +32,7 @@ const DialogSidebar: React.FC = ({ beacons, onBeaconClick, requestClose } title={_t("location_sharing|close_sidebar")} data-testid="dialog-sidebar-close" > - + {beacons?.length ? ( diff --git a/src/components/views/beacon/RoomLiveShareWarning.tsx b/src/components/views/beacon/RoomLiveShareWarning.tsx index c737b8be3b..5d37ef075e 100644 --- a/src/components/views/beacon/RoomLiveShareWarning.tsx +++ b/src/components/views/beacon/RoomLiveShareWarning.tsx @@ -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"; @@ -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"; diff --git a/src/components/views/rooms/RoomKnocksBar.tsx b/src/components/views/rooms/RoomKnocksBar.tsx index 7f9aeae3ff..9bffe6c654 100644 --- a/src/components/views/rooms/RoomKnocksBar.tsx +++ b/src/components/views/rooms/RoomKnocksBar.tsx @@ -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"; @@ -92,7 +92,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => { onClick={() => handleDeny(knockMembers[0].userId)} title={_t("action|deny")} > - + handleDeny(roomMember.userId)} title={_t("action|deny")} > - + = ({ const closeButton = showClose && ( - + ); diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx index c2bc3ff2ee..a791ac75d7 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody.tsx @@ -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, @@ -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; @@ -37,7 +37,7 @@ export const VoiceBroadcastSmallPlaybackBody: React.FC playback.stop()}> - + ); diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap index bd6f9656ff..79fc0a0864 100644 --- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap @@ -20,9 +20,18 @@ exports[` renders sidebar correctly with beacons 1`] = ` role="button" tabindex="0" > -
+ fill="currentColor" + height="24px" + viewBox="0 0 24 24" + width="24px" + xmlns="http://www.w3.org/2000/svg" + > + +
    renders sidebar correctly without beacons 1`] = ` role="button" tabindex="0" > -
    + fill="currentColor" + height="24px" + viewBox="0 0 24 24" + width="24px" + xmlns="http://www.w3.org/2000/svg" + > + +
    when user has live beacons and geolocation is role="button" tabindex="0" > -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
    diff --git a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap index ec438893e8..1dedfa7dd4 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap @@ -72,10 +72,17 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`] role="button" tabindex="0" > -
    + xmlns="http://www.w3.org/2000/svg" + > + +
    -
    + xmlns="http://www.w3.org/2000/svg" + > + +
    -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
    when rendering a { state: 'pause', role="button" tabindex="0" > -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
    @@ -152,9 +161,18 @@ exports[` when rendering a { state: 'playing' role="button" tabindex="0" > -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
    @@ -247,9 +265,18 @@ exports[` when rendering a buffering broadcas role="button" tabindex="0" > -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
    @@ -323,9 +350,18 @@ exports[` when rendering a playing broadcast role="button" tabindex="0" > -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
    @@ -399,9 +435,18 @@ exports[` when rendering a stopped broadcast role="button" tabindex="0" > -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +