diff --git a/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx b/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx index 6d381636a4..d786183651 100644 --- a/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx +++ b/examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx @@ -8,13 +8,13 @@ import { IconArrowRight, Button, DialogAnchor, - IconArrowRotateRightLeftRepeatRefresh, + IconRefresh, IconArrowUp, - IconCheckmark2, - IconCircleInfoTooltip, + IconCheckmark, + IconInfo, IconClock, - IconCrossMedium, - IconExclamationCircle, + IconXmark, + IconExclamationMark, IconExclamationTriangle, IconPlusSmall, NumericInput, @@ -50,10 +50,10 @@ const clamp = (value: number, min: number, max: number) => { const severityIcons: Partial< Record> > = { - error: IconExclamationCircle, - info: IconCircleInfoTooltip, - loading: IconArrowRotateRightLeftRepeatRefresh, - success: IconCheckmark2, + error: IconExclamationMark, + info: IconInfo, + loading: IconRefresh, + success: IconCheckmark, warning: IconExclamationTriangle, }; @@ -148,7 +148,7 @@ const NotificationChipList = ({ size='xs' variant='secondary' > - + ); diff --git a/examples/vite/src/AppSettings/AppSettings.tsx b/examples/vite/src/AppSettings/AppSettings.tsx index 52cc220c57..ad10b06f63 100644 --- a/examples/vite/src/AppSettings/AppSettings.tsx +++ b/examples/vite/src/AppSettings/AppSettings.tsx @@ -3,8 +3,8 @@ import { ChatViewSelectorButton, GlobalModal, IconBubble3ChatMessage, - IconBellNotification, - IconEmojiSmile, + IconBell, + IconEmoji, IconLightBulbSimple, IconSettingsGear2, } from 'stream-chat-react'; @@ -18,9 +18,9 @@ import { appSettingsStore, useAppSettingsState } from './state'; type TabId = 'notifications' | 'reactions' | 'sidebar'; const tabConfig: { Icon: ComponentType; id: TabId; title: string }[] = [ - { Icon: IconBellNotification, id: 'notifications', title: 'Notifications' }, + { Icon: IconBell, id: 'notifications', title: 'Notifications' }, { Icon: IconBubble3ChatMessage, id: 'sidebar', title: 'Sidebar' }, - { Icon: IconEmojiSmile, id: 'reactions', title: 'Reactions' }, + { Icon: IconEmoji, id: 'reactions', title: 'Reactions' }, ]; const SidebarThemeToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => { diff --git a/src/components/Attachment/Geolocation.tsx b/src/components/Attachment/Geolocation.tsx index adefafdeb1..a10651a727 100644 --- a/src/components/Attachment/Geolocation.tsx +++ b/src/components/Attachment/Geolocation.tsx @@ -5,7 +5,7 @@ import React from 'react'; import type { Coords, SharedLocationResponse } from 'stream-chat'; import { useChatContext, useTranslationContext } from '../../context'; import { ExternalLinkIcon } from './icons'; -import { IconMapPin } from '../Icons'; +import { IconLocation } from '../Icons'; import { Button } from '../Button'; export type GeolocationMapProps = Coords; @@ -105,7 +105,7 @@ const DefaultGeolocationAttachmentMapPlaceholder = ({ className='str-chat__message-attachment-geolocation__placeholder' data-testid='geolocation-attachment-map-placeholder' > - + { className='str-chat__message-attachment-card--source-link' data-testid='card-source-link' > - +
{url}
)} diff --git a/src/components/Attachment/LinkPreview/CardAudio.tsx b/src/components/Attachment/LinkPreview/CardAudio.tsx index 9401ba165b..1e7458d7db 100644 --- a/src/components/Attachment/LinkPreview/CardAudio.tsx +++ b/src/components/Attachment/LinkPreview/CardAudio.tsx @@ -4,7 +4,7 @@ import { useStateStore } from '../../../store'; import { PlayButton } from '../../Button'; import type { AudioProps } from '../Audio'; import React from 'react'; -import { IconChainLink } from '../../Icons'; +import { IconLink } from '../../Icons'; import { SafeAnchor } from '../../SafeAnchor'; import type { CardProps } from './Card'; @@ -26,7 +26,7 @@ const SourceLink = ({ className='str-chat__message-attachment-card--source-link' data-testid='card-source-link' > - +
- +
)} diff --git a/src/components/Attachment/__tests__/__snapshots__/Card.test.tsx.snap b/src/components/Attachment/__tests__/__snapshots__/Card.test.tsx.snap index 0626b4f765..5bd0464c02 100644 --- a/src/components/Attachment/__tests__/__snapshots__/Card.test.tsx.snap +++ b/src/components/Attachment/__tests__/__snapshots__/Card.test.tsx.snap @@ -126,12 +126,17 @@ exports[`Card > (4) should render 'unable-to-display card' if attachment type is data-testid="card-source-link" >
(5) should render 'unable-to-display card' if attachment type is data-testid="card-source-link" >
(6) should render 'unable-to-display card' if attachment type is data-testid="card-source-link" >
(7) should render 'audio with caption using og_scrape_ur…' if data-testid="card-source-link" >
(8) should render 'video with caption using og_scrape_ur…' if data-testid="card-source-link" >
(9) should render 'image with caption using og_scrape_ur…' if data-testid="card-source-link" >
(10) should render 'audio without title' if attachment type is ' data-testid="card-source-link" >
(11) should render 'video without title' if attachment type is ' data-testid="card-source-link" >
(12) should render 'image without title' if attachment type is ' data-testid="card-source-link" >
(13) should render 'audio without title and with caption …' if data-testid="card-source-link" >
(14) should render 'video without title and with caption …' if data-testid="card-source-link" >
(15) should render 'image without title and with caption …' if data-testid="card-source-link" >
(16) should render 'audio widget with title & text in Car…' if data-testid="card-source-link" >
(17) should render 'video widget in header and title & te…' if data-testid="card-source-link" >
(18) should render 'card with title and text only and wit…' if data-testid="card-source-link" >
(19) should render 'image loaded from thumb_url not audio…' if data-testid="card-source-link" >
(20) should render 'image loaded from thumb_url not video…' if data-testid="card-source-link" >
(21) should render 'image loaded from thumb_url' if attachment t data-testid="card-source-link" >
(22) should render 'image loaded from image_url not audio…' if data-testid="card-source-link" >
(23) should render 'image loaded from image_url not video…' if data-testid="card-source-link" >
(24) should render 'image loaded from image_url' if attachment t data-testid="card-source-link" >
(25) should render 'audio widget with image loaded from t…' if data-testid="card-source-link" >
(26) should render 'video widget in header and title & te…' if data-testid="card-source-link" >
(27) should render 'content part with title and text only…' if data-testid="card-source-link" >
(28) should render 'content part with title and text only…' if data-testid="card-source-link" >
)} - {!sizeAwareInitials.length && } + {!sizeAwareInitials.length && } )}
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index cf748661b3..66fe564f76 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx'; import React, { type ComponentProps } from 'react'; -import { IconExclamation } from '../Icons'; +import { IconExclamationMarkFill } from '../Icons'; export type BadgeVariant = | 'default' @@ -49,6 +49,6 @@ export const ErrorBadge = ({ ...rest }: Omit) => ( - + ); diff --git a/src/components/BaseImage/ImagePlaceholder.tsx b/src/components/BaseImage/ImagePlaceholder.tsx index 700236ea26..af2b99c4d9 100644 --- a/src/components/BaseImage/ImagePlaceholder.tsx +++ b/src/components/BaseImage/ImagePlaceholder.tsx @@ -1,7 +1,7 @@ import React from 'react'; import clsx from 'clsx'; import { useTranslationContext } from '../../context/TranslationContext'; -import { IconImages1Alt } from '../Icons'; +import { IconImage } from '../Icons'; export type ImagePlaceholderProps = { className?: string; @@ -16,7 +16,7 @@ export const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => { data-testid='str-chat__base-image-placeholder' role='img' > - +
); }; diff --git a/src/components/Button/PlayButton.tsx b/src/components/Button/PlayButton.tsx index 4f83c20bde..7090b8b26b 100644 --- a/src/components/Button/PlayButton.tsx +++ b/src/components/Button/PlayButton.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button } from './Button'; import type { ComponentProps } from 'react'; import clsx from 'clsx'; -import { IconPause, IconPlaySolid } from '../Icons'; +import { IconPauseFill, IconPlayFill } from '../Icons'; export type PlayButtonProps = ComponentProps<'button'> & { isPlaying: boolean; @@ -18,6 +18,6 @@ export const PlayButton = ({ className, isPlaying, ...props }: PlayButtonProps) variant='secondary' {...props} > - {isPlaying ? : } + {isPlaying ? : } ); diff --git a/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx b/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx index ac4a6769a1..b563b8fd4d 100644 --- a/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx +++ b/src/components/ChannelListItem/ChannelListItemActionButtons.defaults.tsx @@ -12,10 +12,10 @@ import { useChannelListItemContext } from './ChannelListItem'; import { Button } from '../Button'; import { IconArchive, - IconArrowBoxLeft, - IconCircleBanSign, - IconDotGrid1x3Horizontal, + IconLeave, + IconMore, IconMute, + IconNoSign, IconPin, } from '../Icons'; import { useIsChannelMuted } from './hooks/useIsChannelMuted'; @@ -143,7 +143,7 @@ export const defaultChannelActionSet: ChannelActionItem[] = [ size='sm' variant='secondary' > - + ); }), @@ -241,7 +241,7 @@ export const defaultChannelActionSet: ChannelActionItem[] = [ { try { setInProgress(true); @@ -356,7 +356,7 @@ export const defaultChannelActionSet: ChannelActionItem[] = [ { e.stopPropagation(); try { diff --git a/src/components/ChatView/ChatView.tsx b/src/components/ChatView/ChatView.tsx index 0d299fb7db..2abe9aa732 100644 --- a/src/components/ChatView/ChatView.tsx +++ b/src/components/ChatView/ChatView.tsx @@ -11,10 +11,10 @@ import React, { import { Button, type ButtonProps } from '../Button'; import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator'; import { - IconBubble2ChatMessage, - IconBubble2Solid, - IconBubbleText6ChatMessage, IconBubbleText6SolidChatMessage, + IconMessageBubble, + IconMessageBubbleFill, + IconThread, } from '../Icons'; import { ThreadProvider } from '../Threads'; import { UnreadCountBadge } from '../Threads/UnreadCountBadge'; @@ -243,9 +243,9 @@ export const ChatViewChannelsSelectorButton = ({ const isActive = activeChatView === 'channels'; return ( { @@ -275,7 +275,7 @@ export const ChatViewThreadsSelectorButton = ({ { @@ -285,7 +285,7 @@ export const ChatViewThreadsSelectorButton = ({ text={t('Threads')} > - {isActive ? : } + {isActive ? : } ); diff --git a/src/components/Dialog/components/Callout.tsx b/src/components/Dialog/components/Callout.tsx index 822a50be9a..55e62f1609 100644 --- a/src/components/Dialog/components/Callout.tsx +++ b/src/components/Dialog/components/Callout.tsx @@ -3,7 +3,7 @@ import { DialogAnchor, type DialogAnchorProps } from '../service'; import { useDialogIsOpen } from '../hooks'; import { Button } from '../../Button'; import clsx from 'clsx'; -import { IconCrossMedium } from '../../Icons'; +import { IconXmark } from '../../Icons'; import { useComponentContext } from '../../../context'; export type CalloutProps = PropsWithChildren< @@ -61,7 +61,7 @@ const DefaultCalloutDialog = ({ children, className, onClose }: CalloutDialogPro size='sm' variant='secondary' > - +
); diff --git a/src/components/Dialog/components/Prompt.tsx b/src/components/Dialog/components/Prompt.tsx index b31e6cb262..e3abe44cf7 100644 --- a/src/components/Dialog/components/Prompt.tsx +++ b/src/components/Dialog/components/Prompt.tsx @@ -1,7 +1,7 @@ import React, { type ComponentProps, type PropsWithChildren } from 'react'; import clsx from 'clsx'; import { Button, type ButtonProps } from '../../Button'; -import { IconCrossMedium } from '../../Icons'; +import { IconXmark } from '../../Icons'; const PromptRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (
@@ -33,7 +33,7 @@ const PromptHeader = ({ className, close, description, title }: PromptHeaderProp size='sm' variant='secondary' > - + )}
diff --git a/src/components/Dialog/components/Viewer.tsx b/src/components/Dialog/components/Viewer.tsx index aaac02bcd4..39b6cd99fd 100644 --- a/src/components/Dialog/components/Viewer.tsx +++ b/src/components/Dialog/components/Viewer.tsx @@ -1,7 +1,7 @@ import React, { type ComponentProps, type PropsWithChildren } from 'react'; import clsx from 'clsx'; import { Button, type ButtonProps } from '../../Button'; -import { IconArrowLeft, IconCrossMedium } from '../../Icons'; +import { IconArrowLeft, IconXmark } from '../../Icons'; const ViewerRoot = ({ children, className, ...props }: ComponentProps<'div'>) => (
@@ -52,7 +52,7 @@ const ViewerHeader = ({ size='sm' variant='secondary' > - + )}
diff --git a/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx b/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx index ab97550cd3..1f18a4faa3 100644 --- a/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx +++ b/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useTranslationContext } from '../../context/TranslationContext'; -import { IconBubble2ChatMessage, IconBubbles } from '../Icons'; +import { IconMessageBubble, IconMessageBubbles } from '../Icons'; export type EmptyStateIndicatorProps = { /** List Type: channel | message */ @@ -20,7 +20,7 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => { const text = t('No conversations yet'); return (
- +

{text}

); @@ -30,7 +30,7 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => { const text = t(messageText || 'Send a message to start the conversation'); return (
- +

{text}

diff --git a/src/components/Form/TextInput.tsx b/src/components/Form/TextInput.tsx index 1ef1add1b7..711648286c 100644 --- a/src/components/Form/TextInput.tsx +++ b/src/components/Form/TextInput.tsx @@ -2,7 +2,7 @@ import clsx from 'clsx'; import React, { forwardRef } from 'react'; import type { ComponentProps, ReactNode } from 'react'; import { useStableId } from '../UtilityComponents/useStableId'; -import { IconCheckmark2, IconExclamationCircle } from '../Icons'; +import { IconCheckmark, IconExclamationMark } from '../Icons'; export type TextInputVariant = 'outline' | 'ghost'; @@ -19,11 +19,11 @@ export type TextInputProps = Omit, 'className'> & { message?: ReactNode; /** Error message below the input; shown when error is true, with errorMessageIcon */ errorMessage?: ReactNode; - /** Icon shown before error message (default: IconExclamationCircle) */ + /** Icon shown before error message (default: IconExclamationMark) */ errorMessageIcon?: ReactNode; /** Success message below the input; shown when provided, with successMessageIcon */ successMessage?: ReactNode; - /** Icon shown before success message (default: IconCheckmark2) */ + /** Icon shown before success message (default: IconCheckmark) */ successMessageIcon?: ReactNode; /** When true, shows error border and error message styling */ error?: boolean; @@ -66,14 +66,14 @@ export const TextInput = forwardRef(function T const messageContent = displayError ? ( <> - {errorMessageIcon ?? } + {errorMessageIcon ?? } {errorMessage ?? message} ) : displaySuccess ? ( <> - {successMessageIcon ?? } + {successMessageIcon ?? } {successMessage} diff --git a/src/components/Gallery/GalleryHeader.tsx b/src/components/Gallery/GalleryHeader.tsx index 8aa31fda95..6087785797 100644 --- a/src/components/Gallery/GalleryHeader.tsx +++ b/src/components/Gallery/GalleryHeader.tsx @@ -3,7 +3,7 @@ import { sanitizeUrl } from '@braintree/sanitize-url'; import { type GalleryItem } from './GalleryContext'; import { Button } from '../Button'; -import { IconArrowDownCircle, IconCrossMedium } from '../Icons'; +import { IconArrowDownCircle, IconXmark } from '../Icons'; import { MessageTimestamp as DefaultMessageTimestamp } from '../Message/MessageTimestamp'; import { ModalContext, @@ -69,7 +69,7 @@ export const GalleryHeader = ({ currentItem }: GalleryHeaderProps) => { onClick={modalContext.close} title={t('Close')} > - + ) : null}
diff --git a/src/components/Gallery/__tests__/__snapshots__/Image.test.tsx.snap b/src/components/Gallery/__tests__/__snapshots__/Image.test.tsx.snap index 33b17feda6..dde1a69373 100644 --- a/src/components/Gallery/__tests__/__snapshots__/Image.test.tsx.snap +++ b/src/components/Gallery/__tests__/__snapshots__/Image.test.tsx.snap @@ -22,23 +22,23 @@ exports[`Image > should render component with default props 1`] = ` data-testid="str-chat__modal-gallery__image-loading-overlay" >
@@ -81,11 +81,11 @@ exports[`Image > should render component with default props 1`] = ` > should render component with default props 1`] = ` >
@@ -144,11 +149,16 @@ exports[`Image > should render component with default props 1`] = ` >
diff --git a/src/components/Icons/BaseIcon.tsx b/src/components/Icons/BaseIcon.tsx index 4b116a46e1..abae14e47c 100644 --- a/src/components/Icons/BaseIcon.tsx +++ b/src/components/Icons/BaseIcon.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; export const BaseIcon = ({ className, ...props }: ComponentProps<'svg'>) => ( ) => ( - - - - - - - - - - - - - - - + + + + + + + + + ); diff --git a/src/components/Icons/icons.tsx b/src/components/Icons/icons.tsx index 58e6fca0b2..17080f0dce 100644 --- a/src/components/Icons/icons.tsx +++ b/src/components/Icons/icons.tsx @@ -2,30 +2,30 @@ import React from 'react'; import { createIcon } from './createIcon'; -export const IconApiAggregate = createIcon( - 'IconApiAggregate', - , -); - -export const IconApples = createIcon( - 'IconApples', - , -); - -export const IconArrowBoxLeft = createIcon( - 'IconArrowBoxLeft', - , +// was: IconArrowBoxLeft +export const IconLeave = createIcon( + 'IconLeave', + , ); +// no new icon mapping export const IconArrowDown = createIcon( 'IconArrowDown', , + { viewBox: '0 0 16 16' }, ); export const IconArrowDownCircle = createIcon( 'IconArrowDownCircle', , + , ); +// no new icon mapping export const IconArrowRight = createIcon( 'IconArrowRight', , + { viewBox: '0 0 16 16' }, ); -export const IconArrowRightUp = createIcon( - 'IconArrowRightUp', +// was: IconArrowRightUp +export const IconArrowUpRight = createIcon( + 'IconArrowUpRight', , ); -export const IconArrowRotateClockwise = createIcon( - 'IconArrowRotateClockwise', - , +// was: IconArrowRotateClockwise +export const IconRetry = createIcon( + 'IconRetry', + , ); -export const IconArrowRotateRightLeftRepeatRefresh = createIcon( - 'IconArrowRotateRightLeftRepeatRefresh', - , +// was: IconArrowRotateRightLeftRepeatRefresh +export const IconRefresh = createIcon( + 'IconRefresh', + , ); -export const IconArrowShareLeft = createIcon( - 'IconArrowShareLeft', - , +// was: IconArrowShareLeft +export const IconReply = createIcon( + 'IconReply', + , ); export const IconArrowUp = createIcon( 'IconArrowUp', - , -); - -export const IconArrowsRepeatLeftRight = createIcon( - 'IconArrowsRepeatLeftRight', - , -); - -export const IconAt = createIcon( - 'IconAt', - , -); - -export const IconAtSolid = createIcon( - 'IconAtSolid', , ); -export const IconBellNotification = createIcon( - 'IconBellNotification', +// was: IconBellNotification +export const IconBell = createIcon( + 'IconBell', , ); export const IconBellOff = createIcon( 'IconBellOff', , ); -export const IconBookmark = createIcon( - 'IconBookmark', +// was: IconBookmark +export const IconSave = createIcon( + 'IconSave', , ); -export const IconBookmarkRemove = createIcon( - 'IconBookmarkRemove', +// was: IconBookmarkRemove +export const IconUnsave = createIcon( + 'IconUnsave', , ); -export const IconBrowserAISparkle = createIcon( - 'IconBrowserAISparkle', - <> - - - - - , -); - -export const IconBubbles = createIcon( - 'IconBubbles', +// was: IconBubbles +export const IconMessageBubbles = createIcon( + 'IconMessageBubbles', , ); -export const IconBubble2ChatMessage = createIcon( - 'IconBubble2ChatMessage', +// was: IconBubble2ChatMessage +export const IconMessageBubble = createIcon( + 'IconMessageBubble', , ); -export const IconBubble2Solid = createIcon( - 'IconBubble2Solid', - , +// was: IconBubble2Solid +export const IconMessageBubbleFill = createIcon( + 'IconMessageBubbleFill', + , ); export const IconBubble3ChatMessage = createIcon( 'IconBubble3ChatMessage', , + { viewBox: '0 0 16 16' }, ); -export const IconBubble3Solid = createIcon( - 'IconBubble3Solid', - , -); - -export const IconBubbleAnnotation2ChatMessage = createIcon( - 'IconBubbleAnnotation2ChatMessage', - , -); - -export const IconBubbleText6ChatMessage = createIcon( - 'IconBubbleText6ChatMessage', - , +// was: IconBubbleText6ChatMessage +export const IconThread = createIcon( + 'IconThread', + , ); +// no new icon mapping export const IconBubbleText6SolidChatMessage = createIcon( 'IconBubbleText6SolidChatMessage', , + { viewBox: '0 0 16 16' }, ); -export const IconBubbleText6Solid = createIcon( - 'IconBubbleText6Solid', - , -); - -export const IconBubbleWideNotificationChatMessage = createIcon( - 'IconBubbleWideNotificationChatMessage', - , +// was: IconBubbleText6Solid +export const IconThreadFill = createIcon( + 'IconThreadFill', + , ); -export const IconBubbleWideSparkleChatMessage = createIcon( - 'IconBubbleWideSparkleChatMessage', - <> - - - , -); - -export const IconCalendar1 = createIcon( - 'IconCalendar1', - , +// was: IconBubbleWideNotificationChatMessage +export const IconNotification = createIcon( + 'IconNotification', + , ); -export const IconCallCancel = createIcon( - 'IconCallCancel', +// was: IconCamera1 +export const IconCamera = createIcon( + 'IconCamera', <> + - - , -); - -export const IconCamera1 = createIcon( - 'IconCamera1', - , -); - -export const IconCar1 = createIcon( - 'IconCar1', - , -); - -export const IconCat = createIcon( - 'IconCat', - <> - - - - , ); -export const IconChainLink = createIcon( - 'IconChainLink', - , +// was: IconChainLink +export const IconLink = createIcon( + 'IconLink', + , ); -export const IconChart5 = createIcon( - 'IconChart5', - , +// was: IconChart5 +export const IconPoll = createIcon( + 'IconPoll', + , ); export const IconCheckmark1Small = createIcon( 'IconCheckmark1Small', , ); -export const IconCheckmark2 = createIcon( - 'IconCheckmark2', - , -); - -export const IconCheckmark2Small = createIcon( - 'IconCheckmark2Small', - , +// was: IconCheckmark2 +export const IconCheckmark = createIcon( + 'IconCheckmark', + , ); export const IconChevronDown = createIcon( 'IconChevronDown', - , -); - -export const IconChevronGrabberVerticalSelector = createIcon( - 'IconChevronGrabberVerticalSelector', - , + , ); export const IconChevronLeft = createIcon( 'IconChevronLeft', - , + , ); export const IconChevronRight = createIcon( 'IconChevronRight', - , -); - -export const IconChevronTop = createIcon( - 'IconChevronTop', - , -); - -export const IconCircleBanSign = createIcon( - 'IconCircleBanSign', - , -); - -export const IconCircleCheck = createIcon( - 'IconCircleCheck', - , -); - -export const IconCircleInfoTooltip = createIcon( - 'IconCircleInfoTooltip', - , + , ); -export const IconCircleMinus = createIcon( - 'IconCircleMinus', - , +// was: IconCircleBanSign +export const IconNoSign = createIcon( + 'IconNoSign', + , ); -export const IconCircleQuestionmark = createIcon( - 'IconCircleQuestionmark', - , +// was: IconCircleInfoTooltip +export const IconInfo = createIcon( + 'IconInfo', + <> + + + + , ); -export const IconCircleQuestionmarkFilled = createIcon( - 'IconCircleQuestionmarkFilled', +// was: IconCircleMinus +export const IconMinusCircle = createIcon( + 'IconMinusCircle', , ); -export const IconCircleX = createIcon( - 'IconCircleX', - , +// was: IconCircleX +export const IconXCircle = createIcon( + 'IconXCircle', + , ); export const IconClock = createIcon( 'IconClock', - , -); - -export const IconClockSolid = createIcon( - 'IconClockSolid', , ); -export const IconCloseQuote2 = createIcon( - 'IconCloseQuote2', - <> - - - , -); - -export const IconCode = createIcon( - 'IconCode', - , -); - -export const IconCodeBrackets = createIcon( - 'IconCodeBrackets', - , +// was: IconCloseQuote2 +export const IconQuote = createIcon( + 'IconQuote', + , ); -export const IconCodeEditorInsert = createIcon( - 'IconCodeEditorInsert', - , +// was: IconCrossMedium +export const IconXmark = createIcon( + 'IconXmark', + , ); -export const IconCompass = createIcon( - 'IconCompass', - , +export const IconCrossSmall = createIcon( + 'IconCrossSmall', + , ); -export const IconCreditCard2Billing = createIcon( - 'IconCreditCard2Billing', - , +// was: IconDotGrid1x3Horizontal +export const IconMore = createIcon( + 'IconMore', + <> + + + + , ); -export const IconCrossMedium = createIcon( - 'IconCrossMedium', - , +// was: IconDotGrid2x3 +export const IconReorder = createIcon( + 'IconReorder', + , ); -export const IconCrossSmall = createIcon( - 'IconCrossSmall', - , +// was: IconDoubleCheckmark1Small +export const IconChecks = createIcon( + 'IconChecks', + , ); -export const IconDotGrid1x3Horizontal = createIcon( - 'IconDotGrid1x3Horizontal', - , +// was: IconEditBig +export const IconEdit = createIcon( + 'IconEdit', + , ); -export const IconDotGrid2x3 = createIcon( - 'IconDotGrid2x3', +// was: IconEmojiSmile +export const IconEmoji = createIcon( + 'IconEmoji', <> - - - - - - + + + + , ); -export const IconDotsGrid1x3Vertical = createIcon( - 'IconDotsGrid1x3Vertical', +// was: IconExclamation +export const IconExclamationMarkFill = createIcon( + 'IconExclamationMarkFill', <> - - - - + + , ); -export const IconDoubleCheckmark1Small = createIcon( - 'IconDoubleCheckmark1Small', - , +// was: IconExclamationCircle1 +export const IconExclamationCircleFill = createIcon( + 'IconExclamationCircleFill', + , ); -export const IconEditBig = createIcon( - 'IconEditBig', +// was: IconExclamationCircle +export const IconExclamationMark = createIcon( + 'IconExclamationMark', <> - - + + + , ); -export const IconEditBigSolid = createIcon( - 'IconEditBigSolid', - <> - - - , -); - -export const IconEmojiAddReaction = createIcon( - 'IconEmojiAddReaction', - , -); - -export const IconEmojiSad = createIcon( - 'IconEmojiSad', - <> - - - - - , -); - -export const IconEmojiSmile = createIcon( - 'IconEmojiSmile', - <> - - - - - , -); - -export const IconExclamation = createIcon( - 'IconExclamation', - <> - - - - - , -); - -export const IconExclamationCircle1 = createIcon( - 'IconExclamationCircle1', - <> - - - - , -); - -export const IconExclamationCircle = createIcon( - 'IconExclamationCircle', - <> - - - - , -); - -export const IconExclamationTriangle1 = createIcon( - 'IconExclamationTriangle1', - , -); - +// no new icon mapping export const IconExclamationTriangle = createIcon( 'IconExclamationTriangle', , + { viewBox: '0 0 16 16' }, ); +// no new icon mapping export const IconEyeOpen = createIcon( 'IconEyeOpen', , + { viewBox: '0 0 16 16' }, ); -export const IconFileArrowLeftIn = createIcon( - 'IconFileArrowLeftIn', - , -); - -export const IconFileBend = createIcon( - 'IconFileBend', - , -); - -export const IconFilledCircleInfoTooltip = createIcon( - 'IconFilledCircleInfoTooltip', +// was: IconFileArrowLeftIn +export const IconUpload = createIcon( + 'IconUpload', , ); -export const IconFilter1 = createIcon( - 'IconFilter1', - , -); - -export const IconFlag2 = createIcon( - 'IconFlag2', - , -); - -export const IconGauge = createIcon( - 'IconGauge', - , -); - -export const IconGoogle = createIcon( - 'IconGoogle', - <> - - - - - , -); - -export const IconHashtagChannel = createIcon( - 'IconHashtagChannel', - , -); - -export const IconHeart2 = createIcon( - 'IconHeart2', - , -); - -export const IconHistory = createIcon( - 'IconHistory', - , -); - -export const IconImages1Alt = createIcon( - 'IconImages1Alt', - , +// was: IconFileBend +export const IconFile = createIcon( + 'IconFile', + , ); -export const IconInvite = createIcon( - 'IconInvite', - , +// was: IconFlag2 +export const IconFlag = createIcon( + 'IconFlag', + , ); -export const IconLayersBehind = createIcon( - 'IconLayersBehind', - , +// was: IconImages1Alt +export const IconImage = createIcon( + 'IconImage', + , ); +// no new icon mapping export const IconLayoutAlignLeft = createIcon( 'IconLayoutAlignLeft', - <> - - - , -); - -export const IconLayoutGrid1 = createIcon( - 'IconLayoutGrid1', - , + , ); export const IconLightBulbSimple = createIcon( @@ -665,416 +617,395 @@ export const IconLightBulbSimple = createIcon( , + { viewBox: '0 0 16 16' }, ); -export const IconLimits = createIcon( - 'IconLimits', - , -); - -export const IconLineChart3 = createIcon( - 'IconLineChart3', - , -); - -export const IconLock = createIcon( - 'IconLock', - , -); - -export const IconMagnifyingGlassSearch = createIcon( - 'IconMagnifyingGlassSearch', - , +// was: IconMagnifyingGlassSearch +export const IconSearch = createIcon( + 'IconSearch', + , ); -export const IconMapPin = createIcon( - 'IconMapPin', - , +// was: IconMapPin +export const IconLocation = createIcon( + 'IconLocation', + <> + + + , ); -export const IconMicrophone = createIcon( - 'IconMicrophone', - , +// was: IconMicrophone +export const IconVoice = createIcon( + 'IconVoice', + , ); -export const IconMicrophoneSolid = createIcon( - 'IconMicrophoneSolid', - <> - - - , +// was: IconMicrophoneSolid +export const IconVoiceFill = createIcon( + 'IconVoiceFill', + , ); -export const IconMinusLarge = createIcon( - 'IconMinusLarge', +// was: IconMinusLarge +export const IconMinus = createIcon( + 'IconMinus', , ); export const IconMinusSmall = createIcon( 'IconMinusSmall', , ); export const IconMute = createIcon( 'IconMute', - <> - - - , -); - -export const IconNewspaper2 = createIcon( - 'IconNewspaper2', - , -); - -export const IconOrganization = createIcon( - 'IconOrganization', - , -); - -export const IconPaperPlane = createIcon( - 'IconPaperPlane', - , -); - -export const IconPaperPlaneTopRight = createIcon( - 'IconPaperPlaneTopRight', - , -); - -export const IconPaperclip = createIcon( - 'IconPaperclip', - , -); - -export const IconParagraphsText = createIcon( - 'IconParagraphsText', - , -); - -export const IconPause = createIcon( - 'IconPause', - <> - - - , + , ); -export const IconPencil = createIcon( - 'IconPencil', - , +// was: IconPaperPlane +export const IconSend = createIcon( + 'IconSend', + , ); -export const IconPeople = createIcon( - 'IconPeople', - , +// was: IconPaperclip +export const IconAttachment = createIcon( + 'IconAttachment', + , ); -export const IconPeople2 = createIcon( - 'IconPeople2', - , +// was: IconPause +export const IconPauseFill = createIcon( + 'IconPauseFill', + , ); -export const IconPeopleAdd = createIcon( - 'IconPeopleAdd', - , +// was: IconPeople +export const IconUser = createIcon( + 'IconUser', + , ); -export const IconPeopleAdded = createIcon( - 'IconPeopleAdded', +// was: IconPeopleAdd +export const IconUserAdd = createIcon( + 'IconUserAdd', <> - - - + + + + + + + + , ); -export const IconPeopleCircle = createIcon( - 'IconPeopleCircle', - , -); - -export const IconPeopleCopy = createIcon( - 'IconPeopleCopy', - , -); - -export const IconPeopleEditUserRights = createIcon( - 'IconPeopleEditUserRights', - , -); - -export const IconPeopleRemove = createIcon( - 'IconPeopleRemove', +// was: IconPeopleAdded +export const IconUserCheck = createIcon( + 'IconUserCheck', <> - - - + + + + + + + + , ); -export const IconPersona = createIcon( - 'IconPersona', +// was: IconPeopleRemove +export const IconUserRemove = createIcon( + 'IconUserRemove', <> - - - - - - - - - - - - - - - + + + + + + + + , ); export const IconPin = createIcon( 'IconPin', - , + , ); -export const IconPlaySolid = createIcon( - 'IconPlaySolid', - , +// was: IconPlaySolid +export const IconPlayFill = createIcon( + 'IconPlayFill', + , ); -export const IconPlusLarge = createIcon( - 'IconPlusLarge', - , +// was: IconPlusLarge +export const IconPlus = createIcon( + 'IconPlus', + , ); export const IconPlusSmall = createIcon( 'IconPlusSmall', - , -); - -export const IconRunShortcut = createIcon( - 'IconRunShortcut', - , + , ); -export const IconSearchText = createIcon( - 'IconSearchText', - , +// was: IconRunShortcut +export const IconCommand = createIcon( + 'IconCommand', + , ); export const IconSettingsGear2 = createIcon( 'IconSettingsGear2', , + { viewBox: '0 0 16 16' }, ); -export const IconSettingsSliderVer = createIcon( - 'IconSettingsSliderVer', - , -); - -export const IconShapesPlusCloseSquareCircle = createIcon( - 'IconShapesPlusCloseSquareCircle', - , -); - -export const IconShapesTriangleSquareCircle = createIcon( - 'IconShapesTriangleSquareCircle', - , -); - -export const IconShareRedirectLink = createIcon( - 'IconShareRedirectLink', - , -); - -export const IconShield = createIcon( - 'IconShield', - , -); - -export const IconSquareBehindSquare2_Copy = createIcon( - 'IconSquareBehindSquare2_Copy', - , -); - -export const IconSquareCircleTopRightFeeds = createIcon( - 'IconSquareCircleTopRightFeeds', - , -); - -export const IconStop = createIcon( - 'IconStop', - , -); - -export const IconTable = createIcon( - 'IconTable', - , -); - -export const IconTeam = createIcon( - 'IconTeam', - <> - - - - - - - - - , -); - -export const IconTennis = createIcon( - 'IconTennis', - , -); - -export const IconTextToImageURLEnrichment = createIcon( - 'IconTextToImageURLEnrichment', - <> - - - - - - - , +// was: IconSquareBehindSquare2_Copy +export const IconCopy = createIcon( + 'IconCopy', + , ); +// no new icon mapping export const IconThunder = createIcon( 'IconThunder', - <> - - - - - - - - - , + , ); export const IconTranslate = createIcon( 'IconTranslate', , ); -export const IconTrashBin = createIcon( - 'IconTrashBin', - , -); - -export const IconTrending4 = createIcon( - 'IconTrending4', - , +// was: IconTrashBin +export const IconDelete = createIcon( + 'IconDelete', + , ); export const IconTrophy = createIcon( 'IconTrophy', - , -); - -export const IconUnlocked = createIcon( - 'IconUnlocked', - , + , ); export const IconUnpin = createIcon( 'IconUnpin', , ); -export const IconUsers = createIcon( - 'IconUsers', - , -); - export const IconVideo = createIcon( 'IconVideo', - , -); - -export const IconVideoSolid = createIcon( - 'IconVideoSolid', - , -); - -export const IconVoiceAndVideo = createIcon( - 'IconVoiceAndVideo', <> - - + + - - + + , ); -export const IconVoiceHigh = createIcon( - 'IconVoiceHigh', - , -); - -export const IconVolumeFull = createIcon( - 'IconVolumeFull', - , +// was: IconVideoSolid +export const IconVideoFill = createIcon( + 'IconVideoFill', + <> + + + + + + + + + , ); -export const IconWebhook = createIcon( - 'IconWebhook', - , +// was: IconVolumeFull +export const IconAudio = createIcon( + 'IconAudio', + , ); export const IconArchive = createIcon( 'IconArchive', , ); -export const IconLoadingCircle = createIcon( - 'IconLoadingCircle', +// was: IconLoadingCircle +export const IconLoading = createIcon( + 'IconLoading', <> , - { - viewBox: '0 0 20 20', - }, ); diff --git a/src/components/Icons/styling/Icons.scss b/src/components/Icons/styling/Icons.scss index d04c1fc786..d9e16b4788 100644 --- a/src/components/Icons/styling/Icons.scss +++ b/src/components/Icons/styling/Icons.scss @@ -5,6 +5,6 @@ fill: currentColor; } -.str-chat__icon--exclamation-circle { +.str-chat__icon--exclamation-mark { stroke: currentColor; } diff --git a/src/components/Loading/LoadingIndicator.tsx b/src/components/Loading/LoadingIndicator.tsx index b34a983ab4..1ba631195e 100644 --- a/src/components/Loading/LoadingIndicator.tsx +++ b/src/components/Loading/LoadingIndicator.tsx @@ -1,8 +1,8 @@ import React, { type ComponentProps } from 'react'; -import { IconLoadingCircle } from '../Icons'; +import { IconLoading } from '../Icons'; -export type LoadingIndicatorProps = ComponentProps; +export type LoadingIndicatorProps = ComponentProps; export const LoadingIndicator = (props: LoadingIndicatorProps) => ( - + ); diff --git a/src/components/Loading/__tests__/__snapshots__/LoadingIndicator.test.tsx.snap b/src/components/Loading/__tests__/__snapshots__/LoadingIndicator.test.tsx.snap index e181e596a7..81d3e57805 100644 --- a/src/components/Loading/__tests__/__snapshots__/LoadingIndicator.test.tsx.snap +++ b/src/components/Loading/__tests__/__snapshots__/LoadingIndicator.test.tsx.snap @@ -3,23 +3,23 @@ exports[`LoadingIndicator > should render with default props 1`] = `
diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx index c1cba09c36..332ea66048 100644 --- a/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx +++ b/src/components/MediaRecorder/AudioRecorder/AudioRecorderRecordingControls.tsx @@ -1,5 +1,5 @@ import { CheckSignIcon, LoadingIndicatorIcon } from '../../MessageComposer/icons'; -import { IconMicrophone, IconPause, IconTrashBin } from '../../Icons'; +import { IconDelete, IconPauseFill, IconVoice } from '../../Icons'; import React from 'react'; import { useChatContext, @@ -26,7 +26,7 @@ const ToggleRecordingButton = () => { size='sm' variant='secondary' > - {isRecording(recordingState) ? : } + {isRecording(recordingState) ? : } ); }; @@ -66,7 +66,7 @@ export const AudioRecorderRecordingControls = () => { size='sm' variant='secondary' > - + )} diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx index 7ff3305e56..b28ffc9ee9 100644 --- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx +++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtonWithNotification.tsx @@ -5,7 +5,7 @@ import { useAttachmentManagerState } from '../../MessageComposer/hooks/useAttach import { useComponentContext, useMessageComposerContext } from '../../../context'; import { Callout, useDialogOnNearestManager } from '../../Dialog'; import { Button } from '../../Button'; -import { IconMicrophone } from '../../Icons'; +import { IconVoice } from '../../Icons'; const dialogId = 'recording-permission-denied-notification'; @@ -76,7 +76,7 @@ export const DefaultStartRecordingAudioButton = forwardRef< {...props} ref={ref} > - + ); }); diff --git a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx index 5ff50c214a..3600bbaa3f 100644 --- a/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx +++ b/src/components/MediaRecorder/AudioRecorder/AudioRecordingPlayback.tsx @@ -3,7 +3,7 @@ import { DurationDisplay, WaveProgressBar } from '../../AudioPlayback'; import type { AudioPlayerState } from '../../AudioPlayback/AudioPlayer'; import { useAudioPlayer } from '../../AudioPlayback/WithAudioPlayback'; import { useStateStore } from '../../../store'; -import { IconPause, IconPlaySolid } from '../../Icons'; +import { IconPauseFill, IconPlayFill } from '../../Icons'; import { Button } from '../../Button'; import clsx from 'clsx'; @@ -62,7 +62,7 @@ export const AudioRecordingPlayback = ({ size='sm' variant='secondary' > - {isPlaying ? : } + {isPlaying ? : } { return (
- +
diff --git a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx index 95e434f6aa..aa1d304241 100644 --- a/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx +++ b/src/components/MediaRecorder/AudioRecorder/__tests__/AudioRecordingPreview.test.tsx @@ -7,8 +7,8 @@ import type { AudioPlayer } from '../../../AudioPlayback'; import { generateAudioAttachment } from '../../../../mock-builders'; const TOGGLE_PLAY_BTN_TEST_ID = 'audio-recording-preview-toggle-play-btn'; -const PLAY_ICON_CLASS = 'str-chat__icon--play-solid'; -const PAUSE_ICON_CLASS = 'str-chat__icon--pause'; +const PLAY_ICON_CLASS = 'str-chat__icon--play-fill'; +const PAUSE_ICON_CLASS = 'str-chat__icon--pause-fill'; const WAVE_PROGRESS_BAR_TEST_ID = 'wave-progress-bar-track'; const TIMER_CLASS_SELECTOR = '.str-chat__recording-timer'; const WAVE_PROGRESS_BAR_INDICATOR_SELECTOR = diff --git a/src/components/MediaRecorder/AudioRecorder/__tests__/__snapshots__/AudioRecorder.test.tsx.snap b/src/components/MediaRecorder/AudioRecorder/__tests__/__snapshots__/AudioRecorder.test.tsx.snap index 5994ae8fc7..4a86a99751 100644 --- a/src/components/MediaRecorder/AudioRecorder/__tests__/__snapshots__/AudioRecorder.test.tsx.snap +++ b/src/components/MediaRecorder/AudioRecorder/__tests__/__snapshots__/AudioRecorder.test.tsx.snap @@ -18,12 +18,12 @@ exports[`AudioRecorder > does not render recording preview if paused 1`] = ` class="str-chat__button__content" >
@@ -266,12 +266,17 @@ exports[`AudioRecorder > does not render recording preview if paused 1`] = ` class="str-chat__button__content" >
@@ -284,12 +289,17 @@ exports[`AudioRecorder > does not render recording preview if paused 1`] = ` class="str-chat__button__content" >
@@ -328,12 +338,17 @@ exports[`AudioRecorder > does not render recording preview if recording 1`] = ` class="str-chat__audio-recorder__recording-preview" >
does not render recording preview if recording 1`] = ` class="str-chat__button__content" > -
@@ -407,12 +419,17 @@ exports[`AudioRecorder > renders audio recording in progress UI 1`] = ` class="str-chat__audio-recorder__recording-preview" >
renders audio recording in progress UI 1`] = ` class="str-chat__button__content" > -
@@ -494,12 +508,17 @@ exports[`AudioRecorder > renders audio recording paused UI when paused 1`] = ` class="str-chat__button__content" >
@@ -512,12 +531,17 @@ exports[`AudioRecorder > renders audio recording paused UI when paused 1`] = ` class="str-chat__button__content" >
@@ -564,12 +588,17 @@ exports[`AudioRecorder > renders audio recording stopped UI when stopped without class="str-chat__button__content" >
@@ -582,12 +611,17 @@ exports[`AudioRecorder > renders audio recording stopped UI when stopped without class="str-chat__button__content" >
@@ -634,12 +668,12 @@ exports[`AudioRecorder > renders audio recording stopped UI with recording previ class="str-chat__button__content" >
@@ -882,12 +916,17 @@ exports[`AudioRecorder > renders audio recording stopped UI with recording previ class="str-chat__button__content" >
@@ -900,12 +939,17 @@ exports[`AudioRecorder > renders audio recording stopped UI with recording previ class="str-chat__button__content" >
diff --git a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss index 3dd7ff73e6..8eac8dcacc 100644 --- a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss +++ b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss @@ -42,7 +42,7 @@ } .str-chat__audio-recorder__recording-preview { - .str-chat__icon--microphone { + .str-chat__icon--voice { height: var(--icon-size-sm); width: var(--icon-size-sm); color: var(--button-destructive-text); diff --git a/src/components/Message/MessageAlsoSentInChannelIndicator.tsx b/src/components/Message/MessageAlsoSentInChannelIndicator.tsx index 361ccbe11a..8d722f4f77 100644 --- a/src/components/Message/MessageAlsoSentInChannelIndicator.tsx +++ b/src/components/Message/MessageAlsoSentInChannelIndicator.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from 'react'; -import { IconArrowRightUp } from '../Icons'; +import { IconArrowUpRight } from '../Icons'; import { addNotificationTargetTag, useNotificationTarget } from '../Notifications'; import { useChannelActionContext, @@ -92,7 +92,7 @@ export const MessageAlsoSentInChannelIndicator = () => { return (
- + {threadList ? t('Also sent in channel') : t('Replied to a thread')} ·
@@ -107,20 +103,16 @@ exports[` > should render with a custom wrapper class when one is class="str-chat__badge str-chat__badge--variant-error str-chat__badge--size-sm" > - - - - + +
@@ -173,20 +165,16 @@ exports[` > should render with custom theme identifier in generat class="str-chat__badge str-chat__badge--variant-error str-chat__badge--size-sm" > - - - - + +
diff --git a/src/components/Message/__tests__/__snapshots__/ReminderNotification.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/ReminderNotification.test.tsx.snap index e8eb1023d9..d418efdf00 100644 --- a/src/components/Message/__tests__/__snapshots__/ReminderNotification.test.tsx.snap +++ b/src/components/Message/__tests__/__snapshots__/ReminderNotification.test.tsx.snap @@ -6,16 +6,17 @@ exports[`ReminderNotification > displays text for bookmark notifications (saved class="str-chat__message-saved-for-later" > @@ -31,16 +32,17 @@ exports[`ReminderNotification > displays text for reminder deadline if trespasse class="str-chat__message-reminder" > @@ -64,16 +66,17 @@ exports[`ReminderNotification > displays text for time due in case of timed remi class="str-chat__message-reminder" > diff --git a/src/components/MessageActions/MessageActions.defaults.tsx b/src/components/MessageActions/MessageActions.defaults.tsx index bbd9db4639..138906a6b8 100644 --- a/src/components/MessageActions/MessageActions.defaults.tsx +++ b/src/components/MessageActions/MessageActions.defaults.tsx @@ -3,27 +3,27 @@ import React, { forwardRef, useState } from 'react'; import { GlobalModal } from '../Modal'; import { - IconArrowRotateClockwise, - IconArrowShareLeft, - IconBellNotification, + IconAudio, + IconBell, IconBellOff, - IconBookmark, - IconBookmarkRemove, - IconBubbleText6ChatMessage, - IconBubbleWideNotificationChatMessage, - IconCircleBanSign, - IconCloseQuote2, - IconDotGrid1x3Horizontal, - IconEditBig, - IconEmojiSmile, - IconFlag2, + IconCopy, + IconDelete, + IconEdit, + IconEmoji, + IconFlag, + IconMore, IconMute, - IconPeopleAdded, + IconNoSign, + IconNotification, IconPin, - IconSquareBehindSquare2_Copy, - IconTrashBin, + IconQuote, + IconReply, + IconRetry, + IconSave, + IconThread, IconUnpin, - IconVolumeFull, + IconUnsave, + IconUserCheck, } from '../Icons'; import { isUserMuted } from '../Message/utils'; import { useMessageComposerController } from '../MessageComposer/hooks/useMessageComposerController'; @@ -63,7 +63,7 @@ const DefaultMessageActionComponents = { aria-label={t('aria/Open Thread')} className={msgActionsBoxButtonClassName} data-testid='thread-action' - Icon={IconBubbleText6ChatMessage} + Icon={IconThread} onClick={(e) => { handleOpenThread(e); closeMenu(); @@ -96,7 +96,7 @@ const DefaultMessageActionComponents = { { handleQuote(); closeMenu(); @@ -134,7 +134,7 @@ const DefaultMessageActionComponents = { { if (message.text) navigator.clipboard.writeText(message.text); closeMenu(); @@ -153,7 +153,7 @@ const DefaultMessageActionComponents = { { handleRetry(message); closeMenu(); @@ -173,7 +173,7 @@ const DefaultMessageActionComponents = { { messageComposer.initState({ composition: message }); closeMenu(); @@ -192,7 +192,7 @@ const DefaultMessageActionComponents = { { handleMarkUnread(event); closeMenu(); @@ -217,7 +217,7 @@ const DefaultMessageActionComponents = { aria-label={reminder ? t('aria/Remind Me Message') : t('aria/Remove Reminder')} className={msgActionsBoxButtonClassName} hasSubMenu={!reminder} - Icon={reminder ? IconBellOff : IconBellNotification} + Icon={reminder ? IconBellOff : IconBell} onClick={() => { if (reminder) { client.reminders.deleteReminder(reminder.id); @@ -250,7 +250,7 @@ const DefaultMessageActionComponents = { reminder ? t('aria/Remove Save For Later') : t('aria/Bookmark Message') } className={msgActionsBoxButtonClassName} - Icon={reminder ? IconBookmarkRemove : IconBookmark} + Icon={reminder ? IconUnsave : IconSave} onClick={() => { if (reminder) client.reminders.deleteReminder(reminder.id); else client.reminders.createReminder({ messageId: message.id }); @@ -270,7 +270,7 @@ const DefaultMessageActionComponents = { { handleFlag(event); closeMenu(); @@ -291,7 +291,7 @@ const DefaultMessageActionComponents = { { handleMute(event); closeMenu(); @@ -315,7 +315,7 @@ const DefaultMessageActionComponents = { { setOpenModal(true); }} @@ -364,7 +364,7 @@ const DefaultMessageActionComponents = { { const targetId = message.user?.id; if (targetId) { @@ -403,12 +403,12 @@ const DefaultMessageActionComponents = { }} ref={ref} > - + ); }), React() { - return ; + return ; }, Reply() { const { handleOpenThread } = useMessageContext(); @@ -421,7 +421,7 @@ const DefaultMessageActionComponents = { data-testid='thread-action' onClick={handleOpenThread} > - + ); }, diff --git a/src/components/MessageBounce/MessageBouncePrompt.tsx b/src/components/MessageBounce/MessageBouncePrompt.tsx index 82622ae255..cf246f3496 100644 --- a/src/components/MessageBounce/MessageBouncePrompt.tsx +++ b/src/components/MessageBounce/MessageBouncePrompt.tsx @@ -6,7 +6,7 @@ import { useTranslationContext, } from '../../context'; import { Button } from '../Button'; -import { IconExclamationCircle } from '../Icons'; +import { IconExclamationMark } from '../Icons'; import { Alert } from '../Dialog'; import type { PropsWithChildrenOnly } from '../../types/types'; @@ -34,7 +34,7 @@ export function MessageBouncePrompt({ children }: MessageBouncePromptProps) { > ) : hasFatalError ? (
- + {hasSizeLimitError ? t('File too large') diff --git a/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx index a9e23a9514..48a29fbe16 100644 --- a/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx +++ b/src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx @@ -8,7 +8,7 @@ import type { UploadAttachmentPreviewProps } from './types'; import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton'; import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot'; import { FileSizeIndicator } from '../../Attachment'; -import { IconExclamationCircle, IconExclamationTriangle } from '../../Icons'; +import { IconExclamationMark, IconExclamationTriangle } from '../../Icons'; export type FileAttachmentPreviewProps = UploadAttachmentPreviewProps< @@ -47,7 +47,7 @@ export const FileAttachmentPreview = ({ {!hasError && } {hasFatalError && (
- + {hasSizeLimitError ? t('File too large') diff --git a/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx index a23cc560cd..b6a3417789 100644 --- a/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx +++ b/src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx @@ -2,7 +2,7 @@ import type { LiveLocationPreview, StaticLocationPreview } from 'stream-chat'; import type { ComponentType } from 'react'; import React from 'react'; import { useTranslationContext } from '../../../context'; -import { IconMapPin } from '../../Icons'; +import { IconLocation } from '../../Icons'; import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton'; type GeolocationPreviewImageProps = { @@ -11,7 +11,7 @@ type GeolocationPreviewImageProps = { const GeolocationPreviewImage = () => (
- +
); diff --git a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx index 43597a6489..def24a1a7b 100644 --- a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx +++ b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx @@ -15,11 +15,7 @@ import React, { } from 'react'; import clsx from 'clsx'; import { LoadingIndicatorIcon } from '../icons'; -import { - IconArrowRotateClockwise, - IconExclamationCircle, - IconVideoSolid, -} from '../../Icons'; +import { IconExclamationMark, IconRetry, IconVideoFill } from '../../Icons'; import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton'; import { Button } from '../../Button'; import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot'; @@ -104,12 +100,12 @@ export const MediaAttachmentPreview = ({ !hasUploadError && uploadState !== 'uploading' && (
- + {attachment.duration &&
{attachment.duration}
}
)} - {hasFatalError && } + {hasFatalError && } {hasRetriableError && ( )}
diff --git a/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx b/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx index 8a1ea2428b..db196b08ae 100644 --- a/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx +++ b/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx @@ -36,11 +36,11 @@ import { useStableId } from '../../UtilityComponents/useStableId'; import clsx from 'clsx'; import { Button, type ButtonProps } from '../../Button'; import { - IconChart5, - IconMapPin, - IconPaperclip, - IconPlusLarge, - IconRunShortcut, + IconAttachment, + IconCommand, + IconLocation, + IconPlus, + IconPoll, } from '../../Icons'; import { useIsCooldownActive } from '../hooks/useIsCooldownActive'; import { @@ -61,7 +61,7 @@ const AttachmentSelectorMenuInitButtonIcon = ({ className }: { className?: strin } return ( - ); @@ -149,7 +149,7 @@ export const DefaultAttachmentSelectorComponents = { { if (!hasSubmenu) return; openSubmenu({ @@ -171,7 +171,7 @@ export const DefaultAttachmentSelectorComponents = { return ( { fileInput?.click(); closeMenu(); @@ -187,7 +187,7 @@ export const DefaultAttachmentSelectorComponents = { return ( { openModalForAction('addLocation'); closeMenu(); @@ -203,7 +203,7 @@ export const DefaultAttachmentSelectorComponents = { return ( { openModalForAction('createPoll'); closeMenu(); diff --git a/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx b/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx index 5e0639b7e7..5658eaeaf6 100644 --- a/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx +++ b/src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx @@ -9,23 +9,23 @@ import { useContextMenuContext, } from '../../Dialog'; import { + IconAudio, IconChevronLeft, - IconFlag2, + IconFlag, IconGiphy, IconMute, - IconPeopleAdd, - IconPeopleRemove, - IconVolumeFull, + IconUserAdd, + IconUserRemove, } from '../../Icons'; import clsx from 'clsx'; const icons: Record = { - ban: IconPeopleRemove, - flag: IconFlag2, + ban: IconUserRemove, + flag: IconFlag, giphy: IconGiphy, mute: IconMute, - unban: IconPeopleAdd, - unmute: IconVolumeFull, + unban: IconUserAdd, + unmute: IconAudio, }; export const CommandsMenuClassName = 'str-chat__context-menu--commands'; diff --git a/src/components/MessageComposer/CommandChip.tsx b/src/components/MessageComposer/CommandChip.tsx index f2462f2c8a..3cd1ce701f 100644 --- a/src/components/MessageComposer/CommandChip.tsx +++ b/src/components/MessageComposer/CommandChip.tsx @@ -1,6 +1,6 @@ import { useMessageComposerController } from './hooks'; import type { TextComposerState } from 'stream-chat'; -import { IconCrossMedium, IconThunder } from '../Icons'; +import { IconThunder, IconXmark } from '../Icons'; import { useMessageComposerContext } from '../../context'; export type CommandChipProps = { @@ -23,7 +23,7 @@ export const CommandChip = ({ command }: CommandChipProps) => { textareaRef.current?.focus(); }} > - +
); diff --git a/src/components/MessageComposer/LinkPreviewList.tsx b/src/components/MessageComposer/LinkPreviewList.tsx index 6eade4d2b1..743d8e7fe6 100644 --- a/src/components/MessageComposer/LinkPreviewList.tsx +++ b/src/components/MessageComposer/LinkPreviewList.tsx @@ -8,7 +8,7 @@ import { useEnterLeaveHandlers } from '../Tooltip/hooks'; import { useMessageComposerController } from './hooks'; import { BaseImage } from '../BaseImage'; import { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton'; -import { IconChainLink } from '../Icons'; +import { IconLink } from '../Icons'; export type LinkPreviewListProps = { displayLinkCount?: number; @@ -94,7 +94,7 @@ export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => { {linkPreview.text}
- + {linkPreview.og_scrape_url}
diff --git a/src/components/MessageComposer/MessageComposerActions.tsx b/src/components/MessageComposer/MessageComposerActions.tsx index e874c920cd..e9a8e90620 100644 --- a/src/components/MessageComposer/MessageComposerActions.tsx +++ b/src/components/MessageComposer/MessageComposerActions.tsx @@ -13,7 +13,7 @@ import { AudioRecordingButtonWithNotification } from '../MediaRecorder/AudioReco import { useIsCooldownActive } from './hooks/useIsCooldownActive'; import type { MessageComposerState, TextComposerState } from 'stream-chat'; import { useStateStore } from '../../store'; -import { IconCheckmark2, IconPaperPlane } from '../Icons'; +import { IconCheckmark, IconSend } from '../Icons'; const messageComposerStateSelector = ({ editedMessage }: MessageComposerState) => ({ editedMessage, @@ -71,7 +71,7 @@ export const MessageComposerActions = () => { ) : ( - {editedMessage || command ? : } + {editedMessage || command ? : } ); diff --git a/src/components/MessageComposer/QuotedMessagePreview.tsx b/src/components/MessageComposer/QuotedMessagePreview.tsx index 443c3630b1..312df3bf23 100644 --- a/src/components/MessageComposer/QuotedMessagePreview.tsx +++ b/src/components/MessageComposer/QuotedMessagePreview.tsx @@ -34,14 +34,14 @@ import { useChannelStateContext } from '../../context/ChannelStateContext'; import type { MessageContextValue } from '../../context'; import { RemoveAttachmentPreviewButton } from './RemoveAttachmentPreviewButton'; import { - IconChainLink, - IconChart5, - IconFileBend, - IconMapPin, - IconMicrophone, - IconPlaySolid, + IconFile, + IconLink, + IconLocation, + IconPlayFill, + IconPoll, IconVideo, - IconVideoSolid, + IconVideoFill, + IconVoice, } from '../Icons'; import clsx from 'clsx'; import { BaseImage } from '../BaseImage'; @@ -184,10 +184,10 @@ const getAttachmentIconWithType = ( }; if (!groupedAttachments.total) return result; if (groupedAttachments.polls.length > 0) - return { ...result, Icon: IconChart5, previewType: 'poll' }; + return { ...result, Icon: IconPoll, previewType: 'poll' }; if (groupedAttachments.locations.length > 0) // todo: we do not generate the location preview image - return { ...result, Icon: IconMapPin, previewType: 'location' }; + return { ...result, Icon: IconLocation, previewType: 'location' }; if ( groupedAttachments.giphies.length > 0 && groupedAttachments.giphies.length === groupedAttachments.total @@ -201,7 +201,7 @@ const getAttachmentIconWithType = ( giphyVersion?.url || giphyAttachment.thumb_url || giphyAttachment.image_url || ''; return { ...result, - Icon: IconFileBend, + Icon: IconFile, PreviewImage: ( ), @@ -231,7 +231,7 @@ const getAttachmentIconWithType = ( const linkAttachment = groupedAttachments.links[0]; return { ...result, - Icon: IconChainLink, + Icon: IconLink, PreviewImage: (
- +
), @@ -268,7 +268,7 @@ const getAttachmentIconWithType = ( const imageAttachment = groupedAttachments.images[0]; return { ...result, - Icon: IconVideoSolid, + Icon: IconVideoFill, PreviewImage: ( - {children ?? } + {children ?? } ); }; diff --git a/src/components/MessageComposer/SendToChannelCheckbox.tsx b/src/components/MessageComposer/SendToChannelCheckbox.tsx index 4fff6b3516..c3075822a6 100644 --- a/src/components/MessageComposer/SendToChannelCheckbox.tsx +++ b/src/components/MessageComposer/SendToChannelCheckbox.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import React from 'react'; import { useMessageComposerController } from './hooks'; -import { IconCheckmark2 } from '../Icons'; +import { IconCheckmark } from '../Icons'; import type { MessageComposerState } from 'stream-chat'; import { useStateStore } from '../../store'; import { useTranslationContext } from '../../context'; @@ -43,7 +43,7 @@ export const SendToChannelCheckbox = () => { /> - + {labelText} diff --git a/src/components/MessageComposer/WithDragAndDropUpload.tsx b/src/components/MessageComposer/WithDragAndDropUpload.tsx index 8abe62e765..7c3afa529f 100644 --- a/src/components/MessageComposer/WithDragAndDropUpload.tsx +++ b/src/components/MessageComposer/WithDragAndDropUpload.tsx @@ -8,7 +8,7 @@ import { useMessageComposerContext, useTranslationContext } from '../../context' import { useAttachmentManagerState, useMessageComposerController } from './hooks'; import { useStateStore } from '../../store'; import { useIsCooldownActive } from './hooks/useIsCooldownActive'; -import { IconFileArrowLeftIn } from '../Icons'; +import { IconUpload } from '../Icons'; const DragAndDropUploadContext = React.createContext<{ subscribeToDrop: ((fn: (files: File[]) => void) => () => void) | null; @@ -166,7 +166,7 @@ export const FileDragAndDropContent = ({

{t('Some of the files will not be accepted')}

) : ( <> - +

{t('Drag your files here')}

)} diff --git a/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap b/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap index ea3bfa5116..35a005ca97 100644 --- a/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap +++ b/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap @@ -80,11 +80,16 @@ exports[`AttachmentPreviewList > should render custom BaseImage component 1`] = >
@@ -157,11 +162,16 @@ exports[`AttachmentPreviewList > should render custom BaseImage component 1`] = >
diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss index f2d8968fd0..40a4e82f4d 100644 --- a/src/components/MessageComposer/styling/AttachmentPreview.scss +++ b/src/components/MessageComposer/styling/AttachmentPreview.scss @@ -216,7 +216,7 @@ } .str-chat__loading-indicator, - .str-chat__icon--exclamation-circle { + .str-chat__icon--exclamation-mark { width: 14px; height: 14px; position: absolute; diff --git a/src/components/MessageComposer/styling/MessageComposer.scss b/src/components/MessageComposer/styling/MessageComposer.scss index 274cc08a48..8dce5046df 100644 --- a/src/components/MessageComposer/styling/MessageComposer.scss +++ b/src/components/MessageComposer/styling/MessageComposer.scss @@ -250,14 +250,14 @@ } .str-chat__start-recording-audio-button { - .str-chat__icon--microphone { + .str-chat__icon--voice { height: var(--icon-size-md); width: var(--icon-size-md); } } .str-chat__send-button { - .str-chat__icon--paper-plane { + .str-chat__icon--send { height: var(--icon-size-md); width: var(--icon-size-md); } diff --git a/src/components/MessageComposer/styling/QuotedMessagePreview.scss b/src/components/MessageComposer/styling/QuotedMessagePreview.scss index 1c39df10b8..4cef62416e 100644 --- a/src/components/MessageComposer/styling/QuotedMessagePreview.scss +++ b/src/components/MessageComposer/styling/QuotedMessagePreview.scss @@ -45,7 +45,7 @@ width: var(--typography-font-size-xs); } - .str-chat__icon--microphone path { + .str-chat__icon--voice path { stroke-width: 2; } @@ -84,7 +84,7 @@ border-radius: var(--radius-max); background-color: var(--control-play-control-bg); - .str-chat__icon--play-solid { + .str-chat__icon--play-fill { height: 12px; width: 12px; diff --git a/src/components/MessageList/UnreadMessagesNotification.tsx b/src/components/MessageList/UnreadMessagesNotification.tsx index c49dcb7d26..6275eef59b 100644 --- a/src/components/MessageList/UnreadMessagesNotification.tsx +++ b/src/components/MessageList/UnreadMessagesNotification.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useChannelActionContext, useTranslationContext } from '../../context'; import { Button } from '../Button'; -import { IconArrowUp, IconCrossMedium } from '../Icons'; +import { IconArrowUp, IconXmark } from '../Icons'; import clsx from 'clsx'; export type UnreadMessagesNotificationProps = { @@ -45,7 +45,7 @@ export const UnreadMessagesNotification = ({ : t('Unread messages')} ); diff --git a/src/components/MessageList/UnreadMessagesSeparator.tsx b/src/components/MessageList/UnreadMessagesSeparator.tsx index 5dcc158d46..3cb950b008 100644 --- a/src/components/MessageList/UnreadMessagesSeparator.tsx +++ b/src/components/MessageList/UnreadMessagesSeparator.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useChannelActionContext, useTranslationContext } from '../../context'; import { Button } from '../Button'; -import { IconCrossMedium } from '../Icons'; +import { IconXmark } from '../Icons'; export const UNREAD_MESSAGE_SEPARATOR_CLASS = 'str-chat__unread-messages-separator'; @@ -39,7 +39,7 @@ export const UnreadMessagesSeparator = ({ size='sm' variant='secondary' > - + ); diff --git a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.tsx.snap b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.tsx.snap index adf4ef1c3f..bde26501f5 100644 --- a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.tsx.snap +++ b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.tsx.snap @@ -31,17 +31,17 @@ exports[`VirtualizedMessageList > should render the list without any message 1`] class="str-chat__empty-channel" >

EmptyPlaceholder > should render for mai class="str-chat__empty-channel" >

Header > should not render custom head i class="str-chat__virtual-list__loading" > @@ -87,23 +87,23 @@ exports[`VirtualizedMessageComponents > Header > should render LoadingIndicator class="str-chat__virtual-list__loading" > diff --git a/src/components/Modal/CloseButtonOnModalOverlay.tsx b/src/components/Modal/CloseButtonOnModalOverlay.tsx index 164fe4ba51..06bd3f0726 100644 --- a/src/components/Modal/CloseButtonOnModalOverlay.tsx +++ b/src/components/Modal/CloseButtonOnModalOverlay.tsx @@ -1,5 +1,5 @@ import { Button } from '../Button'; -import { IconCrossMedium } from '../Icons'; +import { IconXmark } from '../Icons'; import type { ComponentProps } from 'react'; import clsx from 'clsx'; @@ -14,6 +14,6 @@ export const CloseButtonOnModalOverlay = ({ className={clsx('str-chat__modal__overlay__close-button', className)} {...props} > - {children ?? } + {children ?? } ); diff --git a/src/components/Notifications/Notification.tsx b/src/components/Notifications/Notification.tsx index 314d2bb683..213f084fc9 100644 --- a/src/components/Notifications/Notification.tsx +++ b/src/components/Notifications/Notification.tsx @@ -4,11 +4,11 @@ import type { NotificationSeverity } from 'stream-chat'; import { type Notification as NotificationType } from 'stream-chat'; import { - IconArrowRotateRightLeftRepeatRefresh, - IconCheckmark2, - IconCrossMedium, - IconExclamationCircle, + IconCheckmark, + IconExclamationMark, IconExclamationTriangle, + IconRefresh, + IconXmark, } from '../../components/Icons'; import { useChatContext } from '../../context/ChatContext'; import { useTranslationContext } from '../../context/TranslationContext'; @@ -22,10 +22,10 @@ export type NotificationIconProps = { }; const IconsBySeverity: Record = { - error: IconExclamationCircle, - info: null, // IconCircleInfoTooltip, - loading: IconArrowRotateRightLeftRepeatRefresh, - success: IconCheckmark2, + error: IconExclamationMark, + info: null, // IconInfo, + loading: IconRefresh, + success: IconCheckmark, warning: IconExclamationTriangle, }; @@ -142,7 +142,7 @@ export const Notification = forwardRef( size='sm' variant='secondary' > - + )} diff --git a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx index 40a5432326..01792040f9 100644 --- a/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx +++ b/src/components/Poll/PollCreationDialog/OptionFieldSet.tsx @@ -5,7 +5,7 @@ import { useTranslationContext } from '../../../context'; import { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController'; import { useStateStore } from '../../../store'; import type { PollComposerState } from 'stream-chat'; -import { IconCircleMinus, IconDotGrid2x3 } from '../../Icons'; +import { IconMinusCircle, IconReorder } from '../../Icons'; import { Button, type ButtonProps } from '../../Button'; import { TextInputFieldSet } from '../../Form/TextInputFieldSet'; @@ -70,9 +70,7 @@ export const OptionFieldSet = () => { error={!!error} id={option.id} leading={ - draggable ? ( - - ) : undefined + draggable ? : undefined } message={ error ? ( @@ -121,6 +119,6 @@ const RemoveOptionButton = ({ className, ...props }: ButtonProps) => ( variant='secondary' {...props} > - + ); diff --git a/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx b/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx index 35d0d8a20e..e0330448ce 100644 --- a/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx +++ b/src/components/Poll/PollCreationDialog/PollCreationDialogControls.tsx @@ -3,7 +3,7 @@ import { useCanCreatePoll } from '../../MessageComposer/hooks/useCanCreatePoll'; import { useMessageComposerController } from '../../MessageComposer/hooks/useMessageComposerController'; import { useMessageComposerContext, useTranslationContext } from '../../../context'; import clsx from 'clsx'; -import { IconPaperPlane } from '../../Icons'; +import { IconSend } from '../../Icons'; import { Prompt } from '../../Dialog'; export type PollCreationDialogControlsProps = { @@ -46,7 +46,7 @@ export const PollCreationDialogControls = ({ }} type='submit' > - + {t('Send poll')} diff --git a/src/components/Reactions/ReactionSelector.tsx b/src/components/Reactions/ReactionSelector.tsx index 44a5925ca3..9679fa0e8b 100644 --- a/src/components/Reactions/ReactionSelector.tsx +++ b/src/components/Reactions/ReactionSelector.tsx @@ -6,7 +6,7 @@ import { defaultReactionOptions } from './reactionOptions'; import { useComponentContext } from '../../context/ComponentContext'; import { useMessageContext } from '../../context/MessageContext'; import { Button } from '../Button'; -import { IconPlusLarge } from '../Icons'; +import { IconPlus } from '../Icons'; import type { ReactionResponse } from 'stream-chat'; @@ -110,7 +110,7 @@ export const ReactionSelector: ReactionSelectorInterface = (props) => { size='sm' variant='secondary' > - + )} diff --git a/src/components/Search/SearchBar/SearchBar.tsx b/src/components/Search/SearchBar/SearchBar.tsx index 3b66b75f9a..23aeffc387 100644 --- a/src/components/Search/SearchBar/SearchBar.tsx +++ b/src/components/Search/SearchBar/SearchBar.tsx @@ -5,7 +5,7 @@ import { useSearchContext } from '../SearchContext'; import { useSearchQueriesInProgress } from '../hooks'; import { useTranslationContext } from '../../../context'; import { useStateStore } from '../../../store'; -import { Button, IconCircleX, IconMagnifyingGlassSearch } from '../../../components'; +import { Button, IconSearch, IconXCircle } from '../../../components'; import type { SearchControllerState } from 'stream-chat'; @@ -54,7 +54,7 @@ export const SearchBar = () => { 'str-chat__search-bar__input-wrapper--active': isActive, })} > - + { size='xs' variant='secondary' > - + )} diff --git a/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx b/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx index ba8f85e1c5..a05508338b 100644 --- a/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx +++ b/src/components/SummarizedMessagePreview/SummarizedMessagePreview.tsx @@ -7,22 +7,22 @@ import { type UseLatestMessagePreviewParams, } from './hooks/useLatestMessagePreview'; import { - IconCamera1, - IconChainLink, + IconCamera, IconCheckmark1Small, - IconCircleBanSign, + IconChecks, IconClock, - IconDoubleCheckmark1Small, - IconExclamationCircle1, - IconFileBend, - IconMapPin, - IconMicrophone, + IconExclamationCircleFill, + IconFile, + IconLink, + IconLocation, + IconNoSign, IconVideo, + IconVoice, } from '../Icons'; const deliveryStatusIconMap: Record = { - delivered: IconDoubleCheckmark1Small, - read: IconDoubleCheckmark1Small, + delivered: IconChecks, + read: IconChecks, sending: IconClock, sent: IconCheckmark1Small, }; @@ -30,15 +30,15 @@ const deliveryStatusIconMap: Record > = { - deleted: IconCircleBanSign, - error: IconExclamationCircle1, - file: IconFileBend, - giphy: IconFileBend, - image: IconCamera1, - link: IconChainLink, - location: IconMapPin, + deleted: IconNoSign, + error: IconExclamationCircleFill, + file: IconFile, + giphy: IconFile, + image: IconCamera, + link: IconLink, + location: IconLocation, video: IconVideo, - voice: IconMicrophone, + voice: IconVoice, }; export const SummarizedMessagePreview = ({ diff --git a/src/components/Thread/ThreadHeader.tsx b/src/components/Thread/ThreadHeader.tsx index 41aa617128..170cfd22d9 100644 --- a/src/components/Thread/ThreadHeader.tsx +++ b/src/components/Thread/ThreadHeader.tsx @@ -12,7 +12,7 @@ import { useTypingContext } from '../../context/TypingContext'; import type { LocalMessage } from 'stream-chat'; import type { ThreadState } from 'stream-chat'; import { Button } from '../Button'; -import { IconCrossMedium, IconLayoutAlignLeft } from '../Icons'; +import { IconLayoutAlignLeft, IconXmark } from '../Icons'; import { ToggleSidebarButton } from '../Button/ToggleSidebarButton'; import { useChatViewContext } from '../ChatView'; @@ -124,7 +124,7 @@ export const ThreadHeader = (props: ThreadHeaderProps) => { size='md' variant='secondary' > - + )} diff --git a/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx b/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx index d536c7a032..a15dc0e523 100644 --- a/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx +++ b/src/components/Threads/ThreadList/ThreadListEmptyPlaceholder.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { useTranslationContext } from '../../../context'; -import { IconBubbles } from '../../Icons'; +import { IconMessageBubbles } from '../../Icons'; export const ThreadListEmptyPlaceholder = () => { const { t } = useTranslationContext('ThreadListEmptyPlaceholder'); return (

- +

{t('Reply to a message to start a thread')}

); diff --git a/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx b/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx index 61fc3f6a46..66a96d7aa6 100644 --- a/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx +++ b/src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; import type { ThreadManagerState } from 'stream-chat'; -import { IconArrowRotateRightLeftRepeatRefresh } from '../../Icons'; +import { IconRefresh } from '../../Icons'; import { useChatContext, useTranslationContext } from '../../../context'; import { useStateStore } from '../../../store'; import { LoadingIndicator } from '../../Loading'; @@ -30,7 +30,7 @@ export const ThreadListUnseenThreadsBanner = () => { > {!isLoading && ( <> - + {t('ThreadListUnseenThreadsBanner/unreadThreads', { count: unseenThreadIds.length, diff --git a/src/components/VideoPlayer/VideoThumbnail.tsx b/src/components/VideoPlayer/VideoThumbnail.tsx index 46adb57eac..724fb2a3ac 100644 --- a/src/components/VideoPlayer/VideoThumbnail.tsx +++ b/src/components/VideoPlayer/VideoThumbnail.tsx @@ -1,7 +1,7 @@ import { BaseImage, type BaseImageProps } from '../BaseImage'; import { Button } from '../Button'; import clsx from 'clsx'; -import { IconPlaySolid } from '../Icons'; +import { IconPlayFill } from '../Icons'; import React from 'react'; import { useTranslationContext } from '../../context'; @@ -34,11 +34,11 @@ export const VideoThumbnail = ({ size='lg' variant='secondary' > - + ) : (
- +
)} diff --git a/src/plugins/Emojis/EmojiPicker.tsx b/src/plugins/Emojis/EmojiPicker.tsx index acc91a28b7..14d4c53482 100644 --- a/src/plugins/Emojis/EmojiPicker.tsx +++ b/src/plugins/Emojis/EmojiPicker.tsx @@ -4,7 +4,7 @@ import Picker from '@emoji-mart/react'; import { useMessageComposerContext, useTranslationContext } from '../../context'; import { Button, - IconEmojiSmile, + IconEmoji, type PopperLikePlacement, useMessageComposerController, } from '../../components'; @@ -67,7 +67,7 @@ export const EmojiPicker = (props: EmojiPickerProps) => { const { pickerContainerClassName, wrapperClassName } = classNames; - const { ButtonIconComponent = IconEmojiSmile } = props; + const { ButtonIconComponent = IconEmoji } = props; useEffect(() => { if (!popperElement || !referenceElement) return;