fix: dark mode improvements (#3426)

## 🎯 Goal

This PR addresses some issues we had with `scheme` changes with the
redesign of the SDK, namely some components not using the new adequate
colors from `semantics` in order to adjust to the scheme. It also fixes
an issue with scheme reactivity of messages.

## 🛠 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/src/components/AttachmentPickerSelectionBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import {
   AttachmentTypePickerButton,
@@ -10,6 +10,7 @@ import {
   PollPickerButton,
   useAttachmentPickerContext,
   useStableCallback,
+  useTheme,
 } from 'stream-chat-react-native';
 import { ShareLocationIcon } from '../icons/ShareLocationIcon';
 import { LiveLocationCreateModal } from './LocationSharing/CreateLocationModal';
@@ -19,6 +20,8 @@ export const CustomAttachmentPickerSelectionBar = () => {
   const { attachmentPickerStore } = useAttachmentPickerContext();
   const { selectedPicker } = useAttachmentPickerState();
 
+  const styles = useStyles();
+
   const onRequestClose = () => {
     setModalVisible(false);
   };
@@ -47,11 +50,15 @@ export const CustomAttachmentPickerSelectionBar = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  selectionBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingBottom: 12,
-  },
-});
+const useStyles = () => {
+  const { theme: { semantics }} = useTheme();
+  return useMemo(() => StyleSheet.create({
+    selectionBar: {
+      backgroundColor: semantics.composerBg,
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingBottom: 12,
+    },
+  }), [semantics])
+}

examples/SampleApp/src/hooks/useStreamChatTheme.ts

@@ -61,16 +61,6 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
           white_smoke: '#F2F2F2',
           white_snow: '#FCFCFC',
         },
-  ...(colorScheme === 'dark'
-    ? {
-        messageSimple: {
-          content: {
-            receiverMessageBackgroundColor: '#2D2F2F',
-            senderMessageBackgroundColor: '#101418',
-          },
-        },
-      }
-    : {}),
 });
 
 export const useStreamChatTheme = () => {

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import {
   AnimatableNumericValue,
   ColorValue,
@@ -117,7 +117,6 @@ export type MessageContentPropsWithContext = Pick<
  * Child of MessageSimple that displays a message's content
  */
 const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
-  const [longPressFired, setLongPressFired] = useState(false);
   const {
     additionalPressableProps,
     Attachment,
@@ -238,7 +237,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     <Pressable
       disabled={preventPress}
       onLongPress={(event) => {
-        setLongPressFired(true);
         if (onLongPress) {
           onLongPress({
             emitter: 'messageContent',
@@ -262,10 +260,9 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
           });
         }
       }}
-      style={({ pressed }) => [{ opacity: pressed && !longPressFired ? 0.5 : 1 }, container]}
+      style={container}
       {...additionalPressableProps}
       onPressOut={(event) => {
-        setLongPressFired(false);
         setNativeScrollability(true);
 
         if (additionalPressableProps?.onPressOut) {
@@ -382,6 +379,7 @@ const areEqual = (
   nextProps: MessageContentPropsWithContext,
 ) => {
   const {
+    backgroundColor: prevBackgroundColor,
     preventPress: prevPreventPress,
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
@@ -393,6 +391,7 @@ const areEqual = (
     t: prevT,
   } = prevProps;
   const {
+    backgroundColor: nextBackgroundColor,
     preventPress: nextPreventPress,
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
@@ -403,6 +402,10 @@ const areEqual = (
     t: nextT,
   } = nextProps;
 
+  if (prevBackgroundColor !== nextBackgroundColor) {
+    return false;
+  }
+
   if (prevPreventPress !== nextPreventPress) {
     return false;
   }

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -122,16 +122,12 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
 
   const {
     theme: {
-      colors: { blue_alice, grey_gainsboro, light_blue, light_gray, transparent },
+      semantics,
+      colors: { blue_alice, grey_gainsboro, transparent },
       messageSimple: {
         container,
         repliesContainer,
-        content: {
-          container: contentContainer,
-          errorContainer,
-          receiverMessageBackgroundColor,
-          senderMessageBackgroundColor,
-        },
+        content: { container: contentContainer, errorContainer },
         headerWrapper,
         lastMessageContainer,
         messageGroupedSingleOrBottomContainer,
@@ -170,7 +166,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
     }
   }
 
-  let backgroundColor = senderMessageBackgroundColor ?? light_blue;
+  let backgroundColor = semantics.chatBgOutgoing;
   if (onlyEmojis && !message.quoted_message) {
     backgroundColor = transparent;
   } else if (otherAttachments.length) {
@@ -180,7 +176,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
       backgroundColor = blue_alice;
     }
   } else if (isMessageReceivedOrErrorType) {
-    backgroundColor = receiverMessageBackgroundColor ?? light_gray;
+    backgroundColor = semantics.chatBgIncoming;
   }
 
   const onSwipeActionHandler = useStableCallback(() => {

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -22,10 +22,10 @@ exports[`MessageAvatar should render message avatar 1`] = `
             "width": 32,
           },
           {
-            "backgroundColor": "#d1f3f6",
+            "backgroundColor": "#003a3f",
           },
           {
-            "borderColor": "rgba(0, 0, 0, 0.1)",
+            "borderColor": "rgba(255, 255, 255, 0.2)",
             "borderWidth": 1,
           },
           undefined,

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -126,13 +126,11 @@ const defaultMarkdownStyles: MarkdownStyle = {
   paragraph: {
     marginBottom: 8,
     fontSize: primitives.typographyFontSizeMd,
-    lineHeight: primitives.typographyLineHeightNormal,
     marginTop: 8,
   },
   paragraphCenter: {
     marginBottom: 8,
     fontSize: primitives.typographyFontSizeMd,
-    lineHeight: primitives.typographyLineHeightNormal,
     marginTop: 8,
   },
   paragraphWithImage: {
@@ -201,6 +199,16 @@ export const renderText = (params: RenderTextParams) => {
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
     ...markdownStyles,
+    paragraph: {
+      ...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
+      ...defaultMarkdownStyles.paragraph,
+      ...markdownStyles?.paragraph,
+    },
+    paragraphCenter: {
+      ...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
+      ...defaultMarkdownStyles.paragraphCenter,
+      ...markdownStyles?.paragraphCenter,
+    },
     autolink: {
       fontSize: primitives.typographyFontSizeMd,
       lineHeight: primitives.typographyLineHeightNormal,
@@ -279,7 +287,7 @@ export const renderText = (params: RenderTextParams) => {
     },
     text: {
       fontSize: primitives.typographyFontSizeMd,
-      lineHeight: primitives.typographyLineHeightNormal,
+      ...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
       ...defaultMarkdownStyles.text,
       color: colors.black,
       ...markdownStyles?.text,

package/src/components/MessageInput/MessageInput.tsx

@@ -71,6 +71,16 @@ const useStyles = () => {
   } = useTheme();
   return useMemo(() => {
     return StyleSheet.create({
+      pollModalWrapper: {
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center',
+        backgroundColor: semantics.backgroundElevationElevation1,
+      },
+      pollSafeArea: {
+        flex: 1,
+        backgroundColor: semantics.backgroundElevationElevation1,
+      },
       container: {
         alignItems: 'center',
         flexDirection: 'row',
@@ -454,14 +464,14 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
       </Animated.View>
 
       {showPollCreationDialog ? (
-        <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
+        <View style={styles.pollModalWrapper}>
           <Modal
             animationType='slide'
             onRequestClose={closePollCreationDialog}
             visible={showPollCreationDialog}
           >
-            <GestureHandlerRootView style={{ flex: 1 }}>
-              <SafeAreaViewWrapper style={{ flex: 1 }}>
+            <GestureHandlerRootView style={styles.pollSafeArea}>
+              <SafeAreaViewWrapper style={styles.pollSafeArea}>
                 <CreatePoll
                   closePollCreationDialog={closePollCreationDialog}
                   CreatePollContent={CreatePollContent}