From ffe530d9c4d22bfa8b3ad5986211ff8ba0894966 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 1 Oct 2024 11:08:05 +0100 Subject: [PATCH 1/5] Use Compound close icon in favour of mishmash of x/close icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_SearchBox.pcss | 2 +- res/css/structures/_UploadBar.pcss | 2 +- res/css/structures/_UserMenu.pcss | 2 +- res/css/views/dialogs/_PollCreateDialog.pcss | 2 +- .../security/_AccessSecretStorageDialog.pcss | 2 +- res/css/views/elements/_AccessibleButton.pcss | 2 +- res/css/views/elements/_ImageView.pcss | 2 +- 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 | 2 +- .../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 +- 20 files changed, 18 insertions(+), 131 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/structures/_SearchBox.pcss b/res/css/structures/_SearchBox.pcss index 457f238f3a..5afbc7aaec 100644 --- a/res/css/structures/_SearchBox.pcss +++ b/res/css/structures/_SearchBox.pcss @@ -16,7 +16,7 @@ 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-image: url("@vector-im/compound-design-tokens/icons/close.svg"); background-repeat: no-repeat; width: 16px; height: 16px; 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..b0611dfcda 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -247,7 +247,7 @@ Please see LICENSE files in the repository root for full details. position: absolute; width: inherit; height: inherit; - mask-image: url("$(res)/img/feather-customised/x.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); mask-position: center; mask-size: 12px; mask-repeat: no-repeat; diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 0dfe695645..4932e2ed71 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -52,7 +52,7 @@ 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; 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..a1cda51084 100644 --- a/res/css/views/elements/_ImageView.pcss +++ b/res/css/views/elements/_ImageView.pcss @@ -139,7 +139,7 @@ $button-gap: 24px; &::before { width: $button-size; height: $button-size; - mask-image: url("$(res)/img/image-view/close.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); mask-size: 40%; } } 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..3666e1e1b2 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"; 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()}> - + ); From 5b3d7cd21e5188e213e881ccc2320337b21dba6c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 1 Oct 2024 11:24:30 +0100 Subject: [PATCH 2/5] Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../__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 ++++++++++++++++--- 5 files changed, 117 insertions(+), 22 deletions(-) diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap index bd6f9656ff..907ee229c7 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="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
    renders sidebar correctly without beacons 1`] = ` role="button" tabindex="0" > -
    + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + 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" + > + +
    From c7694595426086b483d94a00f59e1788ab57a890 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 1 Oct 2024 11:30:21 +0100 Subject: [PATCH 3/5] Remove stale CSS Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_UserMenu.pcss | 63 ------------------------------- 1 file changed, 63 deletions(-) diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index b0611dfcda..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("@vector-im/compound-design-tokens/icons/close.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; - } -} From eae7e9466da5271787348f7370198592305c9adc Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 1 Oct 2024 11:38:42 +0100 Subject: [PATCH 4/5] Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/components/views/beacon/_DialogSidebar.pcss | 1 - res/css/structures/_SearchBox.pcss | 8 +++++--- res/css/views/dialogs/_PollCreateDialog.pcss | 8 +++----- res/css/views/elements/_ImageView.pcss | 2 +- src/components/views/beacon/DialogSidebar.tsx | 2 +- 5 files changed, 10 insertions(+), 11 deletions(-) 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 5afbc7aaec..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("@vector-im/compound-design-tokens/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/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index 4932e2ed71..b0d89c4676 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -55,12 +55,10 @@ Please see LICENSE files in the repository root for full details. 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/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss index a1cda51084..2d48dea994 100644 --- a/res/css/views/elements/_ImageView.pcss +++ b/res/css/views/elements/_ImageView.pcss @@ -140,7 +140,7 @@ $button-gap: 24px; width: $button-size; height: $button-size; mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); - mask-size: 40%; + mask-size: 24px; } } diff --git a/src/components/views/beacon/DialogSidebar.tsx b/src/components/views/beacon/DialogSidebar.tsx index 3666e1e1b2..824d772bce 100644 --- a/src/components/views/beacon/DialogSidebar.tsx +++ b/src/components/views/beacon/DialogSidebar.tsx @@ -32,7 +32,7 @@ const DialogSidebar: React.FC = ({ beacons, onBeaconClick, requestClose } title={_t("location_sharing|close_sidebar")} data-testid="dialog-sidebar-close" > - + {beacons?.length ? ( From dd9b8548bee782faf8ad5f4cba2acac8588c2cd6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 1 Oct 2024 11:45:27 +0100 Subject: [PATCH 5/5] Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../beacon/__snapshots__/DialogSidebar-test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap index 907ee229c7..79fc0a0864 100644 --- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap @@ -23,9 +23,9 @@ exports[` renders sidebar correctly with beacons 1`] = ` renders sidebar correctly without beacons 1`] = `