fix: design qa bugfixes (#3543)

## 🎯 Goal

<!-- Describe why we are making this change -->

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

examples/SampleApp/App.tsx

@@ -59,8 +59,6 @@ Geolocation.setRNConfiguration({
 });
 
 import type { LocalMessage, StreamChat, TextComposerMiddleware } from 'stream-chat';
-import { Toast } from './src/components/ToastComponent/Toast';
-import { useClientNotificationsToastHandler } from './src/hooks/useClientNotificationsToastHandler';
 import AsyncStore from './src/utils/AsyncStore.ts';
 import {
   MessageInputFloatingConfigItem,
@@ -377,7 +375,6 @@ const DrawerNavigatorWrapper: React.FC<{
         <AppOverlayProvider>
           <UserSearchProvider>
             <DrawerNavigator />
-            <Toast />
           </UserSearchProvider>
         </AppOverlayProvider>
       </StreamChatProvider>
@@ -403,7 +400,6 @@ const UserSelector = () => (
 // TODO: Split the stack into multiple stacks - ChannelStack, CreateChannelStack etc.
 const HomeScreen = () => {
   const { overlay } = useOverlayContext();
-  useClientNotificationsToastHandler();
 
   return (
     <Stack.Navigator

examples/SampleApp/src/components/AttachmentPickerContent.tsx

@@ -20,7 +20,7 @@ export const CustomAttachmentPickerContent = (props: AttachmentPickerContentProp
   } = useTheme();
 
   const Icon = useCallback(
-    () => <ShareLocationIcon stroke={semantics.textTertiary} />,
+    () => <ShareLocationIcon width={32} height={32} stroke={semantics.textTertiary} />,
     [semantics.textTertiary],
   );
 

examples/SampleApp/src/components/ScreenHeader.tsx

@@ -122,15 +122,15 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = (props) => {
   const {
     theme: { semantics },
   } = useTheme();
-  const { black, grey, white } = useLegacyColors();
+  const { black, grey } = useLegacyColors();
   const insets = useSafeAreaInsets();
 
   return (
     <View
       style={[
         styles.safeAreaContainer,
         {
-          backgroundColor: white,
+          backgroundColor: semantics.backgroundCoreElevation1,
           borderBottomColor: semantics.borderCoreSubtle,
           height: HEADER_CONTENT_HEIGHT + (inSafeArea ? 0 : insets.top),
         },

examples/SampleApp/src/icons/ShareLocationIcon.tsx

@@ -2,9 +2,17 @@ import Svg, { Path } from 'react-native-svg';
 import { ColorValue } from 'react-native';
 
 // Icon for "Share Location" button, next to input box.
-export const ShareLocationIcon = ({ stroke }: { stroke: ColorValue }) => {
+export const ShareLocationIcon = ({
+  width,
+  height,
+  stroke,
+}: {
+  stroke: ColorValue;
+  width: number;
+  height: number;
+}) => {
   return (
-    <Svg width={20} height={20} viewBox='0 0 24 24' fill='none'>
+    <Svg width={width} height={height} viewBox='0 0 24 24' fill='none'>
       <Path
         d='M12 12c-1.654 0-3-1.345-3-3 0-1.654 1.346-3 3-3s3 1.346 3 3c0 1.655-1.346 3-3 3zm0-4a1.001 1.001 0 101 1c0-.551-.449-1-1-1z'
         fill={stroke}

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -22,7 +22,7 @@ import { Button } from '../../ui/';
 
 export type GiphyPropsWithContext = Pick<
   MessageContextValue,
-  'handleAction' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
+  'handleAction' | 'isMyMessage' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
   Pick<MessagesContextValue, 'additionalPressableProps' | 'giphyVersion'> & {
     attachment: Attachment;
@@ -34,6 +34,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
     attachment,
     giphyVersion,
     handleAction,
+    isMyMessage,
     onLongPress,
     onPress,
     onPressIn,
@@ -53,7 +54,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
     },
   } = useTheme();
 
-  const styles = useStyles();
+  const styles = useStyles({ isMyMessage });
 
   const uri = image_url || thumb_url;
 
@@ -122,7 +123,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
         }
       }}
       testID='giphy-attachment'
-      style={styles.container}
+      style={[styles.container, container]}
       {...additionalPressableProps}
     >
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} />
@@ -134,10 +135,12 @@ const areEqual = (prevProps: GiphyPropsWithContext, nextProps: GiphyPropsWithCon
   const {
     attachment: { actions: prevActions, image_url: prevImageUrl, thumb_url: prevThumbUrl },
     giphyVersion: prevGiphyVersion,
+    isMyMessage: prevIsMyMessage,
   } = prevProps;
   const {
     attachment: { actions: nextActions, image_url: nextImageUrl, thumb_url: nextThumbUrl },
     giphyVersion: nextGiphyVersion,
+    isMyMessage: nextIsMyMessage,
   } = nextProps;
 
   const imageUrlEqual = prevImageUrl === nextImageUrl;
@@ -165,6 +168,11 @@ const areEqual = (prevProps: GiphyPropsWithContext, nextProps: GiphyPropsWithCon
     return false;
   }
 
+  const isMyMessageEqual = prevIsMyMessage === nextIsMyMessage;
+  if (!isMyMessageEqual) {
+    return false;
+  }
+
   return true;
 };
 
@@ -178,7 +186,8 @@ export type GiphyProps = Partial<GiphyPropsWithContext> & {
  * UI component for card in attachments.
  */
 export const Giphy = (props: GiphyProps) => {
-  const { handleAction, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
+  const { handleAction, isMyMessage, onLongPress, onPress, onPressIn, preventPress } =
+    useMessageContext();
   const { additionalPressableProps, giphyVersion } = useMessagesContext();
 
   return (
@@ -187,6 +196,7 @@ export const Giphy = (props: GiphyProps) => {
         additionalPressableProps,
         giphyVersion,
         handleAction,
+        isMyMessage,
         onLongPress,
         onPress,
         onPressIn,
@@ -199,14 +209,16 @@ export const Giphy = (props: GiphyProps) => {
 
 Giphy.displayName = 'Giphy{messageItemView{giphy}}';
 
-const useStyles = () => {
+const useStyles = ({ isMyMessage }: Pick<GiphyPropsWithContext, 'isMyMessage'>) => {
   const {
     theme: { semantics },
   } = useTheme();
   return useMemo(() => {
     return StyleSheet.create({
       container: {
-        backgroundColor: semantics.chatBgOutgoing,
+        backgroundColor: isMyMessage
+          ? semantics.chatBgAttachmentOutgoing
+          : semantics.chatBgAttachmentIncoming,
         borderRadius: primitives.radiusLg,
         maxWidth: 256, // TODO: Not sure how to fix this
         overflow: 'hidden',
@@ -240,5 +252,5 @@ const useStyles = () => {
         lineHeight: primitives.typographyLineHeightTight,
       },
     });
-  }, [semantics]);
+  }, [isMyMessage, semantics]);
 };

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -14,7 +14,7 @@ import { MessageProvider } from '../../../contexts/messageContext/MessageContext
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { mergeThemes, ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateGiphyAttachment } from '../../../mock-builders/generator/attachment';
@@ -36,6 +36,8 @@ const streami18n = new Streami18n({
 });
 
 describe('Giphy', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
   const getAttachmentComponent = (props, messageContextValue = {}) => {
     const message = generateMessage();
     return (
@@ -115,6 +117,36 @@ describe('Giphy', () => {
     });
   });
 
+  it('uses the outgoing attachment background for outgoing giphys', async () => {
+    render(getAttachmentComponent({ attachment }, { isMyMessage: true }));
+
+    await waitFor(() => {
+      const style = screen.getByTestId('giphy-attachment').props.style;
+      expect(style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: lightTheme.semantics.chatBgAttachmentOutgoing,
+          }),
+        ]),
+      );
+    });
+  });
+
+  it('uses the incoming attachment background for incoming giphys', async () => {
+    render(getAttachmentComponent({ attachment }, { isMyMessage: false }));
+
+    await waitFor(() => {
+      const style = screen.getByTestId('giphy-attachment').props.style;
+      expect(style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: lightTheme.semantics.chatBgAttachmentIncoming,
+          }),
+        ]),
+      );
+    });
+  });
+
   it('"giphy" attachment size should be customisable', async () => {
     attachment.giphy = giphy;
     render(getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }));

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -201,7 +201,7 @@ export const AttachmentCameraPicker = (
       onPress={openCameraPicker}
       height={height}
       buttonText={t('Open Camera')}
-      description={t('Take a video and share')}
+      description={t(videoOnly ? 'Take a video and share' : 'Take a photo and share')}
     />
   );
 };
@@ -216,8 +216,8 @@ export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
       Icon={FilePickerIcon}
       onPress={pickFile}
       height={height}
-      buttonText={t('Pick document')}
-      description={t('Pick a document to share it with everyone')}
+      buttonText={t('Open Files')}
+      description={t('Select files to share')}
     />
   );
 };

package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx

@@ -21,12 +21,20 @@ const useStyles = () => {
           paddingHorizontal: primitives.spacing2xl,
           paddingBottom: primitives.spacing3xl,
         },
-        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+        infoContainer: {
+          flex: 1,
+          gap: primitives.spacingSm,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        actionContainer: {
+          gap: primitives.spacingMd,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
         text: {
           fontSize: primitives.typographyFontSizeMd,
           color: semantics.textSecondary,
-          marginTop: 8,
-          marginHorizontal: 24,
           textAlign: 'center',
           maxWidth: 200,
         },
@@ -54,13 +62,13 @@ export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericCon
     theme: {
       semantics,
       attachmentPicker: {
-        content: { container, text, infoContainer },
+        content: { actionContainer, container, text, infoContainer },
       },
     },
   } = useTheme();
 
   const ThemedIcon = useCallback(
-    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
+    () => <Icon width={32} height={32} stroke={semantics.textTertiary} />,
     [Icon, semantics.textTertiary],
   );
 
@@ -76,15 +84,17 @@ export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericCon
     >
       <View style={[styles.infoContainer, infoContainer]}>
         <ThemedIcon />
-        <Text style={[styles.text, text]}>{description}</Text>
+        <View style={[styles.actionContainer, actionContainer]}>
+          <Text style={[styles.text, text]}>{description}</Text>
+          <Button
+            variant={'secondary'}
+            type={'outline'}
+            size={'md'}
+            label={buttonText}
+            onPress={onPress}
+          />
+        </View>
       </View>
-      <Button
-        variant={'secondary'}
-        type={'outline'}
-        size={'lg'}
-        label={buttonText}
-        onPress={onPress}
-      />
     </View>
   );
 };

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
-import { FlatList, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { FlatList } from 'react-native-gesture-handler';
 
 import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
 

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -141,7 +141,7 @@ const useStyles = () => {
           flexDirection: 'row',
           padding: primitives.spacingSm,
           gap: primitives.spacingSm,
-          backgroundColor: semantics.backgroundCoreElevation1,
+          backgroundColor: 'transparent',
           ...header.container,
         },
         headerMeta: {