diff --git a/src/app/components/AccountDataEditor.tsx b/src/app/components/AccountDataEditor.tsx index f8fd8445f..c359fdf20 100644 --- a/src/app/components/AccountDataEditor.tsx +++ b/src/app/components/AccountDataEditor.tsx @@ -2,8 +2,6 @@ import { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } f import { Box, Text, - Icon, - Icons, IconButton, Input, Button, @@ -14,12 +12,15 @@ import { Scroll, config, } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixError } from '$types/matrix-sdk'; import { Cursor } from '$plugins/text-area'; import { syntaxErrorPosition } from '$utils/dom'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useAlive } from '$hooks/useAlive'; import { useTextAreaCodeEditor } from '$hooks/useTextAreaCodeEditor'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { Page, PageHeader } from './page'; import { SequenceCard } from './sequence-card'; import { TextViewerContent } from './text-viewer'; @@ -288,14 +289,14 @@ export function AccountDataEditor({ size="500" radii="Pill" onClick={requestClose} - before={} + before={} > Developer Tools - + diff --git a/src/app/components/BackupRestore.tsx b/src/app/components/BackupRestore.tsx index 78d65dff4..bab24b21f 100644 --- a/src/app/components/BackupRestore.tsx +++ b/src/app/components/BackupRestore.tsx @@ -7,9 +7,7 @@ import { Button, color, config, - Icon, IconButton, - Icons, Menu, percent, PopOut, @@ -19,6 +17,8 @@ import { Text, } from 'folds'; import FocusTrap from 'focus-trap-react'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; +import { DownloadIcon } from '@phosphor-icons/react/dist/csr/Download'; import { BackupProgressStatus, backupRestoreProgressAtom } from '$state/backupRestore'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { @@ -29,6 +29,7 @@ import { } from '$hooks/useKeyBackup'; import { stopPropagation } from '$utils/keyboard'; import { useRestoreBackupOnVerification } from '$hooks/useRestoreBackupOnVerification'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { InfoCard } from './info-card'; type BackupStatusProps = { @@ -183,7 +184,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) { radii="300" onClick={handleMenu} > - + } + before={} > Restore Backup diff --git a/src/app/components/DefaultErrorPage.tsx b/src/app/components/DefaultErrorPage.tsx index 62042cef1..33a87caed 100644 --- a/src/app/components/DefaultErrorPage.tsx +++ b/src/app/components/DefaultErrorPage.tsx @@ -1,7 +1,9 @@ -import { Box, Button, Dialog, Icon, Icons, Text, color, config } from 'folds'; +import { Box, Button, Dialog, Text, color, config } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import * as Sentry from '@sentry/react'; import { SplashScreen } from '$components/splash-screen'; import { buildGitHubUrl } from '$features/bug-report/BugReportModal'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type ErrorPageProps = { error: Error; @@ -48,10 +50,10 @@ export function ErrorPage({ error, eventId }: ErrorPageProps) { - Oops! Something went wrong diff --git a/src/app/components/DeviceVerification.tsx b/src/app/components/DeviceVerification.tsx index fa29ae11e..f8022da6d 100644 --- a/src/app/components/DeviceVerification.tsx +++ b/src/app/components/DeviceVerification.tsx @@ -12,15 +12,14 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import * as Sentry from '@sentry/react'; import { @@ -31,6 +30,7 @@ import { } from '$hooks/useVerificationRequest'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { ContainerColor } from '$styles/ContainerColor.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const DialogHeaderStyles: CSSProperties = { padding: `0 ${config.space.S200} 0 ${config.space.S400}`, @@ -275,7 +275,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps) Device Verification - + diff --git a/src/app/components/DeviceVerificationSetup.tsx b/src/app/components/DeviceVerificationSetup.tsx index 78fe8ded2..1014911dd 100644 --- a/src/app/components/DeviceVerificationSetup.tsx +++ b/src/app/components/DeviceVerificationSetup.tsx @@ -1,18 +1,6 @@ import { FormEventHandler, forwardRef, useCallback, useState } from 'react'; -import { - Dialog, - Header, - Box, - Text, - IconButton, - Icon, - Icons, - config, - Button, - Chip, - color, - Spinner, -} from 'folds'; +import { Dialog, Header, Box, Text, IconButton, config, Button, Chip, color, Spinner } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FileSaver from 'file-saver'; import to from 'await-to-js'; import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from '$types/matrix-sdk'; @@ -22,6 +10,7 @@ import { copyToClipboard } from '$utils/dom'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useAlive } from '$hooks/useAlive'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { PasswordInput } from './password-input'; import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA'; import { UseStateProvider } from './UseStateProvider'; @@ -302,7 +291,7 @@ export const DeviceVerificationSetup = forwardRefSetup Device Verification - + @@ -337,7 +326,7 @@ export const DeviceVerificationReset = forwardRefReset Device Verification - + {reset ? ( diff --git a/src/app/components/IncomingCallModal.tsx b/src/app/components/IncomingCallModal.tsx index 3ab4e8457..a6b79c584 100644 --- a/src/app/components/IncomingCallModal.tsx +++ b/src/app/components/IncomingCallModal.tsx @@ -3,8 +3,6 @@ import { Dialog, Header, IconButton, - Icon, - Icons, Text, Button, Avatar, @@ -13,6 +11,9 @@ import { OverlayCenter, OverlayBackdrop, } from 'folds'; +import { PhoneIcon } from '@phosphor-icons/react/dist/csr/Phone'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useRoomName } from '$hooks/useRoomMeta'; import { getRoomAvatarUrl } from '$utils/room'; @@ -27,6 +28,7 @@ import { mutedCallRoomIdAtom, } from '$state/callEmbed'; import { createDebugLogger } from '$utils/debugLogger'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { RoomAvatar } from './room-avatar'; const debugLog = createDebugLogger('IncomingCall'); @@ -84,7 +86,7 @@ export function IncomingCallInternal({ room, onClose }: IncomingCallInternalProp Incoming Call - + @@ -94,7 +96,7 @@ export function IncomingCallInternal({ room, onClose }: IncomingCallInternalProp roomId={room.roomId} src={avatarUrl ?? undefined} alt={roomName} - renderFallback={() => } + renderFallback={() => } /> @@ -121,7 +123,7 @@ export function IncomingCallInternal({ room, onClose }: IncomingCallInternalProp variant="Primary" style={{ minWidth: '110px' }} onClick={handleAnswer} - before={} + before={} > Answer diff --git a/src/app/components/JoinRulesSwitcher.tsx b/src/app/components/JoinRulesSwitcher.tsx index 5b33b397d..2f54d5203 100644 --- a/src/app/components/JoinRulesSwitcher.tsx +++ b/src/app/components/JoinRulesSwitcher.tsx @@ -1,37 +1,27 @@ -import { MouseEventHandler, useCallback, useMemo, useState } from 'react'; -import { - config, - Box, - MenuItem, - Text, - Icon, - Icons, - IconSrc, - RectCords, - PopOut, - Menu, - Button, - Spinner, -} from 'folds'; +import { ComponentType, MouseEventHandler, useCallback, useMemo, useState } from 'react'; +import { config, Box, MenuItem, Text, RectCords, PopOut, Menu, Button, Spinner } from 'folds'; +import type { IconProps } from '@phosphor-icons/react'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { JoinRule } from '$types/matrix-sdk'; import FocusTrap from 'focus-trap-react'; import { stopPropagation } from '$utils/keyboard'; -import { getRoomIconSrc } from '$utils/room'; +import { getRoomIcon } from '$utils/room'; export type ExtraJoinRules = 'knock_restricted'; export type ExtendedJoinRules = JoinRule | ExtraJoinRules; -type JoinRuleIcons = Record; +type JoinRuleIcons = Record>; export const useJoinRuleIcons = (roomType?: string): JoinRuleIcons => useMemo( () => ({ - [JoinRule.Invite]: getRoomIconSrc(Icons, roomType, JoinRule.Invite), - [JoinRule.Knock]: getRoomIconSrc(Icons, roomType, JoinRule.Knock), - knock_restricted: getRoomIconSrc(Icons, roomType, JoinRule.Restricted), - [JoinRule.Restricted]: getRoomIconSrc(Icons, roomType, JoinRule.Restricted), - [JoinRule.Public]: getRoomIconSrc(Icons, roomType, JoinRule.Public), - [JoinRule.Private]: getRoomIconSrc(Icons, roomType, JoinRule.Private), + [JoinRule.Invite]: getRoomIcon(roomType, JoinRule.Invite), + [JoinRule.Knock]: getRoomIcon(roomType, JoinRule.Knock), + knock_restricted: getRoomIcon(roomType, JoinRule.Restricted), + [JoinRule.Restricted]: getRoomIcon(roomType, JoinRule.Restricted), + [JoinRule.Public]: getRoomIcon(roomType, JoinRule.Public), + [JoinRule.Private]: getRoomIcon(roomType, JoinRule.Private), }), [roomType] ); @@ -108,7 +98,7 @@ export function JoinRulesSwitcher({ radii="300" aria-pressed={value === rule} onClick={() => handleChange(rule)} - before={} + before={} disabled={disabled} > @@ -127,12 +117,12 @@ export function JoinRulesSwitcher({ fill="Soft" radii="300" outlined - before={} + before={} after={ changing ? ( ) : ( - + ) } onClick={handleOpenMenu} diff --git a/src/app/components/ManualVerification.tsx b/src/app/components/ManualVerification.tsx index 31903f957..d645b7a69 100644 --- a/src/app/components/ManualVerification.tsx +++ b/src/app/components/ManualVerification.tsx @@ -1,23 +1,13 @@ import { MouseEventHandler, ReactNode, useCallback, useState } from 'react'; -import { - Box, - Text, - Chip, - Icon, - Icons, - RectCords, - PopOut, - Menu, - config, - MenuItem, - color, -} from 'folds'; +import { Box, Text, Chip, RectCords, PopOut, Menu, config, MenuItem, color } from 'folds'; import FocusTrap from 'focus-trap-react'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; import { SecretStorageKeyContent } from '$types/matrix/accountData'; import { storePrivateKey } from '$client/secretStorageKeys'; import { stopPropagation } from '$utils/keyboard'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SettingTile } from './setting-tile'; import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage'; @@ -51,7 +41,7 @@ export function ManualVerificationMethodSwitcher({ variant="Secondary" fill="Soft" radii="Pill" - before={} + before={} onClick={handleMenu} > diff --git a/src/app/components/Pdf-viewer/PdfViewer.tsx b/src/app/components/Pdf-viewer/PdfViewer.tsx index 71ab77efb..c4850fca3 100644 --- a/src/app/components/Pdf-viewer/PdfViewer.tsx +++ b/src/app/components/Pdf-viewer/PdfViewer.tsx @@ -7,9 +7,7 @@ import { Button, Chip, Header, - Icon, IconButton, - Icons, Input, Menu, PopOut, @@ -20,12 +18,20 @@ import { as, config, } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { CaretLeftIcon } from '@phosphor-icons/react/dist/csr/CaretLeft'; +import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight'; +import { DownloadIcon } from '@phosphor-icons/react/dist/csr/Download'; +import { MinusIcon } from '@phosphor-icons/react/dist/csr/Minus'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import FocusTrap from 'focus-trap-react'; import FileSaver from 'file-saver'; import { AsyncStatus } from '$hooks/useAsyncCallback'; import { useImageGestures } from '$hooks/useImageGestures'; import { createPage, usePdfDocumentLoader, usePdfJSLoader } from '$plugins/pdfjs-dist'; import { stopPropagation } from '$utils/keyboard'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './PdfViewer.css'; export type PdfViewerProps = { @@ -115,7 +121,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
- + {name} @@ -130,7 +136,7 @@ export const PdfViewer = as<'div', PdfViewerProps>( onClick={zoomOut} aria-label="Zoom Out" > - + setZoom(zoom === 1 ? 2 : 1)}> {Math.round(zoom * 100)}% @@ -143,13 +149,13 @@ export const PdfViewer = as<'div', PdfViewerProps>( onClick={zoomIn} aria-label="Zoom In" > - + } + before={} > Download @@ -165,7 +171,7 @@ export const PdfViewer = as<'div', PdfViewerProps>( fill="Soft" size="300" radii="300" - before={} + before={} onClick={loadPdfJS} > Retry @@ -196,7 +202,7 @@ export const PdfViewer = as<'div', PdfViewerProps>( } + before={} onClick={handlePrevPage} aria-disabled={pageNo <= 1} > @@ -258,7 +264,7 @@ export const PdfViewer = as<'div', PdfViewerProps>( } + after={} onClick={handleNextPage} aria-disabled={pageNo >= docState.data.numPages} > diff --git a/src/app/components/PhosphorIcon.tsx b/src/app/components/PhosphorIcon.tsx new file mode 100644 index 000000000..ff12d4788 --- /dev/null +++ b/src/app/components/PhosphorIcon.tsx @@ -0,0 +1,53 @@ +import { toRem } from 'folds'; +import { forwardRef, ComponentType } from 'react'; +import type { IconProps } from '@phosphor-icons/react'; + +export type FoldIconSize = 'Inherit' | '50' | '100' | '200' | '300' | '400' | '500' | '600'; +export type FoldIconSizeToken = 50 | 100 | 200 | 300 | 400 | 500 | 600; +export type FoldCompatibleIconSize = IconProps['size'] | FoldIconSize | FoldIconSizeToken; + +const FOLD_TO_PHOSPHOR_SIZE = new Map([ + ['Inherit', '1em'], + ['50', toRem(16)], + [50, toRem(16)], + ['100', toRem(18)], + [100, toRem(18)], + ['200', toRem(20)], + [200, toRem(20)], + ['300', toRem(22)], + [300, toRem(22)], + ['400', toRem(24)], + [400, toRem(24)], + ['500', toRem(28)], + [500, toRem(28)], + ['600', toRem(36)], + [600, toRem(36)], +]); + +const isFoldIconSizeToken = ( + size: FoldCompatibleIconSize +): size is FoldIconSize | FoldIconSizeToken => + FOLD_TO_PHOSPHOR_SIZE.has(size as FoldIconSize | FoldIconSizeToken); + +export const toPhosphorIconSize = ( + size?: FoldCompatibleIconSize +): IconProps['size'] | undefined => { + if (size === undefined) return undefined; + if (isFoldIconSizeToken(size)) { + return FOLD_TO_PHOSPHOR_SIZE.get(size); + } + return size; +}; + +export type PhosphorIconProps = Omit & { + as: ComponentType; + size?: FoldCompatibleIconSize; +}; + +export const PhosphorIcon = forwardRef( + ({ as: IconComponent, size = '400', ...props }, ref) => ( + + ) +); + +PhosphorIcon.displayName = 'PhosphorIcon'; diff --git a/src/app/components/RoomNotificationSwitcher.tsx b/src/app/components/RoomNotificationSwitcher.tsx index 0b5c9e383..4f00df34b 100644 --- a/src/app/components/RoomNotificationSwitcher.tsx +++ b/src/app/components/RoomNotificationSwitcher.tsx @@ -1,4 +1,5 @@ -import { Box, config, Icon, Menu, MenuItem, PopOut, RectCords, Text, toRem } from 'folds'; +import { Box, config, Menu, MenuItem, PopOut, RectCords, Text, toRem } from 'folds'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { MouseEventHandler, ReactNode, useMemo, useState } from 'react'; import FocusTrap from 'focus-trap-react'; import { stopPropagation } from '$utils/keyboard'; @@ -98,10 +99,10 @@ export function RoomNotificationModeSwitcher({ disabled={changing} onClick={() => handleSelect(mode)} before={ - } > diff --git a/src/app/components/SwipeableMessageWrapper.tsx b/src/app/components/SwipeableMessageWrapper.tsx index 4b219355c..1e7cb6ad9 100644 --- a/src/app/components/SwipeableMessageWrapper.tsx +++ b/src/app/components/SwipeableMessageWrapper.tsx @@ -2,9 +2,11 @@ import { useMotionValue, useSpring, useTransform, motion } from 'framer-motion'; import { useDrag } from '@use-gesture/react'; import { ReactNode, useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; -import { config, Icon, Icons } from 'folds'; +import { config } from 'folds'; +import { ArrowBendUpLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowBendUpLeft'; import { mobileOrTablet } from '$utils/user-agent'; import { RightSwipeAction, settingsAtom } from '$state/settings'; +import { PhosphorIcon } from '$components/PhosphorIcon'; function ActiveSwipeWrapper({ children, onReply }: { children: ReactNode; onReply: () => void }) { const x = useMotionValue(0); @@ -48,8 +50,8 @@ function ActiveSwipeWrapper({ children, onReply }: { children: ReactNode; onRepl }} > - - + )} diff --git a/src/app/components/create-room/AdditionalCreatorInput.tsx b/src/app/components/create-room/AdditionalCreatorInput.tsx index f362122a0..81f50f0f1 100644 --- a/src/app/components/create-room/AdditionalCreatorInput.tsx +++ b/src/app/components/create-room/AdditionalCreatorInput.tsx @@ -3,8 +3,6 @@ import { Button, Chip, config, - Icon, - Icons, Input, Line, Menu, @@ -17,6 +15,8 @@ import { } from 'folds'; import { isKeyHotkey } from 'is-hotkey'; import FocusTrap from 'focus-trap-react'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { ChangeEventHandler, KeyboardEventHandler, @@ -31,6 +31,7 @@ import { stopPropagation } from '$utils/keyboard'; import { useAsyncSearch, UseAsyncSearchOptions } from '$hooks/useAsyncSearch'; import { highlightText, makeHighlightRegex } from '$plugins/react-custom-html-parser'; import { SettingTile } from '$components/setting-tile'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export const useAdditionalCreators = (defaultCreators?: string[]) => { const mx = useMatrixClient(); @@ -164,7 +165,7 @@ export function AdditionalCreatorInput({ key={creator} variant="Secondary" radii="Pill" - after={} + after={} onClick={() => onRemove(creator)} disabled={disabled} > @@ -284,7 +285,7 @@ export function AdditionalCreatorInput({ aria-pressed={!!menuCords} disabled={disabled} > - + diff --git a/src/app/components/create-room/CreateRoomAccessSelector.tsx b/src/app/components/create-room/CreateRoomAccessSelector.tsx index 6dd049835..f42ca64c7 100644 --- a/src/app/components/create-room/CreateRoomAccessSelector.tsx +++ b/src/app/components/create-room/CreateRoomAccessSelector.tsx @@ -1,6 +1,10 @@ -import { Box, Text, Icon, Icons, config, IconSrc } from 'folds'; +import { Box, Text, config } from 'folds'; +import { ComponentType } from 'react'; +import type { IconProps } from '@phosphor-icons/react'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { CreateRoomAccess } from './types'; type CreateRoomAccessSelectorProps = { @@ -8,7 +12,7 @@ type CreateRoomAccessSelectorProps = { onSelect: (value: CreateRoomAccess) => void; canRestrict?: boolean; disabled?: boolean; - getIcon: (access: CreateRoomAccess) => IconSrc; + getIcon: (access: CreateRoomAccess) => ComponentType; }; export function CreateRoomAccessSelector({ value, @@ -32,8 +36,8 @@ export function CreateRoomAccessSelector({ disabled={disabled} > } - after={value === CreateRoomAccess.Restricted && } + before={} + after={value === CreateRoomAccess.Restricted && } > Restricted @@ -54,8 +58,8 @@ export function CreateRoomAccessSelector({ disabled={disabled} > } - after={value === CreateRoomAccess.Private && } + before={} + after={value === CreateRoomAccess.Private && } > Private @@ -75,8 +79,8 @@ export function CreateRoomAccessSelector({ disabled={disabled} > } - after={value === CreateRoomAccess.Public && } + before={} + after={value === CreateRoomAccess.Public && } > Public diff --git a/src/app/components/create-room/CreateRoomAliasInput.tsx b/src/app/components/create-room/CreateRoomAliasInput.tsx index 0460717a5..1f0e2da6d 100644 --- a/src/app/components/create-room/CreateRoomAliasInput.tsx +++ b/src/app/components/create-room/CreateRoomAliasInput.tsx @@ -7,13 +7,16 @@ import { useState, } from 'react'; import { MatrixError } from '$types/matrix-sdk'; -import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds'; +import { Box, color, Input, Spinner, Text, toRem } from 'folds'; +import { HashIcon } from '@phosphor-icons/react/dist/csr/Hash'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import { isKeyHotkey } from 'is-hotkey'; import { getMxIdServer } from '$utils/matrix'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { replaceSpaceWithDash } from '$utils/common'; import { AsyncState, AsyncStatus, useAsync } from '$hooks/useAsyncCallback'; import { useDebounce } from '$hooks/useDebounce'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) { const mx = useMatrixClient(); @@ -89,7 +92,7 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) { aliasAvail.status === AsyncStatus.Loading ? ( ) : ( - + ) } after={ @@ -107,7 +110,7 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) { /> {aliasAvailable === false && ( - + This address is already taken. Please select a different one. diff --git a/src/app/components/create-room/CreateRoomTypeSelector.tsx b/src/app/components/create-room/CreateRoomTypeSelector.tsx index 42468a03d..619b00bff 100644 --- a/src/app/components/create-room/CreateRoomTypeSelector.tsx +++ b/src/app/components/create-room/CreateRoomTypeSelector.tsx @@ -1,14 +1,18 @@ -import { Box, Text, Icon, Icons, config, IconSrc } from 'folds'; +import { Box, Text, config } from 'folds'; +import type { IconProps } from '@phosphor-icons/react'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; +import { ComponentType } from 'react'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; import { BetaNoticeBadge } from '$components/BetaNoticeBadge'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { CreateRoomType } from './types'; type CreateRoomTypeSelectorProps = { value?: CreateRoomType; onSelect: (value: CreateRoomType) => void; disabled?: boolean; - getIcon: (type: CreateRoomType) => IconSrc; + getIcon: (type: CreateRoomType) => ComponentType; }; export function CreateRoomTypeSelector({ value, @@ -30,8 +34,8 @@ export function CreateRoomTypeSelector({ disabled={disabled} > } - after={value === CreateRoomType.TextRoom && } + before={} + after={value === CreateRoomType.TextRoom && } > @@ -55,8 +59,8 @@ export function CreateRoomTypeSelector({ disabled={disabled} > } - after={value === CreateRoomType.VoiceRoom && } + before={} + after={value === CreateRoomType.VoiceRoom && } > diff --git a/src/app/components/create-room/RoomVersionSelector.tsx b/src/app/components/create-room/RoomVersionSelector.tsx index a86b1d2df..7bdb5a1cd 100644 --- a/src/app/components/create-room/RoomVersionSelector.tsx +++ b/src/app/components/create-room/RoomVersionSelector.tsx @@ -1,21 +1,12 @@ import { MouseEventHandler, useState } from 'react'; -import { - Box, - Button, - Chip, - config, - Icon, - Icons, - Menu, - PopOut, - RectCords, - Text, - toRem, -} from 'folds'; +import { Box, Button, Chip, config, Menu, PopOut, RectCords, Text, toRem } from 'folds'; import FocusTrap from 'focus-trap-react'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; import { stopPropagation } from '$utils/keyboard'; import { SettingTile } from '$components/setting-tile'; import { SequenceCard } from '$components/sequence-card'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function RoomVersionSelector({ versions, @@ -104,7 +95,7 @@ export function RoomVersionSelector({ fill="Soft" radii="300" aria-pressed={!!menuCords} - before={} + before={} disabled={disabled} > {value} diff --git a/src/app/components/direct-invite-prompt/DirectInvitePrompt.tsx b/src/app/components/direct-invite-prompt/DirectInvitePrompt.tsx index fbb83a864..cb6c43f77 100644 --- a/src/app/components/direct-invite-prompt/DirectInvitePrompt.tsx +++ b/src/app/components/direct-invite-prompt/DirectInvitePrompt.tsx @@ -4,9 +4,7 @@ import { Button, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -16,6 +14,8 @@ import { config, } from 'folds'; import { stopPropagation } from '$utils/keyboard'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type DirectInvitePromptProps = { onCancel: () => void; @@ -56,7 +56,7 @@ export function DirectInvitePrompt({ Invite another Member - +
diff --git a/src/app/components/editor/Toolbar.tsx b/src/app/components/editor/Toolbar.tsx index 62cd9356a..3586d1e47 100644 --- a/src/app/components/editor/Toolbar.tsx +++ b/src/app/components/editor/Toolbar.tsx @@ -3,10 +3,7 @@ import { Badge, Box, config, - Icon, IconButton, - Icons, - IconSrc, Line, Menu, PopOut, @@ -17,14 +14,32 @@ import { TooltipProvider, toRem, } from 'folds'; -import { MouseEventHandler, ReactNode, useState } from 'react'; +import { MouseEventHandler, ReactNode, useState, ComponentType } from 'react'; import { ReactEditor, useSlate } from 'slate-react'; +import type { IconProps } from '@phosphor-icons/react'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CodeIcon } from '@phosphor-icons/react/dist/csr/Code'; +import { CodeBlockIcon } from '@phosphor-icons/react/dist/csr/CodeBlock'; +import { EyeSlashIcon } from '@phosphor-icons/react/dist/csr/EyeSlash'; +import { ListBulletsIcon } from '@phosphor-icons/react/dist/csr/ListBullets'; +import { ListNumbersIcon } from '@phosphor-icons/react/dist/csr/ListNumbers'; +import { MarkdownLogoIcon } from '@phosphor-icons/react/dist/csr/MarkdownLogo'; +import { QuotesIcon } from '@phosphor-icons/react/dist/csr/Quotes'; +import { TextBIcon } from '@phosphor-icons/react/dist/csr/TextB'; +import { TextHOneIcon } from '@phosphor-icons/react/dist/csr/TextHOne'; +import { TextHThreeIcon } from '@phosphor-icons/react/dist/csr/TextHThree'; +import { TextHTwoIcon } from '@phosphor-icons/react/dist/csr/TextHTwo'; +import { TextItalicIcon } from '@phosphor-icons/react/dist/csr/TextItalic'; +import { TextStrikethroughIcon } from '@phosphor-icons/react/dist/csr/TextStrikethrough'; +import { TextUnderlineIcon } from '@phosphor-icons/react/dist/csr/TextUnderline'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { isMacOS } from '$utils/user-agent'; import { KeySymbol } from '$utils/key-symbol'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { stopPropagation } from '$utils/keyboard'; import { floatingToolbar } from '$styles/overrides/Composer.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { HeadingLevel } from './slate'; import { BlockType, MarkType } from './types'; import * as css from './Editor.css'; @@ -55,7 +70,7 @@ function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) { ); } -type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode }; +type MarkButtonProps = { format: MarkType; icon: ComponentType; tooltip: ReactNode }; export function MarkButton({ format, icon, tooltip }: MarkButtonProps) { const editor = useSlate(); const disableInline = isBlockActive(editor, BlockType.CodeBlock); @@ -81,7 +96,7 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) { radii="300" disabled={disableInline} > - + )} @@ -90,7 +105,7 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) { type BlockButtonProps = { format: BlockType; - icon: IconSrc; + icon: ComponentType; tooltip: ReactNode; }; export function BlockButton({ format, icon, tooltip }: BlockButtonProps) { @@ -112,13 +127,19 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) { size="400" radii="300" > - + )} ); } +const headingIcons: Record> = { + 1: TextHOneIcon, + 2: TextHTwoIcon, + 3: TextHThreeIcon, +}; + export function HeadingBlockButton() { const editor = useSlate(); const level = headingLevel(editor); @@ -169,7 +190,7 @@ export function HeadingBlockButton() { size="400" radii="300" > - + )} @@ -184,7 +205,7 @@ export function HeadingBlockButton() { size="400" radii="300" > - + )} @@ -199,7 +220,7 @@ export function HeadingBlockButton() { size="400" radii="300" > - + )} @@ -216,8 +237,8 @@ export function HeadingBlockButton() { size="400" radii="300" > - - + + ); @@ -271,32 +292,32 @@ export function Toolbar() { } /> } /> } /> } /> } /> } /> @@ -305,22 +326,22 @@ export function Toolbar() { } /> } /> } /> } /> @@ -353,7 +374,11 @@ export function Toolbar() { radii="300" disabled={disableInline || !!isAnyMarkActive(editor)} > - + )} diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx index 9ad67aad4..197bb03d1 100644 --- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx +++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx @@ -1,7 +1,8 @@ import { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react'; import { Editor } from 'slate'; import { ReactEditor } from 'slate-react'; -import { Avatar, Icon, Icons, MenuItem, Text } from 'folds'; +import { Avatar, MenuItem, Text } from 'folds'; +import { HashIcon } from '@phosphor-icons/react/dist/csr/Hash'; import { JoinRule, MatrixClient } from '$types/matrix-sdk'; import { useAtomValue } from 'jotai'; @@ -17,6 +18,7 @@ import { factoryRoomIdByActivity } from '$utils/sort'; import { RoomAvatar, RoomIcon } from '$components/room-avatar'; import { getViaServers } from '$plugins/via-servers'; import { createMentionElement, moveCursor, replaceWithElement } from '$components/editor/utils'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { AutocompleteMenu } from './AutocompleteMenu'; import { AutocompleteQuery } from './autocompleteQuery'; @@ -47,7 +49,7 @@ function UnknownRoomMentionItem({ onClick={handleSelect} before={ - + } > @@ -176,7 +178,7 @@ export function RoomMentionAutocomplete({ size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} roomType={room.getType()} - filled + weight="fill" /> )} /> diff --git a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx index e38838070..780232342 100644 --- a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx +++ b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx @@ -1,7 +1,8 @@ import { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react'; import { Editor } from 'slate'; import { ReactEditor } from 'slate-react'; -import { Avatar, Icon, Icons, MenuItem, Text } from 'folds'; +import { Avatar, MenuItem, Text } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { MatrixClient, Room, RoomMember } from '$types/matrix-sdk'; import { useRoomMembers } from '$hooks/useRoomMembers'; @@ -17,6 +18,7 @@ import { Membership } from '$types/matrix/room'; import { useAtomValue } from 'jotai'; import { nicknamesAtom } from '$state/nicknames'; import { createMentionElement, moveCursor, replaceWithElement } from '$components/editor/utils'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { AutocompleteMenu } from './AutocompleteMenu'; import { AutocompleteQuery } from './autocompleteQuery'; @@ -48,7 +50,7 @@ function UnknownMentionItem({ } + renderFallback={() => } /> } @@ -187,7 +189,7 @@ export function UserMentionAutocomplete({ userId={roomMember.userId} src={avatarUrl ?? undefined} alt={getName(roomMember)} - renderFallback={() => } + renderFallback={() => } /> } diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx index 193caf71d..6d1997efa 100644 --- a/src/app/components/emoji-board/EmojiBoard.tsx +++ b/src/app/components/emoji-board/EmojiBoard.tsx @@ -9,7 +9,8 @@ import { useMemo, useRef, } from 'react'; -import { Box, config, Icons, Scroll } from 'folds'; +import { Box, config, Scroll } from 'folds'; +import { ClockCounterClockwiseIcon } from '@phosphor-icons/react/dist/csr/ClockCounterClockwise'; import FocusTrap from 'focus-trap-react'; import { isKeyHotkey } from 'is-hotkey'; import { Room } from '$types/matrix-sdk'; @@ -200,7 +201,7 @@ function EmojiSidebar({ active={activeGroupId === RECENT_GROUP_ID} id={RECENT_GROUP_ID} label="Recent" - icon={Icons.RecentClock} + icon={ClockCounterClockwiseIcon} onClick={handleScrollToGroup} /> diff --git a/src/app/components/emoji-board/components/NoStickerPacks.tsx b/src/app/components/emoji-board/components/NoStickerPacks.tsx index 9b46229a6..97d537b73 100644 --- a/src/app/components/emoji-board/components/NoStickerPacks.tsx +++ b/src/app/components/emoji-board/components/NoStickerPacks.tsx @@ -1,4 +1,6 @@ -import { Box, toRem, config, Icons, Icon, Text } from 'folds'; +import { Box, toRem, config, Text } from 'folds'; +import { StickerIcon } from '@phosphor-icons/react/dist/csr/Sticker'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function NoStickerPacks() { return ( @@ -9,7 +11,7 @@ export function NoStickerPacks() { direction="Column" gap="300" > - + No Sticker Packs! diff --git a/src/app/components/emoji-board/components/SearchInput.tsx b/src/app/components/emoji-board/components/SearchInput.tsx index c3c80e939..353bf084e 100644 --- a/src/app/components/emoji-board/components/SearchInput.tsx +++ b/src/app/components/emoji-board/components/SearchInput.tsx @@ -1,6 +1,9 @@ import { ChangeEventHandler, useRef } from 'react'; -import { Input, Chip, Icon, Icons, Text } from 'folds'; +import { Input, Chip, Text } from 'folds'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; import { mobileOrTablet } from '$utils/user-agent'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type SearchInputProps = { query?: string; @@ -34,14 +37,14 @@ export function SearchInput({ } + after={} outlined onClick={handleReact} > React ) : ( - + ) } onChange={onChange} diff --git a/src/app/components/emoji-board/components/Sidebar.tsx b/src/app/components/emoji-board/components/Sidebar.tsx index 70bf87902..38b02ca53 100644 --- a/src/app/components/emoji-board/components/Sidebar.tsx +++ b/src/app/components/emoji-board/components/Sidebar.tsx @@ -1,18 +1,9 @@ -import { ReactNode } from 'react'; -import { - Box, - Scroll, - Line, - as, - TooltipProvider, - Tooltip, - Text, - IconButton, - Icon, - IconSrc, - Icons, -} from 'folds'; +import { ReactNode, ComponentType } from 'react'; +import { Box, Scroll, Line, as, TooltipProvider, Tooltip, Text, IconButton } from 'folds'; +import type { IconProps } from '@phosphor-icons/react'; +import { ImageSquareIcon } from '@phosphor-icons/react/dist/csr/ImageSquare'; import classNames from 'classnames'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './styles.css'; export function Sidebar({ children }: { children: ReactNode }) { @@ -87,7 +78,7 @@ type GroupIconProps = { active: boolean; id: T; label: string; - icon: IconSrc; + icon: ComponentType; onClick: (id: T) => void; }; export function GroupIcon({ @@ -99,7 +90,7 @@ export function GroupIcon({ }: GroupIconProps) { return ( - + ); } @@ -123,7 +114,7 @@ export function ImageGroupIcon({ {url ? ( {label} ) : ( - + )} ); diff --git a/src/app/components/emoji-board/useEmojiGroupIcons.ts b/src/app/components/emoji-board/useEmojiGroupIcons.ts index 0b59fbcd9..6cf3205ed 100644 --- a/src/app/components/emoji-board/useEmojiGroupIcons.ts +++ b/src/app/components/emoji-board/useEmojiGroupIcons.ts @@ -1,21 +1,29 @@ -import { useMemo } from 'react'; -import { IconSrc, Icons } from 'folds'; +import { useMemo, ComponentType } from 'react'; +import type { IconProps } from '@phosphor-icons/react'; +import { CameraIcon } from '@phosphor-icons/react/dist/csr/Camera'; +import { CoffeeIcon } from '@phosphor-icons/react/dist/csr/Coffee'; +import { FlagIcon } from '@phosphor-icons/react/dist/csr/Flag'; +import { LeafIcon } from '@phosphor-icons/react/dist/csr/Leaf'; +import { LightbulbIcon } from '@phosphor-icons/react/dist/csr/Lightbulb'; +import { PeaceIcon } from '@phosphor-icons/react/dist/csr/Peace'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { SoccerBallIcon } from '@phosphor-icons/react/dist/csr/SoccerBall'; import { EmojiGroupId } from '$plugins/emoji'; -export type IEmojiGroupIcons = Record; +export type IEmojiGroupIcons = Record>; export const useEmojiGroupIcons = (): IEmojiGroupIcons => useMemo( () => ({ - [EmojiGroupId.People]: Icons.Smile, - [EmojiGroupId.Nature]: Icons.Leaf, - [EmojiGroupId.Food]: Icons.Cup, - [EmojiGroupId.Activity]: Icons.Ball, - [EmojiGroupId.Travel]: Icons.Photo, - [EmojiGroupId.Object]: Icons.Bulb, - [EmojiGroupId.Symbol]: Icons.Peace, - [EmojiGroupId.Flag]: Icons.Flag, + [EmojiGroupId.People]: SmileyIcon, + [EmojiGroupId.Nature]: LeafIcon, + [EmojiGroupId.Food]: CoffeeIcon, + [EmojiGroupId.Activity]: SoccerBallIcon, + [EmojiGroupId.Travel]: CameraIcon, + [EmojiGroupId.Object]: LightbulbIcon, + [EmojiGroupId.Symbol]: PeaceIcon, + [EmojiGroupId.Flag]: FlagIcon, }), [] ); diff --git a/src/app/components/event-history/EventHistory.tsx b/src/app/components/event-history/EventHistory.tsx index 955a2846f..fa41c43ea 100644 --- a/src/app/components/event-history/EventHistory.tsx +++ b/src/app/components/event-history/EventHistory.tsx @@ -3,9 +3,7 @@ import { Avatar, Box, Header, - Icon, IconButton, - Icons, Menu, MenuItem, Scroll, @@ -14,6 +12,11 @@ import { color, config, } from 'folds'; +import { ArrowBendUpLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowBendUpLeft'; +import { ChatTeardropTextIcon } from '@phosphor-icons/react/dist/csr/ChatTeardropText'; +import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { IContent, MatrixEvent, Room } from '$types/matrix-sdk'; import { getMemberDisplayName } from '$utils/room'; import { getMxIdLocalPart } from '$utils/matrix'; @@ -39,6 +42,7 @@ import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { usePowerLevelsContext } from '$hooks/usePowerLevels'; import { MessageEvent } from '$types/matrix/room'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './EventHistory.css'; export type EventHistoryProps = { @@ -127,7 +131,7 @@ export const EventHistory = as<'div', EventHistoryProps>( } + after={} radii="300" fill="None" variant="Secondary" @@ -142,7 +146,7 @@ export const EventHistory = as<'div', EventHistoryProps>( /> } + after={} radii="300" fill="None" variant="Secondary" @@ -158,7 +162,7 @@ export const EventHistory = as<'div', EventHistoryProps>( {canDelete && ( } + after={} radii="300" fill="None" variant="Critical" @@ -226,7 +230,7 @@ export const EventHistory = as<'div', EventHistoryProps>( Message version history - +
@@ -254,7 +258,7 @@ export const EventHistory = as<'div', EventHistoryProps>( userId={readerId ?? ''} src={avatarUrl ?? undefined} alt={name} - renderFallback={() => } + renderFallback={() => } /> } diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx index 6bb1737b4..71c0c817c 100644 --- a/src/app/components/event-readers/EventReaders.tsx +++ b/src/app/components/event-readers/EventReaders.tsx @@ -1,17 +1,7 @@ import classNames from 'classnames'; -import { - Avatar, - Box, - Header, - Icon, - IconButton, - Icons, - MenuItem, - Scroll, - Text, - as, - config, -} from 'folds'; +import { Avatar, Box, Header, IconButton, MenuItem, Scroll, Text, as, config } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Room } from '$types/matrix-sdk'; import { useRoomEventReaders } from '$hooks/useRoomEventReaders'; import { getMemberDisplayName } from '$utils/room'; @@ -24,6 +14,7 @@ import { getMouseEventCords } from '$utils/dom'; import { useAtomValue } from 'jotai'; import { nicknamesAtom } from '$state/nicknames'; import { UserAvatar } from '$components/user-avatar'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './EventReaders.css'; export type EventReadersProps = { @@ -55,7 +46,7 @@ export const EventReaders = as<'div', EventReadersProps>( Seen by - +
@@ -96,7 +87,9 @@ export const EventReaders = as<'div', EventReadersProps>( userId={readerId} src={avatarUrl ?? undefined} alt={name} - renderFallback={() => } + renderFallback={() => ( + + )} /> } diff --git a/src/app/components/image-editor/ImageEditor.tsx b/src/app/components/image-editor/ImageEditor.tsx index f937192ed..ae6ae813e 100644 --- a/src/app/components/image-editor/ImageEditor.tsx +++ b/src/app/components/image-editor/ImageEditor.tsx @@ -1,5 +1,7 @@ import classNames from 'classnames'; -import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds'; +import { Box, Chip, Header, IconButton, Text, as } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './ImageEditor.css'; export type ImageEditorProps = { @@ -24,7 +26,7 @@ export const ImageEditor = as<'div', ImageEditorProps>(
- + Image Editor diff --git a/src/app/components/image-pack-view/ImagePackView.tsx b/src/app/components/image-pack-view/ImagePackView.tsx index 304275e54..54c798361 100644 --- a/src/app/components/image-pack-view/ImagePackView.tsx +++ b/src/app/components/image-pack-view/ImagePackView.tsx @@ -1,7 +1,10 @@ -import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds'; +import { Box, IconButton, Text, Scroll, Chip } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { PackAddress } from '$plugins/custom-emoji'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { Page, PageHeader, PageContent } from '$components/page'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { RoomImagePack } from './RoomImagePack'; import { UserImagePack } from './UserImagePack'; @@ -22,14 +25,14 @@ export function ImagePackView({ address, requestClose }: ImagePackViewProps) { size="500" radii="Pill" onClick={requestClose} - before={} + before={} > Emojis & Stickers - + diff --git a/src/app/components/image-pack-view/ImageTile.tsx b/src/app/components/image-pack-view/ImageTile.tsx index 2070f00e4..23db6dc43 100644 --- a/src/app/components/image-pack-view/ImageTile.tsx +++ b/src/app/components/image-pack-view/ImageTile.tsx @@ -1,5 +1,6 @@ import { FormEventHandler, ReactNode, useMemo, useState } from 'react'; -import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds'; +import { Badge, Box, Button, Chip, Input, Text } from 'folds'; +import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash'; import { mxcUrlToHttp } from '$utils/matrix'; import { ImageUsage, imageUsageEqual, PackImageReader } from '$plugins/custom-emoji'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -7,6 +8,7 @@ import { useObjectURL } from '$hooks/useObjectURL'; import { createUploadAtom, TUploadAtom } from '$state/upload'; import { replaceSpaceWithDash } from '$utils/common'; import { SettingTile } from '$components/setting-tile'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './style.css'; import { UsageSwitcher, useUsageStr } from './UsageSwitcher'; @@ -71,7 +73,7 @@ export function ImageTile({ radii="Pill" onClick={() => onDeleteToggle?.(defaultShortcode)} > - {deleted ? Undo : } + {deleted ? Undo : } {!deleted && ( } + before={} onClick={onEdit} outlined > diff --git a/src/app/components/image-pack-view/UsageSwitcher.tsx b/src/app/components/image-pack-view/UsageSwitcher.tsx index 201a40aaa..d0a9288b7 100644 --- a/src/app/components/image-pack-view/UsageSwitcher.tsx +++ b/src/app/components/image-pack-view/UsageSwitcher.tsx @@ -1,8 +1,10 @@ import { MouseEventHandler, useMemo, useState } from 'react'; -import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds'; +import { Box, Button, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; import FocusTrap from 'focus-trap-react'; import { ImageUsage } from '$plugins/custom-emoji'; import { stopPropagation } from '$utils/keyboard'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export const useUsageStr = (): ((usage: ImageUsage[]) => string) => { const getUsageStr = (usage: ImageUsage[]): string => { @@ -76,7 +78,7 @@ export function UsageSwitcher({ usage, onChange, canEdit }: UsageSwitcherProps) type="button" outlined aria-disabled={!canEdit} - after={canEdit && } + after={canEdit && } onClick={canEdit ? handleSelectUsage : undefined} > {getUsageStr(usage)} diff --git a/src/app/components/image-viewer/ImageViewer.tsx b/src/app/components/image-viewer/ImageViewer.tsx index 569b61df1..839620e8e 100644 --- a/src/app/components/image-viewer/ImageViewer.tsx +++ b/src/app/components/image-viewer/ImageViewer.tsx @@ -1,9 +1,14 @@ import { WheelEvent } from 'react'; import FileSaver from 'file-saver'; import classNames from 'classnames'; -import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds'; +import { Box, Chip, Header, IconButton, Text, as } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { DownloadSimpleIcon } from '@phosphor-icons/react/dist/csr/DownloadSimple'; +import { MinusIcon } from '@phosphor-icons/react/dist/csr/Minus'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; import { useImageGestures } from '$hooks/useImageGestures'; import { downloadMedia } from '$utils/matrix'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './ImageViewer.css'; export type ImageViewerProps = { @@ -46,7 +51,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
- + {alt} @@ -61,7 +66,7 @@ export const ImageViewer = as<'div', ImageViewerProps>( onClick={zoomOut} aria-label="Zoom Out" > - + setZoom(zoom === 1 ? 2 : 1)}> {Math.round(zoom * 100)}% @@ -74,13 +79,13 @@ export const ImageViewer = as<'div', ImageViewerProps>( onClick={zoomIn} aria-label="Zoom In" > - + } + before={} > Download diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx index c8fbabef5..eca29c9a9 100644 --- a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx +++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx @@ -16,8 +16,6 @@ import { config, Text, IconButton, - Icon, - Icons, Input, Button, Spinner, @@ -42,6 +40,8 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { BreakWord } from '$styles/Text.css'; import { useAlive } from '$hooks/useAlive'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const SEARCH_OPTIONS: UseAsyncSearchOptions = { limit: 1000, @@ -174,7 +174,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) { - +
diff --git a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx index d6a6478d2..304767ee9 100644 --- a/src/app/components/join-address-prompt/JoinAddressPrompt.tsx +++ b/src/app/components/join-address-prompt/JoinAddressPrompt.tsx @@ -10,15 +10,15 @@ import { Box, Text, IconButton, - Icon, - Icons, Button, Input, color, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { stopPropagation } from '$utils/keyboard'; import { isRoomAlias, isRoomId } from '$utils/matrix'; import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '$plugins/matrix-to'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type JoinAddressProps = { onOpen: (roomIdOrAlias: string, via?: string[], eventId?: string) => void; @@ -83,7 +83,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) { Join with Address - +
Leave Room - + diff --git a/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx b/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx index 5bee7af26..e378e414a 100644 --- a/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx +++ b/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx @@ -10,16 +10,16 @@ import { Box, Text, IconButton, - Icon, - Icons, color, Button, Spinner, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixError } from '$types/matrix-sdk'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { stopPropagation } from '$utils/keyboard'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type LeaveSpacePromptProps = { roomId: string; @@ -69,7 +69,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP Leave Space - + diff --git a/src/app/components/member-tile/MemberTile.tsx b/src/app/components/member-tile/MemberTile.tsx index 9af782eef..26a515f6b 100644 --- a/src/app/components/member-tile/MemberTile.tsx +++ b/src/app/components/member-tile/MemberTile.tsx @@ -1,5 +1,6 @@ import { ReactNode } from 'react'; -import { as, Avatar, Box, Icon, Icons, Text } from 'folds'; +import { as, Avatar, Box, Text } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { MatrixClient, Room, RoomMember } from '$types/matrix-sdk'; import { getMemberDisplayName } from '$utils/room'; import { getMxIdLocalPart } from '$utils/matrix'; @@ -7,6 +8,7 @@ import { useSableCosmetics } from '$hooks/useSableCosmetics'; import { useAtomValue } from 'jotai'; import { nicknamesAtom } from '$state/nicknames'; import { UserAvatar } from '$components/user-avatar'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './style.css'; const getName = (room: Room, member: RoomMember, nicknames: Record) => @@ -42,7 +44,7 @@ export const MemberTile = as<'button', MemberTileProps>( userId={member.userId} src={avatarUrl ?? undefined} alt={name} - renderFallback={() => } + renderFallback={() => } /> diff --git a/src/app/components/message/FileHeader.tsx b/src/app/components/message/FileHeader.tsx index 36d8adeb1..b1fa86d89 100644 --- a/src/app/components/message/FileHeader.tsx +++ b/src/app/components/message/FileHeader.tsx @@ -1,4 +1,5 @@ -import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds'; +import { Badge, Box, IconButton, Spinner, Text, as, toRem } from 'folds'; +import { DownloadSimpleIcon } from '@phosphor-icons/react/dist/csr/DownloadSimple'; import { ReactNode, useCallback } from 'react'; import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment'; import FileSaver from 'file-saver'; @@ -7,6 +8,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { decryptFile, downloadEncryptedMedia, downloadMedia, mxcUrlToHttp } from '$utils/matrix'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const badgeStyles = { maxWidth: toRem(100) }; @@ -47,7 +49,7 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow {downloading ? ( ) : ( - + )} ); diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx index 5cf1eef0c..ac2a05718 100644 --- a/src/app/components/message/MsgTypeRenderers.tsx +++ b/src/app/components/message/MsgTypeRenderers.tsx @@ -1,5 +1,6 @@ import { CSSProperties, ReactNode, useMemo } from 'react'; -import { Box, Chip, Icon, Icons, Text, toRem } from 'folds'; +import { Box, Chip, Text, toRem } from 'folds'; +import { ArrowSquareOutIcon } from '@phosphor-icons/react/dist/csr/ArrowSquareOut'; import { IContent } from '$types/matrix-sdk'; import { JUMBO_EMOJI_REG, URL_REG } from '$utils/regex'; import { trimReplyFromBody } from '$utils/room'; @@ -22,6 +23,7 @@ import { parseGeoUri, scaleYDimension } from '$utils/common'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { PerMessageProfileBeeperFormat } from '$hooks/usePerMessageProfile'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment'; import { FileHeader, FileDownloadButton } from './FileHeader'; import { @@ -509,7 +511,7 @@ export function MLocation({ content }: MLocationProps) { rel="noreferrer noopener" variant="Primary" radii="Pill" - before={} + before={} > Open Location diff --git a/src/app/components/message/Reaction.tsx b/src/app/components/message/Reaction.tsx index 155de11f4..0e3a84673 100644 --- a/src/app/components/message/Reaction.tsx +++ b/src/app/components/message/Reaction.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; -import { Box, Icon, Icons, Text, as } from 'folds'; +import { Box, Text, as } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import classNames from 'classnames'; import { MatrixClient, MatrixEvent, Room } from '$types/matrix-sdk'; import { getHexcodeForEmoji, getShortcodeFor } from '$plugins/emoji'; @@ -7,6 +8,7 @@ import { getMemberDisplayName } from '$utils/room'; import { eventWithShortcode, getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix'; import { useAtomValue } from 'jotai'; import { nicknamesAtom } from '$state/nicknames'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './Reaction.css'; export const Reaction = as< @@ -39,7 +41,7 @@ export const Reaction = as< // reaction button still renders correctly and the user can see // something went wrong rather than a browser broken-image icon. - + ); return ( diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx index 3342b0d52..5924d805e 100644 --- a/src/app/components/message/Reply.tsx +++ b/src/app/components/message/Reply.tsx @@ -1,6 +1,16 @@ -import { Box, Chip, Icon, IconSrc, Icons, Text, as, color, toRem } from 'folds'; +import { Box, Chip, Text, as, color, toRem } from 'folds'; +import type { IconProps } from '@phosphor-icons/react'; +import { ArrowBendUpLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowBendUpLeft'; +import { ArrowClockwiseIcon } from '@phosphor-icons/react/dist/csr/ArrowClockwise'; +import { ChatTeardropTextIcon } from '@phosphor-icons/react/dist/csr/ChatTeardropText'; +import { CodeIcon } from '@phosphor-icons/react/dist/csr/Code'; +import { HashIcon } from '@phosphor-icons/react/dist/csr/Hash'; +import { PhoneIcon } from '@phosphor-icons/react/dist/csr/Phone'; +import { PhoneSlashIcon } from '@phosphor-icons/react/dist/csr/PhoneSlash'; +import { AtIcon } from '@phosphor-icons/react/dist/csr/At'; +import { PushPinIcon } from '@phosphor-icons/react/dist/csr/PushPin'; import { EventTimelineSet, IMentions, Room, SessionMembershipData } from '$types/matrix-sdk'; -import { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react'; +import { MouseEventHandler, ReactNode, useCallback, useMemo, type ComponentType } from 'react'; import { useQueryClient } from '@tanstack/react-query'; import classNames from 'classnames'; import parse from 'html-react-parser'; @@ -27,6 +37,7 @@ import { StateEvent, MessageEvent } from '$types/matrix/room'; import { useMentionClickHandler } from '$hooks/useMentionClickHandler'; import { useTranslation } from 'react-i18next'; import * as customHtmlCss from '$styles/CustomHtml.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { MessageBadEncryptedContent, MessageBlockedContent, @@ -39,7 +50,7 @@ import { LinePlaceholder } from './placeholder'; type ReplyLayoutProps = { userColor?: string; username?: ReactNode; - icon?: IconSrc; + icon?: ComponentType; mentioned: boolean; replyIcon?: JSX.Element; }; @@ -53,11 +64,11 @@ export const ReplyLayout = as<'div', ReplyLayoutProps>( ref={ref} > - {replyIcon || } + {replyIcon || } - {!!icon && } + {!!icon && } - {mentioned && } + {mentioned && } {username} @@ -76,7 +87,7 @@ export const ThreadIndicator = as<'div'>(({ ...props }, ref) => ( {...props} ref={ref} > - + Thread )); @@ -138,7 +149,7 @@ export const Reply = as<'div', ReplyProps>( !replyEvent.getClearContent(); let bodyJSX: ReactNode = fallbackBody; - let image: IconSrc | undefined; + let icon: ComponentType | undefined; let mentioned = sender != null && (mentions?.user_ids?.includes(sender) ?? false); const replyLinkifyOpts = useMemo( @@ -177,7 +188,7 @@ export const Reply = as<'div', ReplyProps>( bodyJSX = scaleSystemEmoji(strippedBody); } else if (eventType === StateEvent.RoomMember && !!replyEvent) { const parsedMemberEvent = parseMemberEvent(replyEvent); - image = parsedMemberEvent.icon; + icon = parsedMemberEvent.icon; mentioned = false; bodyJSX = ( @@ -186,17 +197,17 @@ export const Reply = as<'div', ReplyProps>( ); } else if (eventType === StateEvent.RoomName) { - image = Icons.Hash; + icon = HashIcon; bodyJSX = t('Organisms.RoomCommon.changed_room_name'); } else if (eventType === StateEvent.RoomTopic) { - image = Icons.Hash; + icon = HashIcon; bodyJSX = ' changed room topic'; } else if (eventType === StateEvent.RoomAvatar) { - image = Icons.Hash; + icon = HashIcon; bodyJSX = ' changed room avatar'; } else if (eventType === StateEvent.GroupCallMemberPrefix && !!replyEvent) { const callJoined = replyEvent.getContent().application; - image = callJoined ? Icons.Phone : Icons.PhoneDown; + icon = callJoined ? PhoneIcon : PhoneSlashIcon; bodyJSX = callJoined ? ' joined the call' : ' ended the call'; } else if (eventType === StateEvent.RoomPinnedEvents && replyEvent) { const { pinned } = replyEvent.getContent(); @@ -205,7 +216,7 @@ export const Reply = as<'div', ReplyProps>( prevPinned && pinned && pinned.filter((x: string) => !prevPinned.includes(x)); const pinsRemoved = prevPinned && pinned && prevPinned.filter((x: string) => !pinned.includes(x)); - image = Icons.Pin; + icon = PushPinIcon; bodyJSX = ( <> {(pinsAdded?.length > 0 && @@ -221,7 +232,7 @@ export const Reply = as<'div', ReplyProps>( ); } else if (Object.values(MessageEvent).every((v) => v !== eventType && !!eventType)) { - image = Icons.Code; + icon = CodeIcon; bodyJSX = ( <> {' sent '} @@ -238,7 +249,7 @@ export const Reply = as<'div', ReplyProps>( ( } + before={} onClick={(evt) => { evt.stopPropagation(); queryClient.invalidateQueries({ queryKey: [room.roomId, replyEventId] }); diff --git a/src/app/components/message/content/AudioContent.tsx b/src/app/components/message/content/AudioContent.tsx index fb0f2bef9..efe322721 100644 --- a/src/app/components/message/content/AudioContent.tsx +++ b/src/app/components/message/content/AudioContent.tsx @@ -1,6 +1,10 @@ /* eslint-disable jsx-a11y/media-has-caption */ import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; -import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds'; +import { Badge, Chip, IconButton, ProgressBar, Spinner, Text, toRem } from 'folds'; +import { PauseIcon } from '@phosphor-icons/react/dist/csr/Pause'; +import { PlayIcon } from '@phosphor-icons/react/dist/csr/Play'; +import { SpeakerHighIcon } from '@phosphor-icons/react/dist/csr/SpeakerHigh'; +import { SpeakerSlashIcon } from '@phosphor-icons/react/dist/csr/SpeakerSlash'; import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment'; import { Range } from 'react-range'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -19,6 +23,7 @@ import { secondsToMinutesAndSeconds } from '$utils/common'; import { decryptFile, downloadEncryptedMedia, downloadMedia, mxcUrlToHttp } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { MEDIA_VOLUME_KEY } from '$components/media'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const PLAY_TIME_THROTTLE_OPS = { wait: 500, @@ -152,7 +157,11 @@ export function AudioContent({ srcState.status === AsyncStatus.Loading || loading ? ( ) : ( - + ) } > @@ -173,7 +182,7 @@ export function AudioContent({ onClick={() => setMute(!mute)} aria-pressed={mute} > - + ; content: ReactNode; }; -export function EventContent({ messageLayout, time, iconSrc, content }: EventContentProps) { +export function EventContent({ messageLayout, time, icon, content }: EventContentProps) { const beforeJSX = ( {messageLayout === MessageLayout.Compact && time} @@ -18,7 +20,7 @@ export function EventContent({ messageLayout, time, iconSrc, content }: EventCon alignItems="Center" justifyContent="Center" > - + ); diff --git a/src/app/components/message/content/FallbackContent.tsx b/src/app/components/message/content/FallbackContent.tsx index 9bd012a13..e6537c21a 100644 --- a/src/app/components/message/content/FallbackContent.tsx +++ b/src/app/components/message/content/FallbackContent.tsx @@ -1,4 +1,9 @@ -import { Box, Icon, Icons, Text, as, color, config } from 'folds'; +import { Box, Text, as, color, config } from 'folds'; +import { LockIcon } from '@phosphor-icons/react/dist/csr/Lock'; +import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 }; const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 }; @@ -6,7 +11,7 @@ const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 export const MessageDeletedContent = as<'div', { children?: never; reason?: string }>( ({ reason, ...props }, ref) => ( - + {reason ? ( This message has been deleted. {reason} ) : ( @@ -19,7 +24,7 @@ export const MessageDeletedContent = as<'div', { children?: never; reason?: stri export const MessageUnsupportedContent = as<'div', { children?: never; body?: string }>( ({ body, ...props }, ref) => ( - + Unsupported message {body && `: ${body}`} {!body && ' (no body)'} @@ -29,21 +34,21 @@ export const MessageUnsupportedContent = as<'div', { children?: never; body?: st export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => ( - + Failed to load message )); export const MessageBadEncryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => ( - + Unable to decrypt message )); export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ...props }, ref) => ( - + This message is not decrypted yet )); @@ -52,7 +57,7 @@ export const MessageNotDecryptedContent = as<'div', { children?: never }>(({ ... export const MessageBrokenContent = as<'div', { children?: never; body?: string }>( ({ body, ...props }, ref) => ( - + Broken message {body && `: ${body}`} {!body && ' (no body)'} @@ -62,14 +67,14 @@ export const MessageBrokenContent = as<'div', { children?: never; body?: string export const MessageEmptyContent = as<'div', { children?: never }>(({ ...props }, ref) => ( - + Empty message )); export const MessageBlockedContent = as<'div', { children?: never }>(({ ...props }, ref) => ( - + Message from a blocked user )); diff --git a/src/app/components/message/content/FileContent.tsx b/src/app/components/message/content/FileContent.tsx index af802d46b..8005b8dc0 100644 --- a/src/app/components/message/content/FileContent.tsx +++ b/src/app/components/message/content/FileContent.tsx @@ -2,8 +2,6 @@ import { ReactNode, useCallback, useState } from 'react'; import { Box, Button, - Icon, - Icons, Modal, Overlay, OverlayBackdrop, @@ -14,6 +12,9 @@ import { TooltipProvider, as, } from 'folds'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; +import { DownloadIcon } from '@phosphor-icons/react/dist/csr/Download'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import FileSaver from 'file-saver'; import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment'; import FocusTrap from 'focus-trap-react'; @@ -31,6 +32,7 @@ import { stopPropagation } from '$utils/keyboard'; import { decryptFile, downloadEncryptedMedia, downloadMedia, mxcUrlToHttp } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { ModalWide } from '$styles/Modal.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const renderErrorButton = (retry: () => void, text: string) => ( void, text: string) => ( outlined radii="300" onClick={retry} - before={} + before={} > {text} @@ -140,7 +142,7 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea textState.status === AsyncStatus.Loading ? ( ) : ( - + ) } > @@ -224,7 +226,7 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read pdfState.status === AsyncStatus.Loading ? ( ) : ( - + ) } > @@ -280,7 +282,7 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil downloadState.status === AsyncStatus.Loading ? ( ) : ( - + ) } > diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx index ad51d2a4f..bd230e902 100644 --- a/src/app/components/message/content/ImageContent.tsx +++ b/src/app/components/message/content/ImageContent.tsx @@ -4,8 +4,6 @@ import { Box, Button, Chip, - Icon, - Icons, Menu, MenuItem, Modal, @@ -19,6 +17,10 @@ import { as, config, } from 'folds'; +import { EyeSlashIcon } from '@phosphor-icons/react/dist/csr/EyeSlash'; +import { EyeIcon } from '@phosphor-icons/react/dist/csr/Eye'; +import { ImageSquareIcon } from '@phosphor-icons/react/dist/csr/ImageSquare'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import classNames from 'classnames'; import { BlurhashCanvas } from 'react-blurhash'; import FocusTrap from 'focus-trap-react'; @@ -33,6 +35,7 @@ import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '$utils/matrix import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { ModalWide } from '$styles/Modal.css'; import { validBlurHash } from '$utils/blurHash'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './style.css'; type RenderViewerProps = { @@ -185,7 +188,7 @@ export const ImageContent = as<'div', ImageContentProps>( radii="300" size="300" onClick={loadSrc} - before={} + before={} > View @@ -276,7 +279,7 @@ export const ImageContent = as<'div', ImageContentProps>( outlined radii="300" onClick={handleRetry} - before={} + before={} > Retry @@ -289,7 +292,7 @@ export const ImageContent = as<'div', ImageContentProps>( } + after={} radii="300" fill="Soft" variant="Secondary" diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx index 71613c598..4e51975a1 100644 --- a/src/app/components/message/content/VideoContent.tsx +++ b/src/app/components/message/content/VideoContent.tsx @@ -4,8 +4,6 @@ import { Box, Button, Chip, - Icon, - Icons, Menu, MenuItem, Spinner, @@ -15,6 +13,10 @@ import { as, config, } from 'folds'; +import { EyeSlashIcon } from '@phosphor-icons/react/dist/csr/EyeSlash'; +import { EyeIcon } from '@phosphor-icons/react/dist/csr/Eye'; +import { PlayIcon } from '@phosphor-icons/react/dist/csr/Play'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import classNames from 'classnames'; import { BlurhashCanvas } from 'react-blurhash'; import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment'; @@ -29,6 +31,7 @@ import { bytesToSize, millisecondsToMinutesAndSeconds } from '$utils/common'; import { decryptFile, downloadEncryptedMedia, downloadMedia, mxcUrlToHttp } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { validBlurHash } from '$utils/blurHash'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './style.css'; type RenderVideoProps = { @@ -149,7 +152,7 @@ export const VideoContent = as<'div', VideoContentProps>( radii="300" size="300" onClick={loadSrc} - before={} + before={} > Watch @@ -231,7 +234,7 @@ export const VideoContent = as<'div', VideoContentProps>( outlined radii="300" onClick={handleRetry} - before={} + before={} > Retry @@ -244,7 +247,7 @@ export const VideoContent = as<'div', VideoContentProps>( } + after={} radii="300" fill="Soft" variant="Secondary" diff --git a/src/app/components/message/modals/MessageDelete.tsx b/src/app/components/message/modals/MessageDelete.tsx index 666895102..9054d375c 100644 --- a/src/app/components/message/modals/MessageDelete.tsx +++ b/src/app/components/message/modals/MessageDelete.tsx @@ -6,8 +6,6 @@ import { Dialog, Header, IconButton, - Icon, - Icons, Text, Input, Button, @@ -16,12 +14,15 @@ import { config, color, } from 'folds'; +import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { modalAtom, ModalType } from '$state/modal'; import * as css from '$features/room/message/styles.css'; import { createDebugLogger } from '$utils/debugLogger'; import * as Sentry from '@sentry/react'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const debugLog = createDebugLogger('MessageDelete'); @@ -31,7 +32,7 @@ export function MessageDeleteItem({ room, mEvent }: { room: Room; mEvent: Matrix return ( } + after={} radii="300" fill="None" variant="Critical" @@ -114,7 +115,7 @@ export function MessageDeleteInternal({ room, mEvent, onClose }: MessageDeleteIn Delete Message - + } + after={} radii="300" onClick={(e: MouseEvent) => { e.preventDefault(); diff --git a/src/app/components/message/modals/MessageForward.tsx b/src/app/components/message/modals/MessageForward.tsx index 219e41197..82f33dec8 100644 --- a/src/app/components/message/modals/MessageForward.tsx +++ b/src/app/components/message/modals/MessageForward.tsx @@ -2,20 +2,9 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { modalAtom, ModalType } from '$state/modal'; -import { - Box, - Button, - Dialog, - Header, - Icon, - Icons, - IconButton, - MenuItem, - Text, - config, - Scroll, - as, -} from 'folds'; +import { Box, Button, Dialog, Header, IconButton, MenuItem, Text, config, Scroll, as } from 'folds'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useAtomValue, useSetAtom } from 'jotai'; import { JoinRule, MatrixEvent, Room } from '$types/matrix-sdk'; import { useEffect, useMemo, useState } from 'react'; @@ -28,6 +17,7 @@ import { getStateEvents } from '$utils/room'; import { StateEvent } from '$types/matrix/room'; import { createDebugLogger } from '$utils/debugLogger'; import * as Sentry from '@sentry/react'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const debugLog = createDebugLogger('MessageForward'); @@ -48,7 +38,7 @@ export const MessageForwardItem = as<'button', MessageForwardItemProps>( return ( } + after={} radii="300" {...props} onClick={handleClick} @@ -311,7 +301,7 @@ export function MessageForwardInternal({ Forward Message - + diff --git a/src/app/components/message/modals/MessageReactions.tsx b/src/app/components/message/modals/MessageReactions.tsx index f2fa7a5bd..b449b65fc 100644 --- a/src/app/components/message/modals/MessageReactions.tsx +++ b/src/app/components/message/modals/MessageReactions.tsx @@ -1,10 +1,12 @@ import { MouseEvent } from 'react'; import { Room, Relations } from '$types/matrix-sdk'; import { useSetAtom } from 'jotai'; -import { Icon, Icons, Text, MenuItem } from 'folds'; +import { Text, MenuItem } from 'folds'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; import { modalAtom, ModalType } from '$state/modal'; import * as css from '$features/room/message/styles.css'; import { ReactionViewer } from '$features/room/reaction-viewer'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function MessageAllReactionItem({ room, relations }: { room: Room; relations: Relations }) { const setModal = useSetAtom(modalAtom); @@ -12,7 +14,7 @@ export function MessageAllReactionItem({ room, relations }: { room: Room; relati return ( } + after={} radii="300" onClick={(e: MouseEvent) => { e.preventDefault(); diff --git a/src/app/components/message/modals/MessageReadRecipts.tsx b/src/app/components/message/modals/MessageReadRecipts.tsx index 6642627c0..77ab152d1 100644 --- a/src/app/components/message/modals/MessageReadRecipts.tsx +++ b/src/app/components/message/modals/MessageReadRecipts.tsx @@ -1,10 +1,12 @@ import { MouseEvent } from 'react'; import { Room } from '$types/matrix-sdk'; import { useSetAtom } from 'jotai'; -import { MenuItem, Icon, Icons, Text } from 'folds'; +import { MenuItem, Text } from 'folds'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; import { modalAtom, ModalType } from '$state/modal'; import { EventReaders } from '$components/event-readers'; import * as css from '$features/room/message/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function MessageReadReceiptItem({ room, eventId }: { room: Room; eventId: string }) { const setModal = useSetAtom(modalAtom); @@ -12,7 +14,7 @@ export function MessageReadReceiptItem({ room, eventId }: { room: Room; eventId: return ( } + after={} radii="300" onClick={(e: MouseEvent) => { e.preventDefault(); diff --git a/src/app/components/message/modals/MessageReport.tsx b/src/app/components/message/modals/MessageReport.tsx index 71cf03cc5..085e97822 100644 --- a/src/app/components/message/modals/MessageReport.tsx +++ b/src/app/components/message/modals/MessageReport.tsx @@ -6,8 +6,6 @@ import { Dialog, Header, IconButton, - Icon, - Icons, Text, Input, Button, @@ -16,12 +14,15 @@ import { config, color, } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import * as css from '$features/room/message/styles.css'; import { modalAtom, ModalType } from '$state/modal'; import { createDebugLogger } from '$utils/debugLogger'; import * as Sentry from '@sentry/react'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const debugLog = createDebugLogger('MessageReport'); @@ -33,7 +34,7 @@ export function MessageReportItem({ room, mEvent }: { room: Room; mEvent: Matrix size="300" variant="Critical" fill="None" - after={} + after={} radii="300" onClick={(e: MouseEvent) => { e.preventDefault(); @@ -113,7 +114,7 @@ export function MessageReportInternal({ room, mEvent, onClose }: MessageReportIn Report Message - + } + after={} radii="300" onClick={(e: MouseEvent) => { e.preventDefault(); diff --git a/src/app/components/notification-banner/NotificationBanner.tsx b/src/app/components/notification-banner/NotificationBanner.tsx index b574e3585..503d067a8 100644 --- a/src/app/components/notification-banner/NotificationBanner.tsx +++ b/src/app/components/notification-banner/NotificationBanner.tsx @@ -1,8 +1,10 @@ import { useAtom } from 'jotai'; import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; -import { Box, Icon, IconButton, Icons, Text } from 'folds'; +import { Box, IconButton, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { createLogger } from '$utils/debug'; import { inAppBannerAtom, InAppBannerNotification } from '$state/sessions'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './NotificationBanner.css'; const log = createLogger('NotificationBanner'); @@ -155,7 +157,7 @@ function BannerItem({ notification, onDismiss }: BannerItemProps) { }} aria-label="Dismiss notification" > - +
, 'type' | 'size'> & { size: '400' | '500'; @@ -29,10 +32,10 @@ export const PasswordInput = forwardRef( size="300" radii="300" > - diff --git a/src/app/components/room-avatar/RoomAvatar.tsx b/src/app/components/room-avatar/RoomAvatar.tsx index 356d9dbc2..a8ce06fdb 100644 --- a/src/app/components/room-avatar/RoomAvatar.tsx +++ b/src/app/components/room-avatar/RoomAvatar.tsx @@ -1,7 +1,8 @@ +import { forwardRef, ReactNode, useState } from 'react'; +import { AvatarFallback, color } from 'folds'; import { JoinRule } from '$types/matrix-sdk'; -import { AvatarFallback, Icon, Icons, color } from 'folds'; -import { ComponentProps, ReactNode, forwardRef, useState } from 'react'; -import { getRoomIconSrc } from '$utils/room'; +import { PhosphorIcon, type PhosphorIconProps } from '$components/PhosphorIcon'; +import { getRoomIcon } from '$utils/room'; import colorMXID from '$utils/colorMXID'; import * as css from './RoomAvatar.css'; import { AvatarImage } from './AvatarImage'; @@ -35,10 +36,10 @@ export function RoomAvatar({ roomId, src, alt, renderFallback, uniformIcons }: R export const RoomIcon = forwardRef< SVGSVGElement, - Omit, 'src'> & { + Omit & { joinRule?: JoinRule; roomType?: string; } >(({ joinRule, roomType, ...props }, ref) => ( - + )); diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx index 50d1f23ab..2c7c16057 100644 --- a/src/app/components/room-card/RoomCard.tsx +++ b/src/app/components/room-card/RoomCard.tsx @@ -6,8 +6,6 @@ import { Box, Button, Dialog, - Icon, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -17,6 +15,7 @@ import { color, config, } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import classNames from 'classnames'; import FocusTrap from 'focus-trap-react'; import { getMxIdLocalPart, mxcUrlToHttp } from '$utils/matrix'; @@ -33,6 +32,7 @@ import { useStateEventCallback } from '$hooks/useStateEventCallback'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { KnockRoomPrompt } from '$components/knock-room-prompt'; import { RoomAvatar } from '$components/room-avatar'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './style.css'; type GridColumnCount = '1' | '2' | '3'; @@ -258,7 +258,7 @@ export const RoomCard = as<'div', RoomCardProps>( {typeof joinedMemberCount === 'number' && ( - + {`${millify(joinedMemberCount)} Members`} )} diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx index 3ad39546f..2cdd73a52 100644 --- a/src/app/components/room-intro/RoomIntro.tsx +++ b/src/app/components/room-intro/RoomIntro.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useState } from 'react'; -import { Avatar, Box, Button, Icon, Icons, Spinner, Text, as } from 'folds'; +import { Avatar, Box, Button, Spinner, Text, as } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { Room } from '$types/matrix-sdk'; import { useAtomValue } from 'jotai'; import { IRoomCreateContent, Membership, StateEvent } from '$types/matrix/room'; @@ -20,6 +21,7 @@ import { RoomAvatar } from '$components/room-avatar'; import { InviteUserPrompt } from '$components/invite-user-prompt'; import { InfoCard } from '$components/info-card'; import { DirectInvitePrompt } from '$components/direct-invite-prompt'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export type RoomIntroProps = { room: Room; @@ -115,7 +117,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {isDirectConversation && ( } + before={} beforeAlign="Center" description="This is a direct message" after={ diff --git a/src/app/components/room-topic-viewer/RoomTopicViewer.tsx b/src/app/components/room-topic-viewer/RoomTopicViewer.tsx index 8838cea25..368e86cda 100644 --- a/src/app/components/room-topic-viewer/RoomTopicViewer.tsx +++ b/src/app/components/room-topic-viewer/RoomTopicViewer.tsx @@ -1,7 +1,9 @@ -import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds'; +import { as, Box, Header, IconButton, Modal, Scroll, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import classNames from 'classnames'; import Linkify from 'linkify-react'; import { LINKIFY_OPTS, scaleSystemEmoji } from '$plugins/react-custom-html-parser'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './style.css'; export const RoomTopicViewer = as< @@ -26,7 +28,7 @@ export const RoomTopicViewer = as< - + diff --git a/src/app/components/telemetry-consent/TelemetryConsentBanner.tsx b/src/app/components/telemetry-consent/TelemetryConsentBanner.tsx index 5c1e90a08..30f8534da 100644 --- a/src/app/components/telemetry-consent/TelemetryConsentBanner.tsx +++ b/src/app/components/telemetry-consent/TelemetryConsentBanner.tsx @@ -1,5 +1,7 @@ import { useEffect, useRef, useState } from 'react'; -import { Box, Button, Icon, Icons, Text } from 'folds'; +import { Box, Button, Text } from 'folds'; +import { ShieldCheckIcon } from '@phosphor-icons/react/dist/csr/ShieldCheck'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './TelemetryConsentBanner.css'; const SENTRY_KEY = 'sable_sentry_enabled'; @@ -41,7 +43,7 @@ export function TelemetryConsentBanner() { aria-label="Crash reporting prompt" >
- +
Help improve Sable diff --git a/src/app/components/text-viewer/TextViewer.tsx b/src/app/components/text-viewer/TextViewer.tsx index 8c6957ec8..245989cc1 100644 --- a/src/app/components/text-viewer/TextViewer.tsx +++ b/src/app/components/text-viewer/TextViewer.tsx @@ -1,8 +1,10 @@ import { ComponentProps, HTMLAttributes, Suspense, forwardRef, lazy } from 'react'; import classNames from 'classnames'; -import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds'; +import { Box, Chip, Header, IconButton, Scroll, Text, as } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; import { ErrorBoundary } from 'react-error-boundary'; import { copyToClipboard } from '$utils/dom'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './TextViewer.css'; const ReactPrism = lazy(() => import('$plugins/react-prism/ReactPrism')); @@ -53,7 +55,7 @@ export const TextViewer = as<'div', TextViewerProps>(
- + {name} diff --git a/src/app/components/uia-stages/PasswordStage.tsx b/src/app/components/uia-stages/PasswordStage.tsx index 8ebc923ab..a15531cc7 100644 --- a/src/app/components/uia-stages/PasswordStage.tsx +++ b/src/app/components/uia-stages/PasswordStage.tsx @@ -1,7 +1,10 @@ -import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds'; +import { Box, Button, color, config, Dialog, Header, IconButton, Text } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { FormEventHandler } from 'react'; import { AuthType } from '$types/matrix-sdk'; import { PasswordInput } from '$components/password-input'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { StageComponentProps } from './types'; import { ErrorCode } from '../../cs-errorcode'; @@ -46,7 +49,7 @@ export function PasswordStage({ Account Password - +
{errorCode && ( - + {errorCode === ErrorCode.M_FORBIDDEN diff --git a/src/app/components/uia-stages/SSOStage.tsx b/src/app/components/uia-stages/SSOStage.tsx index fb20e03b1..89b5ec409 100644 --- a/src/app/components/uia-stages/SSOStage.tsx +++ b/src/app/components/uia-stages/SSOStage.tsx @@ -1,5 +1,8 @@ -import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds'; +import { Box, Button, color, config, Dialog, Header, IconButton, Text } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useCallback, useEffect, useState } from 'react'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { StageComponentProps } from './types'; export function SSOStage({ @@ -57,7 +60,7 @@ export function SSOStage({ SSO Login - + {errorCode && ( - + {`${errorCode}: ${error}`} diff --git a/src/app/components/upload-board/UploadBoard.tsx b/src/app/components/upload-board/UploadBoard.tsx index 8f71c22e9..416534e42 100644 --- a/src/app/components/upload-board/UploadBoard.tsx +++ b/src/app/components/upload-board/UploadBoard.tsx @@ -1,9 +1,14 @@ import { MutableRefObject, ReactNode, useImperativeHandle, useRef } from 'react'; -import { Badge, Box, Chip, Header, Icon, Icons, Spinner, Text, as, percent } from 'folds'; +import { Badge, Box, Chip, Header, Spinner, Text, as, percent } from 'folds'; +import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { PaperPlaneIcon } from '@phosphor-icons/react/dist/csr/PaperPlane'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import classNames from 'classnames'; import { useAtomValue } from 'jotai'; import { TUploadFamilyObserverAtom, Upload, UploadStatus, UploadSuccess } from '$state/upload'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './UploadBoard.css'; type UploadBoardProps = { @@ -85,7 +90,7 @@ export function UploadBoardHeader({ grow="Yes" gap="100" > - + Files @@ -96,7 +101,7 @@ export function UploadBoardHeader({ variant="Primary" radii="Pill" outlined - after={} + after={} > Send @@ -120,7 +125,7 @@ export function UploadBoardHeader({ onClick={handleCancel} variant="SurfaceVariant" radii="Pill" - after={} + after={} > {uploads.length === 1 ? 'Remove' : 'Remove All'} diff --git a/src/app/components/upload-card/CompactUploadCardRenderer.tsx b/src/app/components/upload-card/CompactUploadCardRenderer.tsx index c4f5cdfa2..fa03391a1 100644 --- a/src/app/components/upload-card/CompactUploadCardRenderer.tsx +++ b/src/app/components/upload-card/CompactUploadCardRenderer.tsx @@ -1,10 +1,13 @@ import { useEffect } from 'react'; -import { Chip, Icon, IconButton, Icons, Text, color } from 'folds'; +import { Chip, IconButton, Text, color } from 'folds'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '$state/upload'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { TUploadContent } from '$utils/matrix'; import { bytesToSize, getFileTypeIcon } from '$utils/common'; import { useMediaConfig } from '$hooks/useMediaConfig'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { UploadCard, UploadCardError, CompactUploadCardProgress } from './UploadCard'; type CompactUploadCardRendererProps = { @@ -47,7 +50,7 @@ export function CompactUploadCardRenderer({ compact outlined radii="300" - before={} + before={} after={ <> {upload.status === UploadStatus.Error && ( @@ -69,7 +72,7 @@ export function CompactUploadCardRenderer({ radii="Pill" size="300" > - + } @@ -79,7 +82,7 @@ export function CompactUploadCardRenderer({ {file.name} - + ) : ( <> diff --git a/src/app/components/upload-card/UploadCard.tsx b/src/app/components/upload-card/UploadCard.tsx index bfe11d475..01c567675 100644 --- a/src/app/components/upload-card/UploadCard.tsx +++ b/src/app/components/upload-card/UploadCard.tsx @@ -1,7 +1,8 @@ -import { Badge, Box, Icon, Icons, ProgressBar, Text, percent } from 'folds'; +import { Badge, Box, ProgressBar, Text, percent } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import { ReactNode, forwardRef } from 'react'; - import { bytesToSize } from '$utils/common'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './UploadCard.css'; type UploadCardProps = { @@ -79,7 +80,7 @@ type UploadCardErrorProps = { export function UploadCardError({ children }: UploadCardErrorProps) { return ( - + {children} ); diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx index d9fa444f7..0bb3b46a4 100644 --- a/src/app/components/upload-card/UploadCardRenderer.tsx +++ b/src/app/components/upload-card/UploadCardRenderer.tsx @@ -2,9 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'; import { Box, Chip, - Icon, IconButton, - Icons, Scroll, Text, Tooltip, @@ -14,7 +12,13 @@ import { toRem, } from 'folds'; import { HTMLReactParserOptions } from 'html-react-parser'; -import { Play, Pause } from '@phosphor-icons/react'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; +import { EyeSlashIcon } from '@phosphor-icons/react/dist/csr/EyeSlash'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; +import { PauseIcon } from '@phosphor-icons/react/dist/csr/Pause'; +import { PencilIcon } from '@phosphor-icons/react/dist/csr/Pencil'; +import { PlayIcon } from '@phosphor-icons/react/dist/csr/Play'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { Opts as LinkifyOpts } from 'linkifyjs'; import { getReactCustomHtmlParser, LINKIFY_OPTS } from '$plugins/react-custom-html-parser'; @@ -27,6 +31,7 @@ import { bytesToSize, getFileTypeIcon } from '$utils/common'; import { roomUploadAtomFamily, TUploadItem, TUploadMetadata } from '$state/room/roomInputDrafts'; import { useObjectURL } from '$hooks/useObjectURL'; import { useMediaConfig } from '$hooks/useMediaConfig'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard'; import * as css from './UploadCard.css'; import { DescriptionEditor } from './UploadDescriptionEditor'; @@ -248,7 +253,7 @@ function PreviewAudio({ fileItem }: PreviewAudioProps) { aria-label={isPlaying ? 'Pause' : 'Play voice message'} aria-pressed={isPlaying} > - {isPlaying ? : } + } + before={} onClick={() => onSpoiler(!metadata.markedAsSpoiler)} > Spoiler @@ -395,7 +400,7 @@ export function UploadCardRenderer({ return ( } + before={} after={ <> {upload.status === UploadStatus.Error && ( @@ -420,7 +425,7 @@ export function UploadCardRenderer({ radii="Pill" size="300" > - + )} {isDescribed && ( @@ -436,7 +441,7 @@ export function UploadCardRenderer({ } > - {(triggerRef) => } + {(triggerRef) => } )} @@ -447,7 +452,7 @@ export function UploadCardRenderer({ radii="Pill" size="300" > - + } @@ -528,7 +533,7 @@ export function UploadCardRenderer({ {file.name} {upload.status === UploadStatus.Success && ( - + )} ); diff --git a/src/app/components/upload-card/UploadDescriptionEditor.tsx b/src/app/components/upload-card/UploadDescriptionEditor.tsx index 563f06eda..ec86bbb99 100644 --- a/src/app/components/upload-card/UploadDescriptionEditor.tsx +++ b/src/app/components/upload-card/UploadDescriptionEditor.tsx @@ -1,17 +1,8 @@ import { KeyboardEventHandler, useCallback, useEffect, useState, useRef } from 'react'; -import { - Box, - Chip, - Icon, - IconButton, - Icons, - Line, - PopOut, - RectCords, - Spinner, - Text, - config, -} from 'folds'; +import { Box, Chip, IconButton, Line, PopOut, RectCords, Spinner, Text, config } from 'folds'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { TextAaIcon } from '@phosphor-icons/react/dist/csr/TextAa'; +import { TextAUnderlineIcon } from '@phosphor-icons/react/dist/csr/TextAUnderline'; import { Editor, Transforms } from 'slate'; import { ReactEditor } from 'slate-react'; import { isKeyHotkey } from 'is-hotkey'; @@ -37,6 +28,7 @@ import { settingsAtom } from '$state/settings'; import { UseStateProvider } from '$components/UseStateProvider'; import { EmojiBoard } from '$components/emoji-board'; import { mobileOrTablet } from '$utils/user-agent'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './UploadDescriptionEditor.css'; type DescriptionEditorProps = { @@ -218,7 +210,7 @@ export function DescriptionEditor({ radii="300" onClick={() => setToolbar(!toolbar)} > - + {(anchor: RectCords | undefined, setAnchor) => ( @@ -252,7 +244,11 @@ export function DescriptionEditor({ radii="300" onClick={(evt) => setAnchor(evt.currentTarget.getBoundingClientRect())} > - + )} diff --git a/src/app/components/url-preview/UrlPreviewCard.tsx b/src/app/components/url-preview/UrlPreviewCard.tsx index 62106a00a..7fcff3219 100644 --- a/src/app/components/url-preview/UrlPreviewCard.tsx +++ b/src/app/components/url-preview/UrlPreviewCard.tsx @@ -1,10 +1,13 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { IPreviewUrlResponse } from '$types/matrix-sdk'; -import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds'; +import { Box, IconButton, Scroll, Spinner, Text, as, color, config } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { mxcUrlToHttp, downloadMedia } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { safeDecodeUrl } from '$plugins/react-custom-html-parser'; import * as css from './UrlPreviewCard.css'; import { UrlPreview, UrlPreviewContent, UrlPreviewDescription } from './UrlPreview'; @@ -307,7 +310,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => { outlined onClick={handleScrollBack} > - + )} @@ -324,7 +327,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => { outlined onClick={handleScrollFront} > - + )} diff --git a/src/app/components/user-profile/CreatorChip.tsx b/src/app/components/user-profile/CreatorChip.tsx index f517581cc..bf37f22ac 100644 --- a/src/app/components/user-profile/CreatorChip.tsx +++ b/src/app/components/user-profile/CreatorChip.tsx @@ -1,4 +1,5 @@ -import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds'; +import { Chip, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; import { MouseEventHandler, useState } from 'react'; import FocusTrap from 'focus-trap-react'; import { isKeyHotkey } from 'is-hotkey'; @@ -14,6 +15,7 @@ import { useOpenSpaceSettings } from '$state/hooks/spaceSettings'; import { SpaceSettingsPage } from '$state/spaceSettings'; import { RoomSettingsPage } from '$state/roomSettings'; import { PowerColorBadge, PowerIcon } from '$components/power'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function CreatorChip() { const mx = useMatrixClient(); @@ -83,7 +85,7 @@ export function CreatorChip() { radii="Pill" before={ cords ? ( - + ) : ( ) diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx index d1e4dbfa2..03d908292 100644 --- a/src/app/components/user-profile/PowerChip.tsx +++ b/src/app/components/user-profile/PowerChip.tsx @@ -5,9 +5,7 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -20,6 +18,8 @@ import { Text, toRem, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MouseEventHandler, useCallback, useState } from 'react'; import FocusTrap from 'focus-trap-react'; import { isKeyHotkey } from 'is-hotkey'; @@ -43,6 +43,7 @@ import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { useMemberPowerCompare } from '$hooks/useMemberPowerCompare'; import { CutoutCard } from '$components/cutout-card'; import { PowerColorBadge, PowerIcon } from '$components/power'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type SelfDemoteAlertProps = { power: number; @@ -71,7 +72,7 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) { Self Demotion - + @@ -121,7 +122,7 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps) Shared Power - + @@ -321,7 +322,7 @@ export function PowerChip({ userId }: { userId: string }) { radii="Pill" before={ cords ? ( - + ) : ( <> {!changing && } diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx index 1ce3b26c1..4bf08975a 100644 --- a/src/app/components/user-profile/UserChips.tsx +++ b/src/app/components/user-profile/UserChips.tsx @@ -19,8 +19,6 @@ import { Text, Line, Chip, - Icon, - Icons, RectCords, Spinner, toRem, @@ -28,6 +26,13 @@ import { Scroll, Avatar, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { DotsThreeIcon } from '@phosphor-icons/react/dist/csr/DotsThree'; +import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link'; +import { PencilSimpleIcon } from '@phosphor-icons/react/dist/csr/PencilSimple'; +import { ProhibitIcon } from '@phosphor-icons/react/dist/csr/Prohibit'; +import { HardDrivesIcon } from '@phosphor-icons/react/dist/csr/HardDrives'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { getMxIdServer } from '$utils/matrix'; import { useCloseUserRoomProfile } from '$state/hooks/userRoomProfile'; @@ -50,6 +55,7 @@ import { useNickname, useSetNickname } from '$hooks/useNickname'; import { CutoutCard } from '$components/cutout-card'; import { SettingTile } from '$components/setting-tile'; import { RoomAvatar, RoomIcon } from '$components/room-avatar'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function ServerChip({ server }: { server: string }) { const mx = useMatrixClient(); @@ -135,9 +141,9 @@ export function ServerChip({ server }: { server: string }) { radii="Pill" before={ cords ? ( - + ) : ( - + ) } onClick={open} @@ -217,9 +223,9 @@ export function ShareChip({ userId }: { userId: string }) { radii="Pill" before={ cords ? ( - + ) : ( - + ) } onClick={open} @@ -566,7 +572,7 @@ export function OptionsChip({ userId }: { userId: string }) { fill="None" size="300" radii="300" - before={} + before={} onClick={() => setEditingNick(true)} > {currentNick ? 'Edit Nickname' : 'Set Nickname'} @@ -585,7 +591,7 @@ export function OptionsChip({ userId }: { userId: string }) { ignoring ? ( ) : ( - + ) } disabled={ignoring} @@ -601,7 +607,7 @@ export function OptionsChip({ userId }: { userId: string }) { {ignoring ? ( ) : ( - + )} diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx index 0acdc3618..9a426f1b8 100644 --- a/src/app/components/user-profile/UserHero.tsx +++ b/src/app/components/user-profile/UserHero.tsx @@ -2,8 +2,6 @@ import { useMemo, useState } from 'react'; import { Avatar, Box, - Icon, - Icons, Modal, Overlay, OverlayBackdrop, @@ -13,6 +11,9 @@ import { Tooltip, toRem, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import classNames from 'classnames'; import FocusTrap from 'focus-trap-react'; import colorMXID from '$utils/colorMXID'; @@ -28,6 +29,7 @@ import { ImageViewer } from '$components/image-viewer'; import { AvatarPresence, PresenceBadge } from '$components/presence'; import { UserAvatar } from '$components/user-avatar'; import { ClientSideHoverFreeze } from '$components/ClientSideHoverFreeze'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './styles.css'; type UserHeroProps = { @@ -106,7 +108,7 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs userId={userId} src={avatarUrl} alt={userId} - renderFallback={() => } + renderFallback={() => } /> @@ -175,7 +177,7 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence, autoplayGifs justifyContent="Center" style={{ alignSelf: isFullStatus ? 'flex-start' : 'center' }} > - + )} diff --git a/src/app/components/user-profile/UserModeration.tsx b/src/app/components/user-profile/UserModeration.tsx index a6f8c796e..824b25da0 100644 --- a/src/app/components/user-profile/UserModeration.tsx +++ b/src/app/components/user-profile/UserModeration.tsx @@ -1,4 +1,7 @@ -import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds'; +import { Box, Button, color, config, Spinner, Text, Input } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; +import { ProhibitIcon } from '@phosphor-icons/react/dist/csr/Prohibit'; import { useCallback, useRef } from 'react'; import { useRoom } from '$hooks/useRoom'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; @@ -9,6 +12,7 @@ import { settingsAtom } from '$state/settings'; import { timeDayMonYear, timeHourMinute } from '$utils/time'; import { SettingTile } from '$components/setting-tile'; import { CutoutCard } from '$components/cutout-card'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type UserKickAlertProps = { reason?: string; @@ -293,7 +297,7 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer inviteState.status === AsyncStatus.Loading ? ( ) : ( - + ) } onClick={invite} @@ -313,7 +317,7 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer kickState.status === AsyncStatus.Loading ? ( ) : ( - + ) } onClick={kick} @@ -333,7 +337,7 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer banState.status === AsyncStatus.Loading ? ( ) : ( - + ) } onClick={ban} diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index e11deaa83..4e2c47da5 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -1,4 +1,10 @@ -import { Box, Button, config, Icon, Icons, Scroll, Text } from 'folds'; +import { Box, Button, config, Scroll, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { ChatCircleIcon } from '@phosphor-icons/react/dist/csr/ChatCircle'; +import { ClockIcon } from '@phosphor-icons/react/dist/csr/Clock'; +import { HeartIcon } from '@phosphor-icons/react/dist/csr/Heart'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { SyntheticEvent, useCallback, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useAtomValue } from 'jotai'; @@ -34,6 +40,7 @@ import { RenderBody } from '$components/message'; import { getSettings, settingsAtom } from '$state/settings'; import { filterPronounsByLanguage } from '$utils/pronouns'; import { useSetting } from '$state/hooks/settings'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { CreatorChip } from './CreatorChip'; import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration'; import { PowerChip } from './PowerChip'; @@ -153,7 +160,7 @@ function UserExtendedSection({ {pronouns && ( - + {pronouns} @@ -161,7 +168,7 @@ function UserExtendedSection({ )} {localTime && profile.timezone && ( - + {localTime} ({profile.timezone.replaceAll(/^["']|["']$/g, '')}) @@ -169,7 +176,7 @@ function UserExtendedSection({ )} {catStatusText && ( - + {catStatusText} @@ -213,7 +220,7 @@ function UserExtendedSection({ size="300" fill="None" onClick={() => setShowMore(!showMore)} - after={} + after={} style={{ padding: '1rem', justifyContent: 'flex-start', width: 'fit-content' }} > @@ -363,7 +370,7 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly} + before={} onClick={handleMessage} style={{ marginLeft: 'auto' }} > diff --git a/src/app/features/add-existing/AddExisting.tsx b/src/app/features/add-existing/AddExisting.tsx index 50cfc6717..2e15730c5 100644 --- a/src/app/features/add-existing/AddExisting.tsx +++ b/src/app/features/add-existing/AddExisting.tsx @@ -5,9 +5,7 @@ import { Button, config, Header, - Icon, IconButton, - Icons, Input, Menu, MenuItem, @@ -19,6 +17,9 @@ import { Spinner, Text, } from 'folds'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { ChangeEventHandler, MouseEventHandler, @@ -50,6 +51,7 @@ import { StateEvent } from '$types/matrix/room'; import { getViaServers } from '$plugins/via-servers'; import { rateLimitedActions } from '$utils/matrix'; import { useAlive } from '$hooks/useAlive'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const SEARCH_OPTS: UseAsyncSearchOptions = { limit: 500, @@ -224,7 +226,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM - + @@ -241,7 +243,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM > } + before={} placeholder="Search" size="400" variant="Background" @@ -321,7 +323,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM )} } - after={selectedItem && } + after={selectedItem && } > diff --git a/src/app/features/bug-report/BugReportModal.tsx b/src/app/features/bug-report/BugReportModal.tsx index 1babed978..873f65ed3 100644 --- a/src/app/features/bug-report/BugReportModal.tsx +++ b/src/app/features/bug-report/BugReportModal.tsx @@ -6,9 +6,7 @@ import { Chip, config, Header, - Icon, IconButton, - Icons, Input, Modal, Overlay, @@ -20,10 +18,13 @@ import { TextArea, Checkbox, } from 'folds'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import * as Sentry from '@sentry/react'; import { useCloseBugReportModal, useBugReportModalOpen } from '$state/hooks/bugReportModal'; import { stopPropagation } from '$utils/keyboard'; import { getDebugLogger } from '$utils/debugLogger'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type ReportType = 'bug' | 'feature'; @@ -243,7 +244,7 @@ function BugReportModal() { Report an Issue - + @@ -492,7 +493,7 @@ function BugReportModal() { radii="400" disabled={!canSubmit} onClick={handleSubmit} - after={} + after={} > {sentryEnabled && type === 'bug' ? 'Submit Report' : 'Open on GitHub'} diff --git a/src/app/features/call-status/CallControl.tsx b/src/app/features/call-status/CallControl.tsx index 128df221f..b44d7e97c 100644 --- a/src/app/features/call-status/CallControl.tsx +++ b/src/app/features/call-status/CallControl.tsx @@ -1,6 +1,15 @@ -import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, Tooltip, TooltipProvider } from 'folds'; +import { Box, Chip, IconButton, Spinner, Text, Tooltip, TooltipProvider } from 'folds'; +import { HeadphonesIcon } from '@phosphor-icons/react/dist/csr/Headphones'; +import { MicrophoneIcon } from '@phosphor-icons/react/dist/csr/Microphone'; +import { MicrophoneSlashIcon } from '@phosphor-icons/react/dist/csr/MicrophoneSlash'; +import { PhoneSlashIcon } from '@phosphor-icons/react/dist/csr/PhoneSlash'; +import { PresentationIcon } from '@phosphor-icons/react/dist/csr/Presentation'; +import { SpeakerXIcon } from '@phosphor-icons/react/dist/csr/SpeakerX'; +import { VideoCameraIcon } from '@phosphor-icons/react/dist/csr/VideoCamera'; +import { VideoCameraSlashIcon } from '@phosphor-icons/react/dist/csr/VideoCameraSlash'; import { useCallback } from 'react'; import { useSetAtom } from 'jotai'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { StatusDivider } from './components'; import { CallEmbed, useCallControlState } from '../../plugins/call'; import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; @@ -32,7 +41,11 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps outlined disabled={disabled} > - + )} @@ -65,10 +78,10 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) { outlined disabled={disabled} > - )} @@ -102,10 +115,10 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) { outlined disabled={disabled} > - )} @@ -139,7 +152,7 @@ function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonPro outlined disabled={disabled} > - + )} @@ -208,7 +221,7 @@ export function CallControl({ exiting ? ( ) : ( - + ) } disabled={exiting} diff --git a/src/app/features/call-status/CallRoomName.tsx b/src/app/features/call-status/CallRoomName.tsx index e2cca3b1b..183018d9d 100644 --- a/src/app/features/call-status/CallRoomName.tsx +++ b/src/app/features/call-status/CallRoomName.tsx @@ -37,7 +37,12 @@ export function CallRoomName({ room }: CallRoomNameProps) { variant="Background" radii="Pill" before={ - + } onClick={() => navigateRoom(room.roomId)} > diff --git a/src/app/features/call-status/LiveChip.tsx b/src/app/features/call-status/LiveChip.tsx index e62af0e24..a0087adba 100644 --- a/src/app/features/call-status/LiveChip.tsx +++ b/src/app/features/call-status/LiveChip.tsx @@ -5,8 +5,6 @@ import { Box, Chip, config, - Icon, - Icons, Menu, MenuItem, PopOut, @@ -15,9 +13,13 @@ import { Text, toRem, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership'; import FocusTrap from 'focus-trap-react'; import { Room } from 'matrix-js-sdk'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './styles.css'; import { stopPropagation } from '../../utils/keyboard'; import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room'; @@ -102,7 +104,9 @@ export function LiveChip({ count, room, members }: LiveChipProps) { userId={userId} src={avatarUrl} alt={name} - renderFallback={() => } + renderFallback={() => ( + + )} /> } @@ -124,7 +128,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) { variant="Surface" fill="Soft" before={} - after={} + after={} radii="Pill" onClick={handleOpenMenu} > diff --git a/src/app/features/call-status/MemberGlance.tsx b/src/app/features/call-status/MemberGlance.tsx index 88c114d51..009c27eee 100644 --- a/src/app/features/call-status/MemberGlance.tsx +++ b/src/app/features/call-status/MemberGlance.tsx @@ -1,6 +1,8 @@ -import { Box, config, Icon, Icons, Text } from 'folds'; +import { Box, config, Text } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership'; import { Room } from 'matrix-js-sdk'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { UserAvatar } from '../../components/user-avatar'; import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room'; import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix'; @@ -59,7 +61,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP userId={userId} src={avatarUrl} alt={name} - renderFallback={() => } + renderFallback={() => } /> ); diff --git a/src/app/features/call-status/MemberSpeaking.tsx b/src/app/features/call-status/MemberSpeaking.tsx index b80190cd3..f47ead121 100644 --- a/src/app/features/call-status/MemberSpeaking.tsx +++ b/src/app/features/call-status/MemberSpeaking.tsx @@ -1,5 +1,7 @@ import { Room } from 'matrix-js-sdk'; -import { Box, Icon, Icons, Text } from 'folds'; +import { Box, Text } from 'folds'; +import { MicrophoneIcon } from '@phosphor-icons/react/dist/csr/Microphone'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { getMemberDisplayName } from '../../utils/room'; import { getMxIdLocalPart } from '../../utils/matrix'; @@ -13,7 +15,7 @@ export function MemberSpeaking({ room, speakers }: MemberSpeakingProps) { ); return ( - + {speakingNames.length === 1 && ( <> diff --git a/src/app/features/call/CallControls.tsx b/src/app/features/call/CallControls.tsx index 6643069c5..b93b1b82b 100644 --- a/src/app/features/call/CallControls.tsx +++ b/src/app/features/call/CallControls.tsx @@ -3,9 +3,7 @@ import { Box, Button, config, - Icon, IconButton, - Icons, Menu, MenuItem, PopOut, @@ -14,6 +12,8 @@ import { Text, toRem, } from 'folds'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; +import { PhoneSlashIcon } from '@phosphor-icons/react/dist/csr/PhoneSlash'; import FocusTrap from 'focus-trap-react'; import { SequenceCard } from '$components/sequence-card'; import { CallEmbed, useCallControlState } from '$plugins/call'; @@ -22,6 +22,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useRoom } from '$hooks/useRoom'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { useCallPreferences } from '$state/hooks/callPreferences'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './styles.css'; import { ChatButton, @@ -200,7 +201,7 @@ export function CallControls({ callEmbed }: CallControlsProps) { outlined aria-pressed={!!cords} > - + @@ -213,7 +214,7 @@ export function CallControls({ callEmbed }: CallControlsProps) { exiting ? ( ) : ( - + ) } disabled={exiting} diff --git a/src/app/features/call/CallMemberCard.tsx b/src/app/features/call/CallMemberCard.tsx index 7d03ac77b..fd9560807 100644 --- a/src/app/features/call/CallMemberCard.tsx +++ b/src/app/features/call/CallMemberCard.tsx @@ -1,6 +1,11 @@ import { CallMembership, SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership'; import { useState } from 'react'; -import { Avatar, Box, Icon, Icons, Text } from 'folds'; +import { Avatar, Box, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { VideoCameraSlashIcon } from '@phosphor-icons/react/dist/csr/VideoCameraSlash'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile'; @@ -63,7 +68,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) { userId={userId} src={avatarUrl} alt={name} - renderFallback={() => } + renderFallback={() => } /> @@ -71,7 +76,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) { {name} - {audioOnly && } + {audioOnly && } ); @@ -113,7 +118,7 @@ export function CallMemberRenderer({ )} - + )} diff --git a/src/app/features/call/Controls.tsx b/src/app/features/call/Controls.tsx index 3fe6d68fe..2cd839dfd 100644 --- a/src/app/features/call/Controls.tsx +++ b/src/app/features/call/Controls.tsx @@ -1,5 +1,14 @@ -import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'folds'; +import { IconButton, Line, Text, Tooltip, TooltipProvider } from 'folds'; +import { ChatCircleIcon } from '@phosphor-icons/react/dist/csr/ChatCircle'; +import { HeadphonesIcon } from '@phosphor-icons/react/dist/csr/Headphones'; +import { MicrophoneIcon } from '@phosphor-icons/react/dist/csr/Microphone'; +import { MicrophoneSlashIcon } from '@phosphor-icons/react/dist/csr/MicrophoneSlash'; +import { PresentationIcon } from '@phosphor-icons/react/dist/csr/Presentation'; +import { SpeakerXIcon } from '@phosphor-icons/react/dist/csr/SpeakerX'; +import { VideoCameraIcon } from '@phosphor-icons/react/dist/csr/VideoCamera'; +import { VideoCameraSlashIcon } from '@phosphor-icons/react/dist/csr/VideoCameraSlash'; import { useAtom } from 'jotai'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './styles.css'; import { callChatAtom } from '../../state/callEmbed'; @@ -34,7 +43,11 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) { onClick={() => onToggle()} outlined > - + )} @@ -66,10 +79,10 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) { onClick={() => onToggle()} outlined > - )} @@ -102,10 +115,10 @@ export function VideoButton({ enabled, onToggle }: VideoButtonProps) { onClick={() => onToggle()} outlined > - )} @@ -138,7 +151,7 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps) onClick={() => onToggle()} outlined > - + )} @@ -168,7 +181,7 @@ export function ChatButton() { onClick={() => setChat(!chat)} outlined > - + )} diff --git a/src/app/features/call/PrescreenControls.tsx b/src/app/features/call/PrescreenControls.tsx index 685ac3699..a5fdd1774 100644 --- a/src/app/features/call/PrescreenControls.tsx +++ b/src/app/features/call/PrescreenControls.tsx @@ -1,4 +1,6 @@ -import { Box, Button, Icon, Icons, Spinner, Text, toRem } from 'folds'; +import { Box, Button, Spinner, Text, toRem } from 'folds'; +import { PhoneIcon } from '@phosphor-icons/react/dist/csr/Phone'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SequenceCard } from '../../components/sequence-card'; import * as css from './styles.css'; import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton } from './Controls'; @@ -83,7 +85,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) { joining ? ( ) : ( - + ) } > diff --git a/src/app/features/common-settings/cosmetics/Cosmetics.tsx b/src/app/features/common-settings/cosmetics/Cosmetics.tsx index be793be7b..1b56f6baf 100644 --- a/src/app/features/common-settings/cosmetics/Cosmetics.tsx +++ b/src/app/features/common-settings/cosmetics/Cosmetics.tsx @@ -11,8 +11,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Scroll, Switch, Avatar, @@ -27,6 +25,7 @@ import { Dialog, Header, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -58,6 +57,7 @@ import { ModalWide } from '$styles/Modal.css'; import { NameColorEditor } from '$features/settings/account/NameColorEditor'; import { PronounEditor } from '$features/settings/account/PronounEditor'; import { PronounSet } from '$utils/pronouns'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const log = createLogger('Cosmetics'); @@ -205,7 +205,7 @@ export function CosmeticsAvatar({ profile, member, userId, room }: CosmeticsSett Remove Room Avatar setAlertRemove(false)} radii="300"> - + @@ -286,7 +286,7 @@ export function CosmeticsNickname({ profile, member, userId, room }: CosmeticsSe radii="300" variant="Secondary" > - + ) } @@ -416,7 +416,7 @@ export function Cosmetics({ requestClose }: CosmeticsProps) { - + diff --git a/src/app/features/common-settings/developer-tools/DevelopTools.tsx b/src/app/features/common-settings/developer-tools/DevelopTools.tsx index aec2f2ca7..8209cf28c 100644 --- a/src/app/features/common-settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/common-settings/developer-tools/DevelopTools.tsx @@ -1,18 +1,11 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; -import { - Box, - Text, - IconButton, - Icon, - Icons, - Scroll, - Switch, - Button, - MenuItem, - config, - color, -} from 'folds'; +import { Box, Text, IconButton, Scroll, Switch, Button, MenuItem, config, color } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { EventType, NotificationCountType } from '$types/matrix-sdk'; import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; @@ -32,6 +25,7 @@ import { CutoutCard } from '$components/cutout-card'; import { AccountDataEditor, AccountDataSubmitCallback } from '$components/AccountDataEditor'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SendRoomEvent } from './SendRoomEvent'; import { StateEventEditor, StateEventInfo } from './StateEventEditor'; @@ -178,7 +172,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { - + @@ -278,10 +272,10 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { radii="300" outlined before={ - } > @@ -310,14 +304,10 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { radii="300" outlined before={ - } > @@ -395,14 +385,10 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { radii="300" outlined before={ - } > @@ -467,7 +453,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { fill="None" size="300" radii="0" - before={} + before={} > @@ -493,9 +479,9 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { size="300" radii="0" before={ - } after={{stateKeyToEvents.size}} @@ -521,7 +507,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { fill="None" size="300" radii="0" - before={} + before={} > @@ -544,7 +530,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { fill="None" size="300" radii="0" - after={} + after={} > @@ -580,10 +566,10 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { radii="300" outlined before={ - } > @@ -603,7 +589,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { fill="None" size="300" radii="0" - before={} + before={} onClick={() => setAccountDataType(null)} > @@ -621,7 +607,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { fill="None" size="300" radii="0" - after={} + after={} onClick={() => setAccountDataType(type)} > diff --git a/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx b/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx index b246b14b6..551932b41 100644 --- a/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx +++ b/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx @@ -3,8 +3,6 @@ import { MatrixError } from '$types/matrix-sdk'; import { Box, Chip, - Icon, - Icons, IconButton, Text, config, @@ -14,6 +12,8 @@ import { TextArea as TextAreaComponent, Input, } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageHeader } from '$components/page'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useRoom } from '$hooks/useRoom'; @@ -22,6 +22,7 @@ import { useTextAreaCodeEditor } from '$hooks/useTextAreaCodeEditor'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { syntaxErrorPosition } from '$utils/dom'; import { Cursor } from '$plugins/text-area'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const EDITOR_INTENT_SPACE_COUNT = 2; @@ -112,14 +113,14 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro size="500" radii="Pill" onClick={requestClose} - before={} + before={} > Developer Tools - + diff --git a/src/app/features/common-settings/developer-tools/StateEventEditor.tsx b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx index 00bbd1125..7d05c3ac1 100644 --- a/src/app/features/common-settings/developer-tools/StateEventEditor.tsx +++ b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx @@ -2,8 +2,6 @@ import { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } f import { Box, Text, - Icon, - Icons, IconButton, Chip, Scroll, @@ -13,6 +11,8 @@ import { Spinner, Button, } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixError } from '$types/matrix-sdk'; import { Page, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; @@ -31,6 +31,7 @@ import { useTextAreaCodeEditor } from '$hooks/useTextAreaCodeEditor'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const EDITOR_INTENT_SPACE_COUNT = 2; @@ -269,14 +270,14 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi size="500" radii="Pill" onClick={requestClose} - before={} + before={} > Developer Tools - + diff --git a/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx b/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx index 0ee350a69..340b64219 100644 --- a/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx +++ b/src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx @@ -1,8 +1,10 @@ import { useState } from 'react'; -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { ImagePack } from '$plugins/custom-emoji'; import { ImagePackView } from '$components/image-pack-view'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { RoomPacks } from './RoomPacks'; type EmojisStickersProps = { @@ -30,7 +32,7 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) { - + diff --git a/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx index 6162e4c0b..f43397ade 100644 --- a/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx +++ b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx @@ -3,8 +3,6 @@ import { Box, Text, Button, - Icon, - Icons, Avatar, AvatarImage, AvatarFallback, @@ -16,6 +14,9 @@ import { IconButton, Menu, } from 'folds'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { StickerIcon } from '@phosphor-icons/react/dist/csr/Sticker'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixError } from '$types/matrix-sdk'; import { SequenceCard } from '$components/sequence-card'; import { @@ -40,6 +41,7 @@ import { useAlive } from '$hooks/useAlive'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type CreatePackTileProps = { packs: ImagePack[]; @@ -221,7 +223,7 @@ export function RoomPacks({ onViewPack }: Readonly) { onClick={() => handleUndoRemove(address)} disabled={applyingChanges} > - + ) : ( ) { onClick={() => handleRemove(address)} disabled={applyingChanges} > - + ))} @@ -239,7 +241,7 @@ export function RoomPacks({ onViewPack }: Readonly) { ) : ( - + )} diff --git a/src/app/features/common-settings/general/RoomAddress.tsx b/src/app/features/common-settings/general/RoomAddress.tsx index f1ae66968..f575364fd 100644 --- a/src/app/features/common-settings/general/RoomAddress.tsx +++ b/src/app/features/common-settings/general/RoomAddress.tsx @@ -7,13 +7,13 @@ import { Chip, color, config, - Icon, - Icons, Input, Spinner, Text, toRem, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; import { MatrixError } from '$types/matrix-sdk'; import { SettingTile } from '$components/setting-tile'; import { SequenceCard } from '$components/sequence-card'; @@ -33,6 +33,7 @@ import { useAlive } from '$hooks/useAlive'; import { StateEvent } from '$types/matrix/room'; import { RoomPermissionsAPI } from '$hooks/useRoomPermissions'; import { getMxIdServer } from '$utils/matrix'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type RoomPublishedAddressesProps = { permissions: RoomPermissionsAPI; @@ -392,7 +393,7 @@ export function RoomLocalAddresses({ permissions }: { permissions: RoomPermissio outlined radii="300" before={ - + } > diff --git a/src/app/features/common-settings/general/RoomEncryption.tsx b/src/app/features/common-settings/general/RoomEncryption.tsx index 3dc87f840..87cf6c423 100644 --- a/src/app/features/common-settings/general/RoomEncryption.tsx +++ b/src/app/features/common-settings/general/RoomEncryption.tsx @@ -6,15 +6,14 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useCallback, useState } from 'react'; import { MatrixError } from '$types/matrix-sdk'; import FocusTrap from 'focus-trap-react'; @@ -28,6 +27,7 @@ import { useRoom } from '$hooks/useRoom'; import { useStateEvent } from '$hooks/useStateEvent'; import { stopPropagation } from '$utils/keyboard'; import { RoomPermissionsAPI } from '$hooks/useRoomPermissions'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2'; @@ -124,7 +124,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) { Enable Encryption setPrompt(false)} radii="300"> - + diff --git a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx index 2f93472e6..d94b5ffde 100644 --- a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx +++ b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx @@ -1,17 +1,6 @@ import { MouseEventHandler, useCallback, useMemo, useState } from 'react'; -import { - Button, - color, - config, - Icon, - Icons, - Menu, - MenuItem, - PopOut, - RectCords, - Spinner, - Text, -} from 'folds'; +import { Button, color, config, Menu, MenuItem, PopOut, RectCords, Spinner, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; import { HistoryVisibility, MatrixError, @@ -28,6 +17,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useStateEvent } from '$hooks/useStateEvent'; import { stopPropagation } from '$utils/keyboard'; import { RoomPermissionsAPI } from '$hooks/useRoomPermissions'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const useVisibilityStr = () => useMemo( @@ -148,7 +138,7 @@ export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProp submitting ? ( ) : ( - + ) } > diff --git a/src/app/features/common-settings/general/RoomProfile.tsx b/src/app/features/common-settings/general/RoomProfile.tsx index cd523f32b..d22ac61b4 100644 --- a/src/app/features/common-settings/general/RoomProfile.tsx +++ b/src/app/features/common-settings/general/RoomProfile.tsx @@ -1,16 +1,6 @@ -import { - Avatar, - Box, - Button, - Chip, - color, - Icon, - Icons, - Input, - Spinner, - Text, - TextArea, -} from 'folds'; +import { Avatar, Box, Button, Chip, color, Input, Spinner, Text, TextArea } from 'folds'; +import { ArrowClockwiseIcon } from '@phosphor-icons/react/dist/csr/ArrowClockwise'; +import { PencilSimpleIcon } from '@phosphor-icons/react/dist/csr/PencilSimple'; import { FormEventHandler, useCallback, useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; import Linkify from 'linkify-react'; @@ -35,6 +25,7 @@ import { useFilePicker } from '$hooks/useFilePicker'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useAlive } from '$hooks/useAlive'; import { RoomPermissionsAPI } from '$hooks/useRoomPermissions'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type RoomProfileEditProps = { canEditAvatar: boolean; @@ -207,7 +198,7 @@ export function RoomProfileEdit({ roomType={room.getType()} size="400" joinRule={joinRule?.join_rule ?? JoinRule.Invite} - filled + weight="fill" /> )} /> @@ -239,7 +230,7 @@ export function RoomProfileEdit({ disabled={submitting} title="Reset DM Name" > - + )} @@ -352,7 +343,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) { variant="Secondary" fill="Soft" radii="300" - before={} + before={} onClick={() => setEdit(true)} outlined > @@ -372,7 +363,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) { roomType={room.getType()} size="400" joinRule={joinRule?.join_rule ?? JoinRule.Invite} - filled + weight="fill" /> )} /> diff --git a/src/app/features/common-settings/general/RoomUpgrade.tsx b/src/app/features/common-settings/general/RoomUpgrade.tsx index 073465688..e0fd43d63 100644 --- a/src/app/features/common-settings/general/RoomUpgrade.tsx +++ b/src/app/features/common-settings/general/RoomUpgrade.tsx @@ -12,9 +12,8 @@ import { config, Box, IconButton, - Icon, - Icons, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { MatrixError, Method, RoomTombstoneEventContent } from '$types/matrix-sdk'; import { SequenceCard } from '$components/sequence-card'; @@ -38,6 +37,7 @@ import { useAlive } from '$hooks/useAlive'; import { creatorsSupported } from '$utils/matrix'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { BreakWord } from '$styles/Text.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) { const mx = useMatrixClient(); @@ -105,7 +105,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) { {room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'} - + diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx index 19b8ffc46..88d383fae 100644 --- a/src/app/features/common-settings/members/Members.tsx +++ b/src/app/features/common-settings/members/Members.tsx @@ -10,9 +10,7 @@ import { Box, Chip, config, - Icon, IconButton, - Icons, Input, PopOut, RectCords, @@ -21,6 +19,11 @@ import { Text, toRem, } from 'folds'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { FunnelIcon } from '@phosphor-icons/react/dist/csr/Funnel'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { SortAscendingIcon } from '@phosphor-icons/react/dist/csr/SortAscending'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useVirtualizer } from '@tanstack/react-virtual'; import { RoomMember } from '$types/matrix-sdk'; import { Page, PageContent, PageHeader } from '$components/page'; @@ -49,6 +52,7 @@ import { useSpaceOptionally } from '$hooks/useSpace'; import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '$hooks/useMemberPowerTag'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { getMouseEventCords } from '$utils/dom'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const SEARCH_OPTIONS: UseAsyncSearchOptions = { limit: 1000, @@ -155,7 +159,7 @@ export function Members({ requestClose }: MembersProps) { - + @@ -172,7 +176,7 @@ export function Members({ requestClose }: MembersProps) { } + before={} variant="SurfaceVariant" size="500" placeholder="Search" @@ -186,7 +190,7 @@ export function Members({ requestClose }: MembersProps) { radii="Pill" aria-pressed onClick={handleSearchReset} - after={} + after={} > {result.items.length === 0 @@ -224,7 +228,7 @@ export function Members({ requestClose }: MembersProps) { variant="SurfaceVariant" size="400" radii="300" - before={} + before={} > {membershipFilter.name} @@ -256,7 +260,7 @@ export function Members({ requestClose }: MembersProps) { variant="SurfaceVariant" size="400" radii="300" - after={} + after={} > {memberSort.name} @@ -277,7 +281,7 @@ export function Members({ requestClose }: MembersProps) { size="300" aria-label="Scroll to Top" > - + {fetchingMembers && ( diff --git a/src/app/features/common-settings/permissions/PermissionGroups.tsx b/src/app/features/common-settings/permissions/PermissionGroups.tsx index 324005819..2ac840968 100644 --- a/src/app/features/common-settings/permissions/PermissionGroups.tsx +++ b/src/app/features/common-settings/permissions/PermissionGroups.tsx @@ -1,6 +1,8 @@ /* eslint-disable react/no-array-index-key */ import { useCallback, useEffect, useMemo, useState } from 'react'; -import { Badge, Box, Button, Chip, config, Icon, Icons, Menu, Spinner, Text } from 'folds'; +import { Badge, Box, Button, Chip, config, Menu, Spinner, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; import { produce } from 'immer'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -18,6 +20,7 @@ import { PowerSwitcher } from '$components/power'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useAlive } from '$hooks/useAlive'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { PermissionGroup } from './types'; const USER_DEFAULT_LOCATION: PermissionLocation = { @@ -145,7 +148,7 @@ export function PermissionGroups({ } before={ canEdit && ( - + ) } onClick={handleOpen} @@ -209,10 +212,7 @@ export function PermissionGroups({ } before={ canEdit && ( - + ) } onClick={handleOpen} diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx index f53f3a237..f7b86adc8 100644 --- a/src/app/features/common-settings/permissions/PowersEditor.tsx +++ b/src/app/features/common-settings/permissions/PowersEditor.tsx @@ -3,8 +3,6 @@ import { Box, Text, Chip, - Icon, - Icons, IconButton, Scroll, Button, @@ -18,6 +16,10 @@ import { TooltipProvider, Tooltip, } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { HexColorPicker } from 'react-colorful'; import { useAtomValue } from 'jotai'; import { Page, PageContent, PageHeader } from '$components/page'; @@ -49,6 +51,7 @@ import { BetaNoticeBadge } from '$components/BetaNoticeBadge'; import { getPowerTagIconSrc } from '$hooks/useMemberPowerTag'; import { creatorsSupported } from '$utils/matrix'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type EditPowerProps = { maxPower: number; @@ -255,7 +258,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: Readonly} + before={} > Pick @@ -382,14 +385,14 @@ export function PowersEditor({ powerLevels, requestClose }: Readonly} + before={} > Permissions - + @@ -515,7 +518,7 @@ export function PowersEditor({ powerLevels, requestClose }: Readonly handleToggleDelete(power) } > - + )} diff --git a/src/app/features/create-chat/CreateChat.tsx b/src/app/features/create-chat/CreateChat.tsx index 225ef9b64..189d8554d 100644 --- a/src/app/features/create-chat/CreateChat.tsx +++ b/src/app/features/create-chat/CreateChat.tsx @@ -1,4 +1,5 @@ -import { Box, Button, color, config, Icon, Icons, Input, Spinner, Switch, Text } from 'folds'; +import { Box, Button, color, config, Input, Spinner, Switch, Text } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import { FormEventHandler, useCallback, useState } from 'react'; import { ICreateRoomStateEvent, MatrixError, Preset, Visibility } from '$types/matrix-sdk'; import { useNavigate } from 'react-router-dom'; @@ -11,6 +12,7 @@ import { millisecondsToMinutes } from '$utils/common'; import { createRoomEncryptionState } from '$components/create-room'; import { useAlive } from '$hooks/useAlive'; import { getDirectRoomPath } from '$pages/pathUtils'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { ErrorCode } from '../../cs-errorcode'; type CreateChatProps = { @@ -90,7 +92,7 @@ export function CreateChat({ defaultUserId }: CreateChatProps) { /> {invalidUserId && ( - + Please enter a valid User ID. @@ -121,7 +123,7 @@ export function CreateChat({ defaultUserId }: CreateChatProps) { {error && ( - + {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED diff --git a/src/app/features/create-room/CreateRoom.tsx b/src/app/features/create-room/CreateRoom.tsx index 7347ba586..b51abf750 100644 --- a/src/app/features/create-room/CreateRoom.tsx +++ b/src/app/features/create-room/CreateRoom.tsx @@ -1,19 +1,13 @@ -import { FormEventHandler, useCallback, useEffect, useState } from 'react'; +import { ComponentType, FormEventHandler, useCallback, useEffect, useState } from 'react'; import { MatrixError, Room, JoinRule } from '$types/matrix-sdk'; -import { - Box, - Button, - Chip, - color, - config, - Icon, - Icons, - Input, - Spinner, - Switch, - Text, - TextArea, -} from 'folds'; +import { Box, Button, Chip, color, config, Input, Spinner, Switch, Text, TextArea } from 'folds'; +import type { IconProps } from '@phosphor-icons/react'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { HashIcon } from '@phosphor-icons/react/dist/csr/Hash'; +import { MicrophoneIcon } from '@phosphor-icons/react/dist/csr/Microphone'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SettingTile } from '$components/setting-tile'; import { SequenceCard } from '$components/sequence-card'; import { @@ -40,7 +34,7 @@ import { } from '$components/create-room'; import { RoomType } from '$types/matrix/room'; import { CreateRoomTypeSelector } from '$components/create-room/CreateRoomTypeSelector'; -import { getRoomIconSrc } from '$utils/room'; +import { getRoomIcon } from '$utils/room'; import { createDebugLogger } from '$utils/debugLogger'; import { ErrorCode } from '../../cs-errorcode'; @@ -53,12 +47,12 @@ const getCreateRoomAccessToIcon = (access: CreateRoomAccess, type?: CreateRoomTy if (access === CreateRoomAccess.Restricted) joinRule = JoinRule.Restricted; if (access === CreateRoomAccess.Private) joinRule = JoinRule.Knock; - return getRoomIconSrc(Icons, isVoiceRoom ? RoomType.Call : undefined, joinRule); + return getRoomIcon(isVoiceRoom ? RoomType.Call : undefined, joinRule); }; -const getCreateRoomTypeToIcon = (type: CreateRoomType) => { - if (type === CreateRoomType.VoiceRoom) return Icons.VolumeHigh; - return Icons.Hash; +const getCreateRoomTypeToIcon = (type: CreateRoomType): ComponentType => { + if (type === CreateRoomType.VoiceRoom) return MicrophoneIcon; + return HashIcon; }; type CreateRoomFormProps = { @@ -204,7 +198,7 @@ export function CreateRoomForm({ Name } + before={} name="nameInput" autoFocus size="500" @@ -233,7 +227,7 @@ export function CreateRoomForm({ } + before={} onClick={() => setAdvance(!advance)} type="button" > @@ -331,7 +325,7 @@ export function CreateRoomForm({ {error && ( - + {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED diff --git a/src/app/features/create-room/CreateRoomModal.tsx b/src/app/features/create-room/CreateRoomModal.tsx index ad613a520..45ffb54b9 100644 --- a/src/app/features/create-room/CreateRoomModal.tsx +++ b/src/app/features/create-room/CreateRoomModal.tsx @@ -2,9 +2,7 @@ import { Box, config, Header, - Icon, IconButton, - Icons, Modal, Overlay, OverlayBackdrop, @@ -12,6 +10,7 @@ import { Scroll, Text, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { useAllJoinedRoomsSet, useGetRoom } from '$hooks/useGetRoom'; import { SpaceProvider } from '$hooks/useSpace'; @@ -19,6 +18,7 @@ import { useCloseCreateRoomModal, useCreateRoomModalState } from '$state/hooks/c import { CreateRoomModalState } from '$state/createRoomModal'; import { stopPropagation } from '$utils/keyboard'; import { CreateRoomType } from '$components/create-room/types'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { CreateRoomForm } from './CreateRoom'; type CreateRoomModalProps = { @@ -60,7 +60,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) { - + diff --git a/src/app/features/create-space/CreateSpace.tsx b/src/app/features/create-space/CreateSpace.tsx index 2fbeb198b..2f9f69ec7 100644 --- a/src/app/features/create-space/CreateSpace.tsx +++ b/src/app/features/create-space/CreateSpace.tsx @@ -1,19 +1,14 @@ -import { FormEventHandler, useCallback, useEffect, useState } from 'react'; +import { ComponentType, FormEventHandler, useCallback, useEffect, useState } from 'react'; import { MatrixError, Room } from '$types/matrix-sdk'; -import { - Box, - Button, - Chip, - color, - config, - Icon, - Icons, - Input, - Spinner, - Switch, - Text, - TextArea, -} from 'folds'; +import { Box, Button, Chip, color, config, Input, Spinner, Switch, Text, TextArea } from 'folds'; +import type { IconProps } from '@phosphor-icons/react'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { GlobeIcon } from '@phosphor-icons/react/dist/csr/Globe'; +import { LockIcon } from '@phosphor-icons/react/dist/csr/Lock'; +import { StarFourIcon } from '@phosphor-icons/react/dist/csr/StarFour'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SettingTile } from '$components/setting-tile'; import { SequenceCard } from '$components/sequence-card'; import { @@ -40,10 +35,10 @@ import { import { RoomType } from '$types/matrix/room'; import { ErrorCode } from '../../cs-errorcode'; -const getCreateSpaceAccessToIcon = (access: CreateRoomAccess) => { - if (access === CreateRoomAccess.Private) return Icons.SpaceLock; - if (access === CreateRoomAccess.Restricted) return Icons.Space; - return Icons.SpaceGlobe; +const getCreateSpaceAccessToIcon = (access: CreateRoomAccess): ComponentType => { + if (access === CreateRoomAccess.Private) return LockIcon; + if (access === CreateRoomAccess.Restricted) return StarFourIcon; + return GlobeIcon; }; type CreateSpaceFormProps = { @@ -151,7 +146,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF Name } + before={} name="nameInput" autoFocus size="500" @@ -180,7 +175,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF } + before={} onClick={() => setAdvance(!advance)} type="button" > @@ -250,7 +245,7 @@ export function CreateSpaceForm({ defaultAccess, space, onCreate }: CreateSpaceF {error && ( - + {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED diff --git a/src/app/features/create-space/CreateSpaceModal.tsx b/src/app/features/create-space/CreateSpaceModal.tsx index 3ef0da51f..f7e1c1901 100644 --- a/src/app/features/create-space/CreateSpaceModal.tsx +++ b/src/app/features/create-space/CreateSpaceModal.tsx @@ -2,9 +2,7 @@ import { Box, config, Header, - Icon, IconButton, - Icons, Modal, Overlay, OverlayBackdrop, @@ -12,12 +10,14 @@ import { Scroll, Text, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { useAllJoinedRoomsSet, useGetRoom } from '$hooks/useGetRoom'; import { SpaceProvider } from '$hooks/useSpace'; import { useCloseCreateSpaceModal, useCreateSpaceModalState } from '$state/hooks/createSpaceModal'; import { CreateSpaceModalState } from '$state/createSpaceModal'; import { stopPropagation } from '$utils/keyboard'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { CreateSpaceForm } from './CreateSpace'; type CreateSpaceModalProps = { @@ -58,7 +58,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) { - + diff --git a/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx b/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx index 17cf86ec3..43705ad8f 100644 --- a/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx +++ b/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx @@ -1,4 +1,5 @@ -import { Box, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds'; +import { Box, IconButton, Scroll, Text, toRem } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; import { useAtomValue } from 'jotai'; import { RoomCard } from '$components/room-card'; import { RoomTopicViewer } from '$components/room-topic-viewer'; @@ -9,6 +10,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { allRoomsAtom } from '$state/room-list/roomList'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] }; export function JoinBeforeNavigate({ @@ -38,7 +40,7 @@ export function JoinBeforeNavigate({ {(onBack) => ( - + )} diff --git a/src/app/features/lobby/DnD.tsx b/src/app/features/lobby/DnD.tsx index fa4584a40..057e8afeb 100644 --- a/src/app/features/lobby/DnD.tsx +++ b/src/app/features/lobby/DnD.tsx @@ -7,8 +7,10 @@ import { import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'; import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'; import classNames from 'classnames'; -import { Box, Icon, Icons, as } from 'folds'; +import { Box, as } from 'folds'; +import { DotsThreeOutlineVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeOutlineVertical'; import { HierarchyItem } from '$hooks/useSpaceHierarchy'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './DnD.css'; export type DropContainerData = { @@ -57,7 +59,7 @@ export const ItemDraggableTarget = as<'div'>(({ className, ...props }, ref) => ( ref={ref} {...props} > - + )); diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx index 1377f33ff..346ca6182 100644 --- a/src/app/features/lobby/HierarchyItemMenu.tsx +++ b/src/app/features/lobby/HierarchyItemMenu.tsx @@ -3,8 +3,6 @@ import FocusTrap from 'focus-trap-react'; import { Box, IconButton, - Icon, - Icons, PopOut, Menu, MenuItem, @@ -15,6 +13,8 @@ import { Spinner, toRem, } from 'folds'; +import { DotsThreeOutlineVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeOutlineVertical'; +import { SignOutIcon } from '@phosphor-icons/react/dist/csr/SignOut'; import { HierarchyItem } from '$hooks/useSpaceHierarchy'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { MSpaceChildContent, StateEvent } from '$types/matrix/room'; @@ -33,6 +33,7 @@ import { InviteUserPrompt } from '$components/invite-user-prompt'; import { getCanonicalAliasOrRoomId } from '$utils/matrix'; import { useNavigate } from 'react-router-dom'; import { getSpaceLobbyPath } from '$pages/pathUtils'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type HierarchyItemWithParent = HierarchyItem & { parentId: string; @@ -246,7 +247,7 @@ export function HierarchyItemMenu({ radii="300" aria-pressed={!!menuAnchor} > - + {menuAnchor && ( } + after={} radii="300" aria-pressed={promptLeave} > diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx index c980db462..b785a3b60 100644 --- a/src/app/features/lobby/Lobby.tsx +++ b/src/app/features/lobby/Lobby.tsx @@ -7,19 +7,8 @@ import { useRef, useState, } from 'react'; -import { - Box, - Chip, - Icon, - IconButton, - Icons, - Line, - Scroll, - Spinner, - Text, - color, - config, -} from 'folds'; +import { Box, Chip, IconButton, Line, Scroll, Spinner, Text, color, config } from 'folds'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual'; import { useAtom, useAtomValue } from 'jotai'; import { useNavigate } from 'react-router-dom'; @@ -72,6 +61,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { getRoomPermissionsAPI } from '$hooks/useRoomPermissions'; import { getRoomCreatorsForRoomId } from '$hooks/useRoomCreators'; import { MembersDrawer } from '$features/room/MembersDrawer'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SpaceHierarchyItem } from './SpaceHierarchyItem'; import { CanDropCallback, useDnDMonitor } from './DnD'; import { LobbyHero } from './LobbyHero'; @@ -642,7 +632,7 @@ export function Lobby() { size="300" aria-label="Scroll to Top" > - +
( variant="Primary" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={invitePrompt} disabled={!canInvite} @@ -93,7 +98,7 @@ const LobbyMenu = forwardRef( } + after={} radii="300" > @@ -111,7 +116,7 @@ const LobbyMenu = forwardRef( variant="Critical" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={promptLeave} > @@ -166,7 +171,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) { {(onBack) => ( - + )} @@ -223,7 +228,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) { ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)} > - + )} @@ -245,7 +250,11 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) { ref={triggerRef} aria-pressed={!!menuAnchor} > - + )} diff --git a/src/app/features/lobby/RoomItem.tsx b/src/app/features/lobby/RoomItem.tsx index 34954e460..0cb7fa930 100644 --- a/src/app/features/lobby/RoomItem.tsx +++ b/src/app/features/lobby/RoomItem.tsx @@ -4,8 +4,6 @@ import { Badge, Box, Chip, - Icon, - Icons, Line, Overlay, OverlayBackdrop, @@ -18,6 +16,10 @@ import { color, toRem, } from 'folds'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { HandFistIcon } from '@phosphor-icons/react/dist/csr/HandFist'; import FocusTrap from 'focus-trap-react'; import { JoinRule, MatrixError, Room, IHierarchyRoom } from '$types/matrix-sdk'; import { RoomAvatar, RoomIcon } from '$components/room-avatar'; @@ -35,6 +37,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '$utils/room'; import { mxcUrlToHttp } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { ItemDraggableTarget, useDraggableItem } from './DnD'; import * as styleCss from './style.css'; import * as css from './RoomItem.css'; @@ -67,12 +70,12 @@ function RoomJoinButton({ roomId, via }: RoomJoinButtonProps) { } > {(triggerRef) => ( - @@ -85,7 +88,11 @@ function RoomJoinButton({ roomId, via }: RoomJoinButtonProps) { size="400" radii="Pill" before={ - canJoin ? : + canJoin ? ( + + ) : ( + + ) } onClick={join} disabled={!canJoin} @@ -106,7 +113,7 @@ function RoomKnockButton({ roomId, via }: RoomJoinButtonProps) { fill="Soft" size="400" radii="Pill" - before={} + before={} onClick={() => setKnocking(true)} > Knock @@ -178,7 +185,7 @@ function RoomProfileError({ roomId, suggested, inaccessibleRoom, via }: RoomProf )} /> @@ -401,7 +408,7 @@ export const RoomItemCard = as<'div', RoomItemCardProps>( radii="Pill" aria-label="Open Room" > - + ) : ( diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx index 3a95049d7..b2ebc7aef 100644 --- a/src/app/features/lobby/SpaceItem.tsx +++ b/src/app/features/lobby/SpaceItem.tsx @@ -4,8 +4,6 @@ import { Avatar, Text, Chip, - Icon, - Icons, as, Badge, toRem, @@ -16,6 +14,9 @@ import { MenuItem, RectCords, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; import classNames from 'classnames'; import { MatrixError, Room, IHierarchyRoom } from '$types/matrix-sdk'; import { HierarchyItem } from '$hooks/useSpaceHierarchy'; @@ -34,6 +35,7 @@ import { useOpenCreateRoomModal } from '$state/hooks/createRoomModal'; import { useOpenCreateSpaceModal } from '$state/hooks/createSpaceModal'; import { stopPropagation } from '$utils/keyboard'; import FocusTrap from 'focus-trap-react'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './SpaceItem.css'; import * as styleCss from './style.css'; import { useDraggableItem } from './DnD'; @@ -138,7 +140,11 @@ export function UnjoinedSpaceProfile({ } after={ - canJoin ? : + canJoin ? ( + + ) : ( + + ) } > @@ -201,7 +207,7 @@ function SpaceProfile({ /> } - after={} + after={} > @@ -230,7 +236,7 @@ function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileP className={css.HeaderChip} variant="Surface" size="500" - after={} + after={} > @@ -307,7 +313,7 @@ function AddRoomButton({ item }: { item: HierarchyItem }) { } + before={} onClick={handleAddRoom} aria-pressed={!!cords} > @@ -376,7 +382,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) { } + before={} onClick={handleAddSpace} aria-pressed={!!cords} > diff --git a/src/app/features/lobby/SpaceNavItem.tsx b/src/app/features/lobby/SpaceNavItem.tsx index c07ce6cbc..7caad75cd 100644 --- a/src/app/features/lobby/SpaceNavItem.tsx +++ b/src/app/features/lobby/SpaceNavItem.tsx @@ -1,5 +1,6 @@ import { ReactNode, useRef } from 'react'; -import { Avatar, Badge, Box, Chip, Icon, Icons, as, Text } from 'folds'; +import { Avatar, Badge, Box, Chip, as, Text } from 'folds'; +import { SquaresFourIcon } from '@phosphor-icons/react/dist/csr/SquaresFour'; import classNames from 'classnames'; import { IHierarchyRoom, MatrixClient, Room } from '$types/matrix-sdk'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -12,6 +13,7 @@ import { RoomAvatar } from '$components/room-avatar'; import { nameInitials } from '$utils/common'; import { useNavigate } from 'react-router-dom'; import { getSpaceLobbyPath } from '$pages/pathUtils'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { InaccessibleSpaceProfile, UnjoinedSpaceProfile } from './SpaceItem'; import * as css from './SpaceNavItem.css'; import { useDraggableItem } from './DnD'; @@ -54,7 +56,7 @@ function SpaceNavProfile({ /> } - after={} + after={} > diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx index db9191725..66667c1ca 100644 --- a/src/app/features/message-search/MessageSearch.tsx +++ b/src/app/features/message-search/MessageSearch.tsx @@ -1,5 +1,8 @@ import { RefObject, useEffect, useMemo, useRef } from 'react'; -import { Text, Box, Icon, Icons, config, Spinner, IconButton, Line, toRem } from 'folds'; +import { Text, Box, config, Spinner, IconButton, Line, toRem } from 'folds'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { ChatCircleIcon } from '@phosphor-icons/react/dist/csr/ChatCircle'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; import { useAtomValue } from 'jotai'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useInfiniteQuery } from '@tanstack/react-query'; @@ -19,6 +22,7 @@ import { useRooms } from '$state/hooks/roomList'; import { allRoomsAtom } from '$state/room-list/roomList'; import { mDirectAtom } from '$state/mDirectList'; import { VirtualTile } from '$components/virtualizer'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { MessageSearchParams, useMessageSearch } from './useMessageSearch'; import { SearchResultGroup } from './SearchResultGroup'; import { SearchInput } from './SearchInput'; @@ -200,7 +204,7 @@ export function MessageSearch({ size="300" aria-label="Scroll to Top" > - + @@ -228,7 +232,7 @@ export function MessageSearch({ } + icon={} title="Search Messages" subTitle="Find helpful messages in your community by searching with related keywords." /> @@ -243,7 +247,7 @@ export function MessageSearch({ alignItems="Center" gap="200" > - + No results found for {`"${msgSearchParams.term}"`} diff --git a/src/app/features/message-search/SearchFilters.tsx b/src/app/features/message-search/SearchFilters.tsx index 4c1abd75d..5d14ba7b2 100644 --- a/src/app/features/message-search/SearchFilters.tsx +++ b/src/app/features/message-search/SearchFilters.tsx @@ -10,8 +10,6 @@ import { Box, Chip, Text, - Icon, - Icons, Line, config, PopOut, @@ -25,16 +23,21 @@ import { Badge, RectCords, } from 'folds'; +import { ArrowsDownUpIcon } from '@phosphor-icons/react/dist/csr/ArrowsDownUp'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; +import { PlusCircleIcon } from '@phosphor-icons/react/dist/csr/PlusCircle'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { SearchOrderBy } from '$types/matrix-sdk'; import FocusTrap from 'focus-trap-react'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useMatrixClient } from '$hooks/useMatrixClient'; -import { getRoomIconSrc } from '$utils/room'; import { factoryRoomIdByAtoZ } from '$utils/sort'; import { SearchItemStrGetter, UseAsyncSearchOptions, useAsyncSearch } from '$hooks/useAsyncSearch'; import { DebounceOptions, useDebounce } from '$hooks/useDebounce'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { VirtualTile } from '$components/virtualizer'; import { stopPropagation } from '$utils/keyboard'; +import { getRoomIcon } from '$utils/room'; type OrderButtonProps = { order?: string; @@ -98,7 +101,7 @@ function OrderButton({ order, onChange }: OrderButtonProps) { } + after={} onClick={handleOpenMenu} > {rankOrder ? Relevance : Recent} @@ -268,9 +271,9 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto radii="300" aria-pressed={selected} before={ - } > @@ -313,7 +316,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto onClick={handleOpenMenu} variant="SurfaceVariant" radii="Pill" - before={} + before={} > Select Rooms @@ -352,7 +355,7 @@ export function SearchFilters({ } + before={!global && } outlined onClick={() => onGlobalChange()} > @@ -362,7 +365,7 @@ export function SearchFilters({ } + before={global && } outlined onClick={() => onGlobalChange(true)} > @@ -386,9 +389,9 @@ export function SearchFilters({ onClick={() => onSelectedRoomsChange(selectedRooms.filter((rId) => rId !== roomId))} radii="Pill" before={ - + } - after={} + after={} > {room.name} diff --git a/src/app/features/message-search/SearchInput.tsx b/src/app/features/message-search/SearchInput.tsx index ad1ca593d..a4cdb0e8b 100644 --- a/src/app/features/message-search/SearchInput.tsx +++ b/src/app/features/message-search/SearchInput.tsx @@ -1,5 +1,9 @@ import { FormEventHandler, RefObject } from 'react'; -import { Box, Text, Input, Icon, Icons, Spinner, Chip, config } from 'folds'; +import { Box, Text, Input, Spinner, Chip, config } from 'folds'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; + +import { PhosphorIcon } from '$components/PhosphorIcon'; type SearchProps = { active?: boolean; @@ -38,7 +42,7 @@ export function SearchInput({ active, loading, searchInputRef, onSearch, onReset active && loading ? ( ) : ( - + ) } after={ @@ -50,7 +54,7 @@ export function SearchInput({ active, loading, searchInputRef, onSearch, onReset size="400" radii="Pill" outlined - after={} + after={} onClick={onReset} > Clear diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx index 7e4bcf533..7eb1c1781 100644 --- a/src/app/features/message-search/SearchResultGroup.tsx +++ b/src/app/features/message-search/SearchResultGroup.tsx @@ -2,7 +2,8 @@ import { MouseEventHandler, useMemo } from 'react'; import { IEventWithRoomId, JoinRule, RelationType, Room } from '$types/matrix-sdk'; import { HTMLReactParserOptions } from 'html-react-parser'; -import { Avatar, Box, Chip, Header, Icon, Icons, Text, config } from 'folds'; +import { Avatar, Box, Chip, Header, Text, config } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { Opts as LinkifyOpts } from 'linkifyjs'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { @@ -52,6 +53,7 @@ import { } from '$hooks/useMemberPowerTag'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomCreatorsTag } from '$hooks/useRoomCreatorsTag'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { ResultItem } from './useMessageSearch'; type SearchResultGroupProps = { @@ -218,7 +220,7 @@ export function SearchResultGroup({ size="50" roomType={room.getType()} joinRule={room.getJoinRule() ?? JoinRule.Restricted} - filled + weight="fill" /> )} /> @@ -285,7 +287,9 @@ export function SearchResultGroup({ : undefined } alt={displayName} - renderFallback={() => } + renderFallback={() => ( + + )} /> diff --git a/src/app/features/room-nav/RoomNavCategoryButton.tsx b/src/app/features/room-nav/RoomNavCategoryButton.tsx index 3df48aa7d..e78fab298 100644 --- a/src/app/features/room-nav/RoomNavCategoryButton.tsx +++ b/src/app/features/room-nav/RoomNavCategoryButton.tsx @@ -1,5 +1,8 @@ -import { as, Chip, Icon, Icons, Text } from 'folds'; +import { as, Chip, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight'; import classNames from 'classnames'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './styles.css'; export const RoomNavCategoryButton = as<'button', { closed?: boolean }>( @@ -9,10 +12,10 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>( variant="Background" radii="400" after={ - } {...props} diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx index f9d279062..921319d39 100644 --- a/src/app/features/room-nav/RoomNavItem.tsx +++ b/src/app/features/room-nav/RoomNavItem.tsx @@ -3,9 +3,7 @@ import { Room, RoomEvent as RoomEventEnum } from '$types/matrix-sdk'; import { Avatar, Box, - Icon, IconButton, - Icons, Text, Menu, MenuItem, @@ -19,6 +17,14 @@ import { Tooltip, TooltipProvider, } from 'folds'; +import { ChatCircleIcon } from '@phosphor-icons/react/dist/csr/ChatCircle'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; +import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear'; +import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link'; +import { PhoneIcon } from '@phosphor-icons/react/dist/csr/Phone'; +import { SignOutIcon } from '@phosphor-icons/react/dist/csr/SignOut'; +import { UserPlusIcon } from '@phosphor-icons/react/dist/csr/UserPlus'; import { useFocusWithin, useHover } from 'react-aria'; import FocusTrap from 'focus-trap-react'; import { useAtom, useAtomValue } from 'jotai'; @@ -68,6 +74,7 @@ import { useCallPreferencesAtom } from '$state/hooks/callPreferences'; import { CallControlState } from '$plugins/call/CallControlState'; import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo'; import { livekitSupport } from '$hooks/useLivekitSupport'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { RoomNavUser } from './RoomNavUser'; /** @@ -147,7 +154,7 @@ const RoomNavItemMenu = forwardRef( } + after={} radii="300" disabled={!unread} > @@ -163,7 +170,7 @@ const RoomNavItemMenu = forwardRef( changing ? ( ) : ( - + ) } radii="300" @@ -184,7 +191,7 @@ const RoomNavItemMenu = forwardRef( variant="Primary" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={invitePrompt} disabled={!canInvite} @@ -196,7 +203,7 @@ const RoomNavItemMenu = forwardRef( } + after={} radii="300" > @@ -206,7 +213,7 @@ const RoomNavItemMenu = forwardRef( } + after={} radii="300" > @@ -224,7 +231,7 @@ const RoomNavItemMenu = forwardRef( variant="Critical" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={promptLeave} > @@ -406,7 +413,7 @@ export function RoomNavItem({ ? config.opacity.P500 : config.opacity.P300, }} - filled={selected || isActiveCall} + weight={selected || isActiveCall ? 'fill' : 'regular'} size="100" joinRule={room.getJoinRule()} roomType={room.getType()} @@ -438,16 +445,16 @@ export function RoomNavItem({ )} {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && ( - )} {(room.isCallRoom() || direct) && callMembers.length > 0 && !optionsVisible && ( - + {direct ? 'Calling' : `${callMembers.length} Live`} @@ -481,7 +488,11 @@ export function RoomNavItem({ size="300" radii="300" > - + )} @@ -524,7 +535,7 @@ export function RoomNavItem({ size="300" radii="300" > - + diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx index 7d25d7bf9..556bbdb6f 100644 --- a/src/app/features/room-nav/RoomNavUser.tsx +++ b/src/app/features/room-nav/RoomNavUser.tsx @@ -1,4 +1,5 @@ -import { Avatar, Box, Icon, Icons, Text } from 'folds'; +import { Avatar, Box, Text } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { MouseEventHandler } from 'react'; import { useAtomValue } from 'jotai'; import { Room, CallMembership } from '$types/matrix-sdk'; @@ -12,6 +13,7 @@ import { useOpenUserRoomProfile } from '$state/hooks/userRoomProfile'; import { useSpaceOptionally } from '$hooks/useSpace'; import { nicknamesAtom } from '$state/nicknames'; import { useCallEmbed } from '$hooks/useCallEmbed'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type RoomNavUserProps = { room: Room; @@ -53,7 +55,7 @@ export function RoomNavUser({ room, callMembership }: RoomNavUserProps) { userId={userId} src={avatarUrl ?? undefined} alt={name} - renderFallback={() => } + renderFallback={() => } /> diff --git a/src/app/features/room-settings/RoomSettings.tsx b/src/app/features/room-settings/RoomSettings.tsx index 7c973d995..964bfed2d 100644 --- a/src/app/features/room-settings/RoomSettings.tsx +++ b/src/app/features/room-settings/RoomSettings.tsx @@ -1,6 +1,14 @@ import { useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; -import { Avatar, Box, config, Icon, IconButton, Icons, IconSrc, MenuItem, Text } from 'folds'; +import { Avatar, Box, config, IconButton, MenuItem, Text } from 'folds'; +import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear'; +import { LockIcon } from '@phosphor-icons/react/dist/csr/Lock'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { TerminalIcon } from '@phosphor-icons/react/dist/csr/Terminal'; +import { TextAaIcon } from '@phosphor-icons/react/dist/csr/TextAa'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; +import type { IconProps } from '@phosphor-icons/react'; import { JoinRule } from '$types/matrix-sdk'; import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '$components/page'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; @@ -17,14 +25,15 @@ import { Members } from '$features/common-settings/members'; import { EmojisStickers } from '$features/common-settings/emojis-stickers'; import { DeveloperTools } from '$features/common-settings/developer-tools'; import { Cosmetics } from '$features/common-settings/cosmetics/Cosmetics'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { Permissions } from './permissions'; import { General } from './general'; type RoomSettingsMenuItem = { page: RoomSettingsPage; name: string; - icon: IconSrc; - activeIcon?: IconSrc; + icon: React.ComponentType; + activeIcon?: React.ComponentType; }; const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] => @@ -33,33 +42,32 @@ const useRoomSettingsMenuItems = (): RoomSettingsMenuItem[] => { page: RoomSettingsPage.GeneralPage, name: 'General', - icon: Icons.Setting, + icon: GearIcon, }, { page: RoomSettingsPage.MembersPage, name: 'Members', - icon: Icons.User, + icon: UserIcon, }, { page: RoomSettingsPage.PermissionsPage, name: 'Permissions', - icon: Icons.Lock, + icon: LockIcon, }, { page: RoomSettingsPage.CosmeticsPage, name: 'Cosmetics', - icon: Icons.Alphabet, - activeIcon: Icons.AlphabetUnderline, + icon: TextAaIcon, }, { page: RoomSettingsPage.EmojisStickersPage, name: 'Emojis & Stickers', - icon: Icons.Smile, + icon: SmileyIcon, }, { page: RoomSettingsPage.DeveloperToolsPage, name: 'Developer Tools', - icon: Icons.Terminal, + icon: TerminalIcon, }, ], [] @@ -123,7 +131,7 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) { size="50" roomType={room.getType()} joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite} - filled + weight="fill" /> )} /> @@ -135,7 +143,7 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) { {screenSize === ScreenSize.Mobile && ( - + )} @@ -154,7 +162,11 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) { radii="400" aria-pressed={activePage === item.page} before={ - + } onClick={() => setActivePage(item.page)} > diff --git a/src/app/features/room-settings/general/General.tsx b/src/app/features/room-settings/general/General.tsx index c4546b601..0dfc0fcd2 100644 --- a/src/app/features/room-settings/general/General.tsx +++ b/src/app/features/room-settings/general/General.tsx @@ -1,4 +1,5 @@ -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { usePowerLevels } from '$hooks/usePowerLevels'; import { useRoom } from '$hooks/useRoom'; @@ -14,6 +15,7 @@ import { } from '$features/common-settings/general'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type GeneralProps = { requestClose: () => void; @@ -35,7 +37,7 @@ export function General({ requestClose }: GeneralProps) { - + diff --git a/src/app/features/room-settings/permissions/Permissions.tsx b/src/app/features/room-settings/permissions/Permissions.tsx index 7fd6f7be1..33d63ff2b 100644 --- a/src/app/features/room-settings/permissions/Permissions.tsx +++ b/src/app/features/room-settings/permissions/Permissions.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { useRoom } from '$hooks/useRoom'; import { usePowerLevels } from '$hooks/usePowerLevels'; @@ -8,6 +9,7 @@ import { StateEvent } from '$types/matrix/room'; import { PermissionGroups, Powers, PowersEditor } from '$features/common-settings/permissions'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { usePermissionGroups } from './usePermissionItems'; type PermissionsProps = { @@ -46,7 +48,7 @@ export function Permissions({ requestClose }: PermissionsProps) { - + diff --git a/src/app/features/room/CallChatView.tsx b/src/app/features/room/CallChatView.tsx index 3acc8c562..c79dc6f05 100644 --- a/src/app/features/room/CallChatView.tsx +++ b/src/app/features/room/CallChatView.tsx @@ -1,6 +1,8 @@ import { useSetAtom } from 'jotai'; import { useParams } from 'react-router-dom'; -import { Box, Text, TooltipProvider, Tooltip, Icon, Icons, IconButton, toRem } from 'folds'; +import { Box, Text, TooltipProvider, Tooltip, IconButton, toRem } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { Page, PageHeader } from '../../components/page'; import { callChatAtom } from '../../state/callEmbed'; import { RoomView } from './RoomView'; @@ -41,7 +43,7 @@ export function CallChatView() { > {(triggerRef) => ( - + )} diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx index 1834d283c..bc6568dcd 100644 --- a/src/app/features/room/MembersDrawer.tsx +++ b/src/app/features/room/MembersDrawer.tsx @@ -12,9 +12,7 @@ import { Box, Chip, Header, - Icon, IconButton, - Icons, Input, MenuItem, PopOut, @@ -27,6 +25,12 @@ import { config, toRem, } from 'folds'; +import { ArrowsDownUpIcon } from '@phosphor-icons/react/dist/csr/ArrowsDownUp'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { FunnelIcon } from '@phosphor-icons/react/dist/csr/Funnel'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixClient, Room, RoomMember } from '$types/matrix-sdk'; import { useVirtualizer } from '@tanstack/react-virtual'; import classNames from 'classnames'; @@ -60,6 +64,7 @@ import { ContainerColor } from '$styles/ContainerColor.css'; import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '$hooks/useMemberPowerTag'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useSableCosmetics } from '$hooks/useSableCosmetics'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './MembersDrawer.css'; type MemberDrawerHeaderProps = { @@ -93,7 +98,7 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) { variant="Background" onClick={() => setPeopleDrawer(false)} > - + )} @@ -166,7 +171,7 @@ function MemberItem({ userId={member.userId} src={avatarUrl ?? undefined} alt={name} - renderFallback={() => } + renderFallback={() => } /> @@ -322,7 +327,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) { variant="Background" size="400" radii="300" - before={} + before={} > {membershipFilter.name} @@ -354,7 +359,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) { variant="Background" size="400" radii="300" - after={} + after={} > {memberSort.name} @@ -371,7 +376,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) { variant="Surface" size="400" radii="400" - before={} + before={} after={ result && ( } + after={} > {`${result.items.length || 'No'} ${ result.items.length === 1 ? 'Result' : 'Results' @@ -407,7 +412,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) { size="300" aria-label="Scroll to Top" > - + diff --git a/src/app/features/room/RoomCallButton.tsx b/src/app/features/room/RoomCallButton.tsx index ad3c7916d..b26ba175f 100644 --- a/src/app/features/room/RoomCallButton.tsx +++ b/src/app/features/room/RoomCallButton.tsx @@ -1,10 +1,12 @@ -import { IconButton, Icon, Icons, TooltipProvider, Tooltip, Text } from 'folds'; +import { IconButton, TooltipProvider, Tooltip, Text } from 'folds'; +import { PhoneIcon } from '@phosphor-icons/react/dist/csr/Phone'; import { useAtomValue } from 'jotai'; import { Room } from '$types/matrix-sdk'; import { useCallStart, useCallJoined } from '$hooks/useCallEmbed'; import { callEmbedAtom } from '$state/callEmbed'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useCallPreferences } from '$state/hooks/callPreferences'; +import { PhosphorIcon } from '$components/PhosphorIcon'; interface RoomCallButtonProps { room: Room; @@ -61,7 +63,7 @@ export function RoomCallButton({ room }: RoomCallButtonProps) { onClick={handleStartCall} aria-label="Start Voice Call" > - + )} diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx index dde4bf81e..3d916beb1 100644 --- a/src/app/features/room/RoomInput.tsx +++ b/src/app/features/room/RoomInput.tsx @@ -27,9 +27,7 @@ import { color, config, Dialog, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -42,6 +40,20 @@ import { Text, toRem, } from 'folds'; +import { BellRingingIcon } from '@phosphor-icons/react/dist/csr/BellRinging'; +import { BellSlashIcon } from '@phosphor-icons/react/dist/csr/BellSlash'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { ClockIcon } from '@phosphor-icons/react/dist/csr/Clock'; +import { FileIcon } from '@phosphor-icons/react/dist/csr/File'; +import { MicrophoneIcon } from '@phosphor-icons/react/dist/csr/Microphone'; +import { PaperPlaneTiltIcon } from '@phosphor-icons/react/dist/csr/PaperPlaneTilt'; +import { PlusCircleIcon } from '@phosphor-icons/react/dist/csr/PlusCircle'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { StickerIcon } from '@phosphor-icons/react/dist/csr/Sticker'; +import { StopIcon } from '@phosphor-icons/react/dist/csr/Stop'; +import { TextAaIcon } from '@phosphor-icons/react/dist/csr/TextAa'; +import { TextAUnderlineIcon } from '@phosphor-icons/react/dist/csr/TextAUnderline'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { @@ -141,9 +153,9 @@ import { convertPerMessageProfileToBeeperFormat, getCurrentlyUsedPerMessageProfileForRoom, } from '$hooks/usePerMessageProfile'; -import { Microphone, Stop } from '@phosphor-icons/react'; import { getSupportedAudioExtension } from '$plugins/voice-recorder-kit/supportedCodec'; import { sanitizeCustomHtml } from '$utils/sanitize'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SchedulePickerDialog } from './schedule-send'; import * as css from './schedule-send/SchedulePickerDialog.css'; import { @@ -1105,7 +1117,7 @@ export const RoomInput = forwardRef( gap="500" style={{ padding: toRem(60) }} > - + {`Drop Files in "${room?.name || 'Room'}"`} @@ -1198,10 +1210,10 @@ export const RoomInput = forwardRef( radii="300" title="schedule message send" > - + - + Scheduled for {timeDayMonthYear(scheduledTime.getTime())} at{' '} {timeHourMinute(scheduledTime.getTime(), hour24Clock)} @@ -1236,7 +1248,7 @@ export const RoomInput = forwardRef( aria-label="Cancel reply" title="Cancel reply" > - + ( } onClick={() => setSilentReply(!silentReply)} > - {!silentReply && } - {silentReply && } + {!silentReply && } + {silentReply && } @@ -1288,7 +1300,7 @@ export const RoomInput = forwardRef( title="Upload File" aria-label="Upload and attach a File" > - + } after={ @@ -1339,9 +1351,13 @@ export const RoomInput = forwardRef( }} > {showAudioRecorder ? ( - + ) : ( - + )} @@ -1354,7 +1370,7 @@ export const RoomInput = forwardRef( aria-label={toolbar ? 'Hide Toolbar' : 'Show Toolbar'} onClick={() => setToolbar(!toolbar)} > - + {(emojiBoardTab: EmojiBoardTab | undefined, setEmojiBoardTab) => ( @@ -1399,9 +1415,9 @@ export const RoomInput = forwardRef( title="open sticker picker" aria-label="Open sticker picker" > - )} @@ -1417,10 +1433,12 @@ export const RoomInput = forwardRef( title="open emoji picker" aria-label="Open emoji picker" > - @@ -1450,7 +1468,7 @@ export const RoomInput = forwardRef( setScheduleMenuAnchor(undefined); submit(); }} - before={} + before={} > Send Now @@ -1461,7 +1479,7 @@ export const RoomInput = forwardRef( setScheduleMenuAnchor(undefined); setShowSchedulePicker(true); }} - before={} + before={} > Schedule Send @@ -1508,7 +1526,7 @@ export const RoomInput = forwardRef( radii="0" className={delayedEventsSupported ? css.SplitSendButton : undefined} > - + {delayedEventsSupported && !mobileOrTablet() && ( ( radii="0" className={css.SplitChevronButton} > - + )} diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index dd655deec..e4dfc9ddb 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -17,8 +17,6 @@ import { as, Box, Chip, - Icon, - Icons, Line, Text, Badge, @@ -28,6 +26,9 @@ import { ContainerColor, Spinner, } from 'folds'; +import { ArrowDownIcon } from '@phosphor-icons/react/dist/csr/ArrowDown'; +import { ChatCircleDotsIcon } from '@phosphor-icons/react/dist/csr/ChatCircleDots'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; import { MessageBase, CompactPlaceholder, DefaultPlaceholder } from '$components/message'; import { RoomIntro } from '$components/room-intro'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -73,6 +74,7 @@ import { useTimelineSync } from '$hooks/timeline/useTimelineSync'; import { useTimelineActions } from '$hooks/timeline/useTimelineActions'; import { ProcessedEvent, useProcessedTimeline } from '$hooks/timeline/useProcessedTimeline'; import { useTimelineEventRenderer } from '$hooks/timeline/useTimelineEventRenderer'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './RoomTimeline.css'; const TimelineFloat = as<'div', css.TimelineFloatVariants>( @@ -739,7 +741,7 @@ export function RoomTimeline({ variant="Primary" radii="Pill" outlined - before={} + before={} onClick={() => timelineSync.loadEventTimeline(unreadInfo.readUptoEventId)} > Jump to Unread @@ -748,7 +750,7 @@ export function RoomTimeline({ variant="SurfaceVariant" radii="Pill" outlined - before={} + before={} onClick={() => markAsRead(mx, room.roomId, hideReads)} > Mark as Read @@ -883,7 +885,7 @@ export function RoomTimeline({ variant="SurfaceVariant" radii="Pill" outlined - before={} + before={} onClick={() => { if (eventId) navigateRoom(room.roomId, undefined, { replace: true }); timelineSync.setTimeline(getInitialTimeline(room)); diff --git a/src/app/features/room/RoomViewFollowing.tsx b/src/app/features/room/RoomViewFollowing.tsx index 6d9a60c68..fb7a1a099 100644 --- a/src/app/features/room/RoomViewFollowing.tsx +++ b/src/app/features/room/RoomViewFollowing.tsx @@ -1,16 +1,6 @@ import { useState } from 'react'; -import { - Box, - Icon, - Icons, - Modal, - Overlay, - OverlayBackdrop, - OverlayCenter, - Text, - as, - config, -} from 'folds'; +import { Box, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, as, config } from 'folds'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; import { Room } from '$types/matrix-sdk'; import classNames from 'classnames'; import FocusTrap from 'focus-trap-react'; @@ -24,6 +14,7 @@ import { useRoomEventReaders } from '$hooks/useRoomEventReaders'; import { EventReaders } from '$components/event-readers'; import { stopPropagation } from '$utils/keyboard'; import { nicknamesAtom } from '$state/nicknames'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './RoomViewFollowing.css'; export function RoomViewFollowingPlaceholder() { @@ -85,7 +76,7 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>( > {names.length > 0 && ( <> - + {names.length === 1 && ( <> diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx index 8552332cf..199fdb8a0 100644 --- a/src/app/features/room/RoomViewHeader.tsx +++ b/src/app/features/room/RoomViewHeader.tsx @@ -9,8 +9,6 @@ import { OverlayCenter, OverlayBackdrop, IconButton, - Icon, - Icons, Tooltip, TooltipProvider, Menu, @@ -88,6 +86,21 @@ import { callChatAtom } from '$state/callEmbed'; import { RoomSettingsPage } from '$state/roomSettings'; import { roomIdToThreadBrowserAtomFamily } from '$state/room/roomToThreadBrowser'; import { roomIdToOpenThreadAtomFamily } from '$state/room/roomToOpenThread'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { ChatCircleIcon } from '@phosphor-icons/react/dist/csr/ChatCircle'; +import { ChatTeardropTextIcon } from '@phosphor-icons/react/dist/csr/ChatTeardropText'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; +import { ClockCounterClockwiseIcon } from '@phosphor-icons/react/dist/csr/ClockCounterClockwise'; +import { DotsThreeOutlineVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeOutlineVertical'; +import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear'; +import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { PushPinIcon } from '@phosphor-icons/react/dist/csr/PushPin'; +import { SignOutIcon } from '@phosphor-icons/react/dist/csr/SignOut'; +import { SquaresFourIcon } from '@phosphor-icons/react/dist/csr/SquaresFour'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { UserPlusIcon } from '@phosphor-icons/react/dist/csr/UserPlus'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { JumpToTime } from './jump-to-time'; import { RoomPinMenu } from './room-pin-menu'; import * as css from './RoomViewHeader.css'; @@ -212,7 +225,7 @@ const RoomMenu = forwardRef(({ room, requestClose } + after={} radii="300" disabled={!unread} > @@ -228,7 +241,7 @@ const RoomMenu = forwardRef(({ room, requestClose changing ? ( ) : ( - + ) } radii="300" @@ -249,7 +262,7 @@ const RoomMenu = forwardRef(({ room, requestClose variant="Primary" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={invitePrompt} disabled={!canInvite} @@ -261,7 +274,7 @@ const RoomMenu = forwardRef(({ room, requestClose } + after={} radii="300" > @@ -271,7 +284,7 @@ const RoomMenu = forwardRef(({ room, requestClose } + after={} radii="300" > @@ -284,7 +297,7 @@ const RoomMenu = forwardRef(({ room, requestClose setPromptJump(true)} size="300" - after={} + after={} radii="300" aria-pressed={promptJump} > @@ -316,7 +329,7 @@ const RoomMenu = forwardRef(({ room, requestClose variant="Critical" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={promptLeave} > @@ -589,7 +602,7 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { {(onBack) => ( - + )} @@ -667,7 +680,7 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { > {(triggerRef) => ( - + )} @@ -706,7 +719,11 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { )} - + )} @@ -777,7 +794,11 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { )} - + )} @@ -818,7 +839,11 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { )} - + )} @@ -839,7 +864,11 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { > {(triggerRef) => ( - + )} @@ -863,7 +892,7 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { setChat(!chat); }} > - + )} @@ -886,7 +915,11 @@ export function RoomViewHeader({ callView }: Readonly<{ callView?: boolean }>) { ref={triggerRef} aria-pressed={!!menuAnchor} > - + )} diff --git a/src/app/features/room/RoomViewTyping.tsx b/src/app/features/room/RoomViewTyping.tsx index e75c4a13d..985fc36dc 100644 --- a/src/app/features/room/RoomViewTyping.tsx +++ b/src/app/features/room/RoomViewTyping.tsx @@ -1,4 +1,5 @@ -import { Box, Icon, IconButton, Icons, Text, as } from 'folds'; +import { Box, IconButton, Text, as } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Room } from '$types/matrix-sdk'; import classNames from 'classnames'; import { useSetAtom, useAtomValue } from 'jotai'; @@ -9,6 +10,7 @@ import { getMxIdLocalPart } from '$utils/matrix'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useRoomTypingMember } from '$hooks/useRoomTypingMembers'; import { nicknamesAtom } from '$state/nicknames'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './RoomViewTyping.css'; export type RoomViewTypingProps = { @@ -115,7 +117,7 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>( )} - +
diff --git a/src/app/features/room/ThreadBrowser.tsx b/src/app/features/room/ThreadBrowser.tsx index 7c1e830f0..84b98cea1 100644 --- a/src/app/features/room/ThreadBrowser.tsx +++ b/src/app/features/room/ThreadBrowser.tsx @@ -7,19 +7,11 @@ import { useRef, useState, } from 'react'; -import { - Box, - Header, - Icon, - IconButton, - Icons, - Input, - Scroll, - Text, - Avatar, - config, - Chip, -} from 'folds'; +import { Box, Header, IconButton, Input, Scroll, Text, Avatar, config, Chip } from 'folds'; +import { ChatTeardropTextIcon } from '@phosphor-icons/react/dist/csr/ChatTeardropText'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixEvent, Room, Thread, ThreadEvent } from '$types/matrix-sdk'; import { useAtomValue } from 'jotai'; import { HTMLReactParserOptions } from 'html-react-parser'; @@ -53,6 +45,7 @@ import { makeMentionCustomProps, renderMatrixMention, } from '$plugins/react-custom-html-parser'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { EncryptedContent } from './message'; import * as css from './ThreadDrawer.css'; @@ -155,7 +148,7 @@ function ThreadPreview({ room, thread, onClick }: ThreadPreviewProps) { : undefined } alt={displayName} - renderFallback={() => } + renderFallback={() => } /> @@ -296,7 +289,7 @@ export function ThreadBrowser({ room, onOpenThread, onClose, overlay }: ThreadBr >
- + Threads @@ -312,7 +305,7 @@ export function ThreadBrowser({ room, onOpenThread, onClose, overlay }: ThreadBr radii="300" aria-label="Close threads" > - +
@@ -331,7 +324,7 @@ export function ThreadBrowser({ room, onOpenThread, onClose, overlay }: ThreadBr variant="Surface" size="400" radii="400" - before={} + before={} after={ query ? ( - + ) : undefined } @@ -366,7 +359,7 @@ export function ThreadBrowser({ room, onOpenThread, onClose, overlay }: ThreadBr justifyContent="Center" style={{ padding: config.space.S400, gap: config.space.S200 }} > - + {lowerQuery ? 'No threads match your search.' : 'No threads yet.'} diff --git a/src/app/features/room/ThreadDrawer.tsx b/src/app/features/room/ThreadDrawer.tsx index 163d40ff0..170eb5415 100644 --- a/src/app/features/room/ThreadDrawer.tsx +++ b/src/app/features/room/ThreadDrawer.tsx @@ -1,5 +1,7 @@ import { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { Box, Header, Icon, IconButton, Icons, Scroll, Text, config } from 'folds'; +import { Box, Header, IconButton, Scroll, Text, config } from 'folds'; +import { ChatsIcon } from '@phosphor-icons/react/dist/csr/Chats'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixEvent, PushProcessor, @@ -49,6 +51,7 @@ import { useImagePackRooms } from '$hooks/useImagePackRooms'; import { useOpenUserRoomProfile } from '$state/hooks/userRoomProfile'; import { IReplyDraft, roomIdToReplyDraftAtomFamily } from '$state/room/roomInputDrafts'; import { roomToParentsAtom } from '$state/room/roomToParents'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { EncryptedContent, Message, Reactions } from './message'; import { RoomInput } from './RoomInput'; import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing'; @@ -746,7 +749,7 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra {/* Header */}
- + Thread @@ -762,7 +765,7 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra radii="300" aria-label="Close thread" > - +
@@ -809,7 +812,7 @@ export function ThreadDrawer({ room, threadRootId, onClose, overlay }: ThreadDra justifyContent="Center" style={{ padding: config.space.S400, gap: config.space.S200 }} > - + No replies yet. Start the thread below! diff --git a/src/app/features/room/jump-to-time/JumpToTime.tsx b/src/app/features/room/jump-to-time/JumpToTime.tsx index 9ebd5a7ac..3e7ddcbcf 100644 --- a/src/app/features/room/jump-to-time/JumpToTime.tsx +++ b/src/app/features/room/jump-to-time/JumpToTime.tsx @@ -10,8 +10,6 @@ import { Box, Text, IconButton, - Icon, - Icons, color, Button, Spinner, @@ -19,6 +17,8 @@ import { PopOut, RectCords, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Direction, MatrixError } from '$types/matrix-sdk'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; @@ -31,6 +31,7 @@ import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '$utils import { DatePicker, TimePicker } from '$components/time-date'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type JumpToTimeProps = { onCancel: () => void; @@ -109,7 +110,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) { Jump to Time - + @@ -126,7 +127,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) { outlined radii="300" aria-pressed={!!timePickerCords} - after={} + after={} onClick={handleTimePicker} > {timeHourMinute(ts, hour24Clock)} @@ -167,7 +168,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) { outlined radii="300" aria-pressed={!!datePickerCords} - after={} + after={} onClick={handleDatePicker} > {timeDayMonthYear(ts)} diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index 55597a7c7..60ef68a53 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -1,10 +1,20 @@ +import { + MouseEventHandler, + MouseEvent, + PointerEvent, + ReactNode, + memo, + useCallback, + useRef, + useState, + useEffect, + useMemo, +} from 'react'; import { Avatar, Box, Chip, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -14,18 +24,15 @@ import { as, config, } from 'folds'; -import { - MouseEventHandler, - MouseEvent, - PointerEvent, - ReactNode, - memo, - useCallback, - useRef, - useState, - useEffect, - useMemo, -} from 'react'; +import { ArrowBendUpLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowBendUpLeft'; +import { ChatTeardropTextIcon } from '@phosphor-icons/react/dist/csr/ChatTeardropText'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; +import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link'; +import { PencilSimpleIcon } from '@phosphor-icons/react/dist/csr/PencilSimple'; +import { PushPinIcon } from '@phosphor-icons/react/dist/csr/PushPin'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { StarIcon } from '@phosphor-icons/react/dist/csr/Star'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import FocusTrap from 'focus-trap-react'; import { useHover, useFocusWithin } from 'react-aria'; import { @@ -89,6 +96,7 @@ import { convertBeeperFormatToOurPerMessageProfile, PerMessageProfileBeeperFormat, } from '$hooks/usePerMessageProfile'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { MessageEditor } from './MessageEditor'; import * as css from './styles.css'; @@ -153,7 +161,7 @@ export const MessageCopyLinkItem = as< return ( } + after={} radii="300" onClick={handleCopy} {...props} @@ -194,7 +202,7 @@ export const MessagePinItem = as< return ( } + after={} radii="300" onClick={handlePin} {...props} @@ -600,7 +608,7 @@ function MessageInternal( userId={senderId} src={cachedAvatar} alt={cleanedDisplayName} - renderFallback={() => } + renderFallback={() => } /> @@ -869,7 +877,7 @@ function MessageInternal( radii="300" aria-pressed={!!emojiBoardAnchor} > - + )} @@ -883,7 +891,7 @@ function MessageInternal( size="300" radii="300" > - + {!isThreadedMessage && ( - + )} {canEditEvent(mx, mEvent) && onEditId && ( @@ -912,7 +920,7 @@ function MessageInternal( size="300" radii="300" > - + )} } + after={} radii="300" onClick={handleAddReactions} > @@ -964,7 +972,7 @@ function MessageInternal( !doesStickerExistInDefaultPack(mx, mEvent.getContent().url) && ( } + after={} radii="300" onClick={() => { addStickerToDefaultPack( @@ -990,7 +998,7 @@ function MessageInternal( {relations && } } + after={} radii="300" data-event-id={mEvent.getId()} onClick={(evt: any) => { @@ -1005,7 +1013,7 @@ function MessageInternal( {!isThreadedMessage && ( } + after={} radii="300" data-event-id={mEvent.getId()} onClick={(evt: any) => { @@ -1026,7 +1034,7 @@ function MessageInternal( {canEditEvent(mx, mEvent) && onEditId && ( } + after={} radii="300" data-event-id={mEvent.getId()} onClick={() => { @@ -1126,7 +1134,7 @@ function MessageInternal( ) : ( } + after={} radii="300" onClick={() => { setNickDraft(nicknames[senderId] ?? ''); @@ -1169,7 +1177,7 @@ function MessageInternal( onClick={handleOpenMenu} aria-pressed={!!menuAnchor} > - + @@ -1360,7 +1368,7 @@ export const Event = as<'div', EventProps>( } + after={} radii="300" data-event-id={mEvent.getId()} onClick={(evt: any) => { @@ -1418,7 +1426,7 @@ export const Event = as<'div', EventProps>( size="300" radii="300" > - + ( onClick={handleOpenMenu} aria-pressed={!!menuAnchor} > - + )} diff --git a/src/app/features/room/message/MessageEditor.tsx b/src/app/features/room/message/MessageEditor.tsx index 22c63ce26..0406fe324 100644 --- a/src/app/features/room/message/MessageEditor.tsx +++ b/src/app/features/room/message/MessageEditor.tsx @@ -6,20 +6,9 @@ import { useMemo, useState, } from 'react'; -import { - Box, - Chip, - Icon, - IconButton, - Icons, - Line, - PopOut, - RectCords, - Spinner, - Text, - as, - config, -} from 'folds'; +import { Box, Chip, IconButton, Line, PopOut, RectCords, Spinner, Text, as, config } from 'folds'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { TextAaIcon } from '@phosphor-icons/react/dist/csr/TextAa'; import { Editor, Transforms } from 'slate'; import { ReactEditor } from 'slate-react'; import { @@ -73,6 +62,7 @@ import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { Opts as LinkifyOpts } from 'linkifyjs'; import { GetContentCallback } from '$types/matrix/room'; import { sanitizeCustomHtml } from '$utils/sanitize'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type MessageEditorProps = { roomId: string; @@ -478,7 +468,11 @@ export const MessageEditor = as<'div', MessageEditorProps>( radii="300" onClick={() => setToolbar(!toolbar)} > - + {(anchor: RectCords | undefined, setAnchor) => ( @@ -517,7 +511,11 @@ export const MessageEditor = as<'div', MessageEditorProps>( size="300" radii="300" > - + )} diff --git a/src/app/features/room/reaction-viewer/ReactionViewer.tsx b/src/app/features/room/reaction-viewer/ReactionViewer.tsx index 9065cfb64..e69db7773 100644 --- a/src/app/features/room/reaction-viewer/ReactionViewer.tsx +++ b/src/app/features/room/reaction-viewer/ReactionViewer.tsx @@ -1,19 +1,8 @@ import { useCallback, useState } from 'react'; import classNames from 'classnames'; -import { - Avatar, - Box, - Header, - Icon, - IconButton, - Icons, - Line, - MenuItem, - Scroll, - Text, - as, - config, -} from 'folds'; +import { Avatar, Box, Header, IconButton, Line, MenuItem, Scroll, Text, as, config } from 'folds'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixEvent, Room, RoomMember, Relations } from '$types/matrix-sdk'; import { getMemberDisplayName } from '$utils/room'; import { eventWithShortcode, getMxIdLocalPart } from '$utils/matrix'; @@ -28,6 +17,7 @@ import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { useOpenUserRoomProfile } from '$state/hooks/userRoomProfile'; import { useSpaceOptionally } from '$hooks/useSpace'; import { getMouseEventCords } from '$utils/dom'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './ReactionViewer.css'; export type ReactionViewerProps = { @@ -102,7 +92,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>( {`Reacted with :${selectedShortcode}:`} - + @@ -148,7 +138,9 @@ export const ReactionViewer = as<'div', ReactionViewerProps>( userId={senderId} src={avatarUrl ?? undefined} alt={name} - renderFallback={() => } + renderFallback={() => ( + + )} /> } diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx index 9762f216a..fa6e980c9 100644 --- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx +++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx @@ -8,15 +8,16 @@ import { color, config, Header, - Icon, IconButton, - Icons, Menu, Scroll, Spinner, Text, toRem, } from 'folds'; +import { PushPinIcon } from '@phosphor-icons/react/dist/csr/PushPin'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Opts as LinkifyOpts } from 'linkifyjs'; import { HTMLReactParserOptions } from 'html-react-parser'; import { useAtomValue } from 'jotai'; @@ -88,6 +89,7 @@ import { AccountDataEvent } from '$types/matrix/accountData'; import { useSableCosmetics } from '$hooks/useSableCosmetics'; import { EncryptedContent } from '$features/room/message'; import type { PinReadMarker } from '$features/room/RoomViewHeader'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './RoomPinMenu.css'; const log = createLogger('RoomPinMenu'); @@ -155,7 +157,7 @@ function PinnedMessageActiveContent( : undefined } alt={displayName} - renderFallback={() => } + renderFallback={() => } /> @@ -244,7 +246,7 @@ function PinnedMessage(props: PinnedMessageProps) { {unpinState.status === AsyncStatus.Loading ? ( ) : ( - + )} )} @@ -528,7 +530,7 @@ export const RoomPinMenu = forwardRef( - + @@ -606,7 +608,7 @@ export const RoomPinMenu = forwardRef( justifyContent="Center" alignItems="Center" > - + - + @@ -122,7 +123,7 @@ export function SchedulePickerDialog({ outlined radii="300" aria-pressed={!!timePickerCords} - after={} + after={} onClick={handleTimePicker} > {timeHourMinute(ts, hour24Clock)} @@ -163,7 +164,7 @@ export function SchedulePickerDialog({ outlined radii="300" aria-pressed={!!datePickerCords} - after={} + after={} onClick={handleDatePicker} > {timeDayMonthYear(ts)} diff --git a/src/app/features/room/schedule-send/ScheduledMessagesList.tsx b/src/app/features/room/schedule-send/ScheduledMessagesList.tsx index 39f751c9c..4b3e6b8b0 100644 --- a/src/app/features/room/schedule-send/ScheduledMessagesList.tsx +++ b/src/app/features/room/schedule-send/ScheduledMessagesList.tsx @@ -1,6 +1,12 @@ import { useCallback, useState } from 'react'; import { useQuery, useQueryClient } from '@tanstack/react-query'; -import { Box, Text, Chip, Icon, Icons, IconButton } from 'folds'; +import { Box, Text, Chip, IconButton } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { ClockIcon } from '@phosphor-icons/react/dist/csr/Clock'; +import { LockIcon } from '@phosphor-icons/react/dist/csr/Lock'; +import { PencilIcon } from '@phosphor-icons/react/dist/csr/Pencil'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Room } from '$types/matrix-sdk'; import { useAtom, useAtomValue, useSetAtom } from 'jotai'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -13,6 +19,7 @@ import { import { timeHourMinute, timeDayMonthYear } from '$utils/time'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SchedulePickerDialog } from './SchedulePickerDialog'; import * as css from './ScheduledMessagesList.css'; @@ -90,8 +97,8 @@ export function ScheduledMessagesList({ room, onEditMessage }: ScheduledMessages } - after={} + before={} + after={} onClick={() => setExpanded(!expanded)} > @@ -123,7 +130,7 @@ export function ScheduledMessagesList({ room, onEditMessage }: ScheduledMessages {isEncryptedEvt ? ( - + Encrypted — cancel and resend to edit @@ -146,7 +153,7 @@ export function ScheduledMessagesList({ room, onEditMessage }: ScheduledMessages onClick={() => handleEdit(evt.delay_id, body, formattedBody, deliveryTs)} aria-label="Edit scheduled message" > - + )} handleCancel(evt.delay_id)} aria-label="Cancel scheduled message" > - + diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx index 65c79ba83..805f27cd8 100644 --- a/src/app/features/search/Search.tsx +++ b/src/app/features/search/Search.tsx @@ -3,8 +3,6 @@ import { Avatar, Box, config, - Icon, - Icons, Input, Line, MenuItem, @@ -15,6 +13,7 @@ import { Text, toRem, } from 'folds'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; import { ChangeEventHandler, KeyboardEventHandler, @@ -55,6 +54,7 @@ import { useKeyDown } from '$hooks/useKeyDown'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { KeySymbol } from '$utils/key-symbol'; import { isMacOS } from '$utils/user-agent'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { useSelectedSpace } from '$hooks/router/useSelectedSpace'; enum SearchRoomType { @@ -279,7 +279,7 @@ export function Search({ requestClose }: SearchProps) { radii="400" outlined placeholder="Search" - before={} + before={} onChange={handleInputChange} onKeyDown={handleInputKeyDown} /> diff --git a/src/app/features/settings/Persona/PerMessageProfileEditor.tsx b/src/app/features/settings/Persona/PerMessageProfileEditor.tsx index 00a0ff9fe..955ea4267 100644 --- a/src/app/features/settings/Persona/PerMessageProfileEditor.tsx +++ b/src/app/features/settings/Persona/PerMessageProfileEditor.tsx @@ -1,5 +1,6 @@ import { SequenceCard } from '$components/sequence-card'; -import { Box, Button, Text, Avatar, config, Icon, IconButton, Icons, Input } from 'folds'; +import { Box, Button, Text, Avatar, config, IconButton, Input } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { MatrixClient } from 'matrix-js-sdk'; import { useCallback, useMemo, useState } from 'react'; import { mxcUrlToHttp } from '$utils/matrix'; @@ -15,6 +16,7 @@ import { renamePerMessageProfile, } from '$hooks/usePerMessageProfile'; import { parsePronounsStringToPronounsSetArray, PronounSet } from '$utils/pronouns'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SequenceCardStyle } from '../styles.css'; /** @@ -359,7 +361,7 @@ export function PerMessageProfileEditor({ aria-label="Reset display name" title="Reset display name" > - + ) } @@ -406,7 +408,7 @@ export function PerMessageProfileEditor({ aria-label="Reset pronouns" title="Reset pronouns" > - + ) } diff --git a/src/app/features/settings/Persona/ProfilesPage.tsx b/src/app/features/settings/Persona/ProfilesPage.tsx index 2fe56f51c..56be19916 100644 --- a/src/app/features/settings/Persona/ProfilesPage.tsx +++ b/src/app/features/settings/Persona/ProfilesPage.tsx @@ -1,5 +1,7 @@ import { Page, PageHeader, PageNavContent } from '$components/page'; -import { Box, IconButton, Icon, Icons, Text } from 'folds'; +import { Box, IconButton, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { PerMessageProfileOverview } from './PerMessageProfileOverview'; type PerMessageProfilePageProps = { @@ -18,7 +20,7 @@ export function PerMessageProfilePage({ requestClose }: PerMessageProfilePagePro - + diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx index 2dd1e4ae4..ed9dfdf0c 100644 --- a/src/app/features/settings/Settings.tsx +++ b/src/app/features/settings/Settings.tsx @@ -1,13 +1,10 @@ -import { useMemo, useState } from 'react'; +import { useMemo, useState, ComponentType } from 'react'; import { Avatar, Box, Button, config, - Icon, IconButton, - Icons, - IconSrc, MenuItem, Overlay, OverlayBackdrop, @@ -15,6 +12,20 @@ import { Text, } from 'folds'; import FocusTrap from 'focus-trap-react'; +import type { IconProps } from '@phosphor-icons/react'; +import { BellIcon } from '@phosphor-icons/react/dist/csr/Bell'; +import { CodeIcon } from '@phosphor-icons/react/dist/csr/Code'; +import { FunnelIcon } from '@phosphor-icons/react/dist/csr/Funnel'; +import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; +import { MonitorIcon } from '@phosphor-icons/react/dist/csr/Monitor'; +import { PowerIcon } from '@phosphor-icons/react/dist/csr/Power'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { TerminalIcon } from '@phosphor-icons/react/dist/csr/Terminal'; +import { TextAaIcon } from '@phosphor-icons/react/dist/csr/TextAa'; +import { TextBIcon } from '@phosphor-icons/react/dist/csr/TextB'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '$components/page'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { useUserProfile } from '$hooks/useUserProfile'; @@ -28,6 +39,7 @@ import { stopPropagation } from '$utils/keyboard'; import { LogoutDialog } from '$components/LogoutDialog'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { Notifications } from './notifications'; import { Devices } from './devices'; import { EmojisStickers } from './emojis-stickers'; @@ -57,8 +69,8 @@ export enum SettingsPages { type SettingsMenuItem = { page: SettingsPages; name: string; - icon: IconSrc; - activeIcon?: IconSrc; + icon: ComponentType; + activeIcon?: ComponentType; }; const useSettingsMenuItems = (showPersona: boolean): SettingsMenuItem[] => @@ -67,53 +79,53 @@ const useSettingsMenuItems = (showPersona: boolean): SettingsMenuItem[] => { page: SettingsPages.GeneralPage, name: 'General', - icon: Icons.Setting, + icon: GearIcon, }, { page: SettingsPages.AccountPage, name: 'Account', - icon: Icons.User, + icon: UserIcon, }, { page: SettingsPages.CosmeticsPage, name: 'Appearance', - icon: Icons.Alphabet, - activeIcon: Icons.AlphabetUnderline, + icon: TextAaIcon, + activeIcon: TextBIcon, }, { page: SettingsPages.NotificationPage, name: 'Notifications', - icon: Icons.Bell, + icon: BellIcon, }, { page: SettingsPages.DevicesPage, name: 'Devices', - icon: Icons.Monitor, + icon: MonitorIcon, }, { page: SettingsPages.EmojisStickersPage, name: 'Emojis & Stickers', - icon: Icons.Smile, + icon: SmileyIcon, }, { page: SettingsPages.DeveloperToolsPage, name: 'Developer Tools', - icon: Icons.Terminal, + icon: TerminalIcon, }, { page: SettingsPages.ExperimentalPage, name: 'Experimental', - icon: Icons.Funnel, + icon: FunnelIcon, }, { page: SettingsPages.AboutPage, name: 'About', - icon: Icons.Info, + icon: InfoIcon, }, { page: SettingsPages.KeyboardShortcutsPage, name: 'Keyboard Shortcuts', - icon: Icons.BlockCode, + icon: CodeIcon, }, ]; @@ -121,7 +133,7 @@ const useSettingsMenuItems = (showPersona: boolean): SettingsMenuItem[] => items.splice(2, 0, { page: SettingsPages.PerMessageProfilesPage, name: 'Persona', - icon: Icons.User, + icon: UserIcon, }); } @@ -184,7 +196,7 @@ export function Settings({ initialPage, requestClose }: SettingsProps) { {screenSize === ScreenSize.Mobile && ( - + )} @@ -203,7 +215,11 @@ export function Settings({ initialPage, requestClose }: SettingsProps) { radii="400" aria-pressed={activePage === item.page} before={ - + } onClick={() => setActivePage(item.page)} > @@ -231,7 +247,7 @@ export function Settings({ initialPage, requestClose }: SettingsProps) { variant="Critical" fill="None" radii="Pill" - before={} + before={} onClick={() => setLogout(true)} > Logout diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx index 44f42c8f6..8f75644c7 100644 --- a/src/app/features/settings/about/About.tsx +++ b/src/app/features/settings/about/About.tsx @@ -1,5 +1,8 @@ import { useState } from 'react'; -import { Box, Text, IconButton, Icon, Icons, Scroll, Button, config, toRem, Spinner } from 'folds'; +import { Box, Text, IconButton, Scroll, Button, config, toRem, Spinner } from 'folds'; +import { CodeIcon } from '@phosphor-icons/react/dist/csr/Code'; +import { HeartIcon } from '@phosphor-icons/react/dist/csr/Heart'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -9,6 +12,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { SequenceCardStyle } from '$features/settings/styles.css'; import { Method } from '$types/matrix-sdk'; import { useOpenBugReportModal } from '$state/hooks/bugReportModal'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function HomeserverInfo() { const mx = useMatrixClient(); @@ -161,7 +165,7 @@ export function About({ requestClose }: Readonly) { - + @@ -197,7 +201,7 @@ export function About({ requestClose }: Readonly) { fill="Soft" size="300" radii="300" - before={} + before={} > Source Code @@ -210,7 +214,7 @@ export function About({ requestClose }: Readonly) { fill="Soft" size="300" radii="300" - before={} + before={} > Support diff --git a/src/app/features/settings/account/Account.tsx b/src/app/features/settings/account/Account.tsx index c6c3aa8f7..34e9fba3c 100644 --- a/src/app/features/settings/account/Account.tsx +++ b/src/app/features/settings/account/Account.tsx @@ -1,5 +1,7 @@ -import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds'; +import { Box, Text, IconButton, Scroll } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { MatrixId } from './MatrixId'; import { Profile } from './Profile'; import { ContactInformation } from './ContactInfo'; @@ -20,7 +22,7 @@ export function Account({ requestClose }: AccountProps) { - + diff --git a/src/app/features/settings/account/BioEditor.tsx b/src/app/features/settings/account/BioEditor.tsx index 49b47d7b9..5e0fa64c8 100644 --- a/src/app/features/settings/account/BioEditor.tsx +++ b/src/app/features/settings/account/BioEditor.tsx @@ -1,17 +1,8 @@ import { KeyboardEventHandler, useCallback, useEffect, useState, useRef } from 'react'; -import { - Box, - Chip, - Icon, - IconButton, - Icons, - Line, - PopOut, - RectCords, - Spinner, - Text, - config, -} from 'folds'; +import { Box, Chip, IconButton, Line, PopOut, RectCords, Spinner, Text, config } from 'folds'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { TextAaIcon } from '@phosphor-icons/react/dist/csr/TextAa'; +import { TextUnderlineIcon } from '@phosphor-icons/react/dist/csr/TextUnderline'; import { Editor, Transforms } from 'slate'; import { ReactEditor } from 'slate-react'; import { isKeyHotkey } from 'is-hotkey'; @@ -38,6 +29,7 @@ import { UseStateProvider } from '$components/UseStateProvider'; import { EmojiBoard } from '$components/emoji-board'; import { mobileOrTablet } from '$utils/user-agent'; import { SettingTile } from '$components/setting-tile'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './BioEditor.css'; type BioEditorProps = { @@ -226,7 +218,7 @@ export function BioEditor({ value, isSaving, imagePackRooms, onSave }: BioEditor radii="300" onClick={() => setToolbar(!toolbar)} > - + {(anchor: RectCords | undefined, setAnchor) => ( @@ -260,7 +252,11 @@ export function BioEditor({ value, isSaving, imagePackRooms, onSave }: BioEditor radii="300" onClick={(evt) => setAnchor(evt.currentTarget.getBoundingClientRect())} > - + )} diff --git a/src/app/features/settings/account/IgnoredUserList.tsx b/src/app/features/settings/account/IgnoredUserList.tsx index 0b3b3470f..6339d107d 100644 --- a/src/app/features/settings/account/IgnoredUserList.tsx +++ b/src/app/features/settings/account/IgnoredUserList.tsx @@ -1,5 +1,6 @@ import { ChangeEventHandler, FormEventHandler, useCallback, useState } from 'react'; -import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds'; +import { Box, Button, Chip, IconButton, Input, Spinner, Text, config } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -8,6 +9,7 @@ import { isUserId } from '$utils/matrix'; import { useIgnoredUsers } from '$hooks/useIgnoredUsers'; import { useAlive } from '$hooks/useAlive'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; function IgnoreUserInput({ userList }: { userList: string[] }) { const mx = useMatrixClient(); @@ -73,7 +75,7 @@ function IgnoreUserInput({ userList }: { userList: string[] }) { radii="300" variant="Secondary" > - + ) } @@ -115,7 +117,7 @@ function IgnoredUserChip({ userId, userList }: { userId: string; userList: strin unIgnoring ? ( ) : ( - + ) } onClick={handleUnignore} diff --git a/src/app/features/settings/account/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx index 73e417d21..3b43c4dcb 100644 --- a/src/app/features/settings/account/NameColorEditor.tsx +++ b/src/app/features/settings/account/NameColorEditor.tsx @@ -1,8 +1,10 @@ import { useState, useEffect } from 'react'; -import { Box, Button, config, Text, Input, IconButton, Icon, Icons } from 'folds'; +import { Box, Button, config, Text, Input, IconButton } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { HexColorPicker } from 'react-colorful'; import { SettingTile } from '$components/setting-tile'; import { HexColorPickerPopOut } from '$components/HexColorPickerPopOut'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type NameColorEditorProps = { title: string; @@ -122,7 +124,7 @@ export function NameColorEditor({ onClick={handleReset} title="Reset to default" > - + )} diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx index 45c66effb..9b1167437 100644 --- a/src/app/features/settings/account/Profile.tsx +++ b/src/app/features/settings/account/Profile.tsx @@ -10,8 +10,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Input, Avatar, Button, @@ -24,6 +22,7 @@ import { config, Spinner, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { useSetAtom } from 'jotai'; import { SequenceCard } from '$components/sequence-card'; @@ -46,6 +45,7 @@ import { useCapabilities } from '$hooks/useCapabilities'; import { profilesCacheAtom } from '$state/userRoomProfile'; import { SequenceCardStyle } from '$features/settings/styles.css'; import { useUserPresence } from '$hooks/useUserPresence'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { TimezoneEditor } from './TimezoneEditor'; import { PronounEditor } from './PronounEditor'; import { BioEditor } from './BioEditor'; @@ -196,7 +196,7 @@ function ProfileAvatar({ profile, userId }: Readonly) { Remove Avatar setAlertRemove(false)} radii="300"> - + @@ -368,7 +368,7 @@ function ProfileBanner({ profile, userId }: Readonly) { Remove Banner setAlertRemove(false)} radii="300"> - + @@ -453,7 +453,7 @@ function ProfileDisplayName({ profile, userId }: Readonly) { radii="300" variant="Secondary" > - + ) } diff --git a/src/app/features/settings/account/StatusEditor.tsx b/src/app/features/settings/account/StatusEditor.tsx index 001c99c34..1ec5ff6da 100644 --- a/src/app/features/settings/account/StatusEditor.tsx +++ b/src/app/features/settings/account/StatusEditor.tsx @@ -1,6 +1,8 @@ import { ChangeEventHandler, FormEventHandler, useEffect, useState } from 'react'; -import { Box, Text, Button, Input, IconButton, Icon, Icons, Spinner, config } from 'folds'; +import { Box, Text, Button, Input, IconButton, Spinner, config } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { SettingTile } from '$components/setting-tile'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type StatusEditorProps = { current?: string; @@ -62,7 +64,7 @@ export function StatusEditor({ current = '', onSave }: StatusEditorProps) { radii="300" variant="Secondary" > - + ) } diff --git a/src/app/features/settings/account/TimezoneEditor.tsx b/src/app/features/settings/account/TimezoneEditor.tsx index 7d28399a5..ad631bbf4 100644 --- a/src/app/features/settings/account/TimezoneEditor.tsx +++ b/src/app/features/settings/account/TimezoneEditor.tsx @@ -1,6 +1,8 @@ import { useMemo, useState, useEffect, ChangeEvent } from 'react'; -import { Box, IconButton, Button, Icon, Icons, Input, Text } from 'folds'; +import { Box, IconButton, Button, Input, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { SettingTile } from '$components/setting-tile'; +import { PhosphorIcon } from '$components/PhosphorIcon'; interface IntlWithSupportedValues { supportedValuesOf(key: 'timeZone' | string): string[]; @@ -87,7 +89,7 @@ export function TimezoneEditor({ current, onSave }: TimezoneEditorProps) { radii="300" title="Reset" > - + } diff --git a/src/app/features/settings/cosmetics/Cosmetics.tsx b/src/app/features/settings/cosmetics/Cosmetics.tsx index 7e44bf480..452151104 100644 --- a/src/app/features/settings/cosmetics/Cosmetics.tsx +++ b/src/app/features/settings/cosmetics/Cosmetics.tsx @@ -3,9 +3,7 @@ import { Box, Button, config, - Icon, IconButton, - Icons, Menu, MenuItem, PopOut, @@ -14,6 +12,8 @@ import { Switch, Text, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; @@ -22,6 +22,7 @@ import { JumboEmojiSize, settingsAtom } from '$state/settings'; import { SettingTile } from '$components/setting-tile'; import { stopPropagation } from '$utils/keyboard'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { Appearance } from './Themes'; import { LanguageSpecificPronouns } from './LanguageSpecificPronouns'; @@ -57,7 +58,7 @@ function SelectJumboEmojiSize() { outlined fill="Soft" radii="300" - after={} + after={} onClick={handleMenu} > {currentSizeName} @@ -257,7 +258,7 @@ export function Cosmetics({ requestClose }: CosmeticsProps) { - + diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index a9d8e020c..3ba92c9be 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -5,8 +5,6 @@ import { Button, Chip, config, - Icon, - Icons, Input, Menu, MenuItem, @@ -16,6 +14,7 @@ import { Text, toRem, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; import { isKeyHotkey } from 'is-hotkey'; import FocusTrap from 'focus-trap-react'; import { SequenceCard } from '$components/sequence-card'; @@ -33,6 +32,7 @@ import { } from '$hooks/useTheme'; import { stopPropagation } from '$utils/keyboard'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type ThemeSelectorProps = { themeNames: Record; @@ -84,7 +84,7 @@ function SelectTheme({ disabled }: Readonly<{ disabled?: boolean }>) { outlined fill="Soft" radii="300" - after={} + after={} onClick={disabled ? undefined : handleThemeMenu} aria-disabled={disabled} > @@ -163,7 +163,7 @@ function SystemThemePreferences() { variant={themeKind === ThemeKind.Light ? 'Primary' : 'Secondary'} outlined={themeKind === ThemeKind.Light} radii="Pill" - after={} + after={} onClick={handleLightThemeMenu} > {themeNames[selectedLightTheme.id] ?? selectedLightTheme.id} @@ -204,7 +204,7 @@ function SystemThemePreferences() { variant={themeKind === ThemeKind.Dark ? 'Primary' : 'Secondary'} outlined={themeKind === ThemeKind.Dark} radii="Pill" - after={} + after={} onClick={handleDarkThemeMenu} > {themeNames[selectedDarkTheme.id] ?? selectedDarkTheme.id} diff --git a/src/app/features/settings/developer-tools/AccountData.tsx b/src/app/features/settings/developer-tools/AccountData.tsx index 6cd68e9bc..7d92f8e40 100644 --- a/src/app/features/settings/developer-tools/AccountData.tsx +++ b/src/app/features/settings/developer-tools/AccountData.tsx @@ -1,11 +1,16 @@ import { useCallback, useState } from 'react'; -import { Box, Text, Icon, Icons, Button, MenuItem } from 'folds'; +import { Box, Text, Button, MenuItem } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { useAccountDataCallback } from '$hooks/useAccountDataCallback'; import { CutoutCard } from '$components/cutout-card'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type AccountDataProps = { expand: boolean; @@ -48,7 +53,7 @@ export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataPro radii="300" outlined before={ - + } > {expand ? 'Collapse' : 'Expand'} @@ -67,7 +72,7 @@ export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataPro fill="None" size="300" radii="0" - before={} + before={} onClick={() => onSelect(null)} > @@ -83,7 +88,7 @@ export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataPro fill="None" size="300" radii="0" - after={} + after={} onClick={() => onSelect(type)} > diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx index b717f2261..206bc1f79 100644 --- a/src/app/features/settings/developer-tools/DevelopTools.tsx +++ b/src/app/features/settings/developer-tools/DevelopTools.tsx @@ -1,5 +1,6 @@ import { useCallback, useState } from 'react'; -import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Button } from 'folds'; +import { Box, Text, IconButton, Scroll, Switch, Button } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -9,6 +10,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { AccountDataEditor, AccountDataSubmitCallback } from '$components/AccountDataEditor'; import { copyToClipboard } from '$utils/dom'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { AccountData } from './AccountData'; import { SyncDiagnostics } from './SyncDiagnostics'; import { DebugLogViewer } from './DebugLogViewer'; @@ -58,7 +60,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) { - + diff --git a/src/app/features/settings/developer-tools/SyncDiagnostics.tsx b/src/app/features/settings/developer-tools/SyncDiagnostics.tsx index 1d9631107..938e30d9f 100644 --- a/src/app/features/settings/developer-tools/SyncDiagnostics.tsx +++ b/src/app/features/settings/developer-tools/SyncDiagnostics.tsx @@ -1,5 +1,7 @@ import { useEffect, useState } from 'react'; -import { Box, Button, Icon, Icons, Text } from 'folds'; +import { Box, Button, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; import { SequenceCard } from '$components/sequence-card'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { getClientSyncDiagnostics } from '$client/initMatrix'; @@ -7,6 +9,7 @@ import { Direction, EventType, NotificationCountType, Room } from '$types/matrix import { Membership } from '$types/matrix/room'; import { SequenceCardStyle } from '$features/settings/styles.css'; import { getUnreadInfo, isNotificationEvent } from '$utils/room'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type RoomRenderingDiagnostics = { totalRooms: number; @@ -189,7 +192,7 @@ export function SyncDiagnostics() { fill="Soft" outlined radii="300" - before={} + before={} onClick={() => setExpandSliding((v) => !v)} > {expandSliding ? 'Collapse' : 'Expand'} diff --git a/src/app/features/settings/devices/DeviceTile.tsx b/src/app/features/settings/devices/DeviceTile.tsx index b77be8ac5..1bc9f63b4 100644 --- a/src/app/features/settings/devices/DeviceTile.tsx +++ b/src/app/features/settings/devices/DeviceTile.tsx @@ -3,8 +3,6 @@ import { Box, Text, IconButton, - Icon, - Icons, Chip, Input, Button, @@ -15,6 +13,9 @@ import { OverlayBackdrop, OverlayCenter, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight'; +import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash'; import { CryptoApi, IMyDevice, MatrixError } from '$types/matrix-sdk'; import FocusTrap from 'focus-trap-react'; import { SettingTile } from '$components/setting-tile'; @@ -28,6 +29,7 @@ import { stopPropagation } from '$utils/keyboard'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function DeviceTilePlaceholder() { return ( @@ -253,7 +255,7 @@ export function DeviceDeleteBtn({ onClick={() => onDeleteToggle(deviceId)} disabled={disabled} > - + ); } @@ -292,7 +294,7 @@ export function DeviceTile({ radii="300" onClick={() => setDetails(!details)} > - + } after={ diff --git a/src/app/features/settings/devices/Devices.tsx b/src/app/features/settings/devices/Devices.tsx index 03e3ed665..9a7809018 100644 --- a/src/app/features/settings/devices/Devices.tsx +++ b/src/app/features/settings/devices/Devices.tsx @@ -1,4 +1,5 @@ -import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds'; +import { Box, Text, IconButton, Scroll } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -13,6 +14,7 @@ import { useSecretStorageDefaultKeyId, useSecretStorageKeyContent } from '$hooks import { useCrossSigningActive } from '$hooks/useCrossSigning'; import { BackupRestoreTile } from '$components/BackupRestore'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { LocalBackup } from './LocalBackup'; import { DeviceLogoutBtn, DeviceKeyDetails, DeviceTile, DeviceTilePlaceholder } from './DeviceTile'; import { OtherDevices } from './OtherDevices'; @@ -71,7 +73,7 @@ export function Devices({ requestClose }: DevicesProps) { - + diff --git a/src/app/features/settings/devices/LocalBackup.tsx b/src/app/features/settings/devices/LocalBackup.tsx index eaefc7ff5..a91059302 100644 --- a/src/app/features/settings/devices/LocalBackup.tsx +++ b/src/app/features/settings/devices/LocalBackup.tsx @@ -1,5 +1,10 @@ import { FormEventHandler, useCallback, useEffect, useState } from 'react'; -import { Box, Button, color, Icon, Icons, Spinner, Text, toRem } from 'folds'; +import { Box, Button, color, Spinner, Text, toRem } from 'folds'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { FileTextIcon } from '@phosphor-icons/react/dist/csr/FileText'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FileSaver from 'file-saver'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -15,6 +20,7 @@ import { import { useAlive } from '$hooks/useAlive'; import { useFilePicker } from '$hooks/useFilePicker'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type LocalBackupError = Error | FriendlyError; @@ -154,7 +160,11 @@ function ExportKeysTile() { outlined radii="300" before={ - + expand ? ( + + ) : ( + + ) } > @@ -283,8 +293,8 @@ function ImportKeysTile() { variant="Warning" fill="Solid" radii="300" - before={} - after={} + before={} + after={} > {file.name} @@ -299,7 +309,7 @@ function ImportKeysTile() { fill="Soft" outlined radii="300" - before={} + before={} > Import diff --git a/src/app/features/settings/devices/Verification.tsx b/src/app/features/settings/devices/Verification.tsx index 34dccf481..e2b1a58e5 100644 --- a/src/app/features/settings/devices/Verification.tsx +++ b/src/app/features/settings/devices/Verification.tsx @@ -5,8 +5,6 @@ import { Button, Chip, config, - Icon, - Icons, Spinner, Text, Overlay, @@ -18,6 +16,8 @@ import { Menu, MenuItem, } from 'folds'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { CryptoApi, VerificationRequest } from '$types/matrix-sdk'; import { VerificationStatus } from '$hooks/useDeviceVerificationStatus'; @@ -35,6 +35,7 @@ import { stopPropagation } from '$utils/keyboard'; import { useAuthMetadata } from '$hooks/useAuthMetadata'; import { withSearchParam } from '$pages/pathUtils'; import { useAccountManagementActions } from '$hooks/useAccountManagement'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type VerificationStatusBadgeProps = { verificationStatus: VerificationStatus; @@ -153,7 +154,7 @@ export function VerifyCurrentDeviceTile({ radii="Pill" onClick={handleCancelVerification} > - + } /> @@ -294,7 +295,7 @@ export function DeviceVerificationOptions() { radii="300" onClick={handleMenu} > - + - + diff --git a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx index 1c66d4c6f..715b36757 100644 --- a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx +++ b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx @@ -3,8 +3,6 @@ import { Box, Text, Button, - Icon, - Icons, IconButton, Avatar, AvatarImage, @@ -21,6 +19,9 @@ import { Line, Chip, } from 'folds'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { StickerIcon } from '@phosphor-icons/react/dist/csr/Sticker'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { useAtomValue } from 'jotai'; import { Room } from '$types/matrix-sdk'; @@ -43,6 +44,7 @@ import { AccountDataEvent } from '$types/matrix/accountData'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { stopPropagation } from '$utils/keyboard'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; function GlobalPackSelector({ packs, @@ -193,7 +195,7 @@ function GlobalPackSelector({ ) : ( - + )} @@ -374,7 +376,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) { onClick={() => handleUndoRemove(address)} disabled={applyingChanges} > - + ) : ( handleRemove(address)} disabled={applyingChanges} > - + )} @@ -392,7 +394,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) { ) : ( - + )} diff --git a/src/app/features/settings/emojis-stickers/UserPack.tsx b/src/app/features/settings/emojis-stickers/UserPack.tsx index 03c80da2f..d98e9b437 100644 --- a/src/app/features/settings/emojis-stickers/UserPack.tsx +++ b/src/app/features/settings/emojis-stickers/UserPack.tsx @@ -1,4 +1,5 @@ -import { Avatar, AvatarFallback, AvatarImage, Box, Button, Icon, Icons, Text } from 'folds'; +import { Avatar, AvatarFallback, AvatarImage, Box, Button, Text } from 'folds'; +import { StickerIcon } from '@phosphor-icons/react/dist/csr/Sticker'; import { useUserImagePack } from '$hooks/useImagePacks'; import { SequenceCard } from '$components/sequence-card'; import { SettingTile } from '$components/setting-tile'; @@ -7,6 +8,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { mxcUrlToHttp } from '$utils/matrix'; import { useMediaAuthentication } from '$hooks/useMediaAuthentication'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type UserPackProps = { onViewPack: (imagePack: ImagePack) => void; @@ -46,7 +48,7 @@ export function UserPack({ onViewPack }: UserPackProps) { ) : ( - + )} diff --git a/src/app/features/settings/experimental/Experimental.tsx b/src/app/features/settings/experimental/Experimental.tsx index 9c3a1c40f..51fcb23b6 100644 --- a/src/app/features/settings/experimental/Experimental.tsx +++ b/src/app/features/settings/experimental/Experimental.tsx @@ -1,4 +1,6 @@ -import { Box, Text, IconButton, Icon, Icons, Scroll, Switch } from 'folds'; +import { Box, Text, IconButton, Scroll, Switch } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { InfoCard } from '$components/info-card'; import { settingsAtom } from '$state/settings'; @@ -6,6 +8,7 @@ import { useSetting } from '$state/hooks/settings'; import { SequenceCardStyle } from '$features/common-settings/styles.css'; import { SettingTile } from '$components/setting-tile'; import { SequenceCard } from '$components/sequence-card'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { Sync } from '../general'; import { BandwidthSavingEmojis } from './BandwithSavingEmojis'; import { MSC4268HistoryShare } from './MSC4268HistoryShare'; @@ -47,7 +50,7 @@ export function Experimental({ requestClose }: Readonly) { - + @@ -56,7 +59,7 @@ export function Experimental({ requestClose }: Readonly) { + before={} variant="Warning" description={ <> diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx index ff7acbf59..c87abd091 100644 --- a/src/app/features/settings/general/General.tsx +++ b/src/app/features/settings/general/General.tsx @@ -12,9 +12,7 @@ import { Button, config, Header, - Icon, IconButton, - Icons, Input, Menu, MenuItem, @@ -25,6 +23,10 @@ import { Text, toRem, } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; +import { ShieldCheckIcon } from '@phosphor-icons/react/dist/csr/ShieldCheck'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { useAtomValue, useSetAtom } from 'jotai'; import { Page, PageContent, PageHeader } from '$components/page'; @@ -51,6 +53,7 @@ import { sessionsAtom, activeSessionIdAtom } from '$state/sessions'; import { useClientConfig } from '$hooks/useClientConfig'; import { resolveSlidingEnabled } from '$client/initMatrix'; import { isKeyHotkey } from 'is-hotkey'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type DateHintProps = { hasChanges: boolean; @@ -200,7 +203,7 @@ function DateHint({ hasChanges, handleReset }: Readonly) { size="300" radii="300" > - + ) : ( ) { radii="300" aria-pressed={!!anchor} > - + )} @@ -312,7 +315,7 @@ function PresetDateFormat({ value, onChange }: Readonly) outlined fill="Soft" radii="300" - after={} + after={} onClick={handleMenu} > @@ -507,7 +510,7 @@ function SelectMessageLayout() { outlined fill="Soft" radii="300" - after={} + after={} onClick={handleMenu} > @@ -575,7 +578,7 @@ function SelectCaptionPosition() { outlined fill="Soft" radii="300" - after={} + after={} onClick={handleMenu} > @@ -644,7 +647,7 @@ function SelectMessageSpacing() { outlined fill="Soft" radii="300" - after={} + after={} onClick={handleMenu} > @@ -718,7 +721,7 @@ function SelectRightSwipeAction({ disabled }: Readonly<{ disabled?: boolean }>) fill="Soft" radii="300" disabled={disabled} - after={} + after={} onClick={handleMenu} > {options.find((o) => o.id === action)?.name ?? action} @@ -1253,7 +1256,7 @@ function DiagnosticsAndPrivacy() { fill="Soft" size="300" radii="300" - before={} + before={} > Privacy Policy @@ -1274,7 +1277,7 @@ export function General({ requestClose }: Readonly) { - + diff --git a/src/app/features/settings/keyboard-shortcuts/KeyboardShortcuts.tsx b/src/app/features/settings/keyboard-shortcuts/KeyboardShortcuts.tsx index 0ce94a9c3..a4c0904f3 100644 --- a/src/app/features/settings/keyboard-shortcuts/KeyboardShortcuts.tsx +++ b/src/app/features/settings/keyboard-shortcuts/KeyboardShortcuts.tsx @@ -4,8 +4,10 @@ * Lists all keyboard shortcuts available in Sable in a semantic, * screen-reader-friendly dl/dt/dd structure. */ -import { Box, Icon, IconButton, Icons, Scroll, Text, config } from 'folds'; +import { Box, IconButton, Scroll, Text, config } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type ShortcutEntry = { keys: string; @@ -124,7 +126,7 @@ export function KeyboardShortcuts({ requestClose }: KeyboardShortcutsProps) { variant="Surface" aria-label="Close keyboard shortcuts" > - + diff --git a/src/app/features/settings/notifications/DeregisterPushNotifications.tsx b/src/app/features/settings/notifications/DeregisterPushNotifications.tsx index f77aff3e5..061875906 100644 --- a/src/app/features/settings/notifications/DeregisterPushNotifications.tsx +++ b/src/app/features/settings/notifications/DeregisterPushNotifications.tsx @@ -7,16 +7,16 @@ import { config, Dialog, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useAtom } from 'jotai'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback'; import { useSetting } from '../../../state/hooks/settings'; @@ -47,7 +47,7 @@ function ConfirmDeregisterDialog({ onClose, onConfirm, isLoading }: ConfirmDereg Reset All Push Notifications - + diff --git a/src/app/features/settings/notifications/KeywordMessages.tsx b/src/app/features/settings/notifications/KeywordMessages.tsx index ff235271f..4d81f7768 100644 --- a/src/app/features/settings/notifications/KeywordMessages.tsx +++ b/src/app/features/settings/notifications/KeywordMessages.tsx @@ -1,6 +1,7 @@ import { ChangeEventHandler, FormEventHandler, useCallback, useMemo, useState } from 'react'; import { IPushRule, IPushRules, PushRuleKind } from '$types/matrix-sdk'; -import { Box, Text, Badge, Button, Input, config, IconButton, Icons, Icon, Spinner } from 'folds'; +import { Box, Text, Badge, Button, Input, config, IconButton, Spinner } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useAccountData } from '$hooks/useAccountData'; import { AccountDataEvent } from '$types/matrix/accountData'; import { SequenceCard } from '$components/sequence-card'; @@ -14,6 +15,7 @@ import { } from '$hooks/useNotificationMode'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { SequenceCardStyle } from '$features/settings/styles.css'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { NotificationModeSwitcher } from './NotificationModeSwitcher'; import { NotificationLevelsHint } from './NotificationLevelsHint'; @@ -82,7 +84,7 @@ function KeywordInput() { radii="300" variant="Secondary" > - + ) } @@ -120,7 +122,7 @@ function KeywordCross({ pushRule }: PushRulesProps) { const removing = removeState.status === AsyncStatus.Loading; return ( - {removing ? : } + {removing ? : } ); } diff --git a/src/app/features/settings/notifications/NotificationLevelsHint.tsx b/src/app/features/settings/notifications/NotificationLevelsHint.tsx index 700ca2bdb..f093a0d06 100644 --- a/src/app/features/settings/notifications/NotificationLevelsHint.tsx +++ b/src/app/features/settings/notifications/NotificationLevelsHint.tsx @@ -1,7 +1,9 @@ import { MouseEventHandler, useState } from 'react'; -import { Box, config, Header, Icon, IconButton, Icons, Menu, PopOut, RectCords, Text } from 'folds'; +import { Box, config, Header, IconButton, Menu, PopOut, RectCords, Text } from 'folds'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; import FocusTrap from 'focus-trap-react'; import { stopPropagation } from '$utils/keyboard'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function NotificationLevelsHint() { const [anchor, setAnchor] = useState(); @@ -63,7 +65,7 @@ export function NotificationLevelsHint() { radii="300" aria-pressed={!!anchor} > - + ); diff --git a/src/app/features/settings/notifications/NotificationModeSwitcher.tsx b/src/app/features/settings/notifications/NotificationModeSwitcher.tsx index 608bd5078..d7801b3f1 100644 --- a/src/app/features/settings/notifications/NotificationModeSwitcher.tsx +++ b/src/app/features/settings/notifications/NotificationModeSwitcher.tsx @@ -1,22 +1,12 @@ -import { - Box, - Button, - config, - Icon, - Icons, - Menu, - MenuItem, - PopOut, - RectCords, - Spinner, - Text, -} from 'folds'; +import { Box, Button, config, Menu, MenuItem, PopOut, RectCords, Spinner, Text } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; import { IPushRule } from '$types/matrix-sdk'; import { MouseEventHandler, useMemo, useState } from 'react'; import FocusTrap from 'focus-trap-react'; import { NotificationMode, useNotificationActionsMode } from '$hooks/useNotificationMode'; import { stopPropagation } from '$utils/keyboard'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export const useNotificationModes = (): NotificationMode[] => useMemo(() => [NotificationMode.NotifyLoud, NotificationMode.Notify, NotificationMode.OFF], []); @@ -65,7 +55,7 @@ export function NotificationModeSwitcher({ pushRule, onChange }: NotificationMod changing ? ( ) : ( - + ) } onClick={handleMenu} diff --git a/src/app/features/settings/notifications/Notifications.tsx b/src/app/features/settings/notifications/Notifications.tsx index f8935b782..abe89ab1d 100644 --- a/src/app/features/settings/notifications/Notifications.tsx +++ b/src/app/features/settings/notifications/Notifications.tsx @@ -1,5 +1,7 @@ -import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds'; +import { Box, Text, IconButton, Scroll } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { SystemNotification } from './SystemNotification'; import { AllMessagesNotifications } from './AllMessages'; import { SpecialMessagesNotifications } from './SpecialMessages'; @@ -20,7 +22,7 @@ export function Notifications({ requestClose }: NotificationsProps) { - + diff --git a/src/app/features/space-nav/SpaceNavItem.tsx b/src/app/features/space-nav/SpaceNavItem.tsx index f319a9da6..8e55f1912 100644 --- a/src/app/features/space-nav/SpaceNavItem.tsx +++ b/src/app/features/space-nav/SpaceNavItem.tsx @@ -1,9 +1,11 @@ import { MouseEventHandler, useState } from 'react'; import { Room } from '$types/matrix-sdk'; -import { Box, Icon, Icons, Text, config, RectCords, Avatar } from 'folds'; +import { Box, Text, config, RectCords, Avatar } from 'folds'; +import { StarFourIcon } from '@phosphor-icons/react/dist/csr/StarFour'; import { useNavigate } from 'react-router-dom'; import { NavButton, NavItem, NavItemContent } from '$components/nav'; import { useRoomName } from '$hooks/useRoomMeta'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type SpaceNavItemProps = { room: Room; @@ -49,10 +51,10 @@ export function SpaceNavItem({ room, selected, linkPath }: SpaceNavItemProps) { - diff --git a/src/app/features/space-settings/SpaceSettings.tsx b/src/app/features/space-settings/SpaceSettings.tsx index ddd1d5c74..fe86f6a26 100644 --- a/src/app/features/space-settings/SpaceSettings.tsx +++ b/src/app/features/space-settings/SpaceSettings.tsx @@ -1,6 +1,14 @@ import { useMemo, useState } from 'react'; import { useAtomValue } from 'jotai'; -import { Avatar, Box, config, Icon, IconButton, Icons, IconSrc, MenuItem, Text } from 'folds'; +import { Avatar, Box, config, IconButton, MenuItem, Text } from 'folds'; +import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear'; +import { LockIcon } from '@phosphor-icons/react/dist/csr/Lock'; +import { SmileyIcon } from '@phosphor-icons/react/dist/csr/Smiley'; +import { TerminalIcon } from '@phosphor-icons/react/dist/csr/Terminal'; +import { TextAaIcon } from '@phosphor-icons/react/dist/csr/TextAa'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; +import type { IconProps } from '@phosphor-icons/react'; import { JoinRule } from '$types/matrix-sdk'; import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '$components/page'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; @@ -16,14 +24,15 @@ import { EmojisStickers } from '$features/common-settings/emojis-stickers'; import { Members } from '$features/common-settings/members'; import { DeveloperTools } from '$features/common-settings/developer-tools'; import { Cosmetics } from '$features/common-settings/cosmetics/Cosmetics'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { General } from './general'; import { Permissions } from './permissions'; type SpaceSettingsMenuItem = { page: SpaceSettingsPage; name: string; - icon: IconSrc; - activeIcon?: IconSrc; + icon: React.ComponentType; + activeIcon?: React.ComponentType; }; const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] => @@ -32,33 +41,32 @@ const useSpaceSettingsMenuItems = (): SpaceSettingsMenuItem[] => { page: SpaceSettingsPage.GeneralPage, name: 'General', - icon: Icons.Setting, + icon: GearIcon, }, { page: SpaceSettingsPage.MembersPage, name: 'Members', - icon: Icons.User, + icon: UserIcon, }, { page: SpaceSettingsPage.PermissionsPage, name: 'Permissions', - icon: Icons.Lock, + icon: LockIcon, }, { page: SpaceSettingsPage.CosmeticsPage, name: 'Cosmetics', - icon: Icons.Alphabet, - activeIcon: Icons.AlphabetUnderline, + icon: TextAaIcon, }, { page: SpaceSettingsPage.EmojisStickersPage, name: 'Emojis & Stickers', - icon: Icons.Smile, + icon: SmileyIcon, }, { page: SpaceSettingsPage.DeveloperToolsPage, name: 'Developer Tools', - icon: Icons.Terminal, + icon: TerminalIcon, }, ], [] @@ -114,7 +122,7 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps) roomType={room.getType()} size="50" joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite} - filled + weight="fill" /> )} /> @@ -126,7 +134,7 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps) {screenSize === ScreenSize.Mobile && ( - + )} @@ -145,7 +153,11 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps) radii="400" aria-pressed={activePage === item.page} before={ - + } onClick={() => setActivePage(item.page)} > diff --git a/src/app/features/space-settings/general/General.tsx b/src/app/features/space-settings/general/General.tsx index 8cee28c69..b76b74edb 100644 --- a/src/app/features/space-settings/general/General.tsx +++ b/src/app/features/space-settings/general/General.tsx @@ -1,4 +1,5 @@ -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { usePowerLevels } from '$hooks/usePowerLevels'; import { useRoom } from '$hooks/useRoom'; @@ -12,6 +13,7 @@ import { } from '$features/common-settings/general'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type GeneralProps = { requestClose: () => void; @@ -33,7 +35,7 @@ export function General({ requestClose }: GeneralProps) { - + diff --git a/src/app/features/space-settings/permissions/Permissions.tsx b/src/app/features/space-settings/permissions/Permissions.tsx index 9e463a66f..de1bccbbe 100644 --- a/src/app/features/space-settings/permissions/Permissions.tsx +++ b/src/app/features/space-settings/permissions/Permissions.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Page, PageContent, PageHeader } from '$components/page'; import { useRoom } from '$hooks/useRoom'; import { usePowerLevels } from '$hooks/usePowerLevels'; @@ -8,6 +9,7 @@ import { StateEvent } from '$types/matrix/room'; import { PermissionGroups, Powers, PowersEditor } from '$features/common-settings/permissions'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { usePermissionGroups } from './usePermissionItems'; type PermissionsProps = { @@ -46,7 +48,7 @@ export function Permissions({ requestClose }: PermissionsProps) { - + diff --git a/src/app/features/widgets/IntegrationManager.tsx b/src/app/features/widgets/IntegrationManager.tsx index 4bf242a4f..f02df8cbf 100644 --- a/src/app/features/widgets/IntegrationManager.tsx +++ b/src/app/features/widgets/IntegrationManager.tsx @@ -2,19 +2,19 @@ import { useEffect, useRef, useState } from 'react'; import { Box, Header, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, } from 'folds'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import FocusTrap from 'focus-trap-react'; import { Room } from '$types/matrix-sdk'; import { useIntegrationManager, buildIntegrationManagerUrl } from '$hooks/useIntegrationManager'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './IntegrationManager.css'; interface IntegrationManagerProps { @@ -80,7 +80,7 @@ export function IntegrationManager({ room, open, onClose }: IntegrationManagerPr - + diff --git a/src/app/features/widgets/WidgetsDrawer.tsx b/src/app/features/widgets/WidgetsDrawer.tsx index ade7699e8..290214477 100644 --- a/src/app/features/widgets/WidgetsDrawer.tsx +++ b/src/app/features/widgets/WidgetsDrawer.tsx @@ -2,9 +2,7 @@ import { FormEventHandler, MouseEventHandler, useState } from 'react'; import { Box, Header, - Icon, IconButton, - Icons, Input, MenuItem, Scroll, @@ -15,6 +13,11 @@ import { Button, Line, } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { SquaresFourIcon } from '@phosphor-icons/react/dist/csr/SquaresFour'; +import { TrashIcon } from '@phosphor-icons/react/dist/csr/Trash'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { Room } from '$types/matrix-sdk'; import { useMatrixClient } from '$hooks/useMatrixClient'; @@ -26,6 +29,7 @@ import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { StateEvent } from '$types/matrix/room'; import { createLogger } from '$utils/debug'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { WidgetIframe } from './WidgetIframe'; import * as css from './WidgetsDrawer.css'; import { IntegrationManager } from './IntegrationManager'; @@ -46,7 +50,7 @@ function WidgetDrawerHeader({ activeWidget, onBack }: WidgetsDrawerHeaderProps) {activeWidget && ( - + )} @@ -72,7 +76,7 @@ function WidgetDrawerHeader({ activeWidget, onBack }: WidgetsDrawerHeaderProps) variant="Background" onClick={() => setWidgetDrawer(false)} > - + )} @@ -191,7 +195,7 @@ function WidgetListItemView({ widget, onSelect, onRemove, canRemove }: WidgetLis fill="None" onClick={handleRemove} > - + )} @@ -281,7 +285,7 @@ export function WidgetsDrawer({ room }: WidgetsDrawerProps) { variant="Primary" fill="Soft" onClick={() => setShowIntegrationManager(true)} - before={} + before={} > Integration Manager @@ -290,7 +294,7 @@ export function WidgetsDrawer({ room }: WidgetsDrawerProps) { variant="Secondary" fill="Soft" onClick={() => setShowAddForm(true)} - before={} + before={} > Add Custom Widget diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx index fe96b7e17..825656929 100644 --- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx +++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx @@ -12,7 +12,14 @@ import { import { SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership'; import { HTMLReactParserOptions } from 'html-react-parser'; import { Opts as LinkifyOpts } from 'linkifyjs'; -import { Box, Chip, Avatar, Text, Icons, config, toRem, Icon } from 'folds'; +import { Box, Chip, Avatar, Text, config, toRem } from 'folds'; +import { CodeIcon } from '@phosphor-icons/react/dist/csr/Code'; +import { HashIcon } from '@phosphor-icons/react/dist/csr/Hash'; +import { PhoneIcon } from '@phosphor-icons/react/dist/csr/Phone'; +import { PushPinIcon } from '@phosphor-icons/react/dist/csr/PushPin'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { MinusIcon } from '@phosphor-icons/react/dist/csr/Minus'; +import { PhoneSlashIcon } from '@phosphor-icons/react/dist/csr/PhoneSlash'; import { MessageLayout } from '$state/settings'; import { nicknamesAtom } from '$state/nicknames'; import { useGetMemberPowerTag } from '$hooks/useMemberPowerTag'; @@ -55,6 +62,7 @@ import { } from '$features/room/message'; import { useSableCosmetics } from '$hooks/useSableCosmetics'; +import { PhosphorIcon } from '../../components/PhosphorIcon'; function DecoratedUser({ room, userId, userName }: DecoratedUserProps) { const { color, font } = useSableCosmetics(userId, room ?? ({} as Room)); @@ -770,7 +778,7 @@ export function useTimelineEventRenderer({ @@ -815,7 +823,7 @@ export function useTimelineEventRenderer({ @@ -862,7 +870,7 @@ export function useTimelineEventRenderer({ @@ -909,7 +917,7 @@ export function useTimelineEventRenderer({ @@ -963,7 +971,7 @@ export function useTimelineEventRenderer({ @@ -1018,7 +1026,7 @@ export function useTimelineEventRenderer({ @@ -1047,10 +1055,10 @@ export function useTimelineEventRenderer({ onClick={handleOpenReply} replyIcon={ <> - - + } @@ -1098,7 +1106,7 @@ export function useTimelineEventRenderer({ @@ -1159,7 +1167,7 @@ export function useTimelineEventRenderer({ diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx index 88265ad0d..1726c7a94 100644 --- a/src/app/hooks/useMemberEventParser.tsx +++ b/src/app/hooks/useMemberEventParser.tsx @@ -1,9 +1,17 @@ import { ReactNode } from 'react'; -import { IconSrc, Icons, Text } from 'folds'; +import type { IconProps } from '@phosphor-icons/react'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { ArrowRightIcon } from '@phosphor-icons/react/dist/csr/ArrowRight'; +import { AtIcon } from '@phosphor-icons/react/dist/csr/At'; +import { SignOutIcon } from '@phosphor-icons/react/dist/csr/SignOut'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; +import { EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/csr/EnvelopeSimple'; +import { UserPlusIcon } from '@phosphor-icons/react/dist/csr/UserPlus'; import { MatrixEvent, Room } from '$types/matrix-sdk'; import { IMemberContent, Membership } from '$types/matrix/room'; import { getMxIdLocalPart } from '$utils/matrix'; import { isMembershipChanged } from '$utils/room'; +import { Text } from 'folds'; import { useSableCosmetics } from './useSableCosmetics'; import { useMatrixClient } from './useMatrixClient'; @@ -25,7 +33,7 @@ function DecoratedUser({ roomId, userId, userName }: DecoratedUserProps) { } export type ParsedResult = { - icon: IconSrc; + icon: React.ComponentType; body: ReactNode; }; @@ -42,7 +50,7 @@ export const useMemberEventParser = (): MemberEventParser => { if (!senderId || !userId) return { - icon: Icons.User, + icon: UserIcon, body: 'Broken membership event', }; @@ -56,7 +64,7 @@ export const useMemberEventParser = (): MemberEventParser => { if (content.membership === Membership.Invite) { if (prevContent.membership === Membership.Knock) { return { - icon: Icons.ArrowGoRightPlus, + icon: UserPlusIcon, body: ( <> @@ -72,7 +80,7 @@ export const useMemberEventParser = (): MemberEventParser => { } return { - icon: Icons.ArrowGoRightPlus, + icon: UserPlusIcon, body: ( <> @@ -86,7 +94,7 @@ export const useMemberEventParser = (): MemberEventParser => { if (content.membership === Membership.Knock) { return { - icon: Icons.Mail, + icon: EnvelopeSimpleIcon, body: ( <> @@ -101,7 +109,7 @@ export const useMemberEventParser = (): MemberEventParser => { if (content.membership === Membership.Join) { return { - icon: Icons.ArrowGoRight, + icon: ArrowRightIcon, body: ( <> @@ -114,7 +122,7 @@ export const useMemberEventParser = (): MemberEventParser => { if (content.membership === Membership.Leave) { if (prevContent.membership === Membership.Invite) { return { - icon: Icons.ArrowGoRightCross, + icon: SignOutIcon, body: senderId === userId ? ( <> @@ -140,7 +148,7 @@ export const useMemberEventParser = (): MemberEventParser => { if (prevContent.membership === Membership.Knock) { return { - icon: Icons.ArrowGoRightCross, + icon: SignOutIcon, body: senderId === userId ? ( <> @@ -166,7 +174,7 @@ export const useMemberEventParser = (): MemberEventParser => { if (prevContent.membership === Membership.Ban) { return { - icon: Icons.ArrowGoLeft, + icon: ArrowLeftIcon, body: ( <> @@ -179,7 +187,7 @@ export const useMemberEventParser = (): MemberEventParser => { } return { - icon: Icons.ArrowGoLeft, + icon: ArrowLeftIcon, body: senderId === userId ? ( <> @@ -202,7 +210,7 @@ export const useMemberEventParser = (): MemberEventParser => { if (content.membership === Membership.Ban) { return { - icon: Icons.ArrowGoLeft, + icon: ArrowLeftIcon, body: ( <> @@ -222,7 +230,7 @@ export const useMemberEventParser = (): MemberEventParser => { : getMxIdLocalPart(userId); return { - icon: Icons.Mention, + icon: AtIcon, body: typeof content.displayname === 'string' ? ( <> @@ -240,7 +248,7 @@ export const useMemberEventParser = (): MemberEventParser => { } if (content.avatar_url !== prevContent.avatar_url) { return { - icon: Icons.User, + icon: UserIcon, body: content.avatar_url && typeof content.avatar_url === 'string' ? ( <> @@ -257,7 +265,7 @@ export const useMemberEventParser = (): MemberEventParser => { } return { - icon: Icons.User, + icon: UserIcon, body: 'Membership event with no changes', }; }; diff --git a/src/app/hooks/useRoomsNotificationPreferences.ts b/src/app/hooks/useRoomsNotificationPreferences.ts index 65626bc12..110b63f9f 100644 --- a/src/app/hooks/useRoomsNotificationPreferences.ts +++ b/src/app/hooks/useRoomsNotificationPreferences.ts @@ -1,6 +1,10 @@ import { createContext, useCallback, useContext, useMemo } from 'react'; import { ConditionKind, IPushRules, MatrixClient, PushRuleKind } from '$types/matrix-sdk'; -import { Icons, IconSrc } from 'folds'; +import type { IconProps } from '@phosphor-icons/react'; +import { BellIcon } from '@phosphor-icons/react/dist/csr/Bell'; +import { BellRingingIcon } from '@phosphor-icons/react/dist/csr/BellRinging'; +import { BellSimpleIcon } from '@phosphor-icons/react/dist/csr/BellSimple'; +import { BellSlashIcon } from '@phosphor-icons/react/dist/csr/BellSlash'; import { AccountDataEvent } from '$types/matrix/accountData'; import { isRoomId } from '$utils/matrix'; import { useAccountData } from './useAccountData'; @@ -99,12 +103,14 @@ export const useRoomNotificationPreference = ( ): RoomNotificationMode => useMemo(() => getRoomNotificationMode(preferences, roomId), [preferences, roomId]); -export const getRoomNotificationModeIcon = (mode?: RoomNotificationMode): IconSrc => { - if (mode === RoomNotificationMode.Mute) return Icons.BellMute; - if (mode === RoomNotificationMode.SpecialMessages) return Icons.BellPing; - if (mode === RoomNotificationMode.AllMessages) return Icons.BellRing; +export const getRoomNotificationModeIcon = ( + mode?: RoomNotificationMode +): React.ComponentType => { + if (mode === RoomNotificationMode.Mute) return BellSlashIcon; + if (mode === RoomNotificationMode.SpecialMessages) return BellRingingIcon; + if (mode === RoomNotificationMode.AllMessages) return BellIcon; - return Icons.Bell; + return BellSimpleIcon; }; export const setRoomNotificationPreference = async ( diff --git a/src/app/pages/auth/FiledError.tsx b/src/app/pages/auth/FiledError.tsx index eddd65b69..80aff49e9 100644 --- a/src/app/pages/auth/FiledError.tsx +++ b/src/app/pages/auth/FiledError.tsx @@ -1,9 +1,11 @@ -import { Box, Icon, Icons, color, Text } from 'folds'; +import { Box, color, Text } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function FieldError({ message }: { message: string }) { return ( - + {message} diff --git a/src/app/pages/auth/ServerPicker.tsx b/src/app/pages/auth/ServerPicker.tsx index e8a4984b2..ee33cdcfb 100644 --- a/src/app/pages/auth/ServerPicker.tsx +++ b/src/app/pages/auth/ServerPicker.tsx @@ -7,23 +7,13 @@ import { useRef, useState, } from 'react'; -import { - Header, - Icon, - IconButton, - Icons, - Input, - Menu, - MenuItem, - PopOut, - RectCords, - Text, - config, -} from 'folds'; +import { Header, IconButton, Input, Menu, MenuItem, PopOut, RectCords, Text, config } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; import FocusTrap from 'focus-trap-react'; import { useDebounce } from '$hooks/useDebounce'; import { stopPropagation } from '$utils/keyboard'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function ServerPicker({ server, @@ -161,7 +151,7 @@ export function ServerPicker({ aria-pressed={!!serverMenuAnchor} radii="300" > - + ) diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx index ba888bda5..7c9376ad1 100644 --- a/src/app/pages/auth/login/PasswordLoginForm.tsx +++ b/src/app/pages/auth/login/PasswordLoginForm.tsx @@ -3,9 +3,7 @@ import { Box, Button, Header, - Icon, IconButton, - Icons, Input, Menu, Overlay, @@ -17,6 +15,7 @@ import { Text, config, } from 'folds'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; import FocusTrap from 'focus-trap-react'; import { Link } from 'react-router-dom'; import { MatrixError } from '$types/matrix-sdk'; @@ -31,6 +30,7 @@ import { getResetPasswordPath } from '$pages/pathUtils'; import { stopPropagation } from '$utils/keyboard'; import { FieldError } from '$pages/auth/FiledError'; import { deviceDisplayName } from '$utils/user-agent'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { CustomLoginResponse, LoginError, @@ -101,7 +101,7 @@ function UsernameHint({ server }: { server: string }) { radii="300" aria-pressed={!!anchor} > - + ); diff --git a/src/app/pages/auth/login/TokenLogin.tsx b/src/app/pages/auth/login/TokenLogin.tsx index 7acf3e9b8..6e474b78f 100644 --- a/src/app/pages/auth/login/TokenLogin.tsx +++ b/src/app/pages/auth/login/TokenLogin.tsx @@ -1,20 +1,11 @@ -import { - Box, - Icon, - Icons, - Overlay, - OverlayBackdrop, - OverlayCenter, - Spinner, - Text, - color, - config, -} from 'folds'; +import { Box, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, color, config } from 'folds'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import { useCallback, useEffect } from 'react'; import { MatrixError } from '$types/matrix-sdk'; import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo'; import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { deviceDisplayName } from '$utils/user-agent'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { CustomLoginResponse, LoginError, login, useLoginComplete } from './loginUtil'; function LoginTokenError({ message }: { message: string }) { @@ -30,7 +21,7 @@ function LoginTokenError({ message }: { message: string }) { alignItems="Start" gap="300" > - + Token Login diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx index 1a653e950..eb64deeb4 100644 --- a/src/app/pages/client/ClientRoot.tsx +++ b/src/app/pages/client/ClientRoot.tsx @@ -3,9 +3,7 @@ import { Button, config, Dialog, - Icon, IconButton, - Icons, Menu, MenuItem, PopOut, @@ -13,6 +11,7 @@ import { Spinner, Text, } from 'folds'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; import { HttpApiEvent, HttpApiEventHandlerMap, MatrixClient } from '$types/matrix-sdk'; import FocusTrap from 'focus-trap-react'; import { useRef, MouseEventHandler, ReactNode, useCallback, useEffect, useState } from 'react'; @@ -48,6 +47,7 @@ import { useSyncNicknames } from '$hooks/useNickname'; import { useAppVisibility } from '$hooks/useAppVisibility'; import { getHomePath } from '$pages/pathUtils'; import { useClientConfig } from '$hooks/useClientConfig'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { pushSessionToSW } from '../../../sw-session'; import { SyncStatus } from './SyncStatus'; import { SpecVersions } from './SpecVersions'; @@ -95,7 +95,7 @@ function ClientRootOptions({ mx, onLogout }: ClientRootOptionsProps) { fill="None" onClick={handleToggle} > - + } + before={} > Source Code @@ -48,7 +50,7 @@ export function WelcomePage() { target="_blank" rel="noreferrer noopener" fill="Soft" - before={} + before={} > Support @@ -63,7 +65,7 @@ export function WelcomePage() { href="https://github.com/SableClient/Sable/blob/dev/CHANGELOG.md" target="_blank" rel="noreferrer noopener" - before={} + before={} > Features diff --git a/src/app/pages/client/create/Create.tsx b/src/app/pages/client/create/Create.tsx index 4fb781838..c07c8b48b 100644 --- a/src/app/pages/client/create/Create.tsx +++ b/src/app/pages/client/create/Create.tsx @@ -1,7 +1,9 @@ -import { Box, Icon, Icons, Scroll } from 'folds'; +import { Box, Scroll } from 'folds'; +import { FoldersIcon } from '@phosphor-icons/react/dist/csr/Folders'; import { Page, PageContent, PageContentCenter, PageHero, PageHeroSection } from '$components/page'; import { CreateSpaceForm } from '$features/create-space'; import { useRoomNavigate } from '$hooks/useRoomNavigate'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function Create() { const { navigateSpace } = useRoomNavigate(); @@ -15,7 +17,7 @@ export function Create() { } + icon={} title="Create Space" subTitle="Build a space for your community." /> diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx index 43ccb6be1..b6fd5b307 100644 --- a/src/app/pages/client/direct/Direct.tsx +++ b/src/app/pages/client/direct/Direct.tsx @@ -4,9 +4,7 @@ import { Avatar, Box, Button, - Icon, IconButton, - Icons, Menu, MenuItem, PopOut, @@ -15,6 +13,10 @@ import { config, toRem, } from 'folds'; +import { AtIcon } from '@phosphor-icons/react/dist/csr/At'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; import { useVirtualizer } from '@tanstack/react-virtual'; import FocusTrap from 'focus-trap-react'; import { useNavigate } from 'react-router-dom'; @@ -51,6 +53,7 @@ import { useRoomsNotificationPreferencesContext, } from '$hooks/useRoomsNotificationPreferences'; import { useDirectCreateSelected } from '$hooks/router/useDirectSelected'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { useDirectRooms } from './useDirectRooms'; type DirectMenuProps = { @@ -74,7 +77,7 @@ const DirectMenu = forwardRef(({ requestClose } } + after={} radii="300" aria-disabled={!unread} > @@ -109,7 +112,7 @@ function DirectHeader() { - + @@ -145,7 +148,7 @@ function DirectEmpty() { return ( } + icon={} title={ No Direct Messages @@ -249,7 +252,7 @@ export function Direct() { - + diff --git a/src/app/pages/client/direct/DirectCreate.tsx b/src/app/pages/client/direct/DirectCreate.tsx index 19b278bce..b3850c8b9 100644 --- a/src/app/pages/client/direct/DirectCreate.tsx +++ b/src/app/pages/client/direct/DirectCreate.tsx @@ -1,6 +1,8 @@ import { useEffect } from 'react'; import { useNavigate, useSearchParams } from 'react-router-dom'; -import { Box, Icon, IconButton, Icons, Scroll } from 'folds'; +import { Box, IconButton, Scroll } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { AtIcon } from '@phosphor-icons/react/dist/csr/At'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { getDirectCreateSearchParams } from '$pages/pathSearchParam'; import { getDirectRoomPath } from '$pages/pathUtils'; @@ -16,6 +18,7 @@ import { } from '$components/page'; import { BackRouteHandler } from '$components/BackRouteHandler'; import { CreateChat } from '$features/create-chat'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { useDirectRooms } from './useDirectRooms'; export function DirectCreate() { @@ -45,7 +48,7 @@ export function DirectCreate() { {(onBack) => ( - + )} @@ -59,7 +62,7 @@ export function DirectCreate() { } + icon={} title="Create Chat" subTitle="Start a private, encrypted chat by entering a user ID." /> diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx index 9ac55e2d2..318d0fef6 100644 --- a/src/app/pages/client/explore/Explore.tsx +++ b/src/app/pages/client/explore/Explore.tsx @@ -7,9 +7,7 @@ import { Button, Dialog, Header, - Icon, IconButton, - Icons, Input, Overlay, OverlayBackdrop, @@ -18,6 +16,10 @@ import { color, config, } from 'folds'; +import { HardDrivesIcon } from '@phosphor-icons/react/dist/csr/HardDrives'; +import { LightbulbIcon } from '@phosphor-icons/react/dist/csr/Lightbulb'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { NavCategory, NavCategoryHeader, NavItem, NavItemContent, NavLink } from '$components/nav'; import { getExploreFeaturedPath, getExploreServerPath } from '$pages/pathUtils'; import { useClientConfig } from '$hooks/useClientConfig'; @@ -28,6 +30,7 @@ import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback'; import { useNavToActivePathMapper } from '$hooks/useNavToActivePathMapper'; import { PageNav, PageNavContent, PageNavHeader } from '$components/page'; import { stopPropagation } from '$utils/keyboard'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function AddServer() { const mx = useMatrixClient(); @@ -88,7 +91,7 @@ export function AddServer() { Add Server setDialog(false)} radii="300"> - + } + before={} onClick={() => setDialog(true)} > @@ -178,7 +181,11 @@ export function Explore() { - + @@ -199,10 +206,10 @@ export function Explore() { - @@ -234,7 +241,11 @@ export function Explore() { - + diff --git a/src/app/pages/client/explore/Featured.tsx b/src/app/pages/client/explore/Featured.tsx index f3dba3425..06522ab59 100644 --- a/src/app/pages/client/explore/Featured.tsx +++ b/src/app/pages/client/explore/Featured.tsx @@ -1,4 +1,7 @@ -import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds'; +import { Box, IconButton, Scroll, Text } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; +import { LightbulbIcon } from '@phosphor-icons/react/dist/csr/Lightbulb'; import { useAtomValue } from 'jotai'; import { useClientConfig } from '$hooks/useClientConfig'; import { RoomCard, RoomCardGrid } from '$components/room-card'; @@ -16,6 +19,7 @@ import { RoomTopicViewer } from '$components/room-topic-viewer'; import { useRoomNavigate } from '$hooks/useRoomNavigate'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './style.css'; export function FeaturedRooms() { @@ -33,7 +37,7 @@ export function FeaturedRooms() { {(onBack) => ( - + )} @@ -47,7 +51,7 @@ export function FeaturedRooms() { } + icon={} title="Featured by Client" subTitle="Find and explore public rooms and spaces featured by client provider." /> @@ -122,7 +126,7 @@ export function FeaturedRooms() { alignItems="Center" gap="200" > - + No rooms or spaces featured by client provider. diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx index d58aa2a10..decd10fa3 100644 --- a/src/app/pages/client/explore/Server.tsx +++ b/src/app/pages/client/explore/Server.tsx @@ -12,9 +12,7 @@ import { Box, Button, Chip, - Icon, IconButton, - Icons, Input, Line, Menu, @@ -27,6 +25,13 @@ import { config, toRem, } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; +import { HardDriveIcon } from '@phosphor-icons/react/dist/csr/HardDrive'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { XIcon } from '@phosphor-icons/react/dist/csr/X'; import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; import FocusTrap from 'focus-trap-react'; import { useAtomValue } from 'jotai'; @@ -44,6 +49,7 @@ import { getMxIdServer } from '$utils/matrix'; import { stopPropagation } from '$utils/keyboard'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './style.css'; const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams => @@ -118,7 +124,7 @@ function Search({ active, loading, searchInputRef, onSearch, onReset }: Readonly active && loading ? ( ) : ( - + ) } after={ @@ -129,7 +135,7 @@ function Search({ active, loading, searchInputRef, onSearch, onReset }: Readonly size="400" radii="Pill" outlined - after={} + after={} onClick={onReset} > Clear @@ -237,7 +243,7 @@ function ThirdPartyProtocolsSelector({ radii="Pill" size="400" variant={instanceId ? 'Success' : 'SurfaceVariant'} - after={} + after={} > {selectedInstance?.desc ?? DEFAULT_INSTANCE_NAME} @@ -332,7 +338,7 @@ function LimitButton({ limit, onLimitChange }: Readonly) { radii="Pill" size="400" variant="SurfaceVariant" - after={} + after={} > {`Page Limit: ${limit}`} @@ -478,7 +484,7 @@ export function PublicRooms() { size="500" variant="Surface" radii="Pill" - before={} + before={} onClick={handleSearchClear} > {server} @@ -486,7 +492,9 @@ export function PublicRooms() { - {screenSize !== ScreenSize.Mobile && } + {screenSize !== ScreenSize.Mobile && ( + + )} Search @@ -500,14 +508,14 @@ export function PublicRooms() { {(onBack) => ( - + )} )} - {screenSize !== ScreenSize.Mobile && } + {screenSize !== ScreenSize.Mobile && } {server} @@ -546,7 +554,7 @@ export function PublicRooms() { aria-pressed={filter.value === serverSearchParams.type} before={ filter.value === serverSearchParams.type && ( - + ) } outlined @@ -650,7 +658,7 @@ export function PublicRooms() { alignItems="Center" gap="200" > - + No communities found! diff --git a/src/app/pages/client/home/CreateRoom.tsx b/src/app/pages/client/home/CreateRoom.tsx index 30dc6b52c..82e31527b 100644 --- a/src/app/pages/client/home/CreateRoom.tsx +++ b/src/app/pages/client/home/CreateRoom.tsx @@ -1,4 +1,6 @@ -import { Box, Icon, Icons, Scroll, IconButton } from 'folds'; +import { Box, Scroll, IconButton } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { HashIcon } from '@phosphor-icons/react/dist/csr/Hash'; import { Page, PageContent, @@ -11,6 +13,7 @@ import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; import { CreateRoomForm } from '$features/create-room'; import { useRoomNavigate } from '$hooks/useRoomNavigate'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function HomeCreateRoom() { const screenSize = useScreenSizeContext(); @@ -25,7 +28,7 @@ export function HomeCreateRoom() { {(onBack) => ( - + )} @@ -39,7 +42,7 @@ export function HomeCreateRoom() { } + icon={} title="Create Room" subTitle="Build a Room for Real-Time Conversations." /> diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx index c25d99e30..e0b0ef50a 100644 --- a/src/app/pages/client/home/Home.tsx +++ b/src/app/pages/client/home/Home.tsx @@ -4,9 +4,7 @@ import { Avatar, Box, Button, - Icon, IconButton, - Icons, Menu, MenuItem, PopOut, @@ -15,6 +13,12 @@ import { config, toRem, } from 'folds'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; +import { HashIcon } from '@phosphor-icons/react/dist/csr/Hash'; +import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useAtom, useAtomValue } from 'jotai'; import FocusTrap from 'focus-trap-react'; @@ -61,6 +65,7 @@ import { import { UseStateProvider } from '$components/UseStateProvider'; import { JoinAddressPrompt } from '$components/join-address-prompt'; import { RoomSearchParams } from '$pages/paths'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { useHomeRooms } from './useHomeRooms'; type HomeMenuProps = { @@ -84,7 +89,7 @@ const HomeMenu = forwardRef(({ requestClose }, re } + after={} radii="300" aria-disabled={!unread} > @@ -119,7 +124,7 @@ function HomeHeader() { - + @@ -155,7 +160,7 @@ function HomeEmpty() { return ( } + icon={} title={ No Rooms @@ -247,7 +252,7 @@ export function Home() { - + @@ -266,7 +271,7 @@ export function Home() { - + @@ -301,7 +306,11 @@ export function Home() { - + diff --git a/src/app/pages/client/home/Search.tsx b/src/app/pages/client/home/Search.tsx index 0deca3e14..73eaed69e 100644 --- a/src/app/pages/client/home/Search.tsx +++ b/src/app/pages/client/home/Search.tsx @@ -1,9 +1,12 @@ import { useRef } from 'react'; -import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds'; +import { Box, Text, Scroll, IconButton } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; import { Page, PageContent, PageContentCenter, PageHeader } from '$components/page'; import { MessageSearch } from '$features/message-search'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { useHomeRooms } from './useHomeRooms'; export function HomeSearch() { @@ -20,14 +23,16 @@ export function HomeSearch() { {(onBack) => ( - + )} )} - {screenSize !== ScreenSize.Mobile && } + {screenSize !== ScreenSize.Mobile && ( + + )} Message Search diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx index 661435513..85976cb5e 100644 --- a/src/app/pages/client/inbox/Inbox.tsx +++ b/src/app/pages/client/inbox/Inbox.tsx @@ -1,4 +1,6 @@ -import { Avatar, Box, Icon, Icons, Text } from 'folds'; +import { Avatar, Box, Text } from 'folds'; +import { ChatCircleDotsIcon } from '@phosphor-icons/react/dist/csr/ChatCircleDots'; +import { EnvelopeIcon } from '@phosphor-icons/react/dist/csr/Envelope'; import { useAtomValue } from 'jotai'; import { NavCategory, NavItem, NavItemContent, NavLink } from '$components/nav'; import { getInboxInvitesPath, getInboxNotificationsPath } from '$pages/pathUtils'; @@ -7,6 +9,7 @@ import { UnreadBadge } from '$components/unread-badge'; import { allInvitesAtom } from '$state/room-list/inviteList'; import { useNavToActivePathMapper } from '$hooks/useNavToActivePathMapper'; import { PageNav, PageNavContent, PageNavHeader } from '$components/page'; +import { PhosphorIcon } from '$components/PhosphorIcon'; function InvitesNavItem() { const invitesSelected = useInboxInvitesSelected(); @@ -24,7 +27,11 @@ function InvitesNavItem() { - + @@ -63,7 +70,11 @@ export function Inbox() { - + diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx index 8eeff6ad4..6f1c74bec 100644 --- a/src/app/pages/client/inbox/Invites.tsx +++ b/src/app/pages/client/inbox/Invites.tsx @@ -5,9 +5,7 @@ import { Box, Button, Chip, - Icon, IconButton, - Icons, Overlay, OverlayBackdrop, OverlayCenter, @@ -17,6 +15,13 @@ import { color, config, } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; +import { EnvelopeIcon } from '@phosphor-icons/react/dist/csr/Envelope'; +import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info'; +import { WarningIcon } from '@phosphor-icons/react/dist/csr/Warning'; import { useAtomValue } from 'jotai'; import { nicknamesAtom } from '$state/nicknames'; import { RoomTopicEventContent, MatrixClient, MatrixError, Room } from '$types/matrix-sdk'; @@ -67,6 +72,7 @@ import { useIgnoredUsers } from '$hooks/useIgnoredUsers'; import { useReportRoomSupported } from '$hooks/useReportRoomSupported'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const COMPACT_CARD_WIDTH = 548; @@ -371,7 +377,7 @@ function InviteFilters({ aria-selected={isKnown} outlined={!isKnown} onClick={() => onFilter(InviteFilter.Known)} - before={isKnown && } + before={isKnown && } after={ knownInvites.length > 0 && ( @@ -387,7 +393,7 @@ function InviteFilters({ aria-selected={isUnknown} outlined={!isUnknown} onClick={() => onFilter(InviteFilter.Unknown)} - before={isUnknown && } + before={isUnknown && } after={ unknownInvites.length > 0 && ( @@ -403,7 +409,7 @@ function InviteFilters({ aria-selected={isSpam} outlined={!isSpam} onClick={() => onFilter(InviteFilter.Spam)} - before={isSpam && } + before={isSpam && } after={ spamInvites.length > 0 && ( @@ -453,7 +459,7 @@ function KnownInvites({ } + icon={} title="No Invites" subTitle="When someone you share a room with sends you an invite, it’ll show up here." /> @@ -526,7 +532,7 @@ function UnknownInvites({ } + icon={} title="No Invites" subTitle="Invites from people outside your rooms will appear here." /> @@ -601,7 +607,7 @@ function SpamInvites({ > } + icon={} title={`${invites.length} Spam Invites`} subTitle="Some of the following invites may contain harmful content or have been sent by banned users." > @@ -659,7 +665,7 @@ function SpamInvites({ fill="Soft" radii="Pill" before={ - + } onClick={() => setShowInvites(!showInvites)} > @@ -685,7 +691,7 @@ function SpamInvites({ } + icon={} title="No Spam Invites" subTitle="Invites detected as spam appear here." /> @@ -760,14 +766,14 @@ export function Invites() { {(onBack) => ( - + )} )} - {screenSize !== ScreenSize.Mobile && } + {screenSize !== ScreenSize.Mobile && } Invites diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx index dc3d35297..16c5f008c 100644 --- a/src/app/pages/client/inbox/Notifications.tsx +++ b/src/app/pages/client/inbox/Notifications.tsx @@ -1,18 +1,12 @@ /* eslint-disable react/destructuring-assignment */ import { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { - Avatar, - Box, - Chip, - Header, - Icon, - IconButton, - Icons, - Scroll, - Text, - config, - toRem, -} from 'folds'; +import { Avatar, Box, Chip, Header, IconButton, Scroll, Text, config, toRem } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { ChatCircleIcon } from '@phosphor-icons/react/dist/csr/ChatCircle'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; +import { UserIcon } from '@phosphor-icons/react/dist/csr/User'; import { useSearchParams } from 'react-router-dom'; import { INotification, @@ -98,6 +92,7 @@ import { } from '$hooks/useMemberPowerTag'; import { useRoomCreatorsTag } from '$hooks/useRoomCreatorsTag'; import { useRoomCreators } from '$hooks/useRoomCreators'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type RoomNotificationsGroup = { roomId: string; @@ -431,7 +426,7 @@ function RoomNotificationsGroupComp({ size="50" roomType={room.getType()} joinRule={room.getJoinRule() ?? JoinRule.Restricted} - filled + weight="fill" /> )} /> @@ -446,7 +441,7 @@ function RoomNotificationsGroupComp({ variant="Primary" radii="Pill" onClick={handleMarkAsRead} - before={} + before={} > Mark as Read @@ -508,7 +503,9 @@ function RoomNotificationsGroupComp({ : undefined } alt={displayName} - renderFallback={() => } + renderFallback={() => ( + + )} /> @@ -648,14 +645,14 @@ export function Notifications() { {(onBack) => ( - + )} )} - {screenSize !== ScreenSize.Mobile && } + {screenSize !== ScreenSize.Mobile && } Notification Messages @@ -677,7 +674,7 @@ export function Notifications() { onClick={() => setOnlyHighlighted(false)} variant={onlyHighlight ? 'Surface' : 'Success'} aria-pressed={!onlyHighlight} - before={!onlyHighlight && } + before={!onlyHighlight && } outlined > All Notifications @@ -686,7 +683,7 @@ export function Notifications() { onClick={() => setOnlyHighlighted(true)} variant={onlyHighlight ? 'Success' : 'Surface'} aria-pressed={onlyHighlight} - before={onlyHighlight && } + before={onlyHighlight && } outlined > Highlighted @@ -702,7 +699,7 @@ export function Notifications() { size="300" aria-label="Scroll to Top" > - +
)} {isActive && ( - + )} {isBusy ? ( @@ -349,7 +352,7 @@ export function AccountSwitcherTab() { } + before={} onClick={handleAddAccount} > Add Account @@ -358,7 +361,7 @@ export function AccountSwitcherTab() { } + before={} onClick={handleOpenSettings} > Settings diff --git a/src/app/pages/client/sidebar/CreateTab.tsx b/src/app/pages/client/sidebar/CreateTab.tsx index 0d93621a9..695045340 100644 --- a/src/app/pages/client/sidebar/CreateTab.tsx +++ b/src/app/pages/client/sidebar/CreateTab.tsx @@ -1,5 +1,8 @@ import { MouseEventHandler, useState } from 'react'; -import { Box, config, Icon, Icons, Menu, PopOut, RectCords, Text } from 'folds'; +import { Box, config, Menu, PopOut, RectCords, Text } from 'folds'; +import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link'; +import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus'; +import { UsersThreeIcon } from '@phosphor-icons/react/dist/csr/UsersThree'; import FocusTrap from 'focus-trap-react'; import { useNavigate } from 'react-router-dom'; import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '$components/sidebar'; @@ -16,6 +19,7 @@ import { import { useCreateSelected } from '$hooks/router/useCreateSelected'; import { JoinAddressPrompt } from '$components/join-address-prompt'; import { RoomSearchParams } from '$pages/paths'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function CreateTab() { const createSelected = useCreateSelected(); @@ -72,7 +76,7 @@ export function CreateTab() { type="button" onClick={handleCreateSpace} > - }> + }> Create Space Build a space for your community. @@ -89,7 +93,7 @@ export function CreateTab() { type="button" onClick={handleJoinWithAddress} > - }> + }> Join with Address Become a part of existing community. @@ -108,7 +112,7 @@ export function CreateTab() { outlined onClick={handleMenu} > - + {joinAddress && ( (({ requestClose } } + after={} radii="300" aria-disabled={!unread} > @@ -110,7 +113,7 @@ export function DirectTab() { onClick={handleDirectClick} onContextMenu={handleContextMenu} > - + )} diff --git a/src/app/pages/client/sidebar/ExploreTab.tsx b/src/app/pages/client/sidebar/ExploreTab.tsx index ee65975ed..8878e6abc 100644 --- a/src/app/pages/client/sidebar/ExploreTab.tsx +++ b/src/app/pages/client/sidebar/ExploreTab.tsx @@ -1,4 +1,4 @@ -import { Icon, Icons } from 'folds'; +import { CompassIcon } from '@phosphor-icons/react/dist/csr/Compass'; import { useNavigate } from 'react-router-dom'; import { useAtomValue } from 'jotai'; import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '$components/sidebar'; @@ -14,6 +14,7 @@ import { useMatrixClient } from '$hooks/useMatrixClient'; import { getMxIdServer } from '$utils/matrix'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { useNavToActivePathAtom } from '$state/hooks/navToActivePath'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function ExploreTab() { const mx = useMatrixClient(); @@ -54,7 +55,7 @@ export function ExploreTab() { {(triggerRef) => ( - + )} diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx index 7401e4233..67b671e37 100644 --- a/src/app/pages/client/sidebar/HomeTab.tsx +++ b/src/app/pages/client/sidebar/HomeTab.tsx @@ -1,6 +1,8 @@ import { MouseEventHandler, forwardRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds'; +import { Box, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; +import { HouseIcon } from '@phosphor-icons/react/dist/csr/House'; import { useAtomValue } from 'jotai'; import FocusTrap from 'focus-trap-react'; import { useOrphanRooms } from '$state/hooks/roomList'; @@ -26,6 +28,7 @@ import { stopPropagation } from '$utils/keyboard'; import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { useHomeRooms } from '$pages/client/home/useHomeRooms'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type HomeMenuProps = { requestClose: () => void; @@ -48,7 +51,7 @@ const HomeMenu = forwardRef(({ requestClose }, re } + after={} radii="300" aria-disabled={!unread} > @@ -104,7 +107,7 @@ export function HomeTab() { onClick={handleHomeClick} onContextMenu={handleContextMenu} > - + )} diff --git a/src/app/pages/client/sidebar/InboxTab.tsx b/src/app/pages/client/sidebar/InboxTab.tsx index 9488d1029..02aaea4db 100644 --- a/src/app/pages/client/sidebar/InboxTab.tsx +++ b/src/app/pages/client/sidebar/InboxTab.tsx @@ -1,5 +1,6 @@ import { useNavigate } from 'react-router-dom'; -import { Icon, Icons, toRem } from 'folds'; +import { toRem } from 'folds'; +import { TrayIcon } from '@phosphor-icons/react/dist/csr/Tray'; import { useAtomValue } from 'jotai'; import { SidebarAvatar, @@ -18,6 +19,7 @@ import { useInboxSelected } from '$hooks/router/useInbox'; import { UnreadBadge } from '$components/unread-badge'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { useNavToActivePathAtom } from '$state/hooks/navToActivePath'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function InboxTab() { const screenSize = useScreenSizeContext(); @@ -47,7 +49,7 @@ export function InboxTab() { {(triggerRef) => ( - + )} diff --git a/src/app/pages/client/sidebar/SearchTab.tsx b/src/app/pages/client/sidebar/SearchTab.tsx index c3ef38c59..f86278712 100644 --- a/src/app/pages/client/sidebar/SearchTab.tsx +++ b/src/app/pages/client/sidebar/SearchTab.tsx @@ -1,7 +1,8 @@ -import { Icon, Icons } from 'folds'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; import { useAtom } from 'jotai'; import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '$components/sidebar'; import { searchModalAtom } from '$state/searchModal'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function SearchTab() { const [opened, setOpen] = useAtom(searchModalAtom); @@ -13,7 +14,7 @@ export function SearchTab() { {(triggerRef) => ( - + )} diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx index c751f00cb..8b599c230 100644 --- a/src/app/pages/client/sidebar/SpaceTabs.tsx +++ b/src/app/pages/client/sidebar/SpaceTabs.tsx @@ -12,9 +12,7 @@ import { import { useNavigate } from 'react-router-dom'; import { Box, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -24,6 +22,12 @@ import { config, toRem, } from 'folds'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; +import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear'; +import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link'; +import { PushPinIcon } from '@phosphor-icons/react/dist/csr/PushPin'; +import { UserPlusIcon } from '@phosphor-icons/react/dist/csr/UserPlus'; import { useAtom, useAtomValue } from 'jotai'; import { Room } from '$types/matrix-sdk'; import { @@ -93,6 +97,7 @@ import { useOpenSpaceSettings } from '$state/hooks/spaceSettings'; import { useRoomCreators } from '$hooks/useRoomCreators'; import { useRoomPermissions } from '$hooks/useRoomPermissions'; import { InviteUserPrompt } from '$components/invite-user-prompt'; +import { PhosphorIcon } from '$components/PhosphorIcon'; type SpaceMenuProps = { room: Room; @@ -161,7 +166,7 @@ const SpaceMenu = forwardRef( } + after={} radii="300" disabled={!unread} > @@ -174,7 +179,7 @@ const SpaceMenu = forwardRef( size="300" radii="300" onClick={handleUnpin} - after={} + after={} > Unpin @@ -189,7 +194,7 @@ const SpaceMenu = forwardRef( variant="Primary" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={invitePrompt} disabled={!canInvite} @@ -201,7 +206,7 @@ const SpaceMenu = forwardRef( } + after={} radii="300" > @@ -211,7 +216,7 @@ const SpaceMenu = forwardRef( } + after={} radii="300" > @@ -533,7 +538,7 @@ function OpenedSpaceFolder({ folder, onClose, children }: Readonly - + {children} diff --git a/src/app/pages/client/sidebar/UnverifiedTab.tsx b/src/app/pages/client/sidebar/UnverifiedTab.tsx index a6c446b44..e7d8b65d7 100644 --- a/src/app/pages/client/sidebar/UnverifiedTab.tsx +++ b/src/app/pages/client/sidebar/UnverifiedTab.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; -import { Badge, color, Icon, Icons, Text, toRem } from 'folds'; +import { Badge, color, Text, toRem } from 'folds'; +import { ShieldIcon } from '@phosphor-icons/react/dist/csr/Shield'; import { SidebarAvatar, SidebarItem, @@ -16,6 +17,7 @@ import { import { useCrossSigningActive } from '$hooks/useCrossSigning'; import { Modal500 } from '$components/Modal500'; import { Settings, SettingsPages } from '$features/settings'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import * as css from './UnverifiedTab.css'; function UnverifiedIndicator() { @@ -58,9 +60,9 @@ function UnverifiedIndicator() { outlined onClick={() => setSettings(true)} > - )} diff --git a/src/app/pages/client/space/Search.tsx b/src/app/pages/client/space/Search.tsx index c2b4c15ce..c5caddaf3 100644 --- a/src/app/pages/client/space/Search.tsx +++ b/src/app/pages/client/space/Search.tsx @@ -1,5 +1,7 @@ import { useRef } from 'react'; -import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds'; +import { Box, Text, Scroll, IconButton } from 'folds'; +import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; import { useAtomValue } from 'jotai'; import { Page, PageContent, PageContentCenter, PageHeader } from '$components/page'; import { MessageSearch } from '$features/message-search'; @@ -11,6 +13,7 @@ import { roomToParentsAtom } from '$state/room/roomToParents'; import { useMatrixClient } from '$hooks/useMatrixClient'; import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize'; import { BackRouteHandler } from '$components/BackRouteHandler'; +import { PhosphorIcon } from '$components/PhosphorIcon'; export function SpaceSearch() { const mx = useMatrixClient(); @@ -35,14 +38,16 @@ export function SpaceSearch() { {(onBack) => ( - + )} )} - {screenSize !== ScreenSize.Mobile && } + {screenSize !== ScreenSize.Mobile && ( + + )} Message Search diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx index 4eb7b117c..f91b8b7cb 100644 --- a/src/app/pages/client/space/Space.tsx +++ b/src/app/pages/client/space/Space.tsx @@ -13,9 +13,7 @@ import { Avatar, Box, Button, - Icon, IconButton, - Icons, Line, Menu, MenuItem, @@ -27,6 +25,16 @@ import { config, toRem, } from 'folds'; +import { ArrowUUpLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowUUpLeft'; +import { ChecksIcon } from '@phosphor-icons/react/dist/csr/Checks'; +import { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/csr/DotsThreeVertical'; +import { FlagIcon } from '@phosphor-icons/react/dist/csr/Flag'; +import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear'; +import { LinkIcon } from '@phosphor-icons/react/dist/csr/Link'; +import { LockIcon } from '@phosphor-icons/react/dist/csr/Lock'; +import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass'; +import { TerminalIcon } from '@phosphor-icons/react/dist/csr/Terminal'; +import { UserPlusIcon } from '@phosphor-icons/react/dist/csr/UserPlus'; import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual'; import FocusTrap from 'focus-trap-react'; import { useNavigate } from 'react-router-dom'; @@ -85,6 +93,7 @@ import { lastVisitedRoomIdAtom } from '$state/room/lastRoom'; import { SwipeableOverlayWrapper } from '$components/SwipeableOverlayWrapper'; import { useCallEmbed } from '$hooks/useCallEmbed'; import { createDebugLogger } from '$utils/debugLogger'; +import { PhosphorIcon } from '$components/PhosphorIcon'; const debugLog = createDebugLogger('Space'); @@ -157,7 +166,7 @@ const SpaceMenu = forwardRef(({ room, requestClo } + after={} radii="300" disabled={!unread} > @@ -173,7 +182,7 @@ const SpaceMenu = forwardRef(({ room, requestClo variant="Primary" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={invitePrompt} disabled={!canInvite} @@ -185,7 +194,7 @@ const SpaceMenu = forwardRef(({ room, requestClo } + after={} radii="300" > @@ -195,7 +204,7 @@ const SpaceMenu = forwardRef(({ room, requestClo } + after={} radii="300" > @@ -206,7 +215,7 @@ const SpaceMenu = forwardRef(({ room, requestClo } + after={} radii="300" > @@ -225,7 +234,7 @@ const SpaceMenu = forwardRef(({ room, requestClo variant="Critical" fill="None" size="300" - after={} + after={} radii="300" aria-pressed={promptLeave} > @@ -274,11 +283,11 @@ function SpaceHeader() { {spaceName} - {joinRules?.join_rule !== JoinRule.Public && } + {joinRules?.join_rule !== JoinRule.Public && } - + @@ -729,7 +738,11 @@ export function Space() { - + @@ -745,7 +758,11 @@ export function Space() { - + diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx index 1a351572f..401a2920f 100644 --- a/src/app/plugins/react-custom-html-parser.tsx +++ b/src/app/plugins/react-custom-html-parser.tsx @@ -17,7 +17,10 @@ import { } from 'html-react-parser'; import { MatrixClient } from '$types/matrix-sdk'; import classNames from 'classnames'; -import { Box, Chip, config, Header, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds'; +import { Box, Chip, config, Header, IconButton, Scroll, Text, toRem } from 'folds'; +import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown'; +import { CaretUpIcon } from '@phosphor-icons/react/dist/csr/CaretUp'; +import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check'; import { IntermediateRepresentation, OptFn, Opts as LinkifyOpts } from 'linkifyjs'; import Linkify from 'linkify-react'; import { ErrorBoundary } from 'react-error-boundary'; @@ -37,6 +40,7 @@ import { onEnterOrSpace } from '$utils/keyboard'; import { copyToClipboard } from '$utils/dom'; import { useTimeoutToggle } from '$hooks/useTimeoutToggle'; import { ClientSideHoverFreeze } from '$components/ClientSideHoverFreeze'; +import { PhosphorIcon } from '$components/PhosphorIcon'; import { parseMatrixToRoom, parseMatrixToRoomEvent, @@ -288,7 +292,7 @@ export function CodeBlock({ fill="None" radii="Pill" onClick={handleCopy} - before={copied && } + before={copied && } > {copied ? 'Copied' : 'Copy'} @@ -301,7 +305,7 @@ export function CodeBlock({ onClick={toggleExpand} aria-label={expanded ? 'Collapse' : 'Expand'} > - + )} diff --git a/src/app/utils/common.ts b/src/app/utils/common.ts index fb1e0b16b..0e56d1219 100644 --- a/src/app/utils/common.ts +++ b/src/app/utils/common.ts @@ -1,4 +1,8 @@ -import { IconName, IconSrc } from 'folds'; +import { ComponentType } from 'react'; +import { PlayIcon } from '@phosphor-icons/react/dist/csr/Play'; +import { VideoCameraIcon } from '@phosphor-icons/react/dist/csr/VideoCamera'; +import { ImageIcon } from '@phosphor-icons/react/dist/csr/Image'; +import type { IconProps } from '@phosphor-icons/react'; export const bytesToSize = (bytes: number): string => { const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; @@ -31,18 +35,18 @@ export const secondsToMinutesAndSeconds = (seconds: number): string => { return `${mm}:${ss < 10 ? '0' : ''}${ss}`; }; -export const getFileTypeIcon = (icons: Record, fileType: string): IconSrc => { +export const getFileTypeIcon = (fileType: string): ComponentType => { const type = fileType.toLowerCase(); if (type.startsWith('audio')) { - return icons.Play; + return PlayIcon; } if (type.startsWith('video')) { - return icons.Vlc; + return VideoCameraIcon; } if (type.startsWith('image')) { - return icons.Photo; + return ImageIcon; } - return icons.File; + return ImageIcon; }; export const fulfilledPromiseSettledResult = (prs: PromiseSettledResult[]): T[] => diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts index 34fb527d8..7be3759a8 100644 --- a/src/app/utils/room.ts +++ b/src/app/utils/room.ts @@ -1,5 +1,3 @@ -import { IconName, IconSrc } from 'folds'; - import { EventTimeline, EventTimelineSet, @@ -31,6 +29,12 @@ import { UnreadInfo, } from '$types/matrix/room'; import * as Sentry from '@sentry/react'; +import type { IconProps } from '@phosphor-icons/react'; +import { HashIcon } from '@phosphor-icons/react/dist/csr/Hash'; +import { SpeakerHighIcon } from '@phosphor-icons/react/dist/csr/SpeakerHigh'; +import { StarFourIcon } from '@phosphor-icons/react/dist/csr/StarFour'; +import { LockSimpleIcon } from '@phosphor-icons/react/dist/csr/LockSimple'; +import { ComponentType } from 'react'; export const getStateEvent = ( room: Room, @@ -418,44 +422,40 @@ export const getUnreadInfos = (mx: MatrixClient, options?: UnreadInfoOptions): U return unreadInfos; }; -export const getRoomIconSrc = ( - icons: Record, - roomType?: string, - joinRule?: JoinRule -): IconSrc => { +export const getRoomIcon = (roomType?: string, joinRule?: JoinRule): ComponentType => { if (roomType === RoomType.Space) { - if (joinRule === JoinRule.Public) return icons.SpaceGlobe; + if (joinRule === JoinRule.Public) return StarFourIcon; if ( joinRule === JoinRule.Invite || joinRule === JoinRule.Knock || joinRule === JoinRule.Private ) { - return icons.SpaceLock; + return LockSimpleIcon; } - return icons.Space; + return StarFourIcon; } if (roomType === RoomType.Call) { - if (joinRule === JoinRule.Public) return icons.VolumeHighGlobe; + if (joinRule === JoinRule.Public) return SpeakerHighIcon; if ( joinRule === JoinRule.Invite || joinRule === JoinRule.Knock || joinRule === JoinRule.Private ) { - return icons.VolumeHighLock; + return LockSimpleIcon; } - return icons.VolumeHigh; + return SpeakerHighIcon; } - if (joinRule === JoinRule.Public) return icons.HashGlobe; + if (joinRule === JoinRule.Public) return HashIcon; if ( joinRule === JoinRule.Invite || joinRule === JoinRule.Knock || joinRule === JoinRule.Private ) { - return icons.HashLock; + return LockSimpleIcon; } - return icons.Hash; + return HashIcon; }; export const getRoomAvatarUrl = (