[PAY-1399] Fix Android chat send button color (#3575)

AudiusProject · Jun 13, 2023 · 90cf51a · 90cf51a
1 parent ffd2ea3
commit 90cf51a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/apps/audius-client/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx b/apps/audius-client/packages/mobile/src/screens/chat-screen/ChatTextInput.tsx
@@ -8,14 +8,12 @@ import IconSend from 'app/assets/images/iconSend.svg'
 import { TextInput } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
+import { convertHexToRGBA } from 'app/utils/convertHexToRGBA'
 import { useThemeColors } from 'app/utils/theme'
 
 const { sendMessage } = chatActions
 const { getHasTrack } = playerSelectors
 
-const ICON_BLUR = 0.5
-const ICON_FOCUS = 1
-
 const messages = {
   startNewMessage: ' Start a New Message'
 }
@@ -80,15 +78,23 @@ export const ChatTextInput = ({
       style={({ pressed }) => [
         styles.iconCircle,
         {
-          backgroundColor: pressed && hasLength ? primaryDark2 : primary,
-          opacity: hasLength ? ICON_FOCUS : ICON_BLUR
+          backgroundColor: hasLength
+            ? pressed
+              ? primaryDark2
+              : primary
+            : // Setting opacity style affects both the background and icon
+              // on Android, this workaround keeps the icon always white.
+              convertHexToRGBA(primary, 50)
         }
       ]}
     >
       <IconSend
+        style={{ opacity: 1 }}
         width={styles.icon.width}
         height={styles.icon.height}
         fill={styles.icon.fill}
+        color={styles.icon.fill}
+        opacity={1}
       />
     </Pressable>
   )

diff --git a/apps/audius-client/packages/mobile/src/utils/convertHexToRGBA.ts b/apps/audius-client/packages/mobile/src/utils/convertHexToRGBA.ts
@@ -14,5 +14,5 @@ export const convertHexToRGBA = (hexCode, opacity = 1) => {
     opacity = opacity / 100
   }
 
-  return `rgba(${r},${g},${b},${1})`
+  return `rgba(${r},${g},${b},${opacity})`
 }