diff --git a/package/src/components/ChannelPreview/ChannelAvatar.tsx b/package/src/components/ChannelPreview/ChannelAvatar.tsx index 318313659..6c8826f79 100644 --- a/package/src/components/ChannelPreview/ChannelAvatar.tsx +++ b/package/src/components/ChannelPreview/ChannelAvatar.tsx @@ -5,6 +5,7 @@ import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplay import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence'; import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext'; +import { useTheme } from '../../contexts/themeContext/ThemeContext'; import type { DefaultStreamChatGenerics } from '../../types/types'; import { Avatar } from '../Avatar/Avatar'; import { GroupAvatar } from '../Avatar/GroupAvatar'; @@ -22,6 +23,13 @@ export const ChannelAvatarWithContext = < props: ChannelAvatarProps & Pick, ) => { const { channel, ImageComponent } = props; + const { + theme: { + channelPreview: { + avatar: { size }, + }, + }, + } = useTheme(); const displayAvatar = useChannelPreviewDisplayAvatar(channel); const displayPresence = useChannelPreviewDisplayPresence(channel); @@ -32,7 +40,7 @@ export const ChannelAvatarWithContext = < ImageComponent={ImageComponent} images={displayAvatar.images} names={displayAvatar.names} - size={40} + size={size} /> ); } @@ -43,7 +51,7 @@ export const ChannelAvatarWithContext = < ImageComponent={ImageComponent} name={displayAvatar.name} online={displayPresence} - size={40} + size={size} /> ); }; diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts index a538d116e..fe663bf60 100644 --- a/package/src/contexts/themeContext/utils/theme.ts +++ b/package/src/contexts/themeContext/utils/theme.ts @@ -160,6 +160,9 @@ export type Theme = { maskFillColor?: ColorValue; }; channelPreview: { + avatar: { + size: number; + }; checkAllIcon: IconProps; checkIcon: IconProps; container: ViewStyle; @@ -914,6 +917,9 @@ export const defaultTheme: Theme = { height: 64, }, channelPreview: { + avatar: { + size: 40, + }, checkAllIcon: { height: DEFAULT_STATUS_ICON_SIZE, width: DEFAULT_STATUS_ICON_SIZE,