fix theme on outer overlay for my message

Author: nhannah

src/components/MessageOverlay/MessageOverlay.tsx

@@ -150,24 +150,9 @@ const MessageOverlayWithContext = <
 
   const { theme } = useTheme();
 
-  const {
-    colors: {
-      blue_alice,
-      grey_gainsboro,
-      grey_whisper,
-      transparent,
-      white_smoke,
-    },
-    messageSimple: {
-      content: {
-        container: { borderRadiusL, borderRadiusS },
-        containerInner,
-        replyContainer,
-      },
-    },
-  } = theme;
-
   const myMessageTheme = messagesContext?.myMessageTheme;
+  const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;
+
   const [myMessageThemeString, setMyMessageThemeString] = useState(
     JSON.stringify(myMessageTheme),
   );
@@ -183,6 +168,23 @@ const MessageOverlayWithContext = <
     [myMessageThemeString, theme],
   );
 
+  const {
+    colors: {
+      blue_alice,
+      grey_gainsboro,
+      grey_whisper,
+      transparent,
+      white_smoke,
+    },
+    messageSimple: {
+      content: {
+        container: { borderRadiusL, borderRadiusS },
+        containerInner,
+        replyContainer,
+      },
+    },
+  } = wrapMessageInTheme ? modifiedTheme : theme;
+
   const scrollViewRef = useRef<ScrollView>(null);
 
   const messageHeight = useSharedValue(0);
@@ -334,8 +336,6 @@ const MessageOverlayWithContext = <
   const { Attachment, FileAttachmentGroup, Gallery, MessageAvatar, Reply } =
     messagesContext || {};
 
-  const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;
-
   return (
     <MessagesProvider<At, Ch, Co, Ev, Me, Re, Us> value={messagesContext}>
       <ThemeProvider mergedStyle={wrapMessageInTheme ? modifiedTheme : theme}>