From 1248f48e56253e66541f25bd3d5f07a95bc4dbff Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Wed, 8 Jan 2025 11:04:51 +0530
Subject: [PATCH] fix: customize channel avatar size using theme

---
 .../src/components/ChannelPreview/ChannelAvatar.tsx  | 12 ++++++++++--
 package/src/contexts/themeContext/utils/theme.ts     |  6 ++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/package/src/components/ChannelPreview/ChannelAvatar.tsx b/package/src/components/ChannelPreview/ChannelAvatar.tsx
index 3183136591..6c8826f794 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<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,
 ) => {
   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 a538d116eb..fe663bf60b 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,