[PAY-1468] Fix mobile chats copy message button (#3623)

AudiusProject · Jun 19, 2023 · 49ca553 · 49ca553
1 parent 193ae1c
commit 49ca553
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 48 deletions.
diff --git a/packages/mobile/src/screens/chat-screen/CopyMessagesButton.tsx b/packages/mobile/src/screens/chat-screen/CopyMessagesButton.tsx
@@ -1,32 +1,20 @@
-import { useState } from 'react'
-
-import { Text, Pressable, View } from 'react-native'
+import { Text, TouchableOpacity } from 'react-native'
 
 import IconCopy from 'app/assets/images/iconCopy2.svg'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
-import { zIndex } from 'app/utils/zIndex'
 
 const messages = {
   copy: 'Copy Message'
 }
 
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
-  copyPressableContainer: {
+  root: {
     position: 'absolute',
-    dipslay: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing(1.5),
-    zIndex: zIndex.CHAT_REACTIONS_POPUP_CONTENT
-  },
-  copyAnimatedContainer: {
-    dipslay: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    gap: spacing(1.5),
-    zIndex: zIndex.CHAT_REACTIONS_POPUP_CONTENT
+    gap: spacing(1.5)
   },
   copyText: {
     fontSize: typography.fontSize.xs,
@@ -51,29 +39,22 @@ export const CopyMessagesButton = ({
   onPress
 }: CopyMessagesButtonProps) => {
   const styles = useStyles()
-  const { white } = useThemeColors()
-  const [isPressed, setIsPressed] = useState(false)
+  const { staticWhite } = useThemeColors()
 
   return (
-    <Pressable
+    <TouchableOpacity
       onPress={onPress}
-      onPressIn={() => setIsPressed(true)}
-      onPressOut={() => setIsPressed(false)}
       style={[
-        styles.copyPressableContainer,
+        styles.root,
         {
           top: messageTop - containerTop + messageHeight + spacing(5),
           right: isAuthor ? spacing(6) : undefined,
           left: isAuthor ? undefined : spacing(6)
         }
       ]}
     >
-      <View
-        style={[styles.copyAnimatedContainer, { opacity: isPressed ? 0.5 : 1 }]}
-      >
-        <IconCopy fill={white} height={12} width={12} />
-        <Text style={styles.copyText}>{messages.copy}</Text>
-      </View>
-    </Pressable>
+      <IconCopy fill={staticWhite} height={12} width={12} />
+      <Text style={styles.copyText}>{messages.copy}</Text>
+    </TouchableOpacity>
   )
 }
diff --git a/packages/mobile/src/screens/chat-screen/ReactionPopup.tsx b/packages/mobile/src/screens/chat-screen/ReactionPopup.tsx
@@ -42,7 +42,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   },
   popupContainer: {
     position: 'absolute',
-    display: 'flex',
     zIndex: zIndex.CHAT_REACTIONS_POPUP_CLOSE_PRESSABLES,
     overflow: 'hidden'
   },
@@ -75,25 +74,8 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   emoji: {
     height: spacing(17)
   },
-  copyPressableContainer: {
-    position: 'absolute',
-    dipslay: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing(1.5),
-    zIndex: zIndex.CHAT_REACTIONS_POPUP_CONTENT
-  },
-  copyAnimatedContainer: {
-    dipslay: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing(1.5),
+  copyContainer: {
     zIndex: zIndex.CHAT_REACTIONS_POPUP_CONTENT
-  },
-  copyText: {
-    fontSize: typography.fontSize.xs,
-    fontFamily: typography.fontByWeight.bold,
-    color: palette.white
   }
 }))
 
@@ -217,7 +199,9 @@ export const ReactionPopup = ({
           ]}
           handleClosePopup={handleClosePopup}
         />
-        <Animated.View style={{ opacity: otherOpacityAnim }}>
+        <Animated.View
+          style={[styles.copyContainer, { opacity: otherOpacityAnim }]}
+        >
           <CopyMessagesButton
             isAuthor={isAuthor}
             messageTop={messageTop}