Skip to content

Commit 9a20e7e

Browse files
committed
fix: customize channel avatar size using theme
1 parent 236029f commit 9a20e7e

File tree

2 files changed

+16
-2
lines changed

2 files changed

+16
-2
lines changed

package/src/components/ChannelPreview/ChannelAvatar.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplay
55
import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';
66

77
import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
8+
import { useTheme } from '../../contexts/themeContext/ThemeContext';
89
import type { DefaultStreamChatGenerics } from '../../types/types';
910
import { Avatar } from '../Avatar/Avatar';
1011
import { GroupAvatar } from '../Avatar/GroupAvatar';
@@ -22,6 +23,13 @@ export const ChannelAvatarWithContext = <
2223
props: ChannelAvatarProps<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,
2324
) => {
2425
const { channel, ImageComponent } = props;
26+
const {
27+
theme: {
28+
channelPreview: {
29+
avatar: { size },
30+
},
31+
},
32+
} = useTheme();
2533

2634
const displayAvatar = useChannelPreviewDisplayAvatar(channel);
2735
const displayPresence = useChannelPreviewDisplayPresence(channel);
@@ -32,7 +40,7 @@ export const ChannelAvatarWithContext = <
3240
ImageComponent={ImageComponent}
3341
images={displayAvatar.images}
3442
names={displayAvatar.names}
35-
size={40}
43+
size={size}
3644
/>
3745
);
3846
}
@@ -43,7 +51,7 @@ export const ChannelAvatarWithContext = <
4351
ImageComponent={ImageComponent}
4452
name={displayAvatar.name}
4553
online={displayPresence}
46-
size={40}
54+
size={size}
4755
/>
4856
);
4957
};

package/src/contexts/themeContext/utils/theme.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,9 @@ export type Theme = {
152152
maskFillColor?: ColorValue;
153153
};
154154
channelPreview: {
155+
avatar: {
156+
size: number;
157+
};
155158
checkAllIcon: IconProps;
156159
checkIcon: IconProps;
157160
container: ViewStyle;
@@ -875,6 +878,9 @@ export const defaultTheme: Theme = {
875878
height: 64,
876879
},
877880
channelPreview: {
881+
avatar: {
882+
size: 40,
883+
},
878884
checkAllIcon: {
879885
height: DEFAULT_STATUS_ICON_SIZE,
880886
width: DEFAULT_STATUS_ICON_SIZE,

0 commit comments

Comments
 (0)