fix: channel list redesign fixes (#3425)

Author: khushal87

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -58,13 +58,16 @@ const CustomChannelPreviewStatus = (
   props: ChannelPreviewStatusProps & { membership: ChannelState['membership'] },
 ) => {
   const { membership } = props;
+  const {
+    theme: { semantics },
+  } = useTheme();
 
   return (
     <View style={styles.statusContainer}>
       <ChannelPreviewStatus {...props} />
       {membership.pinned_at && (
         <View style={styles.pinIconContainer}>
-          <Pin size={24} />
+          <Pin height={24} width={24} stroke={semantics.textSecondary} />
         </View>
       )}
     </View>

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -105,7 +105,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
 
   if (isFailedMessage) {
     return (
-      <View style={styles.messagePreviewContainer}>
+      <View style={styles.container}>
         <ErrorBadge size='xs' />
         <Text style={styles.errorText}>{t('Message failed to send')}</Text>
       </View>
@@ -131,7 +131,10 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
 
 const useStyles = ({ isMessageDeleted = false }: { isMessageDeleted?: boolean }) => {
   const {
-    theme: { semantics },
+    theme: {
+      semantics,
+      channelPreview: { message },
+    },
   } = useTheme();
 
   return useMemo(() => {
@@ -141,33 +144,33 @@ const useStyles = ({ isMessageDeleted = false }: { isMessageDeleted?: boolean })
         alignItems: 'center',
         gap: primitives.spacingXxs,
         flexShrink: 1,
-      },
-      messagePreviewContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: primitives.spacingXxs,
-        flexShrink: 1,
+        ...message.container,
       },
       subtitle: {
         color: isMessageDeleted ? semantics.textTertiary : semantics.textSecondary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         includeFontPadding: false,
         lineHeight: primitives.typographyLineHeightNormal,
+        flexShrink: 1,
+        ...message.subtitle,
       },
       draftText: {
         color: semantics.accentPrimary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        includeFontPadding: false,
+        ...message.draftText,
       },
       errorText: {
         color: semantics.accentError,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         includeFontPadding: false,
         lineHeight: primitives.typographyLineHeightNormal,
+        ...message.errorText,
       },
     });
-  }, [semantics, isMessageDeleted]);
+  }, [semantics, isMessageDeleted, message]);
 };

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

@@ -173,9 +173,6 @@ export type Theme = {
     contentContainer: ViewStyle;
     date: TextStyle;
     mutedStatus: IconProps;
-    message: {
-      container: ViewStyle;
-    };
     messageDeliveryStatus: {
       container: ViewStyle;
       text: TextStyle;
@@ -195,6 +192,12 @@ export type Theme = {
     statusContainer: ViewStyle;
     titleContainer: ViewStyle;
     wrapper: ViewStyle;
+    message: {
+      container: ViewStyle;
+      subtitle: TextStyle;
+      errorText: TextStyle;
+      draftText: TextStyle;
+    };
   };
   dateHeader: {
     container: ViewStyle;
@@ -1013,6 +1016,9 @@ export const defaultTheme: Theme = {
     date: {},
     message: {
       container: {},
+      subtitle: {},
+      errorText: {},
+      draftText: {},
     },
     messageDeliveryStatus: {
       container: {},