fix: improve icons and usage

Author: khushal87

examples/SampleApp/src/icons/Bell.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { useTheme } from 'stream-chat-react-native';
+
+import { IconProps } from '../utils/base';
+
+export const Bell: React.FC<IconProps> = ({ height = 512, width = 512 }) => {
+  const {
+    theme: {
+      colors: { grey },
+    },
+  } = useTheme();
+
+  return (
+    <Svg height={height} viewBox={'0 0 24 24'} width={width}>
+      <Path
+        d='M12,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.9,2 2,2zM18,16v-5c0,-3.07 -1.63,-5.64 -4.5,-6.32L13.5,4c0,-0.83 -0.67,-1.5 -1.5,-1.5s-1.5,0.67 -1.5,1.5v0.68C7.64,5.36 6,7.92 6,11v5l-2,2v1h16v-1l-2,-2zM16,17L8,17v-6c0,-2.48 1.51,-4.5 4,-4.5s4,2.02 4,4.5v6z'
+        fill={grey}
+      />
+    </Svg>
+  );
+};

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -118,9 +118,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
   const navigation = useNavigation();
   const { bottom } = useSafeAreaInsets();
   const {
-    theme: {
-      colors: { white },
-    },
+    theme: { colors },
   } = useTheme();
   const { t } = useTranslationContext();
 
@@ -168,7 +166,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
   }
 
   return (
-    <View style={[styles.flex, { backgroundColor: white, paddingBottom: bottom }]}>
+    <View style={[styles.flex, { backgroundColor: colors.white, paddingBottom: bottom }]}>
       <Channel
         audioRecordingEnabled={true}
         channel={channel}
@@ -181,6 +179,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
             params,
             chatClient,
             t,
+            colors,
           });
         }}
         MessageHeader={MessageReminderHeader}

examples/SampleApp/src/utils/messageActions.tsx

@@ -1,20 +1,24 @@
 import { Alert } from 'react-native';
 import { StreamChat } from 'stream-chat';
 import {
+  Colors,
   messageActions,
   MessageActionsParams,
   Time,
   TranslationContextValue,
 } from 'stream-chat-react-native';
+import { Bell } from '../icons/Bell';
 
 export function channelMessageActions({
   params,
   chatClient,
+  colors,
   t,
 }: {
   params: MessageActionsParams;
   chatClient: StreamChat;
   t: TranslationContextValue['t'];
+  colors?: typeof Colors;
 }) {
   const { dismissOverlay } = params;
   const actions = messageActions(params);
@@ -37,7 +41,7 @@ export function channelMessageActions({
     },
     actionType: reminder ? 'remove-from-later' : 'save-for-later',
     title: reminder ? 'Remove from Later' : 'Save for Later',
-    icon: <Time />,
+    icon: <Time pathFill={colors?.grey} />,
   });
   actions.push({
     action: () => {
@@ -82,7 +86,7 @@ export function channelMessageActions({
     },
     actionType: reminder ? 'remove-reminder' : 'remind-me',
     title: reminder ? 'Remove Reminder' : 'Remind Me',
-    icon: <Time />,
+    icon: <Bell height={24} width={24} />,
   });
 
   return actions;