From b6fcabe93a4051cccab6810b19b576367b0f8336 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Sun, 29 Mar 2026 12:09:59 +0200 Subject: [PATCH 01/26] fix: initial icon migration --- package/src/icons/Archive.tsx | 6 +- package/src/icons/ArrowBoxLeft.tsx | 2 +- package/src/icons/ArrowRight.tsx | 34 +++++---- package/src/icons/ArrowShareLeft.tsx | 37 +++++++--- package/src/icons/ArrowUp.tsx | 6 +- package/src/icons/ArrowUpRight.tsx | 10 ++- package/src/icons/Audio.tsx | 14 +--- package/src/icons/Bell.tsx | 10 ++- package/src/icons/BlockUser.tsx | 2 +- package/src/icons/Bookmark.tsx | 30 +++++--- package/src/icons/Camera.tsx | 16 +++-- package/src/icons/Check.tsx | 27 ++++--- package/src/icons/CheckAll.tsx | 4 +- package/src/icons/Checkmark.tsx | 30 +++++--- package/src/icons/ChevronLeft.tsx | 6 +- package/src/icons/ChevronTop.tsx | 2 +- package/src/icons/CircleBan.tsx | 28 +++++--- package/src/icons/CircleMinus.tsx | 36 +++++++--- package/src/icons/CircleStop.tsx | 20 +++--- package/src/icons/Close.tsx | 29 +++++--- package/src/icons/Code.tsx | 14 +--- package/src/icons/CommandsIcon.tsx | 12 +++- package/src/icons/Copy.tsx | 6 +- package/src/icons/Cross.tsx | 29 +++++--- package/src/icons/CurveLineLeftUp.tsx | 3 +- package/src/icons/DOC.tsx | 11 +-- package/src/icons/Delete.tsx | 23 +++--- package/src/icons/DotGrid.tsx | 2 +- package/src/icons/Down.tsx | 4 +- package/src/icons/Edit.tsx | 32 ++++----- package/src/icons/ErrorCircle.tsx | 2 +- package/src/icons/Exclamation.tsx | 40 ++++++++--- package/src/icons/ExclamationCircle.tsx | 42 ++++++++--- package/src/icons/File.tsx | 30 +++++--- package/src/icons/FilePickerIcon.tsx | 39 +++++++--- package/src/icons/Flag.tsx | 6 +- package/src/icons/Giphy.tsx | 33 +++++---- package/src/icons/GiphyIcon.tsx | 35 +++++---- package/src/icons/GiphyLightning.tsx | 4 +- package/src/icons/Grid.tsx | 50 ++++++++++--- package/src/icons/GroupIcon.tsx | 30 +++++--- package/src/icons/ImageGrid.tsx | 72 +++++++++++-------- package/src/icons/Imgur.tsx | 8 +-- package/src/icons/InfoTooltip.tsx | 40 +++++++++-- package/src/icons/Lightning.tsx | 24 +++++-- package/src/icons/Link.tsx | 6 +- package/src/icons/Loading.tsx | 39 +++++----- package/src/icons/Lock.tsx | 43 +++++++++--- package/src/icons/MapPin.tsx | 42 +++++++---- package/src/icons/MenuPointHorizontal.tsx | 86 +++++++++-------------- package/src/icons/MessageBubbleEmpty.tsx | 6 +- package/src/icons/MessageFlag.tsx | 34 ++++++--- package/src/icons/MessageIcon.tsx | 34 ++++++--- package/src/icons/Mic.tsx | 30 +++++--- package/src/icons/Minus.tsx | 6 +- package/src/icons/MoreEmojis.tsx | 39 +++++++--- package/src/icons/Mute.tsx | 41 ++++------- package/src/icons/NewClose.tsx | 26 ++++--- package/src/icons/OtherFileIcon.tsx | 10 +-- package/src/icons/PDF.tsx | 14 +--- package/src/icons/Pause.tsx | 28 +++++--- package/src/icons/PeopleIcon.tsx | 35 +++++---- package/src/icons/PhotoIcon.tsx | 37 +++++----- package/src/icons/Picture.tsx | 24 ++++--- package/src/icons/Pin.tsx | 30 +++++--- package/src/icons/Play.tsx | 4 +- package/src/icons/Plus.tsx | 6 +- package/src/icons/PollIcon.tsx | 4 +- package/src/icons/PollThumbnail.tsx | 37 +++++++--- package/src/icons/Presentation.tsx | 14 +--- package/src/icons/Recorder.tsx | 33 +++++---- package/src/icons/Refresh.tsx | 29 +++++--- package/src/icons/Reload.tsx | 30 +++++--- package/src/icons/Resend.tsx | 26 ++++--- package/src/icons/RotateCircle.tsx | 2 +- package/src/icons/Search.tsx | 31 +++++--- package/src/icons/SendRight.tsx | 36 ++++++---- package/src/icons/Share.tsx | 4 +- package/src/icons/Smile.tsx | 40 +++++++---- package/src/icons/Sound.tsx | 26 ++++--- package/src/icons/SpreadSheet.tsx | 19 ++--- package/src/icons/Stop.tsx | 24 +++++-- package/src/icons/ThreadReply.tsx | 34 ++++++--- package/src/icons/Tick.tsx | 2 +- package/src/icons/Time.tsx | 6 +- package/src/icons/Trash.tsx | 2 +- package/src/icons/Unlock.tsx | 35 ++++++--- package/src/icons/UnreadIndicator.tsx | 3 +- package/src/icons/User.tsx | 30 +++++--- package/src/icons/UserAdd.tsx | 26 ++++--- package/src/icons/UserDelete.tsx | 26 ++++--- package/src/icons/Video.tsx | 41 +++++------ package/src/icons/VideoIcon.tsx | 35 +++++---- package/src/icons/Warning.tsx | 26 ++++--- package/src/icons/ZIP.tsx | 12 +--- package/src/icons/utils/base.tsx | 6 +- 96 files changed, 1347 insertions(+), 852 deletions(-) diff --git a/package/src/icons/Archive.tsx b/package/src/icons/Archive.tsx index c997610b1d..f2bde2f71e 100644 --- a/package/src/icons/Archive.tsx +++ b/package/src/icons/Archive.tsx @@ -3,10 +3,10 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Archive: React.FC = (props) => ( - +export const Archive: React.FC = ({ height, size, width, ...props }) => ( + = (props) => ( ( - - - - - -); +import { IconProps } from './utils/base'; + +export const ArrowRight = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + + + ); +}; diff --git a/package/src/icons/ArrowShareLeft.tsx b/package/src/icons/ArrowShareLeft.tsx index 1a39794f84..350c147b3f 100644 --- a/package/src/icons/ArrowShareLeft.tsx +++ b/package/src/icons/ArrowShareLeft.tsx @@ -4,13 +4,32 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const ArrowShareLeft = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/ArrowUp.tsx b/package/src/icons/ArrowUp.tsx index e145126f94..b67a779b50 100644 --- a/package/src/icons/ArrowUp.tsx +++ b/package/src/icons/ArrowUp.tsx @@ -3,10 +3,10 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const ArrowUp = ({ height, width, ...rest }: IconProps) => ( - +export const ArrowUp = ({ height, size, width, ...rest }: IconProps) => ( + { +export const ArrowUpRight = ({ height, size, width, ...rest }: IconProps) => { return ( - + ( - + - + ); diff --git a/package/src/icons/Bell.tsx b/package/src/icons/Bell.tsx index 095472f198..3548562f03 100644 --- a/package/src/icons/Bell.tsx +++ b/package/src/icons/Bell.tsx @@ -3,9 +3,15 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Bell = ({ height = 16, width = 16, ...rest }: IconProps) => { +export const Bell = ({ height, size, width, ...rest }: IconProps) => { return ( - + { return ( ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/Camera.tsx b/package/src/icons/Camera.tsx index 210ebd6953..a24678b8d0 100644 --- a/package/src/icons/Camera.tsx +++ b/package/src/icons/Camera.tsx @@ -4,14 +4,22 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Camera = (props: IconProps) => ( - +export const Camera = ({ height, size, width, ...props }: IconProps) => ( + diff --git a/package/src/icons/Check.tsx b/package/src/icons/Check.tsx index e932ddae5b..535e63b05e 100644 --- a/package/src/icons/Check.tsx +++ b/package/src/icons/Check.tsx @@ -4,14 +4,19 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Check = ({ height, width, ...rest }: IconProps) => ( - - - -); +export const Check = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/CheckAll.tsx b/package/src/icons/CheckAll.tsx index 38c66d8a6f..eb58258dd8 100644 --- a/package/src/icons/CheckAll.tsx +++ b/package/src/icons/CheckAll.tsx @@ -4,8 +4,8 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const CheckAll = ({ height, width, ...rest }: IconProps) => ( - +export const CheckAll = ({ height, size, width, ...rest }: IconProps) => ( + ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/ChevronLeft.tsx b/package/src/icons/ChevronLeft.tsx index 151c67e970..67c196a7df 100644 --- a/package/src/icons/ChevronLeft.tsx +++ b/package/src/icons/ChevronLeft.tsx @@ -4,10 +4,10 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const ChevronLeft = ({ height, width, ...rest }: IconProps) => ( - +export const ChevronLeft = ({ height, size, width, ...rest }: IconProps) => ( + ( ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/CircleMinus.tsx b/package/src/icons/CircleMinus.tsx index d14a6d1009..ca62555fbd 100644 --- a/package/src/icons/CircleMinus.tsx +++ b/package/src/icons/CircleMinus.tsx @@ -4,13 +4,31 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const CircleMinus = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/CircleStop.tsx b/package/src/icons/CircleStop.tsx index c69a47da2b..fe1ba87b1a 100644 --- a/package/src/icons/CircleStop.tsx +++ b/package/src/icons/CircleStop.tsx @@ -8,11 +8,15 @@ type Props = IconProps & { size: number; }; -export const CircleStop = ({ size, ...rest }: Props) => ( - - - -); +export const CircleStop = ({ fill, pathFill, size, stroke, ...rest }: Props) => { + const color = fill ?? pathFill ?? stroke ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/Close.tsx b/package/src/icons/Close.tsx index 77763dd95d..7d0dc9f367 100644 --- a/package/src/icons/Close.tsx +++ b/package/src/icons/Close.tsx @@ -1,12 +1,21 @@ import React from 'react'; -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Close = (props: IconProps) => ( - - - -); +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Close = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/Code.tsx b/package/src/icons/Code.tsx index d4e7ddb317..fd01bd02e8 100644 --- a/package/src/icons/Code.tsx +++ b/package/src/icons/Code.tsx @@ -5,30 +5,22 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Code = ({ height, width, ...rest }: IconProps) => ( - + - + ); diff --git a/package/src/icons/CommandsIcon.tsx b/package/src/icons/CommandsIcon.tsx index 3d507072b1..180e7df594 100644 --- a/package/src/icons/CommandsIcon.tsx +++ b/package/src/icons/CommandsIcon.tsx @@ -4,10 +4,16 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const CommandsIcon = (props: IconProps) => ( - +export const CommandsIcon = ({ height, size, width, ...props }: IconProps) => ( + ( - +export const Copy = ({ height, size, width, ...props }: IconProps) => ( + ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/CurveLineLeftUp.tsx b/package/src/icons/CurveLineLeftUp.tsx index 62defd1caa..cc6bc13546 100644 --- a/package/src/icons/CurveLineLeftUp.tsx +++ b/package/src/icons/CurveLineLeftUp.tsx @@ -7,8 +7,9 @@ import { IconProps } from './utils/base'; export const CurveLineLeftUp = (props: IconProps) => ( diff --git a/package/src/icons/DOC.tsx b/package/src/icons/DOC.tsx index b2238d4bf1..ab7e8d914d 100644 --- a/package/src/icons/DOC.tsx +++ b/package/src/icons/DOC.tsx @@ -5,25 +5,18 @@ import Svg, { Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; export const DOC = ({ height, width, ...rest }: IconProps) => ( - + - + ); diff --git a/package/src/icons/Delete.tsx b/package/src/icons/Delete.tsx index 8ee1613715..9f3d650cca 100644 --- a/package/src/icons/Delete.tsx +++ b/package/src/icons/Delete.tsx @@ -4,11 +4,18 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Delete = ({ stroke, ...rest }: IconProps) => ( - - - -); +export const Delete = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/DotGrid.tsx b/package/src/icons/DotGrid.tsx index e4db359540..670f475cda 100644 --- a/package/src/icons/DotGrid.tsx +++ b/package/src/icons/DotGrid.tsx @@ -7,7 +7,7 @@ import { IconProps } from './utils/base'; export const DotGrid = ({ height, width, ...rest }: IconProps) => ( ( - +export const Down = ({ height, size, width, ...rest }: IconProps) => ( + ( - - - - -); +export const Edit = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/ErrorCircle.tsx b/package/src/icons/ErrorCircle.tsx index 358abc8f35..e2707d1189 100644 --- a/package/src/icons/ErrorCircle.tsx +++ b/package/src/icons/ErrorCircle.tsx @@ -8,7 +8,7 @@ export const ErrorCircle = ({ height, width, ...rest }: IconProps) => ( diff --git a/package/src/icons/Exclamation.tsx b/package/src/icons/Exclamation.tsx index b11fdd53a0..7d857b0ee9 100644 --- a/package/src/icons/Exclamation.tsx +++ b/package/src/icons/Exclamation.tsx @@ -4,15 +4,33 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Exclamation = ({ height, width, ...rest }: IconProps) => ( - - - { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + - -); + > + + + + ); +}; diff --git a/package/src/icons/ExclamationCircle.tsx b/package/src/icons/ExclamationCircle.tsx index d50e5f3fc6..83938b3b78 100644 --- a/package/src/icons/ExclamationCircle.tsx +++ b/package/src/icons/ExclamationCircle.tsx @@ -4,13 +4,37 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const ExclamationCircle = ({ height, width, ...rest }: IconProps) => ( - - { + const color = fill ?? stroke ?? pathFill ?? 'black'; + + return ( + - -); + > + + + + + ); +}; diff --git a/package/src/icons/File.tsx b/package/src/icons/File.tsx index f543f6ad6a..1df48a8692 100644 --- a/package/src/icons/File.tsx +++ b/package/src/icons/File.tsx @@ -4,13 +4,25 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const File = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/FilePickerIcon.tsx b/package/src/icons/FilePickerIcon.tsx index 06055c879d..85f37349e8 100644 --- a/package/src/icons/FilePickerIcon.tsx +++ b/package/src/icons/FilePickerIcon.tsx @@ -4,13 +4,32 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const FilePickerIcon = (props: IconProps) => ( - - - -); +export const FilePickerIcon = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/Flag.tsx b/package/src/icons/Flag.tsx index 505631add3..c6458719d3 100644 --- a/package/src/icons/Flag.tsx +++ b/package/src/icons/Flag.tsx @@ -4,10 +4,10 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Flag = (props: IconProps) => ( - +export const Flag = ({ height, size, width, ...props }: IconProps) => ( + ( - + + - - - - - - - + + + + + + + ); diff --git a/package/src/icons/GiphyIcon.tsx b/package/src/icons/GiphyIcon.tsx index c28f6875e7..b0b3ea222c 100644 --- a/package/src/icons/GiphyIcon.tsx +++ b/package/src/icons/GiphyIcon.tsx @@ -1,23 +1,32 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; +import Svg, { Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const GiphyIcon = (props: IconProps) => ( - +export const GiphyIcon = ({ height, size, width, ...props }: IconProps) => ( + + - - - - - - - + + + + + + + ); diff --git a/package/src/icons/GiphyLightning.tsx b/package/src/icons/GiphyLightning.tsx index 4b8c02ce2d..64600353d6 100644 --- a/package/src/icons/GiphyLightning.tsx +++ b/package/src/icons/GiphyLightning.tsx @@ -9,9 +9,9 @@ type Props = IconProps & { }; export const GiphyLightning = ({ size = 16, ...rest }: Props) => ( - + diff --git a/package/src/icons/Grid.tsx b/package/src/icons/Grid.tsx index 4584ae45b9..859c92d543 100644 --- a/package/src/icons/Grid.tsx +++ b/package/src/icons/Grid.tsx @@ -1,12 +1,42 @@ import React from 'react'; -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Grid = (props: IconProps) => ( - - - -); +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Grid = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + + + + ); +}; diff --git a/package/src/icons/GroupIcon.tsx b/package/src/icons/GroupIcon.tsx index 49c12eef76..ac9f71ce8a 100644 --- a/package/src/icons/GroupIcon.tsx +++ b/package/src/icons/GroupIcon.tsx @@ -4,14 +4,24 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const GroupIcon = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/ImageGrid.tsx b/package/src/icons/ImageGrid.tsx index c79cd509f1..924eef9c32 100644 --- a/package/src/icons/ImageGrid.tsx +++ b/package/src/icons/ImageGrid.tsx @@ -4,35 +4,45 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const ImageGrid = ({ height, width, ...rest }: IconProps) => ( - - - - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + + + + ); +}; diff --git a/package/src/icons/Imgur.tsx b/package/src/icons/Imgur.tsx index 14c8a14979..833ade68ee 100644 --- a/package/src/icons/Imgur.tsx +++ b/package/src/icons/Imgur.tsx @@ -5,14 +5,14 @@ import { Path, Rect, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Imgur = ({ height, width, ...rest }: IconProps) => ( - - + + diff --git a/package/src/icons/InfoTooltip.tsx b/package/src/icons/InfoTooltip.tsx index e7715e6de1..18d53f9269 100644 --- a/package/src/icons/InfoTooltip.tsx +++ b/package/src/icons/InfoTooltip.tsx @@ -4,11 +4,37 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const InfoTooltip = ({ height, width, ...rest }: IconProps) => ( - - { + const color = fill ?? stroke ?? pathFill ?? 'black'; + + return ( + - -); + > + + + + + ); +}; diff --git a/package/src/icons/Lightning.tsx b/package/src/icons/Lightning.tsx index 4f398808f9..192239d998 100644 --- a/package/src/icons/Lightning.tsx +++ b/package/src/icons/Lightning.tsx @@ -4,11 +4,21 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Lightning = ({ height, width, ...rest }: IconProps) => ( - - { + const color = fill ?? pathFill ?? stroke ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/Link.tsx b/package/src/icons/Link.tsx index 4de2c85f1a..17d0713ad8 100644 --- a/package/src/icons/Link.tsx +++ b/package/src/icons/Link.tsx @@ -4,10 +4,10 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Link = ({ height, width, ...rest }: IconProps) => ( - +export const Link = ({ height, size, width, ...rest }: IconProps) => ( + > & { @@ -14,29 +14,24 @@ export const Loading = (props: LoadingProps) => { height = 16, startColor = '#0169F6', stopColor = '#006CFF', - stopOpacity = 0.01, - viewBox = '0 0 16 16', + stopOpacity = 0.3, + viewBox = '0 0 20 20', width = 16, } = props; return ( - - + - - - - - - - + + ); }; diff --git a/package/src/icons/Lock.tsx b/package/src/icons/Lock.tsx index 5cb224fff8..549dafe562 100644 --- a/package/src/icons/Lock.tsx +++ b/package/src/icons/Lock.tsx @@ -4,14 +4,37 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Lock = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + + + ); +}; diff --git a/package/src/icons/MapPin.tsx b/package/src/icons/MapPin.tsx index 532e437aa8..e4f1c1b285 100644 --- a/package/src/icons/MapPin.tsx +++ b/package/src/icons/MapPin.tsx @@ -4,19 +4,31 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const MapPin = ({ height, width, ...rest }: IconProps) => ( - - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + + ); +}; diff --git a/package/src/icons/MenuPointHorizontal.tsx b/package/src/icons/MenuPointHorizontal.tsx index e76818cc7d..f80a54b3cd 100644 --- a/package/src/icons/MenuPointHorizontal.tsx +++ b/package/src/icons/MenuPointHorizontal.tsx @@ -4,55 +4,37 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const MenuPointHorizontal = (props: IconProps) => ( - - - - - - - - - - - -); +export const MenuPointHorizontal = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = fill ?? stroke ?? pathFill ?? 'black'; + + return ( + + + + + + ); +}; diff --git a/package/src/icons/MessageBubbleEmpty.tsx b/package/src/icons/MessageBubbleEmpty.tsx index bef08edf75..c5ca2a40f0 100644 --- a/package/src/icons/MessageBubbleEmpty.tsx +++ b/package/src/icons/MessageBubbleEmpty.tsx @@ -4,10 +4,10 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const MessageBubbleEmpty = ({ height, width, ...props }: IconProps) => ( - +export const MessageBubbleEmpty = ({ height, size, width, ...props }: IconProps) => ( + ( - - - -); +export const MessageFlag = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/MessageIcon.tsx b/package/src/icons/MessageIcon.tsx index 1e5b864eaa..0fd7ac51f3 100644 --- a/package/src/icons/MessageIcon.tsx +++ b/package/src/icons/MessageIcon.tsx @@ -1,12 +1,26 @@ import React from 'react'; -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const MessageIcon = (props: IconProps) => ( - - - -); +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const MessageIcon = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/Mic.tsx b/package/src/icons/Mic.tsx index 2c20e5d10c..c530a69c71 100644 --- a/package/src/icons/Mic.tsx +++ b/package/src/icons/Mic.tsx @@ -4,14 +4,24 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Mic = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/Minus.tsx b/package/src/icons/Minus.tsx index ccc8ecea15..c30cf8dc53 100644 --- a/package/src/icons/Minus.tsx +++ b/package/src/icons/Minus.tsx @@ -4,8 +4,8 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Minus = ({ height, width, ...rest }: IconProps) => ( - - +export const Minus = ({ height, size, width, ...rest }: IconProps) => ( + + ); diff --git a/package/src/icons/MoreEmojis.tsx b/package/src/icons/MoreEmojis.tsx index bb15425341..980fdb3589 100644 --- a/package/src/icons/MoreEmojis.tsx +++ b/package/src/icons/MoreEmojis.tsx @@ -4,14 +4,31 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const MoreEmojis = (props: IconProps) => ( - - - -); +export const MoreEmojis = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + + + + + ); +}; diff --git a/package/src/icons/Mute.tsx b/package/src/icons/Mute.tsx index 47f0641e85..28fc1a5665 100644 --- a/package/src/icons/Mute.tsx +++ b/package/src/icons/Mute.tsx @@ -1,33 +1,22 @@ import React from 'react'; -import Svg, { Mask, Path } from 'react-native-svg'; +import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Mute = ({ height, width, ...rest }: IconProps) => ( - - +export const Mute = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - - - - - - -); + + ); +}; diff --git a/package/src/icons/NewClose.tsx b/package/src/icons/NewClose.tsx index d2bea91841..3ae3905512 100644 --- a/package/src/icons/NewClose.tsx +++ b/package/src/icons/NewClose.tsx @@ -4,14 +4,18 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const NewClose = ({ height, width, ...rest }: IconProps) => ( - - - -); +export const NewClose = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/OtherFileIcon.tsx b/package/src/icons/OtherFileIcon.tsx index 1f540175b6..3c976580cd 100644 --- a/package/src/icons/OtherFileIcon.tsx +++ b/package/src/icons/OtherFileIcon.tsx @@ -5,18 +5,12 @@ import Svg, { Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; export const OtherFileIcon = ({ height, width, ...rest }: IconProps) => ( - + - + diff --git a/package/src/icons/PDF.tsx b/package/src/icons/PDF.tsx index 4e38db6b4e..20dc7c4080 100644 --- a/package/src/icons/PDF.tsx +++ b/package/src/icons/PDF.tsx @@ -5,29 +5,21 @@ import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; export const PDF = ({ height, width, ...rest }: IconProps) => ( - + - - + + diff --git a/package/src/icons/Pause.tsx b/package/src/icons/Pause.tsx index 0a238b131e..3ae0ba24fe 100644 --- a/package/src/icons/Pause.tsx +++ b/package/src/icons/Pause.tsx @@ -4,15 +4,21 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Pause = ({ height, width, ...rest }: IconProps) => ( - - - { + const color = fill ?? pathFill ?? stroke ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/PeopleIcon.tsx b/package/src/icons/PeopleIcon.tsx index 2d52bcd37e..fff2fdda11 100644 --- a/package/src/icons/PeopleIcon.tsx +++ b/package/src/icons/PeopleIcon.tsx @@ -4,19 +4,24 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const PeopleIcon = ({ height, width, ...rest }: IconProps) => ( - - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/PhotoIcon.tsx b/package/src/icons/PhotoIcon.tsx index 64adc45f9f..6c7213b011 100644 --- a/package/src/icons/PhotoIcon.tsx +++ b/package/src/icons/PhotoIcon.tsx @@ -4,21 +4,24 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const PhotoIcon = ({ height, width, ...rest }: IconProps) => ( - - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/Picture.tsx b/package/src/icons/Picture.tsx index a00e23b6e1..c1d091aa83 100644 --- a/package/src/icons/Picture.tsx +++ b/package/src/icons/Picture.tsx @@ -4,18 +4,24 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -// TODO V9: This SVG relies on path fill instead of stroke. We need to refactor how -// SVGs are resolved before we remove the hack of applying the pathFill -// directly. export const Picture = (props: IconProps) => { - const { stroke, ...rest } = props; + const { fill, height, pathFill, size, stroke, width, ...rest } = props; + const color = stroke ?? fill ?? pathFill ?? 'black'; + return ( - + ); diff --git a/package/src/icons/Pin.tsx b/package/src/icons/Pin.tsx index 82264c94d0..06ffcaba71 100644 --- a/package/src/icons/Pin.tsx +++ b/package/src/icons/Pin.tsx @@ -4,14 +4,24 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Pin = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/Play.tsx b/package/src/icons/Play.tsx index ae95118ce8..8e8d41b5ca 100644 --- a/package/src/icons/Play.tsx +++ b/package/src/icons/Play.tsx @@ -4,8 +4,8 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Play = ({ height, width, ...rest }: IconProps) => ( - +export const Play = ({ height, size, width, ...rest }: IconProps) => ( + ( - - +export const Plus = ({ height, size, width, ...rest }: IconProps) => ( + + ); diff --git a/package/src/icons/PollIcon.tsx b/package/src/icons/PollIcon.tsx index 9fbd190fd7..1bc32fec3e 100644 --- a/package/src/icons/PollIcon.tsx +++ b/package/src/icons/PollIcon.tsx @@ -7,8 +7,8 @@ import { IconProps } from './utils/base'; export const PollIcon = ({ height, width, ...rest }: IconProps) => ( ( - - - -); +export const PollThumbnail = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/Presentation.tsx b/package/src/icons/Presentation.tsx index 65e0b67a6d..c567fa30da 100644 --- a/package/src/icons/Presentation.tsx +++ b/package/src/icons/Presentation.tsx @@ -5,30 +5,22 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Presentation = ({ height, width, ...rest }: IconProps) => ( - + + - ); diff --git a/package/src/icons/Recorder.tsx b/package/src/icons/Recorder.tsx index dc9dbd1272..52d0907399 100644 --- a/package/src/icons/Recorder.tsx +++ b/package/src/icons/Recorder.tsx @@ -1,18 +1,25 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; +import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Recorder = ({ ...props }: IconProps) => ( - - - -); +export const Recorder = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + + + + + + + + ); +}; diff --git a/package/src/icons/Refresh.tsx b/package/src/icons/Refresh.tsx index 4b8ab6ce58..3f0ad7dbdf 100644 --- a/package/src/icons/Refresh.tsx +++ b/package/src/icons/Refresh.tsx @@ -1,12 +1,21 @@ import React from 'react'; -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Refresh = (props: IconProps) => ( - - - -); +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Refresh = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/Reload.tsx b/package/src/icons/Reload.tsx index b1d0c62b20..203d207c7b 100644 --- a/package/src/icons/Reload.tsx +++ b/package/src/icons/Reload.tsx @@ -4,14 +4,24 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Reload = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/Resend.tsx b/package/src/icons/Resend.tsx index d5cd628aff..6043181414 100644 --- a/package/src/icons/Resend.tsx +++ b/package/src/icons/Resend.tsx @@ -4,14 +4,18 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Resend = (props: IconProps) => ( - - - -); +export const Resend = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/RotateCircle.tsx b/package/src/icons/RotateCircle.tsx index 0d7e49d0f3..7a33c150a5 100644 --- a/package/src/icons/RotateCircle.tsx +++ b/package/src/icons/RotateCircle.tsx @@ -7,7 +7,7 @@ import { IconProps } from './utils/base'; export const RotateCircle = ({ height, width, ...rest }: IconProps) => ( ( - - - -); +export const Search = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/SendRight.tsx b/package/src/icons/SendRight.tsx index a01676cd4f..b4b6c9a8ef 100644 --- a/package/src/icons/SendRight.tsx +++ b/package/src/icons/SendRight.tsx @@ -4,18 +4,26 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const SendRight = ({ height, width, ...rest }: IconProps) => ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + testID='send-right' + > + + + ); +}; diff --git a/package/src/icons/Share.tsx b/package/src/icons/Share.tsx index b7ab400f3d..831d2c144a 100644 --- a/package/src/icons/Share.tsx +++ b/package/src/icons/Share.tsx @@ -5,9 +5,9 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Share = ({ height, width, ...rest }: IconProps) => ( - + ( - - - - -); +import { IconProps } from './utils/base'; + +export const Smile = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + + + + ); +}; diff --git a/package/src/icons/Sound.tsx b/package/src/icons/Sound.tsx index 22741f62fe..0b10b4793c 100644 --- a/package/src/icons/Sound.tsx +++ b/package/src/icons/Sound.tsx @@ -4,14 +4,18 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Sound = (props: IconProps) => ( - - - -); +export const Sound = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/SpreadSheet.tsx b/package/src/icons/SpreadSheet.tsx index f8069f0698..bd49e3ed65 100644 --- a/package/src/icons/SpreadSheet.tsx +++ b/package/src/icons/SpreadSheet.tsx @@ -5,27 +5,22 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const SpreadSheet = ({ height, width, ...rest }: IconProps) => ( - + - + ); diff --git a/package/src/icons/Stop.tsx b/package/src/icons/Stop.tsx index 99212dbf93..bd1f20f778 100644 --- a/package/src/icons/Stop.tsx +++ b/package/src/icons/Stop.tsx @@ -4,11 +4,21 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Stop = ({ height, width, ...rest }: IconProps) => ( - - { + const color = fill ?? pathFill ?? stroke ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/ThreadReply.tsx b/package/src/icons/ThreadReply.tsx index 6de7d1eccc..fd59a106a0 100644 --- a/package/src/icons/ThreadReply.tsx +++ b/package/src/icons/ThreadReply.tsx @@ -4,14 +4,26 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const ThreadReply = (props: IconProps) => ( - - - -); +export const ThreadReply = ({ + fill, + height, + pathFill, + size, + stroke, + width, + ...rest +}: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/Tick.tsx b/package/src/icons/Tick.tsx index 909a66f48c..39f81ad283 100644 --- a/package/src/icons/Tick.tsx +++ b/package/src/icons/Tick.tsx @@ -7,7 +7,7 @@ import { IconProps } from './utils/base'; export const Tick = ({ height, width, ...rest }: IconProps) => ( ( - +export const Time = ({ height, size, width, ...rest }: IconProps) => ( + ( ( - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + + + ); +}; diff --git a/package/src/icons/UnreadIndicator.tsx b/package/src/icons/UnreadIndicator.tsx index 7803a6bff3..85159d0187 100644 --- a/package/src/icons/UnreadIndicator.tsx +++ b/package/src/icons/UnreadIndicator.tsx @@ -9,9 +9,10 @@ type Props = IconProps; export const UnreadIndicator = (props: Props) => ( diff --git a/package/src/icons/User.tsx b/package/src/icons/User.tsx index f86f30af0f..048c10ec68 100644 --- a/package/src/icons/User.tsx +++ b/package/src/icons/User.tsx @@ -1,12 +1,22 @@ import React from 'react'; -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const User = (props: IconProps) => ( - - - -); +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const User = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/UserAdd.tsx b/package/src/icons/UserAdd.tsx index a8441421af..1abe698419 100644 --- a/package/src/icons/UserAdd.tsx +++ b/package/src/icons/UserAdd.tsx @@ -4,14 +4,18 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const UserAdd = (props: IconProps) => ( - - - -); +export const UserAdd = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/UserDelete.tsx b/package/src/icons/UserDelete.tsx index 192f0f56d6..66acadf3a0 100644 --- a/package/src/icons/UserDelete.tsx +++ b/package/src/icons/UserDelete.tsx @@ -4,14 +4,18 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const UserDelete = (props: IconProps) => ( - - - -); +export const UserDelete = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/Video.tsx b/package/src/icons/Video.tsx index ea83c7ec4d..a8c69e028e 100644 --- a/package/src/icons/Video.tsx +++ b/package/src/icons/Video.tsx @@ -1,40 +1,33 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; +import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'; import { IconProps } from './utils/base'; export const Video = ({ height, width, ...rest }: IconProps) => ( - + - - - + + + + + + + + + ); diff --git a/package/src/icons/VideoIcon.tsx b/package/src/icons/VideoIcon.tsx index bf0abae4ed..9f49e7a171 100644 --- a/package/src/icons/VideoIcon.tsx +++ b/package/src/icons/VideoIcon.tsx @@ -4,19 +4,24 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const VideoIcon = ({ height, width, ...rest }: IconProps) => ( - - - { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/Warning.tsx b/package/src/icons/Warning.tsx index 0beba0bdce..7268122a82 100644 --- a/package/src/icons/Warning.tsx +++ b/package/src/icons/Warning.tsx @@ -4,13 +4,21 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Warning = ({ height, width, ...rest }: IconProps) => ( - - { + const color = fill ?? stroke ?? pathFill ?? 'black'; + + return ( + - -); + > + + + ); +}; diff --git a/package/src/icons/ZIP.tsx b/package/src/icons/ZIP.tsx index 6027cdf75d..4f4c27552b 100644 --- a/package/src/icons/ZIP.tsx +++ b/package/src/icons/ZIP.tsx @@ -5,29 +5,21 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; export const ZIP = ({ height, width, ...rest }: IconProps) => ( - + - + ); diff --git a/package/src/icons/utils/base.tsx b/package/src/icons/utils/base.tsx index 1b651c9165..64d6215014 100644 --- a/package/src/icons/utils/base.tsx +++ b/package/src/icons/utils/base.tsx @@ -9,13 +9,13 @@ export type IconProps = Partial & }; export const RootSvg = (props: IconProps) => { - const { children, height = 24, viewBox = '0 0 24 24', width = 24 } = props; + const { children, height, size, viewBox = '0 0 24 24', width } = props; return ( From b2c6072b7064851b463305575d1c077ee246ea47 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Sun, 29 Mar 2026 12:19:20 +0200 Subject: [PATCH 02/26] fix: use unified delete icon --- .../components/AudioRecorder/AudioRecorder.tsx | 4 ++-- package/src/icons/Delete.tsx | 4 ++-- package/src/icons/Trash.tsx | 17 ----------------- 3 files changed, 4 insertions(+), 21 deletions(-) delete mode 100644 package/src/icons/Trash.tsx diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx index 8c3742043c..e7cb32f7b9 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx @@ -15,10 +15,10 @@ import { useTranslationContext } from '../../../../contexts/translationContext/T import { useStateStore } from '../../../../hooks/useStateStore'; import { ChevronLeft } from '../../../../icons/ChevronLeft'; +import { Delete } from '../../../../icons/Delete'; import { Mic } from '../../../../icons/Mic'; import { Stop } from '../../../../icons/Stop'; import { Tick } from '../../../../icons/Tick'; -import { Trash } from '../../../../icons/Trash'; import { IconProps } from '../../../../icons/utils/base'; import { NativeHandlers } from '../../../../native'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; @@ -109,7 +109,7 @@ const DeleteRecording = ({ size='sm' iconOnly onPress={onDeleteVoiceRecording} - LeadingIcon={Trash} + LeadingIcon={Delete} /> ); }; diff --git a/package/src/icons/Delete.tsx b/package/src/icons/Delete.tsx index 9f3d650cca..c1f08a4ab1 100644 --- a/package/src/icons/Delete.tsx +++ b/package/src/icons/Delete.tsx @@ -8,9 +8,9 @@ export const Delete = ({ fill, height, pathFill, size, stroke, width, ...rest }: const color = stroke ?? pathFill ?? fill ?? 'black'; return ( - + ( - - - -); From 8108bbf750bc2e91df54c8d3ddd75032b5f41bf1 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Sun, 29 Mar 2026 12:29:25 +0200 Subject: [PATCH 03/26] fix: gallery grid icon --- package/src/icons/ImageGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/icons/ImageGrid.tsx b/package/src/icons/ImageGrid.tsx index 924eef9c32..393f54f8c4 100644 --- a/package/src/icons/ImageGrid.tsx +++ b/package/src/icons/ImageGrid.tsx @@ -11,7 +11,7 @@ export const ImageGrid = ({ fill, height, pathFill, size, stroke, width, ...rest From 67dc3a892e411bf8a77e9e86d549fc596f6fd685 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Sun, 29 Mar 2026 12:35:17 +0200 Subject: [PATCH 04/26] fix: use new delete --- package/src/icons/Delete.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/icons/Delete.tsx b/package/src/icons/Delete.tsx index c1f08a4ab1..65ae0c8cf6 100644 --- a/package/src/icons/Delete.tsx +++ b/package/src/icons/Delete.tsx @@ -10,7 +10,7 @@ export const Delete = ({ fill, height, pathFill, size, stroke, width, ...rest }: return ( Date: Sun, 29 Mar 2026 13:05:55 +0200 Subject: [PATCH 05/26] fix: update viewboxes --- .../components/AttachmentTypePickerButton.tsx | 2 +- package/src/icons/ArrowRight.tsx | 2 +- package/src/icons/Bookmark.tsx | 2 +- package/src/icons/Camera.tsx | 2 +- package/src/icons/Close.tsx | 2 +- package/src/icons/CommandsIcon.tsx | 8 +------- package/src/icons/Copy.tsx | 2 +- package/src/icons/File.tsx | 2 +- package/src/icons/FilePickerIcon.tsx | 8 +------- package/src/icons/Grid.tsx | 2 +- package/src/icons/Lightning.tsx | 2 +- package/src/icons/MenuPointHorizontal.tsx | 2 +- package/src/icons/MessageIcon.tsx | 2 +- package/src/icons/Picture.tsx | 8 +------- package/src/icons/PollThumbnail.tsx | 8 +------- package/src/icons/Recorder.tsx | 2 +- package/src/icons/Refresh.tsx | 2 +- package/src/icons/Smile.tsx | 2 +- package/src/icons/Time.tsx | 2 +- package/src/icons/User.tsx | 2 +- package/src/icons/VideoIcon.tsx | 2 +- package/src/icons/Warning.tsx | 2 +- 22 files changed, 22 insertions(+), 46 deletions(-) diff --git a/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx b/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx index 85f9dcf4bc..5c93a80c4c 100644 --- a/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx +++ b/package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx @@ -42,7 +42,7 @@ export const AttachmentTypePickerButton = ({ }: AttachmentTypePickerButtonProps) => { const { disableAttachmentPicker } = useAttachmentPickerContext(); const ButtonIcon = useCallback( - (props: IconProps) => Icon && , + (props: IconProps) => Icon && , [Icon], ); diff --git a/package/src/icons/ArrowRight.tsx b/package/src/icons/ArrowRight.tsx index cc8f54c12f..0af4de7b7c 100644 --- a/package/src/icons/ArrowRight.tsx +++ b/package/src/icons/ArrowRight.tsx @@ -8,7 +8,7 @@ export const ArrowRight = ({ fill, height, pathFill, size, stroke, width, ...res const color = pathFill ?? fill ?? stroke ?? 'black'; return ( - + diff --git a/package/src/icons/Camera.tsx b/package/src/icons/Camera.tsx index a24678b8d0..b94e8e59c6 100644 --- a/package/src/icons/Camera.tsx +++ b/package/src/icons/Camera.tsx @@ -9,7 +9,7 @@ export const Camera = ({ height, size, width, ...props }: IconProps) => ( fill='none' height={height ?? size} width={width ?? size} - viewBox={'1.75 1.75 16.5 16.5'} + viewBox={'0 0 20 20'} strokeWidth={1.5} strokeLinejoin='round' {...props} diff --git a/package/src/icons/Close.tsx b/package/src/icons/Close.tsx index 7d0dc9f367..cb18ace4fc 100644 --- a/package/src/icons/Close.tsx +++ b/package/src/icons/Close.tsx @@ -8,7 +8,7 @@ export const Close = ({ fill, height, pathFill, size, stroke, width, ...rest }: const color = pathFill ?? fill ?? stroke ?? 'black'; return ( - + ( - + ( - + diff --git a/package/src/icons/FilePickerIcon.tsx b/package/src/icons/FilePickerIcon.tsx index 85f37349e8..eb4e8a72e1 100644 --- a/package/src/icons/FilePickerIcon.tsx +++ b/package/src/icons/FilePickerIcon.tsx @@ -16,13 +16,7 @@ export const FilePickerIcon = ({ const color = stroke ?? pathFill ?? fill ?? 'black'; return ( - + + diff --git a/package/src/icons/MenuPointHorizontal.tsx b/package/src/icons/MenuPointHorizontal.tsx index f80a54b3cd..cd73971dbb 100644 --- a/package/src/icons/MenuPointHorizontal.tsx +++ b/package/src/icons/MenuPointHorizontal.tsx @@ -17,7 +17,7 @@ export const MenuPointHorizontal = ({ return ( + { const color = stroke ?? fill ?? pathFill ?? 'black'; return ( - + + + + + ( - + + diff --git a/package/src/icons/Warning.tsx b/package/src/icons/Warning.tsx index 7268122a82..17639e66dd 100644 --- a/package/src/icons/Warning.tsx +++ b/package/src/icons/Warning.tsx @@ -11,7 +11,7 @@ export const Warning = ({ fill, height, pathFill, size, stroke, width, ...rest } From 414ef12fe95a77fc65182ed4bdad6154b967e5c8 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Sun, 29 Mar 2026 13:10:26 +0200 Subject: [PATCH 06/26] fix: remove unused icon --- package/src/icons/ShareRightArrow.tsx | 9 --------- package/src/icons/index.ts | 1 - 2 files changed, 10 deletions(-) delete mode 100644 package/src/icons/ShareRightArrow.tsx diff --git a/package/src/icons/ShareRightArrow.tsx b/package/src/icons/ShareRightArrow.tsx deleted file mode 100644 index e8b7e3c9dd..0000000000 --- a/package/src/icons/ShareRightArrow.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const ShareRightArrow = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/index.ts b/package/src/icons/index.ts index 425c53c382..fa341c1ee9 100644 --- a/package/src/icons/index.ts +++ b/package/src/icons/index.ts @@ -38,7 +38,6 @@ export * from './Resend'; export * from './Search'; export * from './SendRight'; export * from './Share'; -export * from './ShareRightArrow'; export * from './Smile'; export * from './Sound'; export * from './Stop'; From d77f3f06e3810bf0c7de413cfae0c49b3f0c2259 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Sun, 29 Mar 2026 13:31:12 +0200 Subject: [PATCH 07/26] chore: migrate remaining icons --- package/src/icons/ArrowUpRight.tsx | 4 ++-- package/src/icons/Bell.tsx | 4 ++-- package/src/icons/Check.tsx | 4 ++-- package/src/icons/CheckAll.tsx | 4 ++-- package/src/icons/Cross.tsx | 4 ++-- package/src/icons/Down.tsx | 3 ++- package/src/icons/Play.tsx | 2 +- 7 files changed, 13 insertions(+), 12 deletions(-) diff --git a/package/src/icons/ArrowUpRight.tsx b/package/src/icons/ArrowUpRight.tsx index 72c9379043..addc07ae2d 100644 --- a/package/src/icons/ArrowUpRight.tsx +++ b/package/src/icons/ArrowUpRight.tsx @@ -7,13 +7,13 @@ export const ArrowUpRight = ({ height, size, width, ...rest }: IconProps) => { return ( { return ( + ( - + ( diff --git a/package/src/icons/Play.tsx b/package/src/icons/Play.tsx index 8e8d41b5ca..b92378cf45 100644 --- a/package/src/icons/Play.tsx +++ b/package/src/icons/Play.tsx @@ -7,7 +7,7 @@ import { IconProps } from './utils/base'; export const Play = ({ height, size, width, ...rest }: IconProps) => ( From ba4e9baea5324dcd4e0fa10e8824e05b6e347365 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Sun, 29 Mar 2026 13:52:33 +0200 Subject: [PATCH 08/26] fix: move unused icon and fix close --- package/src/icons/Close.tsx | 21 --------------------- package/src/icons/NewClose.tsx | 8 +++++++- package/src/icons/index.ts | 1 - 3 files changed, 7 insertions(+), 23 deletions(-) delete mode 100644 package/src/icons/Close.tsx diff --git a/package/src/icons/Close.tsx b/package/src/icons/Close.tsx deleted file mode 100644 index cb18ace4fc..0000000000 --- a/package/src/icons/Close.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Close = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = pathFill ?? fill ?? stroke ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/NewClose.tsx b/package/src/icons/NewClose.tsx index 3ae3905512..a92ff7f6bb 100644 --- a/package/src/icons/NewClose.tsx +++ b/package/src/icons/NewClose.tsx @@ -8,7 +8,13 @@ export const NewClose = ({ fill, height, pathFill, size, stroke, width, ...rest const color = stroke ?? pathFill ?? fill ?? 'black'; return ( - + Date: Sun, 29 Mar 2026 13:53:34 +0200 Subject: [PATCH 09/26] fix: commit sample app changes too --- examples/SampleApp/src/components/SecretMenu.tsx | 3 ++- examples/SampleApp/src/components/UserSearch/UserGridItem.tsx | 4 +++- .../SampleApp/src/components/UserSearch/UserSearchResults.tsx | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/examples/SampleApp/src/components/SecretMenu.tsx b/examples/SampleApp/src/components/SecretMenu.tsx index cfec27f07b..a730bfe41d 100644 --- a/examples/SampleApp/src/components/SecretMenu.tsx +++ b/examples/SampleApp/src/components/SecretMenu.tsx @@ -14,11 +14,12 @@ import { StyleSheet, ScrollView, } from 'react-native'; -import { Close, Edit, Delete, ZIP, useTheme } from 'stream-chat-react-native'; +import { Edit, Delete, ZIP, useTheme } from 'stream-chat-react-native'; import { styles as menuDrawerStyles } from './MenuDrawer.tsx'; import AsyncStore from '../utils/AsyncStore.ts'; import { StreamChat } from 'stream-chat'; import { LabeledTextInput } from '../screens/AdvancedUserSelectorScreen.tsx'; +import { Close } from '../icons/Close.tsx'; import { Notification } from '../icons/Notification.tsx'; import { Folder } from '../icons/Folder.tsx'; diff --git a/examples/SampleApp/src/components/UserSearch/UserGridItem.tsx b/examples/SampleApp/src/components/UserSearch/UserGridItem.tsx index 2fad413d0f..855359fa9f 100644 --- a/examples/SampleApp/src/components/UserSearch/UserGridItem.tsx +++ b/examples/SampleApp/src/components/UserSearch/UserGridItem.tsx @@ -1,10 +1,12 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { TouchableOpacity } from '@gorhom/bottom-sheet'; -import { Close, useTheme, UserAvatar } from 'stream-chat-react-native'; +import { useTheme, UserAvatar } from 'stream-chat-react-native'; import type { UserResponse } from 'stream-chat'; +import { Close } from '../../icons/Close'; + const styles = StyleSheet.create({ presenceIndicatorContainer: { bottom: 0, diff --git a/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx b/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx index 65dcdb0e6e..50756f98ec 100644 --- a/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx +++ b/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx @@ -9,12 +9,13 @@ import { } from 'react-native'; import dayjs from 'dayjs'; import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg'; -import { Close, useTheme, useViewport, UserAvatar } from 'stream-chat-react-native'; +import { useTheme, useViewport, UserAvatar } from 'stream-chat-react-native'; import { useUserSearchContext } from '../../context/UserSearchContext'; import type { UserResponse } from 'stream-chat'; +import { Close } from '../../icons/Close'; import { Search } from '../../icons/Search'; import calendar from 'dayjs/plugin/calendar'; import { CheckSend } from '../../icons/CheckSend'; From 3dd714db6cc74457177134b23b9a803534651296 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 00:57:49 +0200 Subject: [PATCH 10/26] fix: exclamation icons --- .../Message/MessageItemView/MessageError.tsx | 32 +++++++++++++++++-- .../src/components/UIComponents/Spinner.tsx | 7 +++- .../src/components/ui/Badge/ErrorBadge.tsx | 19 ++--------- package/src/icons/ExclamationCircle.tsx | 18 ++--------- package/src/icons/Loading.tsx | 21 ++++++------ package/src/icons/Warning.tsx | 10 ++---- 6 files changed, 55 insertions(+), 52 deletions(-) diff --git a/package/src/components/Message/MessageItemView/MessageError.tsx b/package/src/components/Message/MessageItemView/MessageError.tsx index b7a303fa19..794f8f5b77 100644 --- a/package/src/components/Message/MessageItemView/MessageError.tsx +++ b/package/src/components/Message/MessageItemView/MessageError.tsx @@ -1,7 +1,35 @@ -import React from 'react'; +import React, { useMemo } from 'react'; +import { View, StyleSheet } from 'react-native'; + +import { useTheme } from '../../../contexts'; +import { primitives } from '../../../theme'; import { ErrorBadge } from '../../ui/Badge/ErrorBadge'; export const MessageError = () => { - return ; + const styles = useStyles(); + + return ( + + + + ); +}; + +const useStyles = () => { + const { + theme: { semantics }, + } = useTheme(); + + return useMemo( + () => + StyleSheet.create({ + wrapper: { + borderRadius: primitives.radiusMax, + borderWidth: 2, + borderColor: semantics.badgeBorder, + }, + }), + [semantics], + ); }; diff --git a/package/src/components/UIComponents/Spinner.tsx b/package/src/components/UIComponents/Spinner.tsx index 831761fb9a..c585ffea32 100644 --- a/package/src/components/UIComponents/Spinner.tsx +++ b/package/src/components/UIComponents/Spinner.tsx @@ -46,7 +46,12 @@ export const Spinner = (props: SpinnerProps) => { return ( - + ); }; diff --git a/package/src/components/ui/Badge/ErrorBadge.tsx b/package/src/components/ui/Badge/ErrorBadge.tsx index 05112b382c..13bc860e22 100644 --- a/package/src/components/ui/Badge/ErrorBadge.tsx +++ b/package/src/components/ui/Badge/ErrorBadge.tsx @@ -20,21 +20,6 @@ const sizes = { }, }; -const iconSizes = { - xs: { - height: 8, - width: 2, - }, - sm: { - height: 9, - width: 2, - }, - md: { - height: 11, - width: 3, - }, -}; - export type ErrorBadgeProps = ViewProps & { /** * The size of the badge @@ -59,8 +44,8 @@ export const ErrorBadge = (props: ErrorBadgeProps) => { return ( diff --git a/package/src/icons/ExclamationCircle.tsx b/package/src/icons/ExclamationCircle.tsx index 83938b3b78..d46bb64e69 100644 --- a/package/src/icons/ExclamationCircle.tsx +++ b/package/src/icons/ExclamationCircle.tsx @@ -16,23 +16,9 @@ export const ExclamationCircle = ({ const color = fill ?? stroke ?? pathFill ?? 'black'; return ( - + - - diff --git a/package/src/icons/Loading.tsx b/package/src/icons/Loading.tsx index 6bb2d27289..5c3028357d 100644 --- a/package/src/icons/Loading.tsx +++ b/package/src/icons/Loading.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { Path, StopProps, Svg } from 'react-native-svg'; +import { Path, StopProps } from 'react-native-svg'; -import { IconProps } from './utils/base'; +import { IconProps, RootSvg } from './utils/base'; type LoadingProps = IconProps & Partial> & { @@ -12,26 +12,29 @@ type LoadingProps = IconProps & export const Loading = (props: LoadingProps) => { const { height = 16, - startColor = '#0169F6', - stopColor = '#006CFF', + startColor, + stopColor, stopOpacity = 0.3, viewBox = '0 0 20 20', width = 16, } = props; + const baseColor = startColor ?? stopColor ?? '#006CFF'; + const accentColor = stopColor ?? startColor ?? '#006CFF'; + return ( - + - + ); }; diff --git a/package/src/icons/Warning.tsx b/package/src/icons/Warning.tsx index 17639e66dd..a5a70638a0 100644 --- a/package/src/icons/Warning.tsx +++ b/package/src/icons/Warning.tsx @@ -8,16 +8,12 @@ export const Warning = ({ fill, height, pathFill, size, stroke, width, ...rest } const color = fill ?? stroke ?? pathFill ?? 'black'; return ( - + ); From c0a320365cd704f0181bba659127f561161cc92e Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 01:09:08 +0200 Subject: [PATCH 11/26] fix: dot grid --- package/src/icons/DotGrid.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/package/src/icons/DotGrid.tsx b/package/src/icons/DotGrid.tsx index 670f475cda..8fd8ef999a 100644 --- a/package/src/icons/DotGrid.tsx +++ b/package/src/icons/DotGrid.tsx @@ -4,13 +4,15 @@ import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const DotGrid = ({ height, width, ...rest }: IconProps) => ( - - - -); +export const DotGrid = ({ fill, height, pathFill, size, stroke, width }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + + return ( + + + + ); +}; From ea1a82428563d69227acea1848158ce0e79629a9 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 01:16:21 +0200 Subject: [PATCH 12/26] fix: file picker icon --- package/src/icons/FilePickerIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/icons/FilePickerIcon.tsx b/package/src/icons/FilePickerIcon.tsx index eb4e8a72e1..7dd8de1f1c 100644 --- a/package/src/icons/FilePickerIcon.tsx +++ b/package/src/icons/FilePickerIcon.tsx @@ -18,7 +18,7 @@ export const FilePickerIcon = ({ return ( Date: Mon, 30 Mar 2026 01:36:13 +0200 Subject: [PATCH 13/26] chore: add unpin icon --- .../Message/hooks/useMessageActions.tsx | 5 ++--- package/src/icons/Unpin.tsx | 21 +++++++++++++++++++ package/src/icons/index.ts | 1 + 3 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 package/src/icons/Unpin.tsx diff --git a/package/src/components/Message/hooks/useMessageActions.tsx b/package/src/components/Message/hooks/useMessageActions.tsx index 345e09af5a..c7c224ddc3 100644 --- a/package/src/components/Message/hooks/useMessageActions.tsx +++ b/package/src/components/Message/hooks/useMessageActions.tsx @@ -26,7 +26,7 @@ import { Pin, Resend, ThreadReply, - // Unpin, + Unpin, UnreadIndicator, UserDelete, } from '../../../icons'; @@ -330,8 +330,7 @@ export const useMessageActions = ({ const unpinMessage: MessageActionType = { action: onTogglePinMessage, actionType: 'unpinMessage', - // TODO: V9: This icon does not exist yet, replace the old when when we get a new one - icon: , + icon: , title: t('Unpin from Conversation'), type: 'standard', }; diff --git a/package/src/icons/Unpin.tsx b/package/src/icons/Unpin.tsx new file mode 100644 index 0000000000..099036bb85 --- /dev/null +++ b/package/src/icons/Unpin.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { Path, Svg } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Unpin = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/index.ts b/package/src/icons/index.ts index 3263e9018f..b3f51e92a9 100644 --- a/package/src/icons/index.ts +++ b/package/src/icons/index.ts @@ -43,6 +43,7 @@ export * from './Stop'; export * from './ThreadReply'; export * from './Time'; export * from './Unknown'; +export * from './Unpin'; export * from './Recorder'; export * from './User'; export * from './UserAdd'; From 1c3efd2489744143288fa8a43d4269501966e380 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 02:07:26 +0200 Subject: [PATCH 14/26] fix: unmute actions --- .../hooks/useChannelActionItems.tsx | 23 +++++++++++-------- .../ChannelPreview/ChannelSwipableWrapper.tsx | 8 +++++-- .../Message/hooks/useMessageActions.tsx | 7 +++++- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/package/src/components/ChannelList/hooks/useChannelActionItems.tsx b/package/src/components/ChannelList/hooks/useChannelActionItems.tsx index decbf22cf5..15a7613eac 100644 --- a/package/src/components/ChannelList/hooks/useChannelActionItems.tsx +++ b/package/src/components/ChannelList/hooks/useChannelActionItems.tsx @@ -12,7 +12,7 @@ import { useIsDirectChat } from './useIsDirectChat'; import { useTheme, useTranslationContext } from '../../../contexts'; import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext'; -import { Archive, IconProps, Mute, BlockUser, Delete } from '../../../icons'; +import { Archive, IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons'; import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft'; export type ChannelActionHandler = () => Promise | void; @@ -92,15 +92,18 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = ( : muteActive ? unmuteChannel : muteChannel, - Icon: (props) => ( - - ), + Icon: (props) => + muteActive ? ( + + ) : ( + + ), id: 'mute', label: isDirectChat ? muteActive diff --git a/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx b/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx index 863d4c20ec..ef36ceb737 100644 --- a/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx +++ b/package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx @@ -10,10 +10,11 @@ import type { ChannelDetailsBottomSheetProps } from './ChannelDetailsBottomSheet import { useTheme } from '../../contexts'; import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext'; -import { Archive, MenuPointHorizontal, Mute } from '../../icons'; +import { Archive, MenuPointHorizontal, Mute, Sound } from '../../icons'; import { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems'; import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems'; import { useChannelActionItemsById } from '../ChannelList/hooks/useChannelActionItemsById'; +import { useChannelMuteActive } from '../ChannelList/hooks/useChannelMuteActive'; import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat'; import { BottomSheetModal, @@ -53,15 +54,18 @@ export const ChannelSwipableWrapper = ({ const styles = useStyles(); const isDirectChannel = useIsDirectChat(channel); + const muteActive = useChannelMuteActive(channel); const Icon = useCallback( () => isDirectChannel ? ( + ) : muteActive ? ( + ) : ( ), - [isDirectChannel, semantics.textOnAccent], + [isDirectChannel, muteActive, semantics.textOnAccent], ); const swipableActions = useMemo(() => { diff --git a/package/src/components/Message/hooks/useMessageActions.tsx b/package/src/components/Message/hooks/useMessageActions.tsx index c7c224ddc3..f2b383e1fa 100644 --- a/package/src/components/Message/hooks/useMessageActions.tsx +++ b/package/src/components/Message/hooks/useMessageActions.tsx @@ -25,6 +25,7 @@ import { Mute, Pin, Resend, + Sound, ThreadReply, Unpin, UnreadIndicator, @@ -338,7 +339,11 @@ export const useMessageActions = ({ const muteUser: MessageActionType = { action: onMuteUser, actionType: 'muteUser', - icon: , + icon: isMuted ? ( + + ) : ( + + ), title: isMuted ? t('Unmute User') : t('Mute User'), type: 'standard', }; From f822b7872c6c5e79f46266b377d70b1f9d9a647f Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 09:36:05 +0200 Subject: [PATCH 15/26] fix: icon rtl --- package/src/components/ui/Button/Button.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/package/src/components/ui/Button/Button.tsx b/package/src/components/ui/Button/Button.tsx index f076ace546..aca261bcd2 100644 --- a/package/src/components/ui/Button/Button.tsx +++ b/package/src/components/ui/Button/Button.tsx @@ -76,6 +76,8 @@ export const Button = ({ const LeftIcon = isRTL ? TrailingIcon : LeadingIcon; const RightIcon = isRTL ? LeadingIcon : TrailingIcon; + const IconOnlyIcon = LeadingIcon ?? TrailingIcon; + const PrimaryIcon = iconOnly ? IconOnlyIcon : LeftIcon; return ( - {LeftIcon ? ( - Date: Mon, 30 Mar 2026 09:48:59 +0200 Subject: [PATCH 16/26] fix: snapshot tests --- .../__snapshots__/AttachButton.test.js.snap | 345 +++++++++--------- .../__snapshots__/SendButton.test.js.snap | 270 +++++++------- .../ScrollToBottomButton.test.js.snap | 12 +- .../__snapshots__/Thread.test.js.snap | 137 ++++--- 4 files changed, 372 insertions(+), 392 deletions(-) diff --git a/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap b/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap index 1eeb6eeca7..cf98868e6b 100644 --- a/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap +++ b/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap @@ -133,7 +133,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli strokeWidth={1.5} > @@ -384,11 +389,11 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli > @@ -697,11 +696,11 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli > @@ -1284,11 +1288,11 @@ exports[`AttachButton should render a enabled AttachButton 1`] = ` > @@ -1597,11 +1595,11 @@ exports[`AttachButton should render a enabled AttachButton 1`] = ` > @@ -2184,11 +2187,11 @@ exports[`AttachButton should render an disabled AttachButton 1`] = ` > @@ -2497,11 +2494,11 @@ exports[`AttachButton should render an disabled AttachButton 1`] = ` > @@ -248,15 +240,15 @@ exports[`SendButton should render a SendButton 1`] = ` > @@ -382,11 +379,11 @@ exports[`SendButton should render a SendButton 1`] = ` > @@ -695,11 +686,11 @@ exports[`SendButton should render a SendButton 1`] = ` > @@ -1146,15 +1129,15 @@ exports[`SendButton should render a disabled SendButton 1`] = ` > @@ -1280,11 +1268,11 @@ exports[`SendButton should render a disabled SendButton 1`] = ` > @@ -1593,11 +1575,11 @@ exports[`SendButton should render a disabled SendButton 1`] = ` > @@ -2432,15 +2424,15 @@ exports[`Thread should match thread snapshot 1`] = ` > @@ -2566,11 +2563,11 @@ exports[`Thread should match thread snapshot 1`] = ` > @@ -2879,11 +2870,11 @@ exports[`Thread should match thread snapshot 1`] = ` > Date: Mon, 30 Mar 2026 10:59:38 +0200 Subject: [PATCH 17/26] chore: move icons to sample app and remove dead ones --- .../src/components/ChannelInfoOverlay.tsx | 2 +- .../components/ContactDetailBottomSheet.tsx | 4 +- .../SampleApp/src/components/MenuDrawer.tsx | 3 +- .../src/components/UserInfoOverlay.tsx | 6 +-- .../src/screens/NewDirectMessagingScreen.tsx | 2 +- .../NewGroupChannelAddMemberScreen.tsx | 5 ++- package/src/icons/ArrowRight.tsx | 23 ---------- package/src/icons/DownloadArrow.tsx | 12 ------ package/src/icons/ErrorCircle.tsx | 16 ------- package/src/icons/Eye.tsx | 12 ------ package/src/icons/GiphyLightning.tsx | 18 -------- package/src/icons/Grid.tsx | 42 ------------------- package/src/icons/GroupIcon.tsx | 27 ------------ package/src/icons/Logo.tsx | 17 -------- package/src/icons/MessageIcon.tsx | 26 ------------ package/src/icons/Refresh.tsx | 21 ---------- package/src/icons/User.tsx | 22 ---------- package/src/icons/index.ts | 9 ---- 18 files changed, 12 insertions(+), 255 deletions(-) delete mode 100644 package/src/icons/ArrowRight.tsx delete mode 100644 package/src/icons/DownloadArrow.tsx delete mode 100644 package/src/icons/ErrorCircle.tsx delete mode 100644 package/src/icons/Eye.tsx delete mode 100644 package/src/icons/GiphyLightning.tsx delete mode 100644 package/src/icons/Grid.tsx delete mode 100644 package/src/icons/GroupIcon.tsx delete mode 100644 package/src/icons/Logo.tsx delete mode 100644 package/src/icons/MessageIcon.tsx delete mode 100644 package/src/icons/Refresh.tsx delete mode 100644 package/src/icons/User.tsx diff --git a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx index 705a9b8c77..ec7bbd8d9d 100644 --- a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx +++ b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx @@ -7,7 +7,6 @@ import Animated from 'react-native-reanimated'; import { CircleClose, Delete, - User, UserMinus, useTheme, useViewport, @@ -24,6 +23,7 @@ import { Archive } from '../icons/Archive'; import { useChannelInfoOverlayActions } from '../hooks/useChannelInfoOverlayActions'; import { SafeAreaView } from 'react-native-safe-area-context'; import { Pin } from '../icons/Pin.tsx'; +import { User } from '../icons/User'; import type { ConfirmationData } from './ConfirmationBottomSheet'; diff --git a/examples/SampleApp/src/components/ContactDetailBottomSheet.tsx b/examples/SampleApp/src/components/ContactDetailBottomSheet.tsx index 9dc7b95ab0..dbc56be219 100644 --- a/examples/SampleApp/src/components/ContactDetailBottomSheet.tsx +++ b/examples/SampleApp/src/components/ContactDetailBottomSheet.tsx @@ -4,7 +4,6 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import { BottomSheetModal, CircleBan, - MessageIcon, useChatContext, useStableCallback, useTheme, @@ -13,6 +12,7 @@ import { import { ListItem } from './ListItem'; +import { Message } from '../icons/Message'; import { Mute } from '../icons/Mute'; import { getUserActivityStatus } from '../utils/getUserActivityStatus'; @@ -120,7 +120,7 @@ export const ContactDetailBottomSheet = React.memo( } + icon={} label='Send Direct Message' onPress={sendDirectMessage} /> diff --git a/examples/SampleApp/src/components/MenuDrawer.tsx b/examples/SampleApp/src/components/MenuDrawer.tsx index dba552fd1a..20b26e0f82 100644 --- a/examples/SampleApp/src/components/MenuDrawer.tsx +++ b/examples/SampleApp/src/components/MenuDrawer.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react'; import { Image, StyleSheet, Text, TouchableOpacity, Pressable, View } from 'react-native'; -import { Edit, User, useTheme } from 'stream-chat-react-native'; +import { Edit, useTheme } from 'stream-chat-react-native'; import { useAppContext } from '../context/AppContext'; import { SecretMenu } from './SecretMenu.tsx'; @@ -8,6 +8,7 @@ import { SecretMenu } from './SecretMenu.tsx'; import type { DrawerContentComponentProps } from '@react-navigation/drawer'; import { SafeAreaView } from 'react-native-safe-area-context'; import { Group } from '../icons/Group.tsx'; +import { User } from '../icons/User'; export const styles = StyleSheet.create({ avatar: { diff --git a/examples/SampleApp/src/components/UserInfoOverlay.tsx b/examples/SampleApp/src/components/UserInfoOverlay.tsx index 8ac7ef9444..2ebdefbbbf 100644 --- a/examples/SampleApp/src/components/UserInfoOverlay.tsx +++ b/examples/SampleApp/src/components/UserInfoOverlay.tsx @@ -15,9 +15,7 @@ import Animated, { withTiming, } from 'react-native-reanimated'; import { - MessageIcon, useChatContext, - User, useTheme, useViewport, UserAvatar, @@ -33,6 +31,8 @@ import { useUserInfoOverlayActions } from '../hooks/useUserInfoOverlayActions'; import { SafeAreaView } from 'react-native-safe-area-context'; import { UserMinus } from '../icons/UserMinus'; import { CircleClose } from '../icons/CircleClose'; +import { Message } from '../icons/Message'; +import { User } from '../icons/User'; import type { ConfirmationData } from './ConfirmationBottomSheet'; @@ -313,7 +313,7 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => { ]} > - + Message diff --git a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx index ffa1e1180a..5438538965 100644 --- a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx +++ b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx @@ -5,11 +5,11 @@ import { Channel, MessageComposer, MessageList, - User, UserAdd, useTheme, } from 'stream-chat-react-native'; +import { User } from '../icons/User'; import { RoundButton } from '../components/RoundButton'; import { ScreenHeader } from '../components/ScreenHeader'; import { SelectedUserTag } from '../components/UserSearch/SelectedUserTag'; diff --git a/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx b/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx index 8897f77c36..18ee06b194 100644 --- a/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx +++ b/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { FlatList, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'; -import { ArrowRight, Search, useTheme } from 'stream-chat-react-native'; +import { Search, useTheme } from 'stream-chat-react-native'; +import { RightArrow } from '../icons/RightArrow'; import { ScreenHeader } from '../components/ScreenHeader'; import { UserGridItem } from '../components/UserSearch/UserGridItem'; import { UserSearchResults } from '../components/UserSearch/UserSearchResults'; @@ -58,7 +59,7 @@ const RightArrowButton: React.FC = (props) => { return ( - + ); }; diff --git a/package/src/icons/ArrowRight.tsx b/package/src/icons/ArrowRight.tsx deleted file mode 100644 index 0af4de7b7c..0000000000 --- a/package/src/icons/ArrowRight.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import { G, Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ArrowRight = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = pathFill ?? fill ?? stroke ?? 'black'; - - return ( - - - - - - ); -}; diff --git a/package/src/icons/DownloadArrow.tsx b/package/src/icons/DownloadArrow.tsx deleted file mode 100644 index 905ef7cbb4..0000000000 --- a/package/src/icons/DownloadArrow.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const DownloadArrow = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/ErrorCircle.tsx b/package/src/icons/ErrorCircle.tsx deleted file mode 100644 index e2707d1189..0000000000 --- a/package/src/icons/ErrorCircle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ErrorCircle = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Eye.tsx b/package/src/icons/Eye.tsx deleted file mode 100644 index ca4cc38a78..0000000000 --- a/package/src/icons/Eye.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Eye = (props: IconProps) => ( - - - -); diff --git a/package/src/icons/GiphyLightning.tsx b/package/src/icons/GiphyLightning.tsx deleted file mode 100644 index 64600353d6..0000000000 --- a/package/src/icons/GiphyLightning.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -type Props = IconProps & { - size: number; -}; - -export const GiphyLightning = ({ size = 16, ...rest }: Props) => ( - - - -); diff --git a/package/src/icons/Grid.tsx b/package/src/icons/Grid.tsx deleted file mode 100644 index b056e01ccb..0000000000 --- a/package/src/icons/Grid.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Grid = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - - - - ); -}; diff --git a/package/src/icons/GroupIcon.tsx b/package/src/icons/GroupIcon.tsx deleted file mode 100644 index ac9f71ce8a..0000000000 --- a/package/src/icons/GroupIcon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const GroupIcon = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/Logo.tsx b/package/src/icons/Logo.tsx deleted file mode 100644 index b9d938f0b4..0000000000 --- a/package/src/icons/Logo.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { IconProps, RootPath, RootSvg } from './utils/base'; - -export const Logo = (props: IconProps) => { - const height = props.height || 40; - const width = props.width || 80; - return ( - - - - ); -}; diff --git a/package/src/icons/MessageIcon.tsx b/package/src/icons/MessageIcon.tsx deleted file mode 100644 index a0c65e5b9d..0000000000 --- a/package/src/icons/MessageIcon.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const MessageIcon = ({ - fill, - height, - pathFill, - size, - stroke, - width, - ...rest -}: IconProps) => { - const color = pathFill ?? fill ?? stroke ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/Refresh.tsx b/package/src/icons/Refresh.tsx deleted file mode 100644 index ffc6afb98f..0000000000 --- a/package/src/icons/Refresh.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Refresh = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/User.tsx b/package/src/icons/User.tsx deleted file mode 100644 index 063b69caa0..0000000000 --- a/package/src/icons/User.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const User = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = pathFill ?? fill ?? stroke ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/index.ts b/package/src/icons/index.ts index b3f51e92a9..8c6f31e589 100644 --- a/package/src/icons/index.ts +++ b/package/src/icons/index.ts @@ -1,6 +1,5 @@ export * from './utils/base'; -export * from './ArrowRight'; export * from './Audio'; export * from './Archive'; export * from './BlockUser'; @@ -13,17 +12,11 @@ export * from './Copy'; export * from './CurveLineLeftUp'; export * from './Delete'; export * from './DOC'; -export * from './DownloadArrow'; export * from './Edit'; -export * from './Eye'; export * from './Flag'; -export * from './Grid'; export * from './GiphyIcon'; -export * from './GiphyLightning'; export * from './Loading'; -export * from './Logo'; export * from './MessageFlag'; -export * from './MessageIcon'; export * from './Mute'; export * from './Pause'; export * from './PDF'; @@ -32,7 +25,6 @@ export * from './Pin'; export * from './Play'; export * from './Plus'; export * from './Minus'; -export * from './Refresh'; export * from './Resend'; export * from './Search'; export * from './SendRight'; @@ -45,7 +37,6 @@ export * from './Time'; export * from './Unknown'; export * from './Unpin'; export * from './Recorder'; -export * from './User'; export * from './UserAdd'; export * from './UserDelete'; export * from './Video'; From 423c60d5ea178f042fac2feae28709163ce493d3 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 11:23:21 +0200 Subject: [PATCH 18/26] fix: properly migrate icons over --- examples/SampleApp/src/icons/Message.tsx | 15 ++++--- examples/SampleApp/src/icons/RightArrow.tsx | 49 +++++++++------------ examples/SampleApp/src/icons/User.tsx | 24 +++++----- 3 files changed, 42 insertions(+), 46 deletions(-) diff --git a/examples/SampleApp/src/icons/Message.tsx b/examples/SampleApp/src/icons/Message.tsx index 41a0fe682f..bc260ae164 100644 --- a/examples/SampleApp/src/icons/Message.tsx +++ b/examples/SampleApp/src/icons/Message.tsx @@ -1,14 +1,17 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; +import { Path, Svg } from 'react-native-svg'; + import { IconProps } from '../utils/base'; -export const Message = (props: IconProps) => { - const { height, width, ...rest } = props; +export const Message = ({ fill, height, pathFill, scale, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + const size = scale ? 20 * scale : undefined; + return ( - + ); diff --git a/examples/SampleApp/src/icons/RightArrow.tsx b/examples/SampleApp/src/icons/RightArrow.tsx index 0d3ae1def5..472a34e4f5 100644 --- a/examples/SampleApp/src/icons/RightArrow.tsx +++ b/examples/SampleApp/src/icons/RightArrow.tsx @@ -1,36 +1,31 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; +import { G, Path, Svg } from 'react-native-svg'; import { IconProps } from '../utils/base'; -export const RightArrow: React.FC = ({ height, width }) => { - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); +export const RightArrow = ({ + fill, + height, + pathFill, + scale, + stroke, + width, + ...rest +}: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + const size = scale ? 20 * scale : undefined; return ( - - - - + + + + ); }; diff --git a/examples/SampleApp/src/icons/User.tsx b/examples/SampleApp/src/icons/User.tsx index 555ac6037e..4a3ad2f20d 100644 --- a/examples/SampleApp/src/icons/User.tsx +++ b/examples/SampleApp/src/icons/User.tsx @@ -1,23 +1,21 @@ import React from 'react'; -import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; +import { Path, Svg } from 'react-native-svg'; import { IconProps } from '../utils/base'; -export const User: React.FC = ({ height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); +export const User = ({ fill, height, pathFill, scale, stroke, width, ...rest }: IconProps) => { + const color = pathFill ?? fill ?? stroke ?? 'black'; + const size = scale ? 20 * scale : undefined; return ( - + ); From 45766fcec67f6bb7104a62bba75f938e5dd9e690 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 11:57:16 +0200 Subject: [PATCH 19/26] fix: stop using legacy colors --- .../SampleApp/src/components/BottomTabs.tsx | 15 ++++------ .../src/components/ChannelInfoOverlay.tsx | 7 ++--- .../src/components/ChatScreenHeader.tsx | 7 ++--- .../SampleApp/src/components/DraftsList.tsx | 8 ++--- .../LocationSharing/CreateLocationModal.tsx | 8 ++--- .../LocationSharing/MessageLocation.tsx | 16 ++++------ .../SampleApp/src/components/MenuDrawer.tsx | 9 ++---- .../MessageSearch/MessageSearchList.tsx | 3 +- .../src/components/NetworkDownIndicator.tsx | 8 ++--- .../NewDirectMessagingSendButton.tsx | 3 +- .../src/components/OverlayBackdrop.tsx | 8 ++--- .../components/Reminders/ReminderBanner.tsx | 8 ++--- .../src/components/Reminders/ReminderItem.tsx | 3 +- .../components/Reminders/RemindersList.tsx | 8 ++--- .../SampleApp/src/components/RoundButton.tsx | 9 ++---- .../SampleApp/src/components/ScreenHeader.tsx | 7 ++--- .../SampleApp/src/components/SecretMenu.tsx | 8 ++--- .../src/components/ToastComponent/Toast.tsx | 8 ++--- .../src/components/UserInfoOverlay.tsx | 7 ++--- .../components/UserSearch/SelectedUserTag.tsx | 8 ++--- .../components/UserSearch/UserGridItem.tsx | 8 ++--- .../UserSearch/UserSearchResults.tsx | 25 ++++++++-------- examples/SampleApp/src/icons/AddUser.tsx | 8 ++--- examples/SampleApp/src/icons/Archive.tsx | 8 ++--- examples/SampleApp/src/icons/BlockUser.tsx | 8 ++--- examples/SampleApp/src/icons/ChatsTab.tsx | 8 ++--- examples/SampleApp/src/icons/Check.tsx | 8 ++--- examples/SampleApp/src/icons/CircleClose.tsx | 8 ++--- examples/SampleApp/src/icons/Close.tsx | 8 ++--- examples/SampleApp/src/icons/Contacts.tsx | 8 ++--- examples/SampleApp/src/icons/Delete.tsx | 8 ++--- examples/SampleApp/src/icons/DownArrow.tsx | 8 ++--- examples/SampleApp/src/icons/DraftIcon.tsx | 8 ++--- examples/SampleApp/src/icons/DraftsTab.tsx | 8 ++--- .../SampleApp/src/icons/EmptySearchState.tsx | 8 ++--- examples/SampleApp/src/icons/GoBack.tsx | 8 ++--- examples/SampleApp/src/icons/MentionsTab.tsx | 8 ++--- .../src/icons/NewDirectMessageIcon.tsx | 8 ++--- examples/SampleApp/src/icons/NewGroupIcon.tsx | 8 ++--- examples/SampleApp/src/icons/Notification.tsx | 8 ++--- examples/SampleApp/src/icons/ReminderTab.tsx | 8 ++--- examples/SampleApp/src/icons/RemoveUser.tsx | 8 ++--- examples/SampleApp/src/icons/Search.tsx | 8 ++--- examples/SampleApp/src/icons/Settings.tsx | 8 ++--- examples/SampleApp/src/icons/SignOut.tsx | 8 ++--- examples/SampleApp/src/icons/StreamLogo.tsx | 8 ++--- examples/SampleApp/src/icons/ThreadsTab.tsx | 8 ++--- examples/SampleApp/src/icons/User.tsx | 2 +- .../screens/AdvancedUserSelectorScreen.tsx | 15 ++++------ .../src/screens/ChannelFilesScreen.tsx | 10 +++---- .../src/screens/ChannelImagesScreen.tsx | 15 ++++------ .../src/screens/ChannelListScreen.tsx | 8 ++--- .../screens/ChannelPinnedMessagesScreen.tsx | 15 ++++------ .../SampleApp/src/screens/DraftScreen.tsx | 8 ++--- examples/SampleApp/src/screens/MapScreen.tsx | 15 ++++------ .../SampleApp/src/screens/MentionsScreen.tsx | 15 ++++------ .../src/screens/NewDirectMessagingScreen.tsx | 29 +++++++++++++------ .../NewGroupChannelAddMemberScreen.tsx | 13 ++------- .../NewGroupChannelAssignNameScreen.tsx | 3 +- .../SampleApp/src/screens/RemindersScreen.tsx | 8 ++--- .../src/screens/SharedGroupsScreen.tsx | 15 ++++------ .../src/screens/ThreadListScreen.tsx | 8 ++--- .../SampleApp/src/screens/ThreadScreen.tsx | 3 +- .../src/screens/UserSelectorScreen.tsx | 3 +- .../SampleApp/src/theme/useLegacyColors.ts | 29 +++++++++++++++++++ examples/SampleApp/src/utils/base.tsx | 9 ++---- 66 files changed, 232 insertions(+), 382 deletions(-) create mode 100644 examples/SampleApp/src/theme/useLegacyColors.ts diff --git a/examples/SampleApp/src/components/BottomTabs.tsx b/examples/SampleApp/src/components/BottomTabs.tsx index 7676c42353..684a1ea694 100644 --- a/examples/SampleApp/src/components/BottomTabs.tsx +++ b/examples/SampleApp/src/components/BottomTabs.tsx @@ -13,6 +13,7 @@ import type { BottomTabBarProps } from '@react-navigation/bottom-tabs'; import type { Route } from '@react-navigation/native'; import { DraftsTab } from '../icons/DraftsTab'; import { RemindersTab } from '../icons/ReminderTab'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ notification: { @@ -84,11 +85,8 @@ type TabProps = Pick & { const Tab = (props: TabProps) => { const { navigation, state, route, index } = props; - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + useTheme(); + const { black, grey } = useLegacyColors(); const tab = getTab(route.name); const isFocused = state.index === index; @@ -130,11 +128,8 @@ const Tab = (props: TabProps) => { export const BottomTabs: React.FC = (props) => { const { navigation, state } = props; - const { - theme: { - colors: { white }, - }, - } = useTheme(); + useTheme(); + const { white } = useLegacyColors(); const { bottom } = useSafeAreaInsets(); return ( diff --git a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx index ec7bbd8d9d..6d920f1998 100644 --- a/examples/SampleApp/src/components/ChannelInfoOverlay.tsx +++ b/examples/SampleApp/src/components/ChannelInfoOverlay.tsx @@ -24,6 +24,7 @@ import { useChannelInfoOverlayActions } from '../hooks/useChannelInfoOverlayActi import { SafeAreaView } from 'react-native-safe-area-context'; import { Pin } from '../icons/Pin.tsx'; import { User } from '../icons/User'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { ConfirmationData } from './ConfirmationBottomSheet'; @@ -102,11 +103,9 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => { const { channel, clientId, membership, navigation } = data || {}; const { - theme: { - colors: { accent_red, black, grey }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { accent_red, black, grey } = useLegacyColors(); // magic number 8 used as fontSize is 16 so assuming average character width of half const maxWidth = channel diff --git a/examples/SampleApp/src/components/ChatScreenHeader.tsx b/examples/SampleApp/src/components/ChatScreenHeader.tsx index 902de89b62..a74e40d4c1 100644 --- a/examples/SampleApp/src/components/ChatScreenHeader.tsx +++ b/examples/SampleApp/src/components/ChatScreenHeader.tsx @@ -8,6 +8,7 @@ import { ScreenHeader } from './ScreenHeader'; import { useAppContext } from '../context/AppContext'; import { NewDirectMessageIcon } from '../icons/NewDirectMessageIcon'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { DrawerNavigationProp } from '@react-navigation/drawer'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; @@ -29,11 +30,7 @@ type ChatScreenHeaderNavigationProp = CompositeNavigationProp< >; export const ChatScreenHeader: React.FC<{ title?: string }> = ({ title = 'Stream Chat' }) => { - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); + const { accent_blue } = useLegacyColors(); const navigation = useNavigation(); const { chatClient } = useAppContext(); diff --git a/examples/SampleApp/src/components/DraftsList.tsx b/examples/SampleApp/src/components/DraftsList.tsx index 4a7cc43013..78eaff35f2 100644 --- a/examples/SampleApp/src/components/DraftsList.tsx +++ b/examples/SampleApp/src/components/DraftsList.tsx @@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo } from 'react'; import dayjs from 'dayjs'; import { useIsFocused, useNavigation } from '@react-navigation/native'; import { ChannelResponse, DraftMessage, DraftResponse, MessageResponseBase } from 'stream-chat'; +import { useLegacyColors } from '../theme/useLegacyColors'; export type DraftItemProps = { type?: 'channel' | 'thread'; @@ -22,11 +23,8 @@ export type DraftItemProps = { }; export const DraftItem = ({ type, channel, date, message, thread }: DraftItemProps) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + useTheme(); + const { grey } = useLegacyColors(); const navigation = useNavigation(); const { client } = useChatContext(); const messagePreviewText = useMessagePreviewText({ message }); diff --git a/examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx b/examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx index c675b4cc4e..427f5c7cd2 100644 --- a/examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx +++ b/examples/SampleApp/src/components/LocationSharing/CreateLocationModal.tsx @@ -25,6 +25,7 @@ import { useTranslationContext, } from 'stream-chat-react-native'; import MapView, { MapMarker, Marker } from 'react-native-maps'; +import { useLegacyColors } from '../../theme/useLegacyColors'; type LiveLocationCreateModalProps = { visible: boolean; @@ -47,11 +48,8 @@ export const LiveLocationCreateModal = ({ const messageComposer = useMessageComposer(); const { width, height } = useWindowDimensions(); const { client } = useChatContext(); - const { - theme: { - colors: { accent_blue, grey, grey_whisper }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, grey, grey_whisper } = useLegacyColors(); const { t } = useTranslationContext(); const mapRef = useRef(null); const markerRef = useRef(null); diff --git a/examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx b/examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx index 82c9d7511e..e64f42894f 100644 --- a/examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx +++ b/examples/SampleApp/src/components/LocationSharing/MessageLocation.tsx @@ -16,6 +16,7 @@ import { } from 'stream-chat-react-native'; import MapView, { MapMarker, Marker } from 'react-native-maps'; import { SharedLocationResponse, StreamChat } from 'stream-chat'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const MessageLocationFooter = ({ client, @@ -26,11 +27,8 @@ const MessageLocationFooter = ({ }) => { const { channel } = useChannelContext(); const { end_at, user_id } = shared_location; - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + useTheme(); + const { grey } = useLegacyColors(); const liveLocationActive = end_at && new Date(end_at) > new Date(); const endedAtDate = end_at ? new Date(end_at) : null; const formattedEndedAt = endedAtDate ? endedAtDate.toLocaleString() : ''; @@ -79,12 +77,8 @@ const MessageLocationComponent = ({ const { width, height } = useWindowDimensions(); const aspect_ratio = width / height; - - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); + useTheme(); + const { accent_blue } = useLegacyColors(); const region = useMemo(() => { const latitudeDelta = 0.1; diff --git a/examples/SampleApp/src/components/MenuDrawer.tsx b/examples/SampleApp/src/components/MenuDrawer.tsx index 20b26e0f82..a8cf01effb 100644 --- a/examples/SampleApp/src/components/MenuDrawer.tsx +++ b/examples/SampleApp/src/components/MenuDrawer.tsx @@ -9,6 +9,7 @@ import type { DrawerContentComponentProps } from '@react-navigation/drawer'; import { SafeAreaView } from 'react-native-safe-area-context'; import { Group } from '../icons/Group.tsx'; import { User } from '../icons/User'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const styles = StyleSheet.create({ avatar: { @@ -50,12 +51,8 @@ export const styles = StyleSheet.create({ export const MenuDrawer = ({ navigation }: DrawerContentComponentProps) => { const [secretMenuPressCounter, setSecretMenuPressCounter] = useState(0); const [secretMenuVisible, setSecretMenuVisible] = useState(false); - - const { - theme: { - colors: { black, grey, white }, - }, - } = useTheme(); + useTheme(); + const { black, grey, white } = useLegacyColors(); useEffect(() => { if (!secretMenuVisible && secretMenuPressCounter >= 7) { diff --git a/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx b/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx index ad2ec54ded..55a305a2a4 100644 --- a/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx +++ b/examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx @@ -5,6 +5,7 @@ import dayjs from 'dayjs'; import calendar from 'dayjs/plugin/calendar'; import { Spinner, useTheme, useViewport, UserAvatar } from 'stream-chat-react-native'; import { DEFAULT_PAGINATION_LIMIT } from '../../utils/constants'; +import { useLegacyColors } from '../../theme/useLegacyColors'; import type { MessageResponse } from 'stream-chat'; @@ -72,10 +73,10 @@ export const MessageSearchList: React.FC = React.forward } = props; const { theme: { - colors: { black, grey, white_snow }, semantics, }, } = useTheme(); + const { black, grey, white_snow } = useLegacyColors(); const { vw } = useViewport(); const navigation = useNavigation>(); diff --git a/examples/SampleApp/src/components/NetworkDownIndicator.tsx b/examples/SampleApp/src/components/NetworkDownIndicator.tsx index 453b7e9972..3c46e49c06 100644 --- a/examples/SampleApp/src/components/NetworkDownIndicator.tsx +++ b/examples/SampleApp/src/components/NetworkDownIndicator.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Spinner, useTheme } from 'stream-chat-react-native'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ networkDownContainer: { @@ -23,11 +24,8 @@ const styles = StyleSheet.create({ export const NetworkDownIndicator: React.FC<{ titleSize: 'small' | 'large' }> = ({ titleSize = 'small', }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx b/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx index 41b28767c9..8c89ab8f03 100644 --- a/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx +++ b/examples/SampleApp/src/components/NewDirectMessagingSendButton.tsx @@ -17,6 +17,7 @@ import { NewDirectMessagingScreenNavigationProp } from '../screens/NewDirectMess import { useUserSearchContext } from '../context/UserSearchContext'; import { useAppContext } from '../context/AppContext'; import { SendUp } from '../icons/SendUp'; +import { useLegacyColors } from '../theme/useLegacyColors'; type NewDirectMessagingSendButtonPropsWithContext = Pick< MessageInputContextValue, @@ -29,10 +30,10 @@ const SendButtonWithContext = (props: NewDirectMessagingSendButtonPropsWithConte const { disabled = false, giphyActive, sendMessage } = props; const { theme: { - colors: { accent_blue, grey_gainsboro }, messageComposer: { sendButton }, }, } = useTheme(); + const { accent_blue, grey_gainsboro } = useLegacyColors(); return ( ; @@ -8,10 +9,7 @@ type OverlayBackdropProps = { export const OverlayBackdrop = (props: OverlayBackdropProps): React.ReactNode => { const { style = {} } = props; - const { - theme: { - colors: { overlay }, - }, - } = useTheme(); + useTheme(); + const { overlay } = useLegacyColors(); return ; }; diff --git a/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx b/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx index e180d8da26..d649f8e904 100644 --- a/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx +++ b/examples/SampleApp/src/components/Reminders/ReminderBanner.tsx @@ -6,17 +6,15 @@ import { useTranslationContext, useStateStore, } from 'stream-chat-react-native'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const reminderStateSelector = (state: ReminderState) => ({ timeLeftMs: state.timeLeftMs, }); export const ReminderBanner = (item: ReminderResponse) => { - const { - theme: { - colors: { accent_blue, accent_red }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, accent_red } = useLegacyColors(); const { t } = useTranslationContext(); const { message_id } = item; const reminder = useMessageReminder(message_id); diff --git a/examples/SampleApp/src/components/Reminders/ReminderItem.tsx b/examples/SampleApp/src/components/Reminders/ReminderItem.tsx index 06d47ff551..ff48704d41 100644 --- a/examples/SampleApp/src/components/Reminders/ReminderItem.tsx +++ b/examples/SampleApp/src/components/Reminders/ReminderItem.tsx @@ -12,6 +12,7 @@ import { } from 'stream-chat-react-native'; import { ReminderBanner } from './ReminderBanner'; import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable'; +import { useLegacyColors } from '../../theme/useLegacyColors'; export const ReminderItem = ( item: ReminderResponse & { onDeleteHandler?: (id: string) => void }, @@ -23,10 +24,10 @@ export const ReminderItem = ( const channelName = channel?.name ? channel.name : 'Channel'; const { theme: { - colors: { accent_red, white_smoke, grey_gainsboro }, semantics, }, } = useTheme(); + const { accent_red, white_smoke, grey_gainsboro } = useLegacyColors(); const messagePreviewText = useMessagePreviewText({ message }); const MessagePreviewIcon = useMessagePreviewIcon({ message }); diff --git a/examples/SampleApp/src/components/Reminders/RemindersList.tsx b/examples/SampleApp/src/components/Reminders/RemindersList.tsx index 348de0c3eb..ce1fc4255e 100644 --- a/examples/SampleApp/src/components/Reminders/RemindersList.tsx +++ b/examples/SampleApp/src/components/Reminders/RemindersList.tsx @@ -11,6 +11,7 @@ import { import { useChatContext, useTheme, useQueryReminders } from 'stream-chat-react-native'; import { ReminderResponse } from 'stream-chat'; import { ReminderItem } from './ReminderItem'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const tabs = [ { key: 'all', title: 'All' }, @@ -29,11 +30,8 @@ const renderItem = ({ item }: { item: ReminderResponse }) => { const [selectedTab, setSelectedTab] = useState(tabs[0]); - const { - theme: { - colors: { accent_blue, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, grey_gainsboro } = useLegacyColors(); const { client } = useChatContext(); const { data, isLoading, loadNext } = useQueryReminders(); diff --git a/examples/SampleApp/src/components/RoundButton.tsx b/examples/SampleApp/src/components/RoundButton.tsx index 1e2c474a10..3cc44e09fc 100644 --- a/examples/SampleApp/src/components/RoundButton.tsx +++ b/examples/SampleApp/src/components/RoundButton.tsx @@ -1,6 +1,7 @@ import React, { PropsWithChildren } from 'react'; import { Platform, StyleSheet, TouchableOpacity } from 'react-native'; -import { useTheme } from 'stream-chat-react-native'; + +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ container: { @@ -32,11 +33,7 @@ type RoundButtonProps = PropsWithChildren<{ export const RoundButton: React.FC = (props) => { const { children, disabled, onPress } = props; - const { - theme: { - colors: { black, icon_background }, - }, - } = useTheme(); + const { black, icon_background } = useLegacyColors(); return ( = (props) => { } = props; const { - theme: { - colors: { black, grey, white }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { black, grey, white } = useLegacyColors(); const insets = useSafeAreaInsets(); return ( diff --git a/examples/SampleApp/src/components/SecretMenu.tsx b/examples/SampleApp/src/components/SecretMenu.tsx index a730bfe41d..1658394754 100644 --- a/examples/SampleApp/src/components/SecretMenu.tsx +++ b/examples/SampleApp/src/components/SecretMenu.tsx @@ -22,6 +22,7 @@ import { LabeledTextInput } from '../screens/AdvancedUserSelectorScreen.tsx'; import { Close } from '../icons/Close.tsx'; import { Notification } from '../icons/Notification.tsx'; import { Folder } from '../icons/Folder.tsx'; +import { useLegacyColors } from '../theme/useLegacyColors.ts'; const isAndroid = Platform.OS === 'android'; @@ -275,11 +276,8 @@ export const SecretMenu = ({ const [selectedMessageOverlayBackdrop, setSelectedMessageOverlayBackdrop] = useState< MessageOverlayBackdropConfigItem['value'] | null >(null); - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + useTheme(); + const { black, grey } = useLegacyColors(); const notificationConfigItems = useMemo( () => [ diff --git a/examples/SampleApp/src/components/ToastComponent/Toast.tsx b/examples/SampleApp/src/components/ToastComponent/Toast.tsx index 80fe1527c7..8bd79e6af7 100644 --- a/examples/SampleApp/src/components/ToastComponent/Toast.tsx +++ b/examples/SampleApp/src/components/ToastComponent/Toast.tsx @@ -3,6 +3,7 @@ import Animated, { Easing, SlideInDown, SlideOutDown } from 'react-native-reanim import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'; import { useInAppNotificationsState, useTheme } from 'stream-chat-react-native'; import type { Notification, NotificationState } from 'stream-chat'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const { width } = Dimensions.get('window'); @@ -17,11 +18,8 @@ export const Toast = () => { const { closeInAppNotification, notifications } = useInAppNotificationsState(); const { top } = useSafeAreaInsets(); - const { - theme: { - colors: { overlay, white_smoke }, - }, - } = useTheme(); + useTheme(); + const { overlay, white_smoke } = useLegacyColors(); // When offline, we upload pending attachments by cleaning up the previous upload, this results in a cancelled/aborted error from the server, so we filter out those notifications. const filteredNotifications = notifications.filter( diff --git a/examples/SampleApp/src/components/UserInfoOverlay.tsx b/examples/SampleApp/src/components/UserInfoOverlay.tsx index 2ebdefbbbf..70074bbeab 100644 --- a/examples/SampleApp/src/components/UserInfoOverlay.tsx +++ b/examples/SampleApp/src/components/UserInfoOverlay.tsx @@ -33,6 +33,7 @@ import { UserMinus } from '../icons/UserMinus'; import { CircleClose } from '../icons/CircleClose'; import { Message } from '../icons/Message'; import { User } from '../icons/User'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { ConfirmationData } from './ConfirmationBottomSheet'; @@ -107,11 +108,9 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => { const { channel, member } = data || {}; const { - theme: { - colors: { accent_red, black, grey, white }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { accent_red, black, grey, white } = useLegacyColors(); const offsetY = useSharedValue(0); const translateY = useSharedValue(0); diff --git a/examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx b/examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx index 4ea60b956e..b6a62de741 100644 --- a/examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx +++ b/examples/SampleApp/src/components/UserSearch/SelectedUserTag.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { Image, StyleSheet, Text, TouchableOpacity } from 'react-native'; -import { useTheme } from 'stream-chat-react-native'; import type { UserResponse } from 'stream-chat'; +import { useLegacyColors } from '../../theme/useLegacyColors'; const styles = StyleSheet.create({ tagContainer: { @@ -38,11 +38,7 @@ export const SelectedUserTag: React.FC = ({ onPress, tag, }) => { - const { - theme: { - colors: { black, grey_gainsboro }, - }, - } = useTheme(); + const { black, grey_gainsboro } = useLegacyColors(); return ( = ({ removeButton = true, user, }) => { - const { - theme: { - colors: { black, white_snow }, - }, - } = useTheme(); + useTheme(); + const { black, white_snow } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx b/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx index 50756f98ec..ba609f1cc4 100644 --- a/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx +++ b/examples/SampleApp/src/components/UserSearch/UserSearchResults.tsx @@ -19,6 +19,7 @@ import { Close } from '../../icons/Close'; import { Search } from '../../icons/Search'; import calendar from 'dayjs/plugin/calendar'; import { CheckSend } from '../../icons/CheckSend'; +import { useLegacyColors } from '../../theme/useLegacyColors'; dayjs.extend(calendar); @@ -93,20 +94,18 @@ export const UserSearchResults: React.FC = ({ }> >([]); const { - theme: { - colors: { - accent_blue, - bg_gradient_end, - bg_gradient_start, - black, - grey, - grey_gainsboro, - white_smoke, - white_snow, - }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { + accent_blue, + bg_gradient_end, + bg_gradient_start, + black, + grey, + grey_gainsboro, + white_smoke, + white_snow, + } = useLegacyColors(); const { vw } = useViewport(); const results = resultsProp || resultsContext; diff --git a/examples/SampleApp/src/icons/AddUser.tsx b/examples/SampleApp/src/icons/AddUser.tsx index 13995fdefd..7b741bf105 100644 --- a/examples/SampleApp/src/icons/AddUser.tsx +++ b/examples/SampleApp/src/icons/AddUser.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const AddUser: React.FC = ({ fill, height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Archive.tsx b/examples/SampleApp/src/icons/Archive.tsx index f32b37c58c..fcbf391591 100644 --- a/examples/SampleApp/src/icons/Archive.tsx +++ b/examples/SampleApp/src/icons/Archive.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Archive: React.FC = ({ height = 512, width = 512 }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/BlockUser.tsx b/examples/SampleApp/src/icons/BlockUser.tsx index c8dc323fbf..08ccac6daf 100644 --- a/examples/SampleApp/src/icons/BlockUser.tsx +++ b/examples/SampleApp/src/icons/BlockUser.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const BlockUser: React.FC = ({ height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/ChatsTab.tsx b/examples/SampleApp/src/icons/ChatsTab.tsx index f2c93d6c04..138892d84b 100644 --- a/examples/SampleApp/src/icons/ChatsTab.tsx +++ b/examples/SampleApp/src/icons/ChatsTab.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const ChatsTab: React.FC = ({ active, height = 24, width = 24 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( = ({ fill, height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/CircleClose.tsx b/examples/SampleApp/src/icons/CircleClose.tsx index f2a574e62b..349a3126b6 100644 --- a/examples/SampleApp/src/icons/CircleClose.tsx +++ b/examples/SampleApp/src/icons/CircleClose.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const CircleClose: React.FC = ({ height = 24, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Close.tsx b/examples/SampleApp/src/icons/Close.tsx index d698587e25..640a6c4e9c 100644 --- a/examples/SampleApp/src/icons/Close.tsx +++ b/examples/SampleApp/src/icons/Close.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Close: React.FC = ({ height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Contacts.tsx b/examples/SampleApp/src/icons/Contacts.tsx index f16ad9bfa9..3a5043c810 100644 --- a/examples/SampleApp/src/icons/Contacts.tsx +++ b/examples/SampleApp/src/icons/Contacts.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Contacts: React.FC = ({ fill, height = 24, scale = 1, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( = ({ fill, height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/DownArrow.tsx b/examples/SampleApp/src/icons/DownArrow.tsx index 12508703bd..7bba594c3e 100644 --- a/examples/SampleApp/src/icons/DownArrow.tsx +++ b/examples/SampleApp/src/icons/DownArrow.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const DownArrow: React.FC = ({ height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/DraftIcon.tsx b/examples/SampleApp/src/icons/DraftIcon.tsx index c54f4c7a0d..b6c4471a2f 100644 --- a/examples/SampleApp/src/icons/DraftIcon.tsx +++ b/examples/SampleApp/src/icons/DraftIcon.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const DraftsIcon: React.FC = ({ height = 29, width = 30 }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( = ({ active, height = 29, width = 30 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( = ({ height, width }) => { - const { - theme: { - colors: { accent_red, grey_gainsboro }, - }, - } = useTheme(); + const { accent_red, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/GoBack.tsx b/examples/SampleApp/src/icons/GoBack.tsx index 3683f9b1f9..a80911f687 100644 --- a/examples/SampleApp/src/icons/GoBack.tsx +++ b/examples/SampleApp/src/icons/GoBack.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const GoBack: React.FC = ({ height = 24, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( = ({ active, height = 24, width = 24 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/NewDirectMessageIcon.tsx b/examples/SampleApp/src/icons/NewDirectMessageIcon.tsx index 560d20b774..7d8bacafa5 100644 --- a/examples/SampleApp/src/icons/NewDirectMessageIcon.tsx +++ b/examples/SampleApp/src/icons/NewDirectMessageIcon.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const NewDirectMessageIcon: React.FC = ({ active, color, height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/NewGroupIcon.tsx b/examples/SampleApp/src/icons/NewGroupIcon.tsx index 0d1d9467ba..a17f6f9512 100644 --- a/examples/SampleApp/src/icons/NewGroupIcon.tsx +++ b/examples/SampleApp/src/icons/NewGroupIcon.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const NewGroupIcon: React.FC = ({ active, color, height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Notification.tsx b/examples/SampleApp/src/icons/Notification.tsx index 21bd941c72..600513bf81 100644 --- a/examples/SampleApp/src/icons/Notification.tsx +++ b/examples/SampleApp/src/icons/Notification.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Notification: React.FC = ({ fill, height = 24, scale = 1, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( = ({ active, height = 24, width = 24 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/RemoveUser.tsx b/examples/SampleApp/src/icons/RemoveUser.tsx index e49bebaea8..183437385e 100644 --- a/examples/SampleApp/src/icons/RemoveUser.tsx +++ b/examples/SampleApp/src/icons/RemoveUser.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const RemoveUser: React.FC = ({ height, width }) => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/Search.tsx b/examples/SampleApp/src/icons/Search.tsx index 37d7422a2a..13d2aac5ab 100644 --- a/examples/SampleApp/src/icons/Search.tsx +++ b/examples/SampleApp/src/icons/Search.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const Search: React.FC = ({ fill, height = 24, scale = 1, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( = ({ height = 24, width = 24 }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/SignOut.tsx b/examples/SampleApp/src/icons/SignOut.tsx index 5d6aa6cd5a..cd89829396 100644 --- a/examples/SampleApp/src/icons/SignOut.tsx +++ b/examples/SampleApp/src/icons/SignOut.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { G, Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const SignOut: React.FC = ({ height, width }) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/StreamLogo.tsx b/examples/SampleApp/src/icons/StreamLogo.tsx index da9f9fa896..0ad8b8031a 100644 --- a/examples/SampleApp/src/icons/StreamLogo.tsx +++ b/examples/SampleApp/src/icons/StreamLogo.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const StreamLogo: React.FC = ({ height = 40, width = 80 }) => { - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); + const { accent_blue } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/icons/ThreadsTab.tsx b/examples/SampleApp/src/icons/ThreadsTab.tsx index 60def5304b..3f0f7e98f3 100644 --- a/examples/SampleApp/src/icons/ThreadsTab.tsx +++ b/examples/SampleApp/src/icons/ThreadsTab.tsx @@ -1,15 +1,11 @@ import React from 'react'; import Svg, { Path } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; import { IconProps } from '../utils/base'; +import { useLegacyColors } from '../theme/useLegacyColors'; export const ThreadsTab: React.FC = ({ active, height = 24, width = 24 }) => { - const { - theme: { - colors: { black, grey }, - }, - } = useTheme(); + const { black, grey } = useLegacyColors(); return ( { const color = pathFill ?? fill ?? stroke ?? 'black'; - const size = scale ? 20 * scale : undefined; + const size = scale ? 20 * scale : 20; return ( diff --git a/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx b/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx index 99a86d10f0..1bcc7dca54 100644 --- a/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx +++ b/examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx @@ -4,6 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { KeyboardCompatibleView, useTheme, version } from 'stream-chat-react-native'; import { useAppContext } from '../context/AppContext'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ bottomContainer: { @@ -61,11 +62,8 @@ export const LabeledTextInput: React.FC = ({ onChangeText, value, }) => { - const { - theme: { - colors: { accent_blue, accent_red, black, grey, white_smoke }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, accent_red, black, grey, white_smoke } = useLegacyColors(); const [borderColor, setBorderColor] = useState(white_smoke); const onFocus = () => { @@ -137,11 +135,8 @@ export const LabeledTextInput: React.FC = ({ export const AdvancedUserSelectorScreen: React.FC = () => { const { bottom } = useSafeAreaInsets(); - const { - theme: { - colors: { button_background, button_text, grey_gainsboro, white_snow }, - }, - } = useTheme(); + useTheme(); + const { button_background, button_text, grey_gainsboro, white_snow } = useLegacyColors(); const { loginUser } = useAppContext(); const [apiKey, setApiKey] = useState(''); diff --git a/examples/SampleApp/src/screens/ChannelFilesScreen.tsx b/examples/SampleApp/src/screens/ChannelFilesScreen.tsx index 5072e69f89..3a82eb3e5d 100644 --- a/examples/SampleApp/src/screens/ChannelFilesScreen.tsx +++ b/examples/SampleApp/src/screens/ChannelFilesScreen.tsx @@ -12,6 +12,7 @@ import { import { ScreenHeader } from '../components/ScreenHeader'; import { usePaginatedAttachments } from '../hooks/usePaginatedAttachments'; import { File } from '../icons/File'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { RouteProp } from '@react-navigation/native'; import type { Attachment } from 'stream-chat'; @@ -83,10 +84,10 @@ export const ChannelFilesScreen: React.FC = ({ const insets = useSafeAreaInsets(); const { theme: { - colors: { black, grey, white_snow }, semantics, }, } = useTheme(); + const { black, grey, white_snow } = useLegacyColors(); const [sections, setSections] = useState< Array<{ @@ -204,11 +205,8 @@ export const ChannelFilesScreen: React.FC = ({ }; const EmptyListComponent = () => { - const { - theme: { - colors: { black, grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/screens/ChannelImagesScreen.tsx b/examples/SampleApp/src/screens/ChannelImagesScreen.tsx index 793b7a00e7..5a75be6a47 100644 --- a/examples/SampleApp/src/screens/ChannelImagesScreen.tsx +++ b/examples/SampleApp/src/screens/ChannelImagesScreen.tsx @@ -23,6 +23,7 @@ import { import { ScreenHeader } from '../components/ScreenHeader'; import { usePaginatedAttachments } from '../hooks/usePaginatedAttachments'; import { Picture } from '../icons/Picture'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { RouteProp } from '@react-navigation/native'; @@ -74,11 +75,8 @@ export const ChannelImagesScreen: React.FC = ({ const { assets } = useStateStore(imageGalleryStateStore.state, selector); const { setOverlay } = useOverlayContext(); const { loading, loadMore, messages } = usePaginatedAttachments(channel, 'image'); - const { - theme: { - colors: { white }, - }, - } = useTheme(); + useTheme(); + const { white } = useLegacyColors(); const [stickyHeaderDate, setStickyHeaderDate] = useState( Dayjs(messages?.[0]?.created_at).format('MMM YYYY'), @@ -175,11 +173,8 @@ export const ChannelImagesScreen: React.FC = ({ }; const EmptyListComponent = () => { - const { - theme: { - colors: { black, grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/screens/ChannelListScreen.tsx b/examples/SampleApp/src/screens/ChannelListScreen.tsx index e088574079..5b2579dc7f 100644 --- a/examples/SampleApp/src/screens/ChannelListScreen.tsx +++ b/examples/SampleApp/src/screens/ChannelListScreen.tsx @@ -22,6 +22,7 @@ import { useStreamChatContext } from '../context/StreamChatContext'; import { Search } from '../icons/Search'; import { ChannelInfo } from '../icons/ChannelInfo.tsx'; import { CircleClose } from '../icons/CircleClose.tsx'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ channelListContainer: { @@ -77,11 +78,8 @@ const HeaderNetworkDownIndicator = () => null; export const ChannelListScreen: React.FC = () => { const { chatClient } = useAppContext(); const navigation = useNavigation(); - const { - theme: { - colors: { black, grey, grey_gainsboro, grey_whisper, white, white_snow }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro, grey_whisper, white, white_snow } = useLegacyColors(); const { setChannel } = useStreamChatContext(); const searchInputRef = useRef(null); diff --git a/examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx b/examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx index 07998b45f7..f9e96b0dfc 100644 --- a/examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx +++ b/examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx @@ -7,6 +7,7 @@ import { usePaginatedPinnedMessages } from '../hooks/usePaginatedPinnedMessages' import { Message } from '../icons/Message'; import { MessageSearchList } from '../components/MessageSearch/MessageSearchList'; import { ScreenHeader } from '../components/ScreenHeader'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { RouteProp } from '@react-navigation/native'; @@ -76,11 +77,8 @@ export const ChannelPinnedMessagesScreen: React.FC { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); const { loading, loadMore, messages } = usePaginatedPinnedMessages(channel); const insets = useSafeAreaInsets(); return ( @@ -105,11 +103,8 @@ export const ChannelPinnedMessagesScreen: React.FC { - const { - theme: { - colors: { black, grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/screens/DraftScreen.tsx b/examples/SampleApp/src/screens/DraftScreen.tsx index 4f8d70ed54..4fe2348e8d 100644 --- a/examples/SampleApp/src/screens/DraftScreen.tsx +++ b/examples/SampleApp/src/screens/DraftScreen.tsx @@ -5,17 +5,15 @@ import { StyleSheet, View } from 'react-native'; import { useTheme } from 'stream-chat-react-native'; import { ChatScreenHeader } from '../components/ChatScreenHeader'; import { DraftsList } from '../components/DraftsList'; +import { useLegacyColors } from '../theme/useLegacyColors'; export type DraftsScreenProps = { navigation: NativeStackNavigationProp; }; export const DraftsScreen: React.FC = () => { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); return ( { const { channel } = useStreamChatContext(); const { end_at, user_id } = shared_location; - const { - theme: { - colors: { accent_blue, accent_red, grey }, - }, - } = useTheme(); + useTheme(); + const { accent_blue, accent_red, grey } = useLegacyColors(); const liveLocationActive = isLiveLocationStopped ? false : end_at && new Date(end_at) > new Date(); @@ -117,11 +115,8 @@ export const MapScreen = ({ route }: MapScreenProps) => { const { channel } = useStreamChatContext(); const mapRef = useRef(null); const markerRef = useRef(null); - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); + useTheme(); + const { accent_blue } = useLegacyColors(); const { width, height } = useWindowDimensions(); const aspect_ratio = width / height; diff --git a/examples/SampleApp/src/screens/MentionsScreen.tsx b/examples/SampleApp/src/screens/MentionsScreen.tsx index c542e0f470..72d170797d 100644 --- a/examples/SampleApp/src/screens/MentionsScreen.tsx +++ b/examples/SampleApp/src/screens/MentionsScreen.tsx @@ -13,6 +13,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { BottomTabNavigatorParamList } from '../types'; import { useAppContext } from '../context/AppContext'; import { AtMentions } from '../icons/AtMentions'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ container: { @@ -30,11 +31,8 @@ const styles = StyleSheet.create({ }); const EmptyMentionsSearchIndicator = () => { - const { - theme: { - colors: { grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { grey, grey_gainsboro } = useLegacyColors(); return ( @@ -49,11 +47,8 @@ export type MentionsScreenProps = { }; export const MentionsScreen: React.FC = () => { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); const { chatClient } = useAppContext(); const messageFilters = useMemo( () => ({ diff --git a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx index 5438538965..8b34499f14 100644 --- a/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx +++ b/examples/SampleApp/src/screens/NewDirectMessagingScreen.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'; +import { useFocusEffect } from '@react-navigation/native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { Channel, @@ -16,6 +17,7 @@ import { SelectedUserTag } from '../components/UserSearch/SelectedUserTag'; import { UserSearchResults } from '../components/UserSearch/UserSearchResults'; import { useAppContext } from '../context/AppContext'; import { useUserSearchContext } from '../context/UserSearchContext'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { Channel as StreamChatChannel } from 'stream-chat'; @@ -83,11 +85,7 @@ const styles = StyleSheet.create({ }); const EmptyMessagesIndicator = () => { - const { - theme: { - colors: { grey }, - }, - } = useTheme(); + const { grey } = useLegacyColors(); return ( = navigation, }) => { const { - theme: { - colors: { accent_blue, black, grey, white }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { accent_blue, black, grey, white } = useLegacyColors(); const { chatClient } = useAppContext(); const { @@ -148,6 +144,18 @@ export const NewDirectMessagingScreen: React.FC = // When selectedUsers are changed, initiate a channel with those users as members, // and set it as a channel on current screen. const selectedUsersLength = selectedUsers.length; + + useFocusEffect( + React.useCallback(() => { + if (selectedUsersLength === 0) { + currentChannel.current = undefined; + isDraft.current = true; + setFocusOnMessageInput(false); + setFocusOnSearchInput(true); + } + }, [selectedUsersLength]), + ); + useEffect(() => { const initChannel = async () => { if (!chatClient?.user?.id) { @@ -156,7 +164,10 @@ export const NewDirectMessagingScreen: React.FC = // If there are no selected users, then set dummy channel. if (selectedUsersLength === 0) { + currentChannel.current = undefined; + isDraft.current = true; setFocusOnMessageInput(false); + setFocusOnSearchInput(true); return; } diff --git a/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx b/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx index 18ee06b194..40d9f400e0 100644 --- a/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx +++ b/examples/SampleApp/src/screens/NewGroupChannelAddMemberScreen.tsx @@ -8,6 +8,7 @@ import { UserGridItem } from '../components/UserSearch/UserGridItem'; import { UserSearchResults } from '../components/UserSearch/UserSearchResults'; import { useAppContext } from '../context/AppContext'; import { useUserSearchContext } from '../context/UserSearchContext'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; @@ -51,12 +52,6 @@ type RightArrowButtonProps = { const RightArrowButton: React.FC = (props) => { const { disabled, onPress } = props; - const { - theme: { - colors: { accent_blue }, - }, - } = useTheme(); - return ( @@ -77,11 +72,9 @@ export const NewGroupChannelAddMemberScreen: React.FC = ({ navigation }) const { chatClient } = useAppContext(); const { - theme: { - colors: { black, grey, white }, - semantics, - }, + theme: { semantics }, } = useTheme(); + const { black, grey, white } = useLegacyColors(); const { onChangeSearchText, onFocusInput, removeUser, reset, searchText, selectedUsers } = useUserSearchContext(); diff --git a/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx b/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx index 270ce5e532..078ec9e760 100644 --- a/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx +++ b/examples/SampleApp/src/screens/NewGroupChannelAssignNameScreen.tsx @@ -8,6 +8,7 @@ import { ScreenHeader } from '../components/ScreenHeader'; import { UserSearchResults } from '../components/UserSearch/UserSearchResults'; import { useAppContext } from '../context/AppContext'; import { useUserSearchContext } from '../context/UserSearchContext'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; @@ -86,10 +87,10 @@ export const NewGroupChannelAssignNameScreen: React.FC; }; export const RemindersScreen: React.FC = () => { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); return ( = ({ channel }) => { const { chatClient } = useAppContext(); const name = useChannelPreviewDisplayName(channel, 30); const navigation = useNavigation>(); - const { - theme: { - colors: { black, grey, grey_whisper, white_snow }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_whisper, white_snow } = useLegacyColors(); const displayAvatar = getChannelPreviewDisplayAvatar(channel, chatClient); @@ -133,11 +131,8 @@ const CustomPreview: React.FC = ({ channel }) => { }; const EmptyListComponent = () => { - const { - theme: { - colors: { black, grey, grey_gainsboro }, - }, - } = useTheme(); + useTheme(); + const { black, grey, grey_gainsboro } = useLegacyColors(); return ( diff --git a/examples/SampleApp/src/screens/ThreadListScreen.tsx b/examples/SampleApp/src/screens/ThreadListScreen.tsx index c62c9a63d0..d83772df50 100644 --- a/examples/SampleApp/src/screens/ThreadListScreen.tsx +++ b/examples/SampleApp/src/screens/ThreadListScreen.tsx @@ -7,6 +7,7 @@ import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { BottomTabNavigatorParamList } from '../types'; import { useNavigation, useIsFocused } from '@react-navigation/native'; +import { useLegacyColors } from '../theme/useLegacyColors'; const styles = StyleSheet.create({ container: { @@ -28,11 +29,8 @@ export type ThreadsScreenProps = { }; export const ThreadListScreen: React.FC = () => { - const { - theme: { - colors: { white_snow }, - }, - } = useTheme(); + useTheme(); + const { white_snow } = useLegacyColors(); const navigation = useNavigation(); const isFocused = useIsFocused(); diff --git a/examples/SampleApp/src/screens/ThreadScreen.tsx b/examples/SampleApp/src/screens/ThreadScreen.tsx index dc7347ed9f..6fe9062294 100644 --- a/examples/SampleApp/src/screens/ThreadScreen.tsx +++ b/examples/SampleApp/src/screens/ThreadScreen.tsx @@ -28,6 +28,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx'; import { MessageLocation } from '../components/LocationSharing/MessageLocation.tsx'; import { useAppContext } from '../context/AppContext.ts'; +import { useLegacyColors } from '../theme/useLegacyColors'; const selector = (nextValue: ThreadState) => ({ parentMessage: nextValue.parentMessage }) as const; @@ -80,9 +81,9 @@ export const ThreadScreen: React.FC = ({ const { theme: { semantics, - colors: { white }, }, } = useTheme(); + const { white } = useLegacyColors(); const { client: chatClient } = useChatContext(); const { t } = useTranslationContext(); const { setThread } = useStreamChatContext(); diff --git a/examples/SampleApp/src/screens/UserSelectorScreen.tsx b/examples/SampleApp/src/screens/UserSelectorScreen.tsx index 49296412b4..eea0c85c13 100644 --- a/examples/SampleApp/src/screens/UserSelectorScreen.tsx +++ b/examples/SampleApp/src/screens/UserSelectorScreen.tsx @@ -17,6 +17,7 @@ import { RightArrow } from '../icons/RightArrow'; import { StreamLogo } from '../icons/StreamLogo'; import { Settings } from '../icons/Settings'; import AsyncStore from '../utils/AsyncStore'; +import { useLegacyColors } from '../theme/useLegacyColors'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; @@ -90,10 +91,10 @@ type Props = { export const UserSelectorScreen: React.FC = ({ navigation }) => { const { theme: { - colors: { black, grey, grey_gainsboro, grey_whisper, white_snow }, semantics, }, } = useTheme(); + const { black, grey, grey_gainsboro, grey_whisper, white_snow } = useLegacyColors(); const { switchUser } = useAppContext(); const { bottom } = useSafeAreaInsets(); diff --git a/examples/SampleApp/src/theme/useLegacyColors.ts b/examples/SampleApp/src/theme/useLegacyColors.ts new file mode 100644 index 0000000000..d863326207 --- /dev/null +++ b/examples/SampleApp/src/theme/useLegacyColors.ts @@ -0,0 +1,29 @@ +import { useMemo } from 'react'; +import { useTheme } from 'stream-chat-react-native'; + +export const useLegacyColors = () => { + const { + theme: { semantics }, + } = useTheme(); + + return useMemo( + () => ({ + accent_blue: semantics.accentPrimary, + accent_red: semantics.accentError, + bg_gradient_end: semantics.backgroundCoreSurface, + bg_gradient_start: semantics.backgroundCoreSurfaceSubtle, + black: semantics.textPrimary, + button_background: semantics.buttonPrimaryBg, + button_text: semantics.buttonPrimaryTextOnAccent, + grey: semantics.textSecondary, + grey_gainsboro: semantics.borderCoreDefault, + grey_whisper: semantics.backgroundCoreSurface, + icon_background: semantics.backgroundCoreApp, + overlay: semantics.badgeBgOverlay, + white: semantics.backgroundCoreApp, + white_smoke: semantics.backgroundCoreSurfaceSubtle, + white_snow: semantics.backgroundCoreApp, + }), + [semantics], + ); +}; diff --git a/examples/SampleApp/src/utils/base.tsx b/examples/SampleApp/src/utils/base.tsx index 7c50c2bfb5..c2b6c18feb 100644 --- a/examples/SampleApp/src/utils/base.tsx +++ b/examples/SampleApp/src/utils/base.tsx @@ -1,6 +1,7 @@ import React from 'react'; import Svg, { Path, PathProps, SvgProps } from 'react-native-svg'; -import { useTheme } from 'stream-chat-react-native'; + +import { useLegacyColors } from '../theme/useLegacyColors'; export type IconProps = Partial & Omit & { @@ -25,11 +26,7 @@ export type RootPathProps = { pathOpacity?: PathProps['opacity']; }; export const RootPath: React.FC = (props) => { - const { - theme: { - colors: { black }, - }, - } = useTheme(); + const { black } = useLegacyColors(); const { d, pathFill = black, pathOpacity } = props; return ; From 0709be34bdcc8348fe8bb126ac98b64ecde01d21 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 12:07:39 +0200 Subject: [PATCH 20/26] fix: add members modals --- .../src/components/AddMembersBottomSheet.tsx | 6 +++--- .../src/components/AllMembersBottomSheet.tsx | 2 +- .../src/components/EditGroupBottomSheet.tsx | 2 +- examples/SampleApp/src/icons/Close.tsx | 13 ++++++++++--- 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/examples/SampleApp/src/components/AddMembersBottomSheet.tsx b/examples/SampleApp/src/components/AddMembersBottomSheet.tsx index 3160b87d95..2a17faa594 100644 --- a/examples/SampleApp/src/components/AddMembersBottomSheet.tsx +++ b/examples/SampleApp/src/components/AddMembersBottomSheet.tsx @@ -12,13 +12,13 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import { BottomSheetModal, Checkmark, - Close, StreamBottomSheetModalFlatList, UserAvatar, useStableCallback, useTheme, } from 'stream-chat-react-native'; +import { Close } from '../icons/Close'; import { CircleClose } from '../icons/CircleClose'; import { usePaginatedUsers } from '../hooks/usePaginatedUsers'; @@ -159,7 +159,7 @@ export const AddMembersBottomSheet = React.memo( const initialLoadComplete = initialResults !== null; - const emptyComponent = useMemo(() => { + const EmptyComponent = useCallback(() => { if (loading && !initialLoadComplete) { return ( @@ -248,7 +248,7 @@ export const AddMembersBottomSheet = React.memo( keyExtractor={keyExtractor} keyboardDismissMode='interactive' keyboardShouldPersistTaps='handled' - ListEmptyComponent={emptyComponent} + ListEmptyComponent={EmptyComponent} onEndReached={loadMore} renderItem={renderItem} contentContainerStyle={styles.listContent} diff --git a/examples/SampleApp/src/components/AllMembersBottomSheet.tsx b/examples/SampleApp/src/components/AllMembersBottomSheet.tsx index a482ad6f59..ea504a1046 100644 --- a/examples/SampleApp/src/components/AllMembersBottomSheet.tsx +++ b/examples/SampleApp/src/components/AllMembersBottomSheet.tsx @@ -3,7 +3,6 @@ import { Pressable, StyleSheet, Text, View } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { BottomSheetModal, - Close, StreamBottomSheetModalFlatList, UserAdd, useStableCallback, @@ -12,6 +11,7 @@ import { import { ContactDetailBottomSheet } from './ContactDetailBottomSheet'; import { MemberListItem } from './MemberListItem'; +import { Close } from '../icons/Close'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import type { Channel, ChannelMemberResponse } from 'stream-chat'; diff --git a/examples/SampleApp/src/components/EditGroupBottomSheet.tsx b/examples/SampleApp/src/components/EditGroupBottomSheet.tsx index 2f1d1988e8..4feb8400f5 100644 --- a/examples/SampleApp/src/components/EditGroupBottomSheet.tsx +++ b/examples/SampleApp/src/components/EditGroupBottomSheet.tsx @@ -13,11 +13,11 @@ import { BottomSheetModal, ChannelAvatar, Checkmark, - Close, useStableCallback, useTheme, } from 'stream-chat-react-native'; +import { Close } from '../icons/Close'; import type { Channel } from 'stream-chat'; type EditGroupBottomSheetProps = { diff --git a/examples/SampleApp/src/icons/Close.tsx b/examples/SampleApp/src/icons/Close.tsx index 640a6c4e9c..c94bf78205 100644 --- a/examples/SampleApp/src/icons/Close.tsx +++ b/examples/SampleApp/src/icons/Close.tsx @@ -4,15 +4,22 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from '../utils/base'; import { useLegacyColors } from '../theme/useLegacyColors'; -export const Close: React.FC = ({ height, width }) => { +export const Close: React.FC = ({ + fill, + height = 24, + pathFill, + stroke, + width = 24, +}) => { const { black } = useLegacyColors(); + const color = pathFill ?? fill ?? stroke ?? black; return ( - + From 1e9a7a85a11f7e7ffb7f61c3b7f40a41aff8635d Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 13:05:46 +0200 Subject: [PATCH 21/26] chore: renaming --- .../Attachment/Audio/PlayPauseButton.tsx | 4 +- .../src/components/Attachment/FileIcon.tsx | 18 ++-- .../Attachment/UrlPreview/URLPreview.tsx | 2 +- .../UrlPreview/URLPreviewCompact.tsx | 2 +- .../AttachmentPickerItem.tsx | 2 +- .../AutoCompleteSuggestionCommandIcon.tsx | 4 +- .../AutoCompleteSuggestionHeader.tsx | 2 +- .../hooks/useChannelActionItems.tsx | 2 +- .../ChannelPreview/ChannelPreviewMessage.tsx | 2 +- .../components/ImageGalleryFooter.tsx | 2 +- .../components/ImageGalleryHeader.tsx | 2 +- .../components/ImageGalleryVideoControl.tsx | 4 +- .../Headers/MessagePinnedHeader.tsx | 2 +- .../Headers/MessageSavedForLaterHeader.tsx | 2 +- .../Headers/SentToChannelHeader.tsx | 2 +- .../MessageItemView/MessageDeleted.tsx | 2 +- .../Message/MessageItemView/MessageStatus.tsx | 6 +- .../StopMessageStreamingButton.tsx | 30 +++++- .../AttachmentRemoveControl.tsx | 2 +- .../AttachmentUploadProgressIndicator.tsx | 4 +- .../AudioRecorder/AudioRecorder.tsx | 10 +- .../AudioRecorder/AudioRecordingButton.tsx | 2 +- .../AudioRecordingInProgress.tsx | 2 +- .../AudioRecordingLockIndicator.tsx | 6 +- .../AudioRecorder/AudioRecordingPreview.tsx | 4 +- .../components/InputButtons/AttachButton.tsx | 2 +- .../components/LinkPreviewList.tsx | 2 +- .../components/OutputButtons/EditButton.tsx | 2 +- .../components/OutputButtons/SendButton.tsx | 2 +- .../components/OutputButtons/index.tsx | 2 +- .../MessageList/ScrollToBottomButton.tsx | 2 +- .../UnreadMessagesNotification.tsx | 4 +- .../MessageMenu/MessageReactionPicker.tsx | 2 +- .../MessageMenu/MessageUserReactions.tsx | 2 +- .../Poll/components/CreatePollHeader.tsx | 2 +- .../Poll/components/CreatePollOptions.tsx | 6 +- .../Poll/components/PollModalHeader.tsx | 2 +- .../ThreadList/ThreadListUnreadBanner.tsx | 2 +- .../src/components/UIComponents/Spinner.tsx | 2 +- .../src/components/ui/Avatar/AvatarGroup.tsx | 2 +- .../src/components/ui/Avatar/UserAvatar.tsx | 2 +- .../src/components/ui/Badge/ErrorBadge.tsx | 2 +- .../src/components/ui/Badge/GiphyBadge.tsx | 2 +- .../src/components/ui/Badge/ImgurBadge.tsx | 2 +- package/src/components/ui/GiphyChip.tsx | 4 +- package/src/components/ui/Input/Input.tsx | 4 +- .../src/components/ui/VideoPlayIndicator.tsx | 2 +- .../messagePreview/useMessagePreviewIcon.tsx | 16 +-- package/src/icons/ArrowShareLeft.tsx | 35 ------- package/src/icons/Audio.tsx | 35 +++---- package/src/icons/BlockUser.tsx | 17 ---- package/src/icons/Checkmark.tsx | 34 +++---- package/src/icons/CircleStop.tsx | 22 ----- package/src/icons/Down.tsx | 18 ---- package/src/icons/File.tsx | 2 + package/src/icons/FilePickerIcon.tsx | 29 ------ package/src/icons/Flag.tsx | 2 + package/src/icons/Giphy.tsx | 2 + package/src/icons/GiphyIcon.tsx | 32 ------ package/src/icons/MessageFlag.tsx | 29 ------ package/src/icons/PhotoIcon.tsx | 27 ----- package/src/icons/PollIcon.tsx | 17 ---- package/src/icons/{Resend.tsx => Retry.tsx} | 0 package/src/icons/Sound.tsx | 21 ---- package/src/icons/Tick.tsx | 17 ---- package/src/icons/Video.tsx | 42 ++++---- package/src/icons/VideoIcon.tsx | 27 ----- .../{ArrowUpRight.tsx => arrow-up-right.tsx} | 0 .../src/icons/{ArrowUp.tsx => arrow-up.tsx} | 19 ++++ package/src/icons/{Lightning.tsx => bolt.tsx} | 0 .../src/icons/{Check.tsx => checkmark-1.tsx} | 2 +- .../src/icons/{CheckAll.tsx => checks.tsx} | 0 .../{ChevronTop.tsx => chevron-down.tsx} | 0 .../{ChevronLeft.tsx => chevron-left.tsx} | 0 package/src/icons/{Time.tsx => clock.tsx} | 0 .../icons/{CommandsIcon.tsx => command.tsx} | 0 .../icons/{MoreEmojis.tsx => emoji-add-1.tsx} | 0 package/src/icons/{Smile.tsx => emoji.tsx} | 0 ...Circle.tsx => exclamation-circle-fill.tsx} | 0 ...lamation.tsx => exclamation-mark-fill.tsx} | 0 ...ning.tsx => exclamation-triangle-fill.tsx} | 0 package/src/icons/filetype-audio-xl.tsx | 26 +++++ .../icons/{Code.tsx => filetype-code-xl.tsx} | 0 .../{ZIP.tsx => filetype-compression-xl.tsx} | 0 ...therFileIcon.tsx => filetype-other-xl.tsx} | 0 .../icons/{PDF.tsx => filetype-pdf-xl.tsx} | 0 ...ation.tsx => filetype-presentation-xl.tsx} | 0 ...dSheet.tsx => filetype-spreadsheet-xl.tsx} | 0 .../icons/{DOC.tsx => filetype-text-xl.tsx} | 0 package/src/icons/filetype-video-xl.tsx | 33 +++++++ .../src/icons/{ImageGrid.tsx => gallery.tsx} | 0 package/src/icons/{Picture.tsx => image.tsx} | 2 + package/src/icons/index.ts | 98 +++++++++---------- .../src/icons/{InfoTooltip.tsx => info.tsx} | 0 .../src/icons/{ArrowBoxLeft.tsx => leave.tsx} | 0 .../src/icons/{MapPin.tsx => location.tsx} | 0 ...sageBubbleEmpty.tsx => message-bubble.tsx} | 0 .../{CircleMinus.tsx => minus-circle.tsx} | 0 .../{MenuPointHorizontal.tsx => more.tsx} | 0 .../src/icons/{CircleBan.tsx => no-sign.tsx} | 2 + .../{UnreadIndicator.tsx => notification.tsx} | 0 .../src/icons/{Pause.tsx => pause-fill.tsx} | 0 package/src/icons/{Play.tsx => play-fill.tsx} | 0 .../src/icons/{PollThumbnail.tsx => poll.tsx} | 2 + package/src/icons/{Reload.tsx => refresh.tsx} | 0 .../src/icons/{DotGrid.tsx => reorder.tsx} | 0 .../icons/{CurveLineLeftUp.tsx => reply.tsx} | 2 + package/src/icons/{Bookmark.tsx => save.tsx} | 0 package/src/icons/{SendRight.tsx => send.tsx} | 0 package/src/icons/{Stop.tsx => stop-fill.tsx} | 0 .../src/icons/{ThreadReply.tsx => thread.tsx} | 0 .../src/icons/{UserAdd.tsx => user-add.tsx} | 0 .../icons/{UserDelete.tsx => user-remove.tsx} | 0 .../src/icons/{PeopleIcon.tsx => users.tsx} | 0 .../icons/{Recorder.tsx => video-fill.tsx} | 0 package/src/icons/{Mic.tsx => voice.tsx} | 0 package/src/icons/{Cross.tsx => xmark-1.tsx} | 0 package/src/icons/{NewClose.tsx => xmark.tsx} | 0 .../__tests__/audio-player.test.ts | 2 +- 119 files changed, 292 insertions(+), 494 deletions(-) delete mode 100644 package/src/icons/ArrowShareLeft.tsx delete mode 100644 package/src/icons/BlockUser.tsx delete mode 100644 package/src/icons/CircleStop.tsx delete mode 100644 package/src/icons/Down.tsx delete mode 100644 package/src/icons/FilePickerIcon.tsx delete mode 100644 package/src/icons/GiphyIcon.tsx delete mode 100644 package/src/icons/MessageFlag.tsx delete mode 100644 package/src/icons/PhotoIcon.tsx delete mode 100644 package/src/icons/PollIcon.tsx rename package/src/icons/{Resend.tsx => Retry.tsx} (100%) delete mode 100644 package/src/icons/Sound.tsx delete mode 100644 package/src/icons/Tick.tsx delete mode 100644 package/src/icons/VideoIcon.tsx rename package/src/icons/{ArrowUpRight.tsx => arrow-up-right.tsx} (100%) rename package/src/icons/{ArrowUp.tsx => arrow-up.tsx} (52%) rename package/src/icons/{Lightning.tsx => bolt.tsx} (100%) rename package/src/icons/{Check.tsx => checkmark-1.tsx} (83%) rename package/src/icons/{CheckAll.tsx => checks.tsx} (100%) rename package/src/icons/{ChevronTop.tsx => chevron-down.tsx} (100%) rename package/src/icons/{ChevronLeft.tsx => chevron-left.tsx} (100%) rename package/src/icons/{Time.tsx => clock.tsx} (100%) rename package/src/icons/{CommandsIcon.tsx => command.tsx} (100%) rename package/src/icons/{MoreEmojis.tsx => emoji-add-1.tsx} (100%) rename package/src/icons/{Smile.tsx => emoji.tsx} (100%) rename package/src/icons/{ExclamationCircle.tsx => exclamation-circle-fill.tsx} (100%) rename package/src/icons/{Exclamation.tsx => exclamation-mark-fill.tsx} (100%) rename package/src/icons/{Warning.tsx => exclamation-triangle-fill.tsx} (100%) create mode 100644 package/src/icons/filetype-audio-xl.tsx rename package/src/icons/{Code.tsx => filetype-code-xl.tsx} (100%) rename package/src/icons/{ZIP.tsx => filetype-compression-xl.tsx} (100%) rename package/src/icons/{OtherFileIcon.tsx => filetype-other-xl.tsx} (100%) rename package/src/icons/{PDF.tsx => filetype-pdf-xl.tsx} (100%) rename package/src/icons/{Presentation.tsx => filetype-presentation-xl.tsx} (100%) rename package/src/icons/{SpreadSheet.tsx => filetype-spreadsheet-xl.tsx} (100%) rename package/src/icons/{DOC.tsx => filetype-text-xl.tsx} (100%) create mode 100644 package/src/icons/filetype-video-xl.tsx rename package/src/icons/{ImageGrid.tsx => gallery.tsx} (100%) rename package/src/icons/{Picture.tsx => image.tsx} (94%) rename package/src/icons/{InfoTooltip.tsx => info.tsx} (100%) rename package/src/icons/{ArrowBoxLeft.tsx => leave.tsx} (100%) rename package/src/icons/{MapPin.tsx => location.tsx} (100%) rename package/src/icons/{MessageBubbleEmpty.tsx => message-bubble.tsx} (100%) rename package/src/icons/{CircleMinus.tsx => minus-circle.tsx} (100%) rename package/src/icons/{MenuPointHorizontal.tsx => more.tsx} (100%) rename package/src/icons/{CircleBan.tsx => no-sign.tsx} (90%) rename package/src/icons/{UnreadIndicator.tsx => notification.tsx} (100%) rename package/src/icons/{Pause.tsx => pause-fill.tsx} (100%) rename package/src/icons/{Play.tsx => play-fill.tsx} (100%) rename package/src/icons/{PollThumbnail.tsx => poll.tsx} (89%) rename package/src/icons/{Reload.tsx => refresh.tsx} (100%) rename package/src/icons/{DotGrid.tsx => reorder.tsx} (100%) rename package/src/icons/{CurveLineLeftUp.tsx => reply.tsx} (88%) rename package/src/icons/{Bookmark.tsx => save.tsx} (100%) rename package/src/icons/{SendRight.tsx => send.tsx} (100%) rename package/src/icons/{Stop.tsx => stop-fill.tsx} (100%) rename package/src/icons/{ThreadReply.tsx => thread.tsx} (100%) rename package/src/icons/{UserAdd.tsx => user-add.tsx} (100%) rename package/src/icons/{UserDelete.tsx => user-remove.tsx} (100%) rename package/src/icons/{PeopleIcon.tsx => users.tsx} (100%) rename package/src/icons/{Recorder.tsx => video-fill.tsx} (100%) rename package/src/icons/{Mic.tsx => voice.tsx} (100%) rename package/src/icons/{Cross.tsx => xmark-1.tsx} (100%) rename package/src/icons/{NewClose.tsx => xmark.tsx} (100%) diff --git a/package/src/components/Attachment/Audio/PlayPauseButton.tsx b/package/src/components/Attachment/Audio/PlayPauseButton.tsx index 71d9f0d0f4..5786b02bda 100644 --- a/package/src/components/Attachment/Audio/PlayPauseButton.tsx +++ b/package/src/components/Attachment/Audio/PlayPauseButton.tsx @@ -2,8 +2,8 @@ import React, { useMemo } from 'react'; import { Pressable, PressableProps, StyleProp, StyleSheet, ViewStyle } from 'react-native'; import { useTheme } from '../../../contexts'; -import { Pause } from '../../../icons/Pause'; -import { Play } from '../../../icons/Play'; +import { Pause } from '../../../icons/pause-fill'; +import { Play } from '../../../icons/play-fill'; import { primitives } from '../../../theme'; import { buttonSizes } from '../../ui/Button/constants'; diff --git a/package/src/components/Attachment/FileIcon.tsx b/package/src/components/Attachment/FileIcon.tsx index 7925de0d8c..f9ebf44d30 100644 --- a/package/src/components/Attachment/FileIcon.tsx +++ b/package/src/components/Attachment/FileIcon.tsx @@ -2,16 +2,16 @@ import React from 'react'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Audio } from '../../icons/Audio'; -import { Code } from '../../icons/Code'; -import { DOC } from '../../icons/DOC'; -import { OtherFileIcon } from '../../icons/OtherFileIcon'; -import { PDF } from '../../icons/PDF'; -import { Presentation } from '../../icons/Presentation'; -import { SpreadSheet } from '../../icons/SpreadSheet'; +import { Audio } from '../../icons/filetype-audio-xl'; +import { Code } from '../../icons/filetype-code-xl'; +import { DOC } from '../../icons/filetype-text-xl'; +import { OtherFileIcon } from '../../icons/filetype-other-xl'; +import { PDF } from '../../icons/filetype-pdf-xl'; +import { Presentation } from '../../icons/filetype-presentation-xl'; +import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl'; import type { IconProps } from '../../icons/utils/base'; -import { Video } from '../../icons/Video'; -import { ZIP } from '../../icons/ZIP'; +import { Video } from '../../icons/filetype-video-xl'; +import { ZIP } from '../../icons/filetype-compression-xl'; // https://www.iana.org/assignments/media-types/media-types.xhtml#audio const audioFileTypes = [ diff --git a/package/src/components/Attachment/UrlPreview/URLPreview.tsx b/package/src/components/Attachment/UrlPreview/URLPreview.tsx index 20191513ce..fc7fd729be 100644 --- a/package/src/components/Attachment/UrlPreview/URLPreview.tsx +++ b/package/src/components/Attachment/UrlPreview/URLPreview.tsx @@ -24,7 +24,7 @@ import { useMessagesContext, } from '../../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Link } from '../../../icons/Link'; +import { Link } from '../../../icons/link'; import { primitives } from '../../../theme'; import { FileTypes } from '../../../types/types'; import { makeImageCompatibleUrl } from '../../../utils/utils'; diff --git a/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx b/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx index e94e848c2f..ed84992704 100644 --- a/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx +++ b/package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx @@ -24,7 +24,7 @@ import { useMessagesContext, } from '../../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Link } from '../../../icons/Link'; +import { Link } from '../../../icons/link'; import { primitives } from '../../../theme'; import { FileTypes } from '../../../types/types'; import { makeImageCompatibleUrl } from '../../../utils/utils'; diff --git a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx index e546d40409..bd4971bd5f 100644 --- a/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx +++ b/package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx @@ -13,7 +13,7 @@ import { useMessageInputContext } from '../../../../contexts/messageInputContext import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { useViewport } from '../../../../hooks/useViewport'; -import { Plus } from '../../../../icons/Plus'; +import { Plus } from '../../../../icons/plus'; import { NativeHandlers } from '../../../../native'; import { primitives } from '../../../../theme'; import type { File } from '../../../../types/types'; diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx index 1102ce917a..34d6f263a6 100644 --- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx +++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx @@ -5,8 +5,8 @@ import { CommandVariants } from 'stream-chat'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { Flag, GiphyIcon, Mute, Sound, UserAdd, UserDelete } from '../../icons'; -import { Imgur } from '../../icons/Imgur'; -import { Lightning } from '../../icons/Lightning'; +import { Imgur } from '../../icons/imgur'; +import { Lightning } from '../../icons/bolt'; export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => { const { diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx index ce3a9fac2a..7c117f325b 100644 --- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx +++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx @@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Smile } from '../../icons/Smile'; +import { Smile } from '../../icons/emoji'; import { primitives } from '../../theme'; export type AutoCompleteSuggestionHeaderProps = { diff --git a/package/src/components/ChannelList/hooks/useChannelActionItems.tsx b/package/src/components/ChannelList/hooks/useChannelActionItems.tsx index 15a7613eac..d2fe6342cd 100644 --- a/package/src/components/ChannelList/hooks/useChannelActionItems.tsx +++ b/package/src/components/ChannelList/hooks/useChannelActionItems.tsx @@ -13,7 +13,7 @@ import { useIsDirectChat } from './useIsDirectChat'; import { useTheme, useTranslationContext } from '../../../contexts'; import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext'; import { Archive, IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons'; -import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft'; +import { ArrowBoxLeft } from '../../../icons/leave'; export type ChannelActionHandler = () => Promise | void; diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx index c6a129d240..35d043cfa2 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx @@ -21,7 +21,7 @@ import { useChatContext } from '../../contexts/chatContext/ChatContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../contexts/translationContext/TranslationContext'; -import { PollIcon } from '../../icons/PollIcon'; +import { PollIcon } from '../../icons/poll'; import { primitives } from '../../theme'; import { MessageStatusTypes } from '../../utils/utils'; import { ErrorBadge } from '../ui'; diff --git a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx index 4b1d994e5e..43181f12ff 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx @@ -9,7 +9,7 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; import { useStateStore } from '../../../hooks/useStateStore'; import { Share as ShareIconDefault } from '../../../icons'; -import { ImageGrid } from '../../../icons/ImageGrid'; +import { ImageGrid } from '../../../icons/gallery'; import { isFileSystemAvailable, isShareImageAvailable, NativeHandlers } from '../../../native'; import { ImageGalleryState } from '../../../state-store/image-gallery-state-store'; diff --git a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx index 2dc59715dd..61421c363b 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx @@ -11,7 +11,7 @@ import { useOverlayContext } from '../../../contexts/overlayContext/OverlayConte import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; import { useStateStore } from '../../../hooks/useStateStore'; -import { ChevronLeft } from '../../../icons/ChevronLeft'; +import { ChevronLeft } from '../../../icons/chevron-left'; import { ImageGalleryState } from '../../../state-store/image-gallery-state-store'; import { primitives } from '../../../theme'; diff --git a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx index 36501e6121..9235e23ed4 100644 --- a/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx +++ b/package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx @@ -6,8 +6,8 @@ import type { ImageGalleryVideoControlProps } from './types'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useStateStore } from '../../../hooks/useStateStore'; -import { Pause } from '../../../icons/Pause'; -import { Play } from '../../../icons/Play'; +import { Pause } from '../../../icons/pause-fill'; +import { Play } from '../../../icons/play-fill'; import { IconProps } from '../../../icons/utils/base'; import { VideoPlayerState } from '../../../state-store/video-player'; import { primitives } from '../../../theme'; diff --git a/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx index 646dd10408..99c06bcec7 100644 --- a/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx +++ b/package/src/components/Message/MessageItemView/Headers/MessagePinnedHeader.tsx @@ -8,7 +8,7 @@ import { } from '../../../../contexts/messageContext/MessageContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; -import { Pin } from '../../../../icons/Pin'; +import { Pin } from '../../../../icons/pin'; import { primitives } from '../../../../theme'; import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles'; diff --git a/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx b/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx index 7cb41a6164..658f91c4fe 100644 --- a/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx +++ b/package/src/components/Message/MessageItemView/Headers/MessageSavedForLaterHeader.tsx @@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native'; import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; -import { Bookmark } from '../../../../icons/Bookmark'; +import { Bookmark } from '../../../../icons/save'; import { primitives } from '../../../../theme'; import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles'; diff --git a/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx b/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx index d890cc94cf..15e775e975 100644 --- a/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx +++ b/package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx @@ -13,7 +13,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useThreadContext } from '../../../../contexts/threadContext/ThreadContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { useStableCallback } from '../../../../hooks'; -import { ArrowUpRight } from '../../../../icons/ArrowUpRight'; +import { ArrowUpRight } from '../../../../icons/arrow-up-right'; import { primitives } from '../../../../theme'; import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles'; diff --git a/package/src/components/Message/MessageItemView/MessageDeleted.tsx b/package/src/components/Message/MessageItemView/MessageDeleted.tsx index 4325d9e6c7..be907db63d 100644 --- a/package/src/components/Message/MessageItemView/MessageDeleted.tsx +++ b/package/src/components/Message/MessageItemView/MessageDeleted.tsx @@ -11,7 +11,7 @@ import { } from '../../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; -import { CircleBan } from '../../../icons/CircleBan'; +import { CircleBan } from '../../../icons/no-sign'; import { components, primitives } from '../../../theme'; type MessageDeletedComponentProps = { diff --git a/package/src/components/Message/MessageItemView/MessageStatus.tsx b/package/src/components/Message/MessageItemView/MessageStatus.tsx index 80761846c7..a4a4ea650a 100644 --- a/package/src/components/Message/MessageItemView/MessageStatus.tsx +++ b/package/src/components/Message/MessageItemView/MessageStatus.tsx @@ -7,9 +7,9 @@ import { useMessageContext, } from '../../../contexts/messageContext/MessageContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Check } from '../../../icons/Check'; -import { CheckAll } from '../../../icons/CheckAll'; -import { Time } from '../../../icons/Time'; +import { Check } from '../../../icons/checkmark'; +import { CheckAll } from '../../../icons/checks'; +import { Time } from '../../../icons/clock'; import { primitives } from '../../../theme'; import { MessageStatusTypes } from '../../../utils/utils'; import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles'; diff --git a/package/src/components/MessageInput/StopMessageStreamingButton.tsx b/package/src/components/MessageInput/StopMessageStreamingButton.tsx index 84f698980e..7a7261669d 100644 --- a/package/src/components/MessageInput/StopMessageStreamingButton.tsx +++ b/package/src/components/MessageInput/StopMessageStreamingButton.tsx @@ -1,8 +1,9 @@ -import React from 'react'; -import { Pressable } from 'react-native'; +import React, { useMemo } from 'react'; +import { Pressable, StyleSheet } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { CircleStop } from '../../icons'; +import { Stop } from '../../icons'; +import { primitives } from '../../theme'; export type StopMessageStreamingButtonProps = { /** Function that opens attachment options bottom sheet */ @@ -18,17 +19,36 @@ export const StopMessageStreamingButton = (props: StopMessageStreamingButtonProp messageComposer: { stopMessageStreamingButton, stopMessageStreamingIcon }, }, } = useTheme(); + const styles = useStyles(); return ( - + ); }; +const useStyles = () => { + const { + theme: { semantics }, + } = useTheme(); + + return useMemo( + () => + StyleSheet.create({ + stopStreamingButton: { + borderWidth: 1, + borderRadius: primitives.radiusMax, + borderColor: semantics.accentPrimary, + }, + }), + [semantics], + ); +}; + StopMessageStreamingButton.displayName = 'StopMessageStreamingButton{messageComposer}'; diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx index 58e2245a2c..46f74ff46b 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx @@ -3,7 +3,7 @@ import React, { useMemo } from 'react'; import { Pressable, PressableProps, StyleSheet } from 'react-native'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; -import { NewClose } from '../../../../icons/NewClose'; +import { NewClose } from '../../../../icons/xmark'; import { primitives } from '../../../../theme'; type AttachmentRemoveControlProps = PressableProps; diff --git a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx index fe8c0657f2..ad6772860f 100644 --- a/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx +++ b/package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx @@ -4,8 +4,8 @@ import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-nati import { LocalAttachmentUploadMetadata } from 'stream-chat'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; -import { ExclamationCircle } from '../../../../icons/ExclamationCircle'; -import { Warning } from '../../../../icons/Warning'; +import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill'; +import { Warning } from '../../../../icons/exclamation-triangle-fill'; import { primitives } from '../../../../theme'; import { RetryBadge } from '../../../ui/Badge/RetryBadge'; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx index e7cb32f7b9..e934777bfb 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx @@ -14,11 +14,11 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { useStateStore } from '../../../../hooks/useStateStore'; -import { ChevronLeft } from '../../../../icons/ChevronLeft'; -import { Delete } from '../../../../icons/Delete'; -import { Mic } from '../../../../icons/Mic'; -import { Stop } from '../../../../icons/Stop'; -import { Tick } from '../../../../icons/Tick'; +import { ChevronLeft } from '../../../../icons/chevron-left'; +import { Delete } from '../../../../icons/delete'; +import { Mic } from '../../../../icons/voice'; +import { Stop } from '../../../../icons/stop-fill'; +import { Tick } from '../../../../icons/checkmark'; import { IconProps } from '../../../../icons/utils/base'; import { NativeHandlers } from '../../../../native'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx index 576edb84f2..d646fa133c 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx @@ -19,7 +19,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { useStableCallback } from '../../../../hooks'; import { useStateStore } from '../../../../hooks/useStateStore'; -import { Mic } from '../../../../icons/Mic'; +import { Mic } from '../../../../icons/voice'; import { NativeHandlers } from '../../../../native'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx index d6322ac8ce..1ef8c1bf76 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx @@ -9,7 +9,7 @@ import { } from '../../../../contexts/messageInputContext/MessageInputContext'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useStateStore } from '../../../../hooks/useStateStore'; -import { Mic } from '../../../../icons/Mic'; +import { Mic } from '../../../../icons/voice'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx index f0c9609027..72dbb9812f 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx @@ -4,9 +4,9 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; import Animated, { LinearTransition } from 'react-native-reanimated'; import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; -import { ChevronTop } from '../../../../icons/ChevronTop'; -import { Lock } from '../../../../icons/Lock'; -import { Unlock } from '../../../../icons/Unlock'; +import { ChevronTop } from '../../../../icons/chevron-down'; +import { Lock } from '../../../../icons/lock'; +import { Unlock } from '../../../../icons/unlock'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx index c048703b11..ae0fc18fb6 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx @@ -9,8 +9,8 @@ import { useStableCallback } from '../../../../hooks'; import { useAudioPlayer } from '../../../../hooks/useAudioPlayer'; import { useStateStore } from '../../../../hooks/useStateStore'; -import { Pause } from '../../../../icons/Pause'; -import { Play } from '../../../../icons/Play'; +import { Pause } from '../../../../icons/pause-fill'; +import { Play } from '../../../../icons/play-fill'; import { AudioPlayerState } from '../../../../state-store/audio-player'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx b/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx index 3f22f62d96..1466b2db6a 100644 --- a/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx +++ b/package/src/components/MessageInput/components/InputButtons/AttachButton.tsx @@ -10,7 +10,7 @@ import { useMessageInputContext, } from '../../../../contexts/messageInputContext/MessageInputContext'; import { useStableCallback } from '../../../../hooks'; -import { Plus } from '../../../../icons/Plus'; +import { Plus } from '../../../../icons/plus'; import { Button } from '../../../ui/'; type AttachButtonPropsWithContext = Pick & diff --git a/package/src/components/MessageInput/components/LinkPreviewList.tsx b/package/src/components/MessageInput/components/LinkPreviewList.tsx index cf526745fb..9b379bbdc1 100644 --- a/package/src/components/MessageInput/components/LinkPreviewList.tsx +++ b/package/src/components/MessageInput/components/LinkPreviewList.tsx @@ -10,7 +10,7 @@ import { LinkPreviewsManager } from 'stream-chat'; import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveControl'; import { useChatContext, useMessageComposer, useTheme } from '../../../contexts'; -import { Link } from '../../../icons/Link'; +import { Link } from '../../../icons/link'; import { components, primitives } from '../../../theme'; import { useLinkPreviews } from '../hooks/useLinkPreviews'; diff --git a/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx b/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx index 4fbd16500a..44a0d4be90 100644 --- a/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx +++ b/package/src/components/MessageInput/components/OutputButtons/EditButton.tsx @@ -4,7 +4,7 @@ import { MessageInputContextValue, useMessageInputContext, } from '../../../../contexts/messageInputContext/MessageInputContext'; -import { Tick } from '../../../../icons/Tick'; +import { Tick } from '../../../../icons/checkmark'; import { Button } from '../../../ui'; export type EditButtonProps = Partial> & { diff --git a/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx b/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx index 4981413b67..38a1bc8403 100644 --- a/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx +++ b/package/src/components/MessageInput/components/OutputButtons/SendButton.tsx @@ -4,7 +4,7 @@ import { MessageInputContextValue, useMessageInputContext, } from '../../../../contexts/messageInputContext/MessageInputContext'; -import { SendRight } from '../../../../icons/SendRight'; +import { SendRight } from '../../../../icons/send'; import { Button } from '../../../ui'; export type SendButtonProps = Partial> & { diff --git a/package/src/components/MessageInput/components/OutputButtons/index.tsx b/package/src/components/MessageInput/components/OutputButtons/index.tsx index e3b6b231ed..37b2cf9845 100644 --- a/package/src/components/MessageInput/components/OutputButtons/index.tsx +++ b/package/src/components/MessageInput/components/OutputButtons/index.tsx @@ -90,7 +90,7 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) = diff --git a/package/src/components/MessageList/ScrollToBottomButton.tsx b/package/src/components/MessageList/ScrollToBottomButton.tsx index d60ba57196..284f857842 100644 --- a/package/src/components/MessageList/ScrollToBottomButton.tsx +++ b/package/src/components/MessageList/ScrollToBottomButton.tsx @@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'; import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Down } from '../../icons/Down'; +import { Down } from '../../icons/arrow-up'; import { primitives } from '../../theme'; import { BadgeNotification } from '../ui'; import { Button } from '../ui/Button'; diff --git a/package/src/components/MessageList/UnreadMessagesNotification.tsx b/package/src/components/MessageList/UnreadMessagesNotification.tsx index b64fc3f95d..118334e785 100644 --- a/package/src/components/MessageList/UnreadMessagesNotification.tsx +++ b/package/src/components/MessageList/UnreadMessagesNotification.tsx @@ -8,8 +8,8 @@ import { import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../contexts/translationContext/TranslationContext'; import { useStateStore } from '../../hooks/useStateStore'; -import { ArrowUp } from '../../icons/ArrowUp'; -import { NewClose } from '../../icons/NewClose'; +import { ArrowUp } from '../../icons/arrow-up'; +import { NewClose } from '../../icons/xmark'; import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state'; import { primitives } from '../../theme'; import { Button } from '../ui'; diff --git a/package/src/components/MessageMenu/MessageReactionPicker.tsx b/package/src/components/MessageMenu/MessageReactionPicker.tsx index 332258edf6..3b9905e42e 100644 --- a/package/src/components/MessageMenu/MessageReactionPicker.tsx +++ b/package/src/components/MessageMenu/MessageReactionPicker.tsx @@ -15,7 +15,7 @@ import { import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useStableCallback } from '../../hooks'; -import { Plus } from '../../icons/Plus'; +import { Plus } from '../../icons/plus'; import { NativeHandlers } from '../../native'; import { scheduleActionOnClose } from '../../state-store'; diff --git a/package/src/components/MessageMenu/MessageUserReactions.tsx b/package/src/components/MessageMenu/MessageUserReactions.tsx index fb94ef07b5..f3f07625f6 100644 --- a/package/src/components/MessageMenu/MessageUserReactions.tsx +++ b/package/src/components/MessageMenu/MessageUserReactions.tsx @@ -23,7 +23,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../contexts/translationContext/TranslationContext'; import { useStableCallback } from '../../hooks'; import { IconProps } from '../../icons'; -import { MoreEmojis } from '../../icons/MoreEmojis'; +import { MoreEmojis } from '../../icons/emoji-add-1'; import { primitives } from '../../theme'; import { Reaction } from '../../types/types'; import { ReactionData } from '../../utils/utils'; diff --git a/package/src/components/Poll/components/CreatePollHeader.tsx b/package/src/components/Poll/components/CreatePollHeader.tsx index a3da1c2dc4..36d334ee2a 100644 --- a/package/src/components/Poll/components/CreatePollHeader.tsx +++ b/package/src/components/Poll/components/CreatePollHeader.tsx @@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; import { Check, IconProps } from '../../../icons'; -import { Cross } from '../../../icons/Cross'; +import { Cross } from '../../../icons/xmark-1'; import { primitives } from '../../../theme'; import { Button } from '../../ui'; import { useCanCreatePoll } from '../hooks/useCanCreatePoll'; diff --git a/package/src/components/Poll/components/CreatePollOptions.tsx b/package/src/components/Poll/components/CreatePollOptions.tsx index f1ce64e4b4..34a590077e 100644 --- a/package/src/components/Poll/components/CreatePollOptions.tsx +++ b/package/src/components/Poll/components/CreatePollOptions.tsx @@ -19,9 +19,9 @@ import { PollComposerOption, PollComposerState } from 'stream-chat'; import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts'; import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer'; import { useStateStore } from '../../../hooks/useStateStore'; -import { CircleMinus } from '../../../icons/CircleMinus'; -import { DotGrid } from '../../../icons/DotGrid'; -import { InfoTooltip } from '../../../icons/InfoTooltip'; +import { CircleMinus } from '../../../icons/minus-circle'; +import { DotGrid } from '../../../icons/reorder'; +import { InfoTooltip } from '../../../icons/info'; import { primitives } from '../../../theme'; export type CurrentOptionPositionsCache = { diff --git a/package/src/components/Poll/components/PollModalHeader.tsx b/package/src/components/Poll/components/PollModalHeader.tsx index 3b699f47d7..b1470a06ac 100644 --- a/package/src/components/Poll/components/PollModalHeader.tsx +++ b/package/src/components/Poll/components/PollModalHeader.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts'; -import { Cross } from '../../../icons/Cross'; +import { Cross } from '../../../icons/xmark-1'; import { primitives } from '../../../theme'; import { Button } from '../../ui'; diff --git a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx index fe3899a644..0db12ed409 100644 --- a/package/src/components/ThreadList/ThreadListUnreadBanner.tsx +++ b/package/src/components/ThreadList/ThreadListUnreadBanner.tsx @@ -6,7 +6,7 @@ import { ThreadManagerState } from 'stream-chat'; import { useChatContext, useTheme, useTranslationContext } from '../../contexts'; import { useStateStore } from '../../hooks'; import { Loading, Reload } from '../../icons'; -import { ExclamationCircle } from '../../icons/ExclamationCircle'; +import { ExclamationCircle } from '../../icons/exclamation-circle-fill'; import { primitives } from '../../theme'; const selector = (nextValue: ThreadManagerState) => diff --git a/package/src/components/UIComponents/Spinner.tsx b/package/src/components/UIComponents/Spinner.tsx index c585ffea32..51546e8cc0 100644 --- a/package/src/components/UIComponents/Spinner.tsx +++ b/package/src/components/UIComponents/Spinner.tsx @@ -9,7 +9,7 @@ import Animated, { } from 'react-native-reanimated'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Loading } from '../../icons/Loading'; +import { Loading } from '../../icons/loading'; export type SpinnerProps = { height?: number; diff --git a/package/src/components/ui/Avatar/AvatarGroup.tsx b/package/src/components/ui/Avatar/AvatarGroup.tsx index 99ab1e9770..4c3f00109d 100644 --- a/package/src/components/ui/Avatar/AvatarGroup.tsx +++ b/package/src/components/ui/Avatar/AvatarGroup.tsx @@ -10,7 +10,7 @@ import { iconSizes } from './constants'; import { UserAvatar, UserAvatarProps } from './UserAvatar'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { PeopleIcon } from '../../../icons/PeopleIcon'; +import { PeopleIcon } from '../../../icons/users'; import { primitives } from '../../../theme'; import { BadgeCount, BadgeCountProps, OnlineIndicator, OnlineIndicatorProps } from '../Badge'; diff --git a/package/src/components/ui/Avatar/UserAvatar.tsx b/package/src/components/ui/Avatar/UserAvatar.tsx index 2c0f60de77..c433395f4d 100644 --- a/package/src/components/ui/Avatar/UserAvatar.tsx +++ b/package/src/components/ui/Avatar/UserAvatar.tsx @@ -8,7 +8,7 @@ import { Avatar, AvatarProps } from './Avatar'; import { fontSizes, iconSizes, indicatorSizes, numberOfInitials } from './constants'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { PeopleIcon } from '../../../icons/PeopleIcon'; +import { PeopleIcon } from '../../../icons/users'; import { getInitialsFromName, hashStringToNumber } from '../../../utils/utils'; import { OnlineIndicator } from '../Badge'; diff --git a/package/src/components/ui/Badge/ErrorBadge.tsx b/package/src/components/ui/Badge/ErrorBadge.tsx index 13bc860e22..02de2a4fa0 100644 --- a/package/src/components/ui/Badge/ErrorBadge.tsx +++ b/package/src/components/ui/Badge/ErrorBadge.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Exclamation } from '../../../icons/Exclamation'; +import { Exclamation } from '../../../icons/exclamation-mark-fill'; import { primitives } from '../../../theme'; const sizes = { diff --git a/package/src/components/ui/Badge/GiphyBadge.tsx b/package/src/components/ui/Badge/GiphyBadge.tsx index 2e38eebc12..7cca100bd2 100644 --- a/package/src/components/ui/Badge/GiphyBadge.tsx +++ b/package/src/components/ui/Badge/GiphyBadge.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Giphy } from '../../../icons/Giphy'; +import { Giphy } from '../../../icons/giphy'; import { primitives } from '../../../theme'; export const GiphyBadge = () => { diff --git a/package/src/components/ui/Badge/ImgurBadge.tsx b/package/src/components/ui/Badge/ImgurBadge.tsx index 124de4763d..b78d1e7aba 100644 --- a/package/src/components/ui/Badge/ImgurBadge.tsx +++ b/package/src/components/ui/Badge/ImgurBadge.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { Imgur } from '../../../icons/Imgur'; +import { Imgur } from '../../../icons/imgur'; import { primitives } from '../../../theme'; export const ImgurBadge = () => { diff --git a/package/src/components/ui/GiphyChip.tsx b/package/src/components/ui/GiphyChip.tsx index 14e0c79726..b986d66042 100644 --- a/package/src/components/ui/GiphyChip.tsx +++ b/package/src/components/ui/GiphyChip.tsx @@ -6,8 +6,8 @@ import { TextComposerState } from 'stream-chat'; import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useStateStore } from '../../hooks/useStateStore'; -import { Cross } from '../../icons/Cross'; -import { Lightning } from '../../icons/Lightning'; +import { Cross } from '../../icons/xmark-1'; +import { Lightning } from '../../icons/bolt'; import { primitives } from '../../theme'; const textComposerStateSelector = (state: TextComposerState) => ({ diff --git a/package/src/components/ui/Input/Input.tsx b/package/src/components/ui/Input/Input.tsx index e63dad68d2..5ce67a2127 100644 --- a/package/src/components/ui/Input/Input.tsx +++ b/package/src/components/ui/Input/Input.tsx @@ -13,8 +13,8 @@ import { } from 'react-native'; import { useTheme } from '../../../contexts'; -import { Checkmark } from '../../../icons/Checkmark'; -import { InfoTooltip } from '../../../icons/InfoTooltip'; +import { Checkmark } from '../../../icons/checkmark-1'; +import { InfoTooltip } from '../../../icons/info'; import { primitives } from '../../../theme'; import { IconRenderer } from '../Button'; diff --git a/package/src/components/ui/VideoPlayIndicator.tsx b/package/src/components/ui/VideoPlayIndicator.tsx index 0c30dd0f67..da8258d598 100644 --- a/package/src/components/ui/VideoPlayIndicator.tsx +++ b/package/src/components/ui/VideoPlayIndicator.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, View } from 'react-native'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; -import { Play } from '../../icons/Play'; +import { Play } from '../../icons/play-fill'; import { primitives } from '../../theme'; const sizes = { diff --git a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx index 88d40b5375..6cf087373d 100644 --- a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx +++ b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx @@ -2,14 +2,14 @@ import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat'; import { useGroupedAttachments } from '../../hooks/messagePreview/useGroupedAttachments'; -import { CircleBan } from '../../icons/CircleBan'; -import { File } from '../../icons/File'; -import { Link } from '../../icons/Link'; -import { MapPin } from '../../icons/MapPin'; -import { Mic } from '../../icons/Mic'; -import { PhotoIcon } from '../../icons/PhotoIcon'; -import { PollIcon } from '../../icons/PollIcon'; -import { VideoIcon } from '../../icons/VideoIcon'; +import { CircleBan } from '../../icons/no-sign'; +import { File } from '../../icons/file'; +import { Link } from '../../icons/link'; +import { MapPin } from '../../icons/location'; +import { Mic } from '../../icons/voice'; +import { PhotoIcon } from '../../icons/image'; +import { PollIcon } from '../../icons/poll'; +import { VideoIcon } from '../../icons/video'; import { FileTypes } from '../../types/types'; export const useMessagePreviewIcon = ({ diff --git a/package/src/icons/ArrowShareLeft.tsx b/package/src/icons/ArrowShareLeft.tsx deleted file mode 100644 index 350c147b3f..0000000000 --- a/package/src/icons/ArrowShareLeft.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const ArrowShareLeft = ({ - fill, - height, - pathFill, - size, - stroke, - width, - ...rest -}: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/Audio.tsx b/package/src/icons/Audio.tsx index cc85141135..0b10b4793c 100644 --- a/package/src/icons/Audio.tsx +++ b/package/src/icons/Audio.tsx @@ -4,23 +4,18 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Audio = ({ height, width, ...rest }: IconProps) => ( - - - - - - -); +export const Sound = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/BlockUser.tsx b/package/src/icons/BlockUser.tsx deleted file mode 100644 index ee2e7de1ce..0000000000 --- a/package/src/icons/BlockUser.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const BlockUser = (props: IconProps) => { - return ( - - - - ); -}; diff --git a/package/src/icons/Checkmark.tsx b/package/src/icons/Checkmark.tsx index 1a3cb5dc26..a2c2ee546b 100644 --- a/package/src/icons/Checkmark.tsx +++ b/package/src/icons/Checkmark.tsx @@ -1,27 +1,19 @@ import React from 'react'; -import { Path, Svg } from 'react-native-svg'; +import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Checkmark = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - ( + + - - - ); -}; + /> + +); + +export const Tick = (props: IconProps) => ; diff --git a/package/src/icons/CircleStop.tsx b/package/src/icons/CircleStop.tsx deleted file mode 100644 index fe1ba87b1a..0000000000 --- a/package/src/icons/CircleStop.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -type Props = IconProps & { - size: number; -}; - -export const CircleStop = ({ fill, pathFill, size, stroke, ...rest }: Props) => { - const color = fill ?? pathFill ?? stroke ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/Down.tsx b/package/src/icons/Down.tsx deleted file mode 100644 index cb5d50f38c..0000000000 --- a/package/src/icons/Down.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Down = ({ height, size, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/File.tsx b/package/src/icons/File.tsx index 83cda8a5d0..554d8cb51d 100644 --- a/package/src/icons/File.tsx +++ b/package/src/icons/File.tsx @@ -26,3 +26,5 @@ export const File = ({ fill, height, pathFill, size, stroke, width, ...rest }: I ); }; + +export const FilePickerIcon = (props: IconProps) => ; diff --git a/package/src/icons/FilePickerIcon.tsx b/package/src/icons/FilePickerIcon.tsx deleted file mode 100644 index 7dd8de1f1c..0000000000 --- a/package/src/icons/FilePickerIcon.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const FilePickerIcon = ({ - fill, - height, - pathFill, - size, - stroke, - width, - ...rest -}: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/Flag.tsx b/package/src/icons/Flag.tsx index c6458719d3..2a6b3fdb0e 100644 --- a/package/src/icons/Flag.tsx +++ b/package/src/icons/Flag.tsx @@ -15,3 +15,5 @@ export const Flag = ({ height, size, width, ...props }: IconProps) => ( /> ); + +export const MessageFlag = (props: IconProps) => ; diff --git a/package/src/icons/Giphy.tsx b/package/src/icons/Giphy.tsx index 8533e72293..d791eb1cb1 100644 --- a/package/src/icons/Giphy.tsx +++ b/package/src/icons/Giphy.tsx @@ -30,3 +30,5 @@ export const Giphy = ({ height, width, ...rest }: IconProps) => ( /> ); + +export const GiphyIcon = (props: IconProps) => ; diff --git a/package/src/icons/GiphyIcon.tsx b/package/src/icons/GiphyIcon.tsx deleted file mode 100644 index b0b3ea222c..0000000000 --- a/package/src/icons/GiphyIcon.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; - -import Svg, { Path, Rect } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const GiphyIcon = ({ height, size, width, ...props }: IconProps) => ( - - - - - - - - - - - -); diff --git a/package/src/icons/MessageFlag.tsx b/package/src/icons/MessageFlag.tsx deleted file mode 100644 index 921fedd53f..0000000000 --- a/package/src/icons/MessageFlag.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const MessageFlag = ({ - fill, - height, - pathFill, - size, - stroke, - width, - ...rest -}: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/PhotoIcon.tsx b/package/src/icons/PhotoIcon.tsx deleted file mode 100644 index 6c7213b011..0000000000 --- a/package/src/icons/PhotoIcon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const PhotoIcon = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/PollIcon.tsx b/package/src/icons/PollIcon.tsx deleted file mode 100644 index 1bc32fec3e..0000000000 --- a/package/src/icons/PollIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const PollIcon = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Resend.tsx b/package/src/icons/Retry.tsx similarity index 100% rename from package/src/icons/Resend.tsx rename to package/src/icons/Retry.tsx diff --git a/package/src/icons/Sound.tsx b/package/src/icons/Sound.tsx deleted file mode 100644 index 0b10b4793c..0000000000 --- a/package/src/icons/Sound.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import Svg, { Path } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Sound = ({ fill, height, pathFill, size, stroke, width, ...props }: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/Tick.tsx b/package/src/icons/Tick.tsx deleted file mode 100644 index 39f81ad283..0000000000 --- a/package/src/icons/Tick.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const Tick = ({ height, width, ...rest }: IconProps) => ( - - - -); diff --git a/package/src/icons/Video.tsx b/package/src/icons/Video.tsx index a8c69e028e..819d4601dd 100644 --- a/package/src/icons/Video.tsx +++ b/package/src/icons/Video.tsx @@ -1,33 +1,27 @@ import React from 'react'; -import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'; +import { Path, Svg } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Video = ({ height, width, ...rest }: IconProps) => ( - - - +export const VideoIcon = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + - - - - - - - - - -); + + ); +}; diff --git a/package/src/icons/VideoIcon.tsx b/package/src/icons/VideoIcon.tsx deleted file mode 100644 index 819d4601dd..0000000000 --- a/package/src/icons/VideoIcon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import { Path, Svg } from 'react-native-svg'; - -import { IconProps } from './utils/base'; - -export const VideoIcon = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { - const color = stroke ?? pathFill ?? fill ?? 'black'; - - return ( - - - - ); -}; diff --git a/package/src/icons/ArrowUpRight.tsx b/package/src/icons/arrow-up-right.tsx similarity index 100% rename from package/src/icons/ArrowUpRight.tsx rename to package/src/icons/arrow-up-right.tsx diff --git a/package/src/icons/ArrowUp.tsx b/package/src/icons/arrow-up.tsx similarity index 52% rename from package/src/icons/ArrowUp.tsx rename to package/src/icons/arrow-up.tsx index b67a779b50..2ea38d51a9 100644 --- a/package/src/icons/ArrowUp.tsx +++ b/package/src/icons/arrow-up.tsx @@ -14,3 +14,22 @@ export const ArrowUp = ({ height, size, width, ...rest }: IconProps) => ( /> ); + +export const Down = ({ height, size, width, ...rest }: IconProps) => ( + + + +); diff --git a/package/src/icons/Lightning.tsx b/package/src/icons/bolt.tsx similarity index 100% rename from package/src/icons/Lightning.tsx rename to package/src/icons/bolt.tsx diff --git a/package/src/icons/Check.tsx b/package/src/icons/checkmark-1.tsx similarity index 83% rename from package/src/icons/Check.tsx rename to package/src/icons/checkmark-1.tsx index 05283fb6f5..dd49d24684 100644 --- a/package/src/icons/Check.tsx +++ b/package/src/icons/checkmark-1.tsx @@ -4,7 +4,7 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Check = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { +export const Checkmark = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { const color = stroke ?? pathFill ?? fill ?? 'black'; return ( diff --git a/package/src/icons/CheckAll.tsx b/package/src/icons/checks.tsx similarity index 100% rename from package/src/icons/CheckAll.tsx rename to package/src/icons/checks.tsx diff --git a/package/src/icons/ChevronTop.tsx b/package/src/icons/chevron-down.tsx similarity index 100% rename from package/src/icons/ChevronTop.tsx rename to package/src/icons/chevron-down.tsx diff --git a/package/src/icons/ChevronLeft.tsx b/package/src/icons/chevron-left.tsx similarity index 100% rename from package/src/icons/ChevronLeft.tsx rename to package/src/icons/chevron-left.tsx diff --git a/package/src/icons/Time.tsx b/package/src/icons/clock.tsx similarity index 100% rename from package/src/icons/Time.tsx rename to package/src/icons/clock.tsx diff --git a/package/src/icons/CommandsIcon.tsx b/package/src/icons/command.tsx similarity index 100% rename from package/src/icons/CommandsIcon.tsx rename to package/src/icons/command.tsx diff --git a/package/src/icons/MoreEmojis.tsx b/package/src/icons/emoji-add-1.tsx similarity index 100% rename from package/src/icons/MoreEmojis.tsx rename to package/src/icons/emoji-add-1.tsx diff --git a/package/src/icons/Smile.tsx b/package/src/icons/emoji.tsx similarity index 100% rename from package/src/icons/Smile.tsx rename to package/src/icons/emoji.tsx diff --git a/package/src/icons/ExclamationCircle.tsx b/package/src/icons/exclamation-circle-fill.tsx similarity index 100% rename from package/src/icons/ExclamationCircle.tsx rename to package/src/icons/exclamation-circle-fill.tsx diff --git a/package/src/icons/Exclamation.tsx b/package/src/icons/exclamation-mark-fill.tsx similarity index 100% rename from package/src/icons/Exclamation.tsx rename to package/src/icons/exclamation-mark-fill.tsx diff --git a/package/src/icons/Warning.tsx b/package/src/icons/exclamation-triangle-fill.tsx similarity index 100% rename from package/src/icons/Warning.tsx rename to package/src/icons/exclamation-triangle-fill.tsx diff --git a/package/src/icons/filetype-audio-xl.tsx b/package/src/icons/filetype-audio-xl.tsx new file mode 100644 index 0000000000..cc85141135 --- /dev/null +++ b/package/src/icons/filetype-audio-xl.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import Svg, { Path } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Audio = ({ height, width, ...rest }: IconProps) => ( + + + + + + +); diff --git a/package/src/icons/Code.tsx b/package/src/icons/filetype-code-xl.tsx similarity index 100% rename from package/src/icons/Code.tsx rename to package/src/icons/filetype-code-xl.tsx diff --git a/package/src/icons/ZIP.tsx b/package/src/icons/filetype-compression-xl.tsx similarity index 100% rename from package/src/icons/ZIP.tsx rename to package/src/icons/filetype-compression-xl.tsx diff --git a/package/src/icons/OtherFileIcon.tsx b/package/src/icons/filetype-other-xl.tsx similarity index 100% rename from package/src/icons/OtherFileIcon.tsx rename to package/src/icons/filetype-other-xl.tsx diff --git a/package/src/icons/PDF.tsx b/package/src/icons/filetype-pdf-xl.tsx similarity index 100% rename from package/src/icons/PDF.tsx rename to package/src/icons/filetype-pdf-xl.tsx diff --git a/package/src/icons/Presentation.tsx b/package/src/icons/filetype-presentation-xl.tsx similarity index 100% rename from package/src/icons/Presentation.tsx rename to package/src/icons/filetype-presentation-xl.tsx diff --git a/package/src/icons/SpreadSheet.tsx b/package/src/icons/filetype-spreadsheet-xl.tsx similarity index 100% rename from package/src/icons/SpreadSheet.tsx rename to package/src/icons/filetype-spreadsheet-xl.tsx diff --git a/package/src/icons/DOC.tsx b/package/src/icons/filetype-text-xl.tsx similarity index 100% rename from package/src/icons/DOC.tsx rename to package/src/icons/filetype-text-xl.tsx diff --git a/package/src/icons/filetype-video-xl.tsx b/package/src/icons/filetype-video-xl.tsx new file mode 100644 index 0000000000..a8c69e028e --- /dev/null +++ b/package/src/icons/filetype-video-xl.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'; + +import { IconProps } from './utils/base'; + +export const Video = ({ height, width, ...rest }: IconProps) => ( + + + + + + + + + + + + + +); diff --git a/package/src/icons/ImageGrid.tsx b/package/src/icons/gallery.tsx similarity index 100% rename from package/src/icons/ImageGrid.tsx rename to package/src/icons/gallery.tsx diff --git a/package/src/icons/Picture.tsx b/package/src/icons/image.tsx similarity index 94% rename from package/src/icons/Picture.tsx rename to package/src/icons/image.tsx index 9cc59fbdd5..e9d3821d84 100644 --- a/package/src/icons/Picture.tsx +++ b/package/src/icons/image.tsx @@ -20,3 +20,5 @@ export const Picture = (props: IconProps) => { ); }; + +export const PhotoIcon = (props: IconProps) => ; diff --git a/package/src/icons/index.ts b/package/src/icons/index.ts index 8c6f31e589..8bf4e6db69 100644 --- a/package/src/icons/index.ts +++ b/package/src/icons/index.ts @@ -1,54 +1,50 @@ export * from './utils/base'; -export * from './Audio'; -export * from './Archive'; -export * from './BlockUser'; -export * from './Camera'; -export * from './Check'; -export * from './CheckAll'; -export * from './CircleStop'; -export * from './CircleBan'; -export * from './Copy'; -export * from './CurveLineLeftUp'; -export * from './Delete'; -export * from './DOC'; -export * from './Edit'; -export * from './Flag'; -export * from './GiphyIcon'; -export * from './Loading'; -export * from './MessageFlag'; -export * from './Mute'; -export * from './Pause'; -export * from './PDF'; -export * from './Picture'; -export * from './Pin'; -export * from './Play'; -export * from './Plus'; -export * from './Minus'; -export * from './Resend'; -export * from './Search'; -export * from './SendRight'; -export * from './Share'; -export * from './Smile'; -export * from './Sound'; -export * from './Stop'; -export * from './ThreadReply'; -export * from './Time'; +export * from './filetype-audio-xl'; +export * from './archive'; +export * from './no-sign'; +export * from './camera'; +export { Check } from './checkmark'; +export * from './checks'; +export * from './copy'; +export * from './reply'; +export * from './delete'; +export * from './filetype-text-xl'; +export * from './edit'; +export * from './flag'; +export { GiphyIcon } from './giphy'; +export * from './loading'; +export * from './mute'; +export * from './pause-fill'; +export * from './filetype-pdf-xl'; +export { Picture } from './image'; +export * from './pin'; +export * from './play-fill'; +export * from './plus'; +export * from './minus'; +export * from './Retry'; +export * from './search'; +export * from './send'; +export * from './share'; +export * from './emoji'; +export * from './audio'; +export * from './stop-fill'; +export * from './thread'; +export * from './clock'; export * from './Unknown'; -export * from './Unpin'; -export * from './Recorder'; -export * from './UserAdd'; -export * from './UserDelete'; -export * from './Video'; -export * from './ZIP'; -export * from './MessageBubbleEmpty'; -export * from './MenuPointHorizontal'; -export * from './Reload'; -export * from './PollThumbnail'; -export * from './UnreadIndicator'; -export * from './FilePickerIcon'; -export * from './CommandsIcon'; -export * from './ArrowShareLeft'; -export * from './Bell'; -export * from './Bookmark'; -export * from './Checkmark'; +export * from './unpin'; +export * from './video-fill'; +export * from './user-add'; +export * from './user-remove'; +export * from './filetype-video-xl'; +export * from './filetype-compression-xl'; +export * from './message-bubble'; +export * from './more'; +export * from './refresh'; +export { PollThumbnail } from './poll'; +export * from './notification'; +export { FilePickerIcon } from './file'; +export * from './command'; +export * from './bell'; +export * from './save'; +export * from './checkmark-1'; diff --git a/package/src/icons/InfoTooltip.tsx b/package/src/icons/info.tsx similarity index 100% rename from package/src/icons/InfoTooltip.tsx rename to package/src/icons/info.tsx diff --git a/package/src/icons/ArrowBoxLeft.tsx b/package/src/icons/leave.tsx similarity index 100% rename from package/src/icons/ArrowBoxLeft.tsx rename to package/src/icons/leave.tsx diff --git a/package/src/icons/MapPin.tsx b/package/src/icons/location.tsx similarity index 100% rename from package/src/icons/MapPin.tsx rename to package/src/icons/location.tsx diff --git a/package/src/icons/MessageBubbleEmpty.tsx b/package/src/icons/message-bubble.tsx similarity index 100% rename from package/src/icons/MessageBubbleEmpty.tsx rename to package/src/icons/message-bubble.tsx diff --git a/package/src/icons/CircleMinus.tsx b/package/src/icons/minus-circle.tsx similarity index 100% rename from package/src/icons/CircleMinus.tsx rename to package/src/icons/minus-circle.tsx diff --git a/package/src/icons/MenuPointHorizontal.tsx b/package/src/icons/more.tsx similarity index 100% rename from package/src/icons/MenuPointHorizontal.tsx rename to package/src/icons/more.tsx diff --git a/package/src/icons/CircleBan.tsx b/package/src/icons/no-sign.tsx similarity index 90% rename from package/src/icons/CircleBan.tsx rename to package/src/icons/no-sign.tsx index fe1682959e..2442600ec0 100644 --- a/package/src/icons/CircleBan.tsx +++ b/package/src/icons/no-sign.tsx @@ -24,3 +24,5 @@ export const CircleBan = ({ fill, height, pathFill, size, stroke, width, ...rest ); }; + +export const BlockUser = (props: IconProps) => ; diff --git a/package/src/icons/UnreadIndicator.tsx b/package/src/icons/notification.tsx similarity index 100% rename from package/src/icons/UnreadIndicator.tsx rename to package/src/icons/notification.tsx diff --git a/package/src/icons/Pause.tsx b/package/src/icons/pause-fill.tsx similarity index 100% rename from package/src/icons/Pause.tsx rename to package/src/icons/pause-fill.tsx diff --git a/package/src/icons/Play.tsx b/package/src/icons/play-fill.tsx similarity index 100% rename from package/src/icons/Play.tsx rename to package/src/icons/play-fill.tsx diff --git a/package/src/icons/PollThumbnail.tsx b/package/src/icons/poll.tsx similarity index 89% rename from package/src/icons/PollThumbnail.tsx rename to package/src/icons/poll.tsx index ccf73d9e90..ecf66c08bc 100644 --- a/package/src/icons/PollThumbnail.tsx +++ b/package/src/icons/poll.tsx @@ -27,3 +27,5 @@ export const PollThumbnail = ({ ); }; + +export const PollIcon = (props: IconProps) => ; diff --git a/package/src/icons/Reload.tsx b/package/src/icons/refresh.tsx similarity index 100% rename from package/src/icons/Reload.tsx rename to package/src/icons/refresh.tsx diff --git a/package/src/icons/DotGrid.tsx b/package/src/icons/reorder.tsx similarity index 100% rename from package/src/icons/DotGrid.tsx rename to package/src/icons/reorder.tsx diff --git a/package/src/icons/CurveLineLeftUp.tsx b/package/src/icons/reply.tsx similarity index 88% rename from package/src/icons/CurveLineLeftUp.tsx rename to package/src/icons/reply.tsx index cc6bc13546..21cb2dcb54 100644 --- a/package/src/icons/CurveLineLeftUp.tsx +++ b/package/src/icons/reply.tsx @@ -15,3 +15,5 @@ export const CurveLineLeftUp = (props: IconProps) => ( /> ); + +export const ArrowShareLeft = (props: IconProps) => ; diff --git a/package/src/icons/Bookmark.tsx b/package/src/icons/save.tsx similarity index 100% rename from package/src/icons/Bookmark.tsx rename to package/src/icons/save.tsx diff --git a/package/src/icons/SendRight.tsx b/package/src/icons/send.tsx similarity index 100% rename from package/src/icons/SendRight.tsx rename to package/src/icons/send.tsx diff --git a/package/src/icons/Stop.tsx b/package/src/icons/stop-fill.tsx similarity index 100% rename from package/src/icons/Stop.tsx rename to package/src/icons/stop-fill.tsx diff --git a/package/src/icons/ThreadReply.tsx b/package/src/icons/thread.tsx similarity index 100% rename from package/src/icons/ThreadReply.tsx rename to package/src/icons/thread.tsx diff --git a/package/src/icons/UserAdd.tsx b/package/src/icons/user-add.tsx similarity index 100% rename from package/src/icons/UserAdd.tsx rename to package/src/icons/user-add.tsx diff --git a/package/src/icons/UserDelete.tsx b/package/src/icons/user-remove.tsx similarity index 100% rename from package/src/icons/UserDelete.tsx rename to package/src/icons/user-remove.tsx diff --git a/package/src/icons/PeopleIcon.tsx b/package/src/icons/users.tsx similarity index 100% rename from package/src/icons/PeopleIcon.tsx rename to package/src/icons/users.tsx diff --git a/package/src/icons/Recorder.tsx b/package/src/icons/video-fill.tsx similarity index 100% rename from package/src/icons/Recorder.tsx rename to package/src/icons/video-fill.tsx diff --git a/package/src/icons/Mic.tsx b/package/src/icons/voice.tsx similarity index 100% rename from package/src/icons/Mic.tsx rename to package/src/icons/voice.tsx diff --git a/package/src/icons/Cross.tsx b/package/src/icons/xmark-1.tsx similarity index 100% rename from package/src/icons/Cross.tsx rename to package/src/icons/xmark-1.tsx diff --git a/package/src/icons/NewClose.tsx b/package/src/icons/xmark.tsx similarity index 100% rename from package/src/icons/NewClose.tsx rename to package/src/icons/xmark.tsx diff --git a/package/src/state-store/__tests__/audio-player.test.ts b/package/src/state-store/__tests__/audio-player.test.ts index 4014c645ea..8321a7674f 100644 --- a/package/src/state-store/__tests__/audio-player.test.ts +++ b/package/src/state-store/__tests__/audio-player.test.ts @@ -60,7 +60,7 @@ describe('AudioPlayer', () => { (NativeHandlers as { Sound: unknown }).Sound = undefined; }); - it('initializes native playback through Sound.initializeSound', async () => { + it('initializes native playback through Sound.initializeaudio', async () => { const playerRef = createMockNativePlayerRef(); const initializeSound = jest.fn().mockResolvedValue(playerRef); (NativeHandlers as { Sound: unknown }).Sound = { From 1fe8b60c6cebd8cd17c92a92f7f5e029f03948c7 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 13:20:36 +0200 Subject: [PATCH 22/26] fix: use only one refresh icon --- package/src/components/ui/Badge/RetryBadge.tsx | 4 ++-- package/src/icons/RotateCircle.tsx | 17 ----------------- 2 files changed, 2 insertions(+), 19 deletions(-) delete mode 100644 package/src/icons/RotateCircle.tsx diff --git a/package/src/components/ui/Badge/RetryBadge.tsx b/package/src/components/ui/Badge/RetryBadge.tsx index 2b6876bca3..49e7d228b8 100644 --- a/package/src/components/ui/Badge/RetryBadge.tsx +++ b/package/src/components/ui/Badge/RetryBadge.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; -import { RotateCircle } from '../../../icons/RotateCircle'; +import { Reload } from '../../../icons/refresh'; import { primitives } from '../../../theme'; const sizes = { @@ -50,7 +50,7 @@ export const RetryBadge = (props: RetryBadgeProps) => { const styles = useStyles(); return ( - ( - - - -); From e9364c5cd681788e61a7b54463b8bb4ae693ef44 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 13:28:33 +0200 Subject: [PATCH 23/26] fix: lint issues and failing tests --- .../src/components/Attachment/FileIcon.tsx | 6 ++-- .../AutoCompleteSuggestionCommandIcon.tsx | 2 +- .../__snapshots__/AttachButton.test.js.snap | 30 ++++++------------- .../__snapshots__/SendButton.test.js.snap | 20 ++++--------- .../AudioRecorder/AudioRecorder.tsx | 4 +-- .../Poll/components/CreatePollOptions.tsx | 2 +- .../__snapshots__/Thread.test.js.snap | 10 ++----- package/src/components/ui/GiphyChip.tsx | 2 +- .../messagePreview/useMessagePreviewIcon.tsx | 6 ++-- package/src/icons/Checkmark.tsx | 27 ++++++++++------- package/src/icons/arrow-up.tsx | 8 +---- package/src/icons/checks.tsx | 27 ++++++++++------- package/src/icons/clock.tsx | 27 ++++++++++------- 13 files changed, 78 insertions(+), 93 deletions(-) diff --git a/package/src/components/Attachment/FileIcon.tsx b/package/src/components/Attachment/FileIcon.tsx index f9ebf44d30..8e9157e1d8 100644 --- a/package/src/components/Attachment/FileIcon.tsx +++ b/package/src/components/Attachment/FileIcon.tsx @@ -4,14 +4,14 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { Audio } from '../../icons/filetype-audio-xl'; import { Code } from '../../icons/filetype-code-xl'; -import { DOC } from '../../icons/filetype-text-xl'; +import { ZIP } from '../../icons/filetype-compression-xl'; import { OtherFileIcon } from '../../icons/filetype-other-xl'; import { PDF } from '../../icons/filetype-pdf-xl'; import { Presentation } from '../../icons/filetype-presentation-xl'; import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl'; -import type { IconProps } from '../../icons/utils/base'; +import { DOC } from '../../icons/filetype-text-xl'; import { Video } from '../../icons/filetype-video-xl'; -import { ZIP } from '../../icons/filetype-compression-xl'; +import type { IconProps } from '../../icons/utils/base'; // https://www.iana.org/assignments/media-types/media-types.xhtml#audio const audioFileTypes = [ diff --git a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx index 34d6f263a6..c14a695f1d 100644 --- a/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx +++ b/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx @@ -5,8 +5,8 @@ import { CommandVariants } from 'stream-chat'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { Flag, GiphyIcon, Mute, Sound, UserAdd, UserDelete } from '../../icons'; -import { Imgur } from '../../icons/imgur'; import { Lightning } from '../../icons/bolt'; +import { Imgur } from '../../icons/imgur'; export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => { const { diff --git a/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap b/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap index cf98868e6b..f9aa5b1f33 100644 --- a/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap +++ b/package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap @@ -595,14 +595,10 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli > @@ -1494,14 +1490,10 @@ exports[`AttachButton should render a enabled AttachButton 1`] = ` > @@ -2393,14 +2385,10 @@ exports[`AttachButton should render an disabled AttachButton 1`] = ` > diff --git a/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap b/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap index f9b7ec79f9..690913d5e3 100644 --- a/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap +++ b/package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.js.snap @@ -585,14 +585,10 @@ exports[`SendButton should render a SendButton 1`] = ` > @@ -1474,14 +1470,10 @@ exports[`SendButton should render a disabled SendButton 1`] = ` > diff --git a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx index e934777bfb..129ae321da 100644 --- a/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx +++ b/package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx @@ -14,12 +14,12 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext'; import { useStateStore } from '../../../../hooks/useStateStore'; +import { Tick } from '../../../../icons/checkmark'; import { ChevronLeft } from '../../../../icons/chevron-left'; import { Delete } from '../../../../icons/delete'; -import { Mic } from '../../../../icons/voice'; import { Stop } from '../../../../icons/stop-fill'; -import { Tick } from '../../../../icons/checkmark'; import { IconProps } from '../../../../icons/utils/base'; +import { Mic } from '../../../../icons/voice'; import { NativeHandlers } from '../../../../native'; import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager'; import { primitives } from '../../../../theme'; diff --git a/package/src/components/Poll/components/CreatePollOptions.tsx b/package/src/components/Poll/components/CreatePollOptions.tsx index 34a590077e..c14b3fc19b 100644 --- a/package/src/components/Poll/components/CreatePollOptions.tsx +++ b/package/src/components/Poll/components/CreatePollOptions.tsx @@ -19,9 +19,9 @@ import { PollComposerOption, PollComposerState } from 'stream-chat'; import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts'; import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer'; import { useStateStore } from '../../../hooks/useStateStore'; +import { InfoTooltip } from '../../../icons/info'; import { CircleMinus } from '../../../icons/minus-circle'; import { DotGrid } from '../../../icons/reorder'; -import { InfoTooltip } from '../../../icons/info'; import { primitives } from '../../../theme'; export type CurrentOptionPositionsCache = { diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap index a3a16e7337..8ce02ba2d8 100644 --- a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap +++ b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap @@ -2769,14 +2769,10 @@ exports[`Thread should match thread snapshot 1`] = ` > diff --git a/package/src/components/ui/GiphyChip.tsx b/package/src/components/ui/GiphyChip.tsx index b986d66042..462fe212da 100644 --- a/package/src/components/ui/GiphyChip.tsx +++ b/package/src/components/ui/GiphyChip.tsx @@ -6,8 +6,8 @@ import { TextComposerState } from 'stream-chat'; import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useStateStore } from '../../hooks/useStateStore'; -import { Cross } from '../../icons/xmark-1'; import { Lightning } from '../../icons/bolt'; +import { Cross } from '../../icons/xmark-1'; import { primitives } from '../../theme'; const textComposerStateSelector = (state: TextComposerState) => ({ diff --git a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx index 6cf087373d..3136cc8f07 100644 --- a/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx +++ b/package/src/hooks/messagePreview/useMessagePreviewIcon.tsx @@ -2,14 +2,14 @@ import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat'; import { useGroupedAttachments } from '../../hooks/messagePreview/useGroupedAttachments'; -import { CircleBan } from '../../icons/no-sign'; import { File } from '../../icons/file'; +import { PhotoIcon } from '../../icons/image'; import { Link } from '../../icons/link'; import { MapPin } from '../../icons/location'; -import { Mic } from '../../icons/voice'; -import { PhotoIcon } from '../../icons/image'; +import { CircleBan } from '../../icons/no-sign'; import { PollIcon } from '../../icons/poll'; import { VideoIcon } from '../../icons/video'; +import { Mic } from '../../icons/voice'; import { FileTypes } from '../../types/types'; export const useMessagePreviewIcon = ({ diff --git a/package/src/icons/Checkmark.tsx b/package/src/icons/Checkmark.tsx index a2c2ee546b..d25d5c82ce 100644 --- a/package/src/icons/Checkmark.tsx +++ b/package/src/icons/Checkmark.tsx @@ -4,16 +4,21 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Check = ({ height, size, width, ...rest }: IconProps) => ( - - - -); +export const Check = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; export const Tick = (props: IconProps) => ; diff --git a/package/src/icons/arrow-up.tsx b/package/src/icons/arrow-up.tsx index 2ea38d51a9..dcb9fcdab8 100644 --- a/package/src/icons/arrow-up.tsx +++ b/package/src/icons/arrow-up.tsx @@ -16,13 +16,7 @@ export const ArrowUp = ({ height, size, width, ...rest }: IconProps) => ( ); export const Down = ({ height, size, width, ...rest }: IconProps) => ( - + ( - - - -); +export const CheckAll = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; diff --git a/package/src/icons/clock.tsx b/package/src/icons/clock.tsx index ba4dcbe838..0c6be4f25c 100644 --- a/package/src/icons/clock.tsx +++ b/package/src/icons/clock.tsx @@ -4,14 +4,19 @@ import Svg, { Path } from 'react-native-svg'; import { IconProps } from './utils/base'; -export const Time = ({ height, size, width, ...rest }: IconProps) => ( - - - -); +export const Time = ({ fill, height, pathFill, size, stroke, width, ...rest }: IconProps) => { + const color = stroke ?? pathFill ?? fill ?? 'black'; + + return ( + + + + ); +}; From dd07e2d8c7302504f310f1ad1dcfd2cbe98c18a6 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 13:42:23 +0200 Subject: [PATCH 24/26] fix: trigger later commit --- package/CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/package/CHANGELOG.md b/package/CHANGELOG.md index 5956c9382b..df4c3d2843 100644 --- a/package/CHANGELOG.md +++ b/package/CHANGELOG.md @@ -3,7 +3,6 @@ ## [8.1.0](https://github.com/GetStream/stream-chat-react-native/compare/v8.0.0...v8.1.0) (2025-07-09) - ### Features * add reminders implementation ([#3141](https://github.com/GetStream/stream-chat-react-native/issues/3141)) ([11c3307](https://github.com/GetStream/stream-chat-react-native/commit/11c33075954be074a702ac84a96c83b6e299b9b5)) From 1b8e7a873edfa427a1a7ef5a8a4c1ca6fa173a22 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 13:54:41 +0200 Subject: [PATCH 25/26] fix: properly rename on git --- package/src/icons/{Archive.tsx => archive.tsx} | 0 package/src/icons/{Audio.tsx => audio.tsx} | 0 package/src/icons/{Bell.tsx => bell.tsx} | 0 package/src/icons/{Camera.tsx => camera.tsx} | 0 package/src/icons/{Checkmark.tsx => checkmark.tsx} | 0 package/src/icons/{Copy.tsx => copy.tsx} | 0 package/src/icons/{Delete.tsx => delete.tsx} | 0 package/src/icons/{Edit.tsx => edit.tsx} | 0 package/src/icons/{File.tsx => file.tsx} | 0 package/src/icons/{Flag.tsx => flag.tsx} | 0 package/src/icons/{Giphy.tsx => giphy.tsx} | 0 package/src/icons/{Imgur.tsx => imgur.tsx} | 0 package/src/icons/{Link.tsx => link.tsx} | 0 package/src/icons/{Loading.tsx => loading.tsx} | 0 package/src/icons/{Lock.tsx => lock.tsx} | 0 package/src/icons/{Minus.tsx => minus.tsx} | 0 package/src/icons/{Mute.tsx => mute.tsx} | 0 package/src/icons/{Pin.tsx => pin.tsx} | 0 package/src/icons/{Plus.tsx => plus.tsx} | 0 package/src/icons/{Search.tsx => search.tsx} | 0 package/src/icons/{Share.tsx => share.tsx} | 0 package/src/icons/{Unlock.tsx => unlock.tsx} | 0 package/src/icons/{Unpin.tsx => unpin.tsx} | 0 package/src/icons/{Video.tsx => video.tsx} | 0 24 files changed, 0 insertions(+), 0 deletions(-) rename package/src/icons/{Archive.tsx => archive.tsx} (100%) rename package/src/icons/{Audio.tsx => audio.tsx} (100%) rename package/src/icons/{Bell.tsx => bell.tsx} (100%) rename package/src/icons/{Camera.tsx => camera.tsx} (100%) rename package/src/icons/{Checkmark.tsx => checkmark.tsx} (100%) rename package/src/icons/{Copy.tsx => copy.tsx} (100%) rename package/src/icons/{Delete.tsx => delete.tsx} (100%) rename package/src/icons/{Edit.tsx => edit.tsx} (100%) rename package/src/icons/{File.tsx => file.tsx} (100%) rename package/src/icons/{Flag.tsx => flag.tsx} (100%) rename package/src/icons/{Giphy.tsx => giphy.tsx} (100%) rename package/src/icons/{Imgur.tsx => imgur.tsx} (100%) rename package/src/icons/{Link.tsx => link.tsx} (100%) rename package/src/icons/{Loading.tsx => loading.tsx} (100%) rename package/src/icons/{Lock.tsx => lock.tsx} (100%) rename package/src/icons/{Minus.tsx => minus.tsx} (100%) rename package/src/icons/{Mute.tsx => mute.tsx} (100%) rename package/src/icons/{Pin.tsx => pin.tsx} (100%) rename package/src/icons/{Plus.tsx => plus.tsx} (100%) rename package/src/icons/{Search.tsx => search.tsx} (100%) rename package/src/icons/{Share.tsx => share.tsx} (100%) rename package/src/icons/{Unlock.tsx => unlock.tsx} (100%) rename package/src/icons/{Unpin.tsx => unpin.tsx} (100%) rename package/src/icons/{Video.tsx => video.tsx} (100%) diff --git a/package/src/icons/Archive.tsx b/package/src/icons/archive.tsx similarity index 100% rename from package/src/icons/Archive.tsx rename to package/src/icons/archive.tsx diff --git a/package/src/icons/Audio.tsx b/package/src/icons/audio.tsx similarity index 100% rename from package/src/icons/Audio.tsx rename to package/src/icons/audio.tsx diff --git a/package/src/icons/Bell.tsx b/package/src/icons/bell.tsx similarity index 100% rename from package/src/icons/Bell.tsx rename to package/src/icons/bell.tsx diff --git a/package/src/icons/Camera.tsx b/package/src/icons/camera.tsx similarity index 100% rename from package/src/icons/Camera.tsx rename to package/src/icons/camera.tsx diff --git a/package/src/icons/Checkmark.tsx b/package/src/icons/checkmark.tsx similarity index 100% rename from package/src/icons/Checkmark.tsx rename to package/src/icons/checkmark.tsx diff --git a/package/src/icons/Copy.tsx b/package/src/icons/copy.tsx similarity index 100% rename from package/src/icons/Copy.tsx rename to package/src/icons/copy.tsx diff --git a/package/src/icons/Delete.tsx b/package/src/icons/delete.tsx similarity index 100% rename from package/src/icons/Delete.tsx rename to package/src/icons/delete.tsx diff --git a/package/src/icons/Edit.tsx b/package/src/icons/edit.tsx similarity index 100% rename from package/src/icons/Edit.tsx rename to package/src/icons/edit.tsx diff --git a/package/src/icons/File.tsx b/package/src/icons/file.tsx similarity index 100% rename from package/src/icons/File.tsx rename to package/src/icons/file.tsx diff --git a/package/src/icons/Flag.tsx b/package/src/icons/flag.tsx similarity index 100% rename from package/src/icons/Flag.tsx rename to package/src/icons/flag.tsx diff --git a/package/src/icons/Giphy.tsx b/package/src/icons/giphy.tsx similarity index 100% rename from package/src/icons/Giphy.tsx rename to package/src/icons/giphy.tsx diff --git a/package/src/icons/Imgur.tsx b/package/src/icons/imgur.tsx similarity index 100% rename from package/src/icons/Imgur.tsx rename to package/src/icons/imgur.tsx diff --git a/package/src/icons/Link.tsx b/package/src/icons/link.tsx similarity index 100% rename from package/src/icons/Link.tsx rename to package/src/icons/link.tsx diff --git a/package/src/icons/Loading.tsx b/package/src/icons/loading.tsx similarity index 100% rename from package/src/icons/Loading.tsx rename to package/src/icons/loading.tsx diff --git a/package/src/icons/Lock.tsx b/package/src/icons/lock.tsx similarity index 100% rename from package/src/icons/Lock.tsx rename to package/src/icons/lock.tsx diff --git a/package/src/icons/Minus.tsx b/package/src/icons/minus.tsx similarity index 100% rename from package/src/icons/Minus.tsx rename to package/src/icons/minus.tsx diff --git a/package/src/icons/Mute.tsx b/package/src/icons/mute.tsx similarity index 100% rename from package/src/icons/Mute.tsx rename to package/src/icons/mute.tsx diff --git a/package/src/icons/Pin.tsx b/package/src/icons/pin.tsx similarity index 100% rename from package/src/icons/Pin.tsx rename to package/src/icons/pin.tsx diff --git a/package/src/icons/Plus.tsx b/package/src/icons/plus.tsx similarity index 100% rename from package/src/icons/Plus.tsx rename to package/src/icons/plus.tsx diff --git a/package/src/icons/Search.tsx b/package/src/icons/search.tsx similarity index 100% rename from package/src/icons/Search.tsx rename to package/src/icons/search.tsx diff --git a/package/src/icons/Share.tsx b/package/src/icons/share.tsx similarity index 100% rename from package/src/icons/Share.tsx rename to package/src/icons/share.tsx diff --git a/package/src/icons/Unlock.tsx b/package/src/icons/unlock.tsx similarity index 100% rename from package/src/icons/Unlock.tsx rename to package/src/icons/unlock.tsx diff --git a/package/src/icons/Unpin.tsx b/package/src/icons/unpin.tsx similarity index 100% rename from package/src/icons/Unpin.tsx rename to package/src/icons/unpin.tsx diff --git a/package/src/icons/Video.tsx b/package/src/icons/video.tsx similarity index 100% rename from package/src/icons/Video.tsx rename to package/src/icons/video.tsx From 7f99842eb8f684dcc3eea4da5f2e30e2540f7bff Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Mon, 30 Mar 2026 13:59:05 +0200 Subject: [PATCH 26/26] fix: sample app lint issues --- examples/SampleApp/src/components/ChatScreenHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/SampleApp/src/components/ChatScreenHeader.tsx b/examples/SampleApp/src/components/ChatScreenHeader.tsx index a74e40d4c1..aa0be96dff 100644 --- a/examples/SampleApp/src/components/ChatScreenHeader.tsx +++ b/examples/SampleApp/src/components/ChatScreenHeader.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Image, StyleSheet, TouchableOpacity } from 'react-native'; import { CompositeNavigationProp, useNavigation } from '@react-navigation/native'; -import { useChatContext, useTheme } from 'stream-chat-react-native'; +import { useChatContext } from 'stream-chat-react-native'; import { RoundButton } from './RoundButton'; import { ScreenHeader } from './ScreenHeader';