Use Text component in mobile DMs

packages/mobile/src/screens/chat-screen/ChatMessageSeparator.tsx

@@ -1,5 +1,6 @@
-import { View, Text } from 'react-native'
+import { View } from 'react-native'
 
+import { Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
@@ -17,9 +18,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   },
   unreadTag: {
     color: palette.white,
-    fontSize: typography.fontSize.xxs,
-    fontFamily: typography.fontByWeight.bold,
-    textTransform: 'uppercase',
     letterSpacing: 0.5,
     backgroundColor: palette.neutralLight5,
     paddingHorizontal: spacing(2),
@@ -34,7 +32,14 @@ export const ChatMessageSeparator = ({ content }: { content: string }) => {
   return (
     <View style={styles.unreadTagContainer}>
       <View style={styles.unreadSeparator} />
-      <Text style={styles.unreadTag}>{content}</Text>
+      <Text
+        style={styles.unreadTag}
+        fontSize='xxs'
+        weight='bold'
+        textTransform='uppercase'
+      >
+        {content}
+      </Text>
       <View style={styles.unreadSeparator} />
     </View>
   )

packages/mobile/src/screens/chat-screen/ChatUnavailable.tsx

@@ -5,10 +5,10 @@ import {
   useCanSendMessage,
   CHAT_BLOG_POST_URL
 } from '@audius/common'
-import { View, Text } from 'react-native'
+import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
 
-import { useLink } from 'app/components/core'
+import { Text, useLink } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles } from 'app/styles'
@@ -31,9 +31,7 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   },
   unavailableText: {
     textAlign: 'center',
-    fontSize: typography.fontSize.medium,
-    lineHeight: typography.fontSize.medium * 1.3,
-    color: palette.neutral
+    lineHeight: typography.fontSize.medium * 1.3
   },
   link: {
     color: palette.secondary

packages/mobile/src/screens/chat-screen/ChatUserListItem.tsx

@@ -9,12 +9,13 @@ import {
   formatCount
 } from '@audius/common'
 import { useSelector } from 'audius-client/src/common/hooks/useSelector'
-import { Text, View, TouchableOpacity, Keyboard } from 'react-native'
+import { View, TouchableOpacity, Keyboard } from 'react-native'
 import { useDispatch } from 'react-redux'
 
 import IconBlockMessages from 'app/assets/images/iconBlockMessages.svg'
 import IconKebabHorizontal from 'app/assets/images/iconKebabHorizontal.svg'
 import IconUser from 'app/assets/images/iconUser.svg'
+import { Text } from 'app/components/core'
 import { ProfilePicture } from 'app/components/user'
 import { UserBadges } from 'app/components/user-badges'
 import { setVisibility } from 'app/store/drawers/slice'
@@ -76,7 +77,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     color: palette.neutral
   },
   followContainer: {
-    marginTop: spacing(1),
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -90,7 +90,8 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   followersContainer: {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
+    gap: spacing(1)
   },
   ctaContainer: {
     display: 'flex',
@@ -104,17 +105,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     paddingHorizontal: spacing(4),
     paddingVertical: spacing(1.5)
   },
-  followersCount: {
-    marginHorizontal: spacing(1),
-    color: palette.neutralLight4,
-    fontSize: typography.fontSize.small,
-    fontFamily: typography.fontByWeight.bold
-  },
-  followers: {
-    color: palette.neutralLight4,
-    fontSize: typography.fontSize.small,
-    fontFamily: typography.fontByWeight.medium
-  },
   iconUser: {
     height: spacing(4),
     width: spacing(4),
@@ -131,11 +121,7 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     fill: palette.neutral
   },
   followsYouTag: {
-    fontSize: typography.fontSize.xxs,
-    fontFamily: typography.fontByWeight.heavy,
     letterSpacing: 0.64,
-    textTransform: 'uppercase',
-    color: palette.neutralLight4,
     borderWidth: 1,
     borderRadius: spacing(1),
     borderColor: palette.neutralLight4,
@@ -239,10 +225,16 @@ export const ChatUserListItem = ({ userId }: ChatUserListItemProps) => {
                       height={styles.iconUser.height}
                       width={styles.iconUser.width}
                     />
-                    <Text style={styles.followersCount}>
+                    <Text fontSize='small' weight='bold' color='neutralLight4'>
                       {formatCount(user.follower_count)}
                     </Text>
-                    <Text style={styles.followers}>{messages.followers}</Text>
+                    <Text
+                      fontSize='small'
+                      color='neutralLight4'
+                      weight='medium'
+                    >
+                      {messages.followers}
+                    </Text>
                   </>
                 ) : (
                   <View style={styles.ctaContainer}>
@@ -258,7 +250,15 @@ export const ChatUserListItem = ({ userId }: ChatUserListItemProps) => {
                 )}
               </View>
               {user.does_follow_current_user && canCreateChat ? (
-                <Text style={styles.followsYouTag}>{messages.followsYou}</Text>
+                <Text
+                  fontSize='xxs'
+                  weight='heavy'
+                  color='neutralLight4'
+                  textTransform='uppercase'
+                  style={styles.followsYouTag}
+                >
+                  {messages.followsYou}
+                </Text>
               ) : null}
             </View>
           </View>

packages/mobile/src/screens/chat-screen/CopyMessagesButton.tsx

@@ -1,6 +1,7 @@
-import { Text, TouchableOpacity } from 'react-native'
+import { TouchableOpacity } from 'react-native'
 
 import IconCopy from 'app/assets/images/iconCopy2.svg'
+import { Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
@@ -54,7 +55,9 @@ export const CopyMessagesButton = ({
       ]}
     >
       <IconCopy fill={staticWhite} height={12} width={12} />
-      <Text style={styles.copyText}>{messages.copy}</Text>
+      <Text style={styles.copyText} fontSize='xs' weight='bold'>
+        {messages.copy}
+      </Text>
     </TouchableOpacity>
   )
 }

packages/mobile/src/screens/chat-screen/ResendMessageButton.tsx

@@ -1,10 +1,11 @@
 import { useCallback } from 'react'
 
 import { chatActions, chatSelectors } from '@audius/common'
-import { View, Text, TouchableOpacity } from 'react-native'
+import { View, TouchableOpacity } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 import IconError from 'app/assets/images/iconError.svg'
+import { Text } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 
@@ -24,7 +25,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     marginTop: spacing(2)
   },
   errorText: {
-    fontSize: typography.fontSize.xs,
     letterSpacing: 0.2,
     color: palette.accentRed
   },
@@ -71,7 +71,9 @@ export const ResendMessageButton = ({
           width={styles.iconError.width}
           height={styles.iconError.height}
         />
-        <Text style={styles.errorText}>{messages.error}</Text>
+        <Text style={styles.errorText} fontSize='xs'>
+          {messages.error}
+        </Text>
       </View>
     </TouchableOpacity>
   )