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]>
element-hq · Oct 2, 2024 · 5d9996c · 5d9996c
1 parent c2c3168
commit 5d9996c
Show file tree

Hide file tree

Showing 26 changed files with 143 additions and 225 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/res/img/compound/close-8px.svg b/res/img/compound/close-8px.svg
diff --git a/res/img/element-icons/x-8px.svg b/res/img/element-icons/x-8px.svg
diff --git a/res/img/feather-customised/x.svg b/res/img/feather-customised/x.svg
diff --git a/res/img/icons-close.svg b/res/img/icons-close.svg
diff --git a/res/img/image-view/close.svg b/res/img/image-view/close.svg
diff --git 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<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 ? (

diff --git 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
@@ -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")}
                 >
-                    <XIcon width={18} height={18} />
+                    <CloseIcon width={18} height={18} />
                 </AccessibleButton>
                 <AccessibleButton
                     className="mx_RoomKnocksBar_action"

diff --git a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
@@ -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";
@@ -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"

diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
@@ -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";
@@ -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>
     );
 

diff --git 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<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>
     );
-Original file line number
+Diff line change
@@ Expand Up @@
             .mx_DialogSidebar_closeButtonIcon {
                 color: $tertiary-content;
-                height: 12px;
             }
         }
@@ Expand Down @@