Simplify big emoji rendering

- Remove MessageBigEmoji component in favor of direct rendering in MessageSimpleText - Remove optional props from bubble components (transparent, noPadding) - Remove big emoji styling from reply messages - Use VStack with Text directly for emoji-only messages - Use xxl text size for big emojis (48/60)
ephemeraHQ · Dec 23, 2024 · e63f6e2 · e63f6e2
1 parent 49712a5
commit e63f6e2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 54 deletions.
diff --git a/features/conversation/conversation-message/conversation-message-bubble.tsx b/features/conversation/conversation-message/conversation-message-bubble.tsx
@@ -5,15 +5,12 @@ import { memo } from "react";
 type IBubbleContainerProps = {
   children: React.ReactNode;
   fromMe: boolean;
-  transparent?: boolean;
 };
 
 type IBubbleContentContainerProps = {
   children: React.ReactNode;
   fromMe: boolean;
   hasNextMessageInSeries: boolean;
-  noPadding?: boolean;
-  transparent?: boolean;
 };
 
 export const BubbleContainer = memo(function BubbleContainer(
@@ -37,19 +34,16 @@ export const BubbleContainer = memo(function BubbleContainer(
 export const BubbleContentContainer = memo(function BubbleContentContainer(
   props: IBubbleContentContainerProps
 ) {
-  const { children, fromMe, hasNextMessageInSeries, noPadding, transparent } =
-    props;
+  const { children, fromMe, hasNextMessageInSeries } = props;
   const { theme } = useAppTheme();
 
   const baseStyle = {
-    backgroundColor: transparent
-      ? "transparent"
-      : fromMe
-        ? theme.colors.bubbles.bubble
-        : theme.colors.bubbles.received.bubble,
+    backgroundColor: fromMe
+      ? theme.colors.bubbles.bubble
+      : theme.colors.bubbles.received.bubble,
     borderRadius: theme.borderRadius.sm,
-    paddingHorizontal: noPadding ? 0 : theme.spacing.xs,
-    paddingVertical: noPadding ? 0 : theme.spacing.xxs,
+    paddingHorizontal: theme.spacing.xs,
+    paddingVertical: theme.spacing.xxs,
     maxWidth: theme.layout.screen.width * 0.7,
   };
 

diff --git a/...onversation-message/conversation-message-content-types/conversation-message-big-emoji.tsx b/...onversation-message/conversation-message-content-types/conversation-message-big-emoji.tsx
diff --git a/...on/conversation-message/conversation-message-content-types/conversation-message-reply.tsx b/...on/conversation-message/conversation-message-content-types/conversation-message-reply.tsx
@@ -13,7 +13,6 @@ import {
   isTextMessage,
   isTransactionReferenceMessage,
   useConversationMessageById,
-  shouldRenderBigEmoji,
 } from "@/features/conversation/conversation-message/conversation-message.utils";
 import {
   useConversationStore,
@@ -56,7 +55,6 @@ export const MessageReply = memo(function MessageReply(props: {
   }
 
   const textContent = replyMessageContent.content.text;
-  const isBigEmoji = textContent && shouldRenderBigEmoji(textContent);
 
   return (
     <BubbleContainer fromMe={fromMe}>
@@ -100,9 +98,7 @@ export const MessageReply = memo(function MessageReply(props: {
           )}
 
           {!!textContent && (
-            <MessageText inverted={fromMe} isBigEmoji={!!isBigEmoji}>
-              {textContent}
-            </MessageText>
+            <MessageText inverted={fromMe}>{textContent}</MessageText>
           )}
         </VStack>
       </BubbleContentContainer>

diff --git a/...versation-message/conversation-message-content-types/conversation-message-simple-text.tsx b/...versation-message/conversation-message-content-types/conversation-message-simple-text.tsx
@@ -7,22 +7,44 @@ import { useMessageContextStoreContext } from "@/features/conversation/conversat
 import { useSelect } from "@/data/store/storeHelpers";
 import { DecodedMessage, TextCodec } from "@xmtp/react-native-sdk";
 import { memo } from "react";
-import { MessageBigEmoji } from "./conversation-message-big-emoji";
 import { shouldRenderBigEmoji } from "@/features/conversation/conversation-message/conversation-message.utils";
+import { VStack } from "@design-system/VStack";
+import { Text } from "@design-system/Text";
+import { textSizeStyles } from "@design-system/Text/Text.styles";
+import { useAppTheme } from "@theme/useAppTheme";
 
 export const MessageSimpleText = memo(function MessageSimpleText(props: {
   message: DecodedMessage<TextCodec>;
 }) {
   const { message } = props;
 
+  const { theme } = useAppTheme();
+
   const textContent = message.content();
 
   const { hasNextMessageInSeries, fromMe } = useMessageContextStoreContext(
     useSelect(["hasNextMessageInSeries", "fromMe"])
   );
 
   if (shouldRenderBigEmoji(textContent)) {
-    return <MessageBigEmoji message={message} />;
+    return (
+      <VStack
+        style={{
+          alignItems: fromMe ? "flex-end" : "flex-start",
+        }}
+      >
+        <Text
+          style={{
+            ...textSizeStyles.xxl,
+            color: fromMe
+              ? theme.colors.text.inverted.primary
+              : theme.colors.text.primary,
+          }}
+        >
+          {textContent}
+        </Text>
+      </VStack>
+    );
   }
 
   return (