From 1ef7084797f4a1780a7d67b6f0042f4c04ff917d Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Sun, 14 Jun 2026 11:28:04 -0400 Subject: [PATCH] Reduce room notification chip icon size --- .changeset/resize-room-notification-icons.md | 5 ++++ .../components/SwipeableMessageWrapper.tsx | 4 ++-- .../components/event-history/EventHistory.tsx | 8 +++---- src/app/components/icons/phosphor.tsx | 8 +++++++ src/app/features/room/message/Message.tsx | 19 +++++++-------- .../room/message/MobileMessageMenu.tsx | 2 +- .../hooks/useRoomsNotificationPreferences.ts | 23 +++++++++++++------ src/app/icons/index.tsx | 12 ++++++---- 8 files changed, 53 insertions(+), 28 deletions(-) create mode 100644 .changeset/resize-room-notification-icons.md diff --git a/.changeset/resize-room-notification-icons.md b/.changeset/resize-room-notification-icons.md new file mode 100644 index 000000000..cb0d67ad6 --- /dev/null +++ b/.changeset/resize-room-notification-icons.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Refine message action and room notification icons after the Phosphor migration. diff --git a/src/app/components/SwipeableMessageWrapper.tsx b/src/app/components/SwipeableMessageWrapper.tsx index 9d2f10201..894dded76 100644 --- a/src/app/components/SwipeableMessageWrapper.tsx +++ b/src/app/components/SwipeableMessageWrapper.tsx @@ -4,7 +4,7 @@ import type { ReactNode } from 'react'; import { useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; import { config } from 'folds'; -import { ArrowBendUpRightIcon, PHOSPHOR_SIZE } from '$components/icons/phosphor'; +import { ArrowBendUpLeftIcon, PHOSPHOR_SIZE } from '$components/icons/phosphor'; import { mobileOrTablet } from '$utils/user-agent'; import { RightSwipeAction, settingsAtom } from '$state/settings'; @@ -50,7 +50,7 @@ function ActiveSwipeWrapper({ children, onReply }: { children: ReactNode; onRepl }} > - ( ( /> } + after={menuIcon(ClipboardText)} radii="300" onClick={handleCopy} {...props} @@ -1151,7 +1152,7 @@ function MessageInternal( size="300" radii="300" > - {menuIcon(ArrowBendUpRightIcon)} + {menuIcon(ArrowBendUpLeftIcon)} {!isThreadedMessage && ( - {menuIcon(ChatCircleDots)} + {menuIcon(ChatsCircle)} )} {canEditEvent(mx, mEvent) && onEditId && ( @@ -1258,7 +1259,7 @@ function MessageInternal( {relations && } { @@ -1275,7 +1276,7 @@ function MessageInternal( {!isThreadedMessage && ( { @@ -1654,7 +1655,7 @@ export const Event = as<'div', EventProps>( { @@ -1724,7 +1725,7 @@ export const Event = as<'div', EventProps>( size="300" radii="300" > - {menuIcon(ArrowBendUpRightIcon)} + {menuIcon(ArrowBendUpLeftIcon)} } + icon={} label="Copy Text" onClick={() => { copyToClipboard(body); diff --git a/src/app/hooks/useRoomsNotificationPreferences.ts b/src/app/hooks/useRoomsNotificationPreferences.ts index 300efcbe6..12003826a 100644 --- a/src/app/hooks/useRoomsNotificationPreferences.ts +++ b/src/app/hooks/useRoomsNotificationPreferences.ts @@ -3,7 +3,14 @@ import type { ReactNode } from 'react'; import type { IPushRules, MatrixClient } from '$types/matrix-sdk'; import { ConditionKind, PushRuleKind, EventType } from '$types/matrix-sdk'; import type { IconProps } from '@phosphor-icons/react'; -import { Bell, BellRinging, BellSlash, chipIcon, menuIcon } from '$components/icons/phosphor'; +import { + Bell, + BellRinging, + BellSimple, + BellSlash, + menuIcon, + sizedIcon, +} from '$components/icons/phosphor'; import { isRoomId } from '$utils/matrix'; import { useAccountData } from './useAccountData'; @@ -107,18 +114,20 @@ export const roomNotificationModeIcon = ( props?: IconProps ): ReactNode => { if (mode === RoomNotificationMode.Mute) return menuIcon(BellSlash, props); - if (mode === RoomNotificationMode.SpecialMessages) return menuIcon(Bell, props); + if (mode === RoomNotificationMode.SpecialMessages) + return menuIcon(Bell, { ...props, weight: 'fill' }); if (mode === RoomNotificationMode.AllMessages) return menuIcon(BellRinging, props); - return menuIcon(Bell, props); + return menuIcon(BellSimple, props); }; export const roomNotificationModeChipIcon = (mode?: RoomNotificationMode): ReactNode => { - if (mode === RoomNotificationMode.Mute) return chipIcon(BellSlash); - if (mode === RoomNotificationMode.SpecialMessages) return chipIcon(Bell); - if (mode === RoomNotificationMode.AllMessages) return chipIcon(BellRinging); + if (mode === RoomNotificationMode.Mute) return sizedIcon(BellSlash, '100'); + if (mode === RoomNotificationMode.SpecialMessages) + return sizedIcon(Bell, '100', { weight: 'fill' }); + if (mode === RoomNotificationMode.AllMessages) return sizedIcon(BellRinging, '100'); - return chipIcon(Bell); + return sizedIcon(BellSimple, '100'); }; export const setRoomNotificationPreference = async ( diff --git a/src/app/icons/index.tsx b/src/app/icons/index.tsx index 7f0bb6421..124b80e15 100644 --- a/src/app/icons/index.tsx +++ b/src/app/icons/index.tsx @@ -21,12 +21,12 @@ import { CaretLeft, CaretRight, CaretUp, - ChatCenteredText, ChatCircle, ChatCircleDots, - ChatCircleText, + ChatsCircle, Check, Checks, + ClipboardText, Clock, ClockCounterClockwise, Code, @@ -225,6 +225,7 @@ export type IconName = | 'Markdown' | 'Attachment' | 'Alphabet' + | 'ClipboardText' | 'AlphabetUnderline' | 'Text' | 'Heading1' @@ -314,10 +315,10 @@ export const Icons = { Funnel, Bookmark, Inbox: Tray, - Thread: ChatCenteredText, - ThreadPlus: ChatCircleText, + Thread: ChatsCircle, + ThreadPlus: ChatsCircle, ThreadUnread: ChatCircleDots, - ThreadReply: ChatCenteredText, + ThreadReply: ChatsCircle, Monitor, ScreenShare: Screencast, Server: HardDrives, @@ -362,6 +363,7 @@ export const Icons = { Markdown: MarkdownLogo, Attachment: Paperclip, Alphabet: TextAa, + ClipboardText, AlphabetUnderline: TextAa, Text: TextT, Heading1: TextHOne,