[C-2536] Fix track name cutoff (#4019)

AudiusProject · Sep 6, 2023 · 16c805e · 16c805e
1 parent 92e8d52
commit 16c805e
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 50 deletions.
diff --git a/packages/mobile/src/components/core/Text.tsx b/packages/mobile/src/components/core/Text.tsx
@@ -21,6 +21,7 @@ export type TextProps = RNTextProps & {
   weight?: FontWeight
   fontSize?: FontSize | 'inherit'
   textTransform?: TextStyle['textTransform']
+  allowNewline?: boolean
 }
 
 const useStyles = makeStyles(({ typography, palette }) => ({
@@ -41,6 +42,8 @@ export const Text = (props: TextProps) => {
     weight,
     fontSize: fontSizeProp,
     textTransform,
+    children: childrenProp,
+    allowNewline,
     ...other
   } = props
   const variant = variantProp ?? 'body'
@@ -85,5 +88,14 @@ export const Text = (props: TextProps) => {
     ]
   )
 
-  return <RNText style={[styles.root, customStyles, style]} {...other} />
+  const children =
+    typeof childrenProp === 'string' && !allowNewline
+      ? childrenProp.replace('\n', ' ')
+      : childrenProp
+
+  return (
+    <RNText style={[styles.root, customStyles, style]} {...other}>
+      {children}
+    </RNText>
+  )
 }
diff --git a/packages/mobile/src/components/delete-chat-drawer/DeleteChatDrawer.tsx b/packages/mobile/src/components/delete-chat-drawer/DeleteChatDrawer.tsx
@@ -91,7 +91,9 @@ export const DeleteChatDrawer = () => {
           <IconTrash fill={neutralLight2} />
           <Text style={styles.title}>{messages.title}</Text>
         </View>
-        <Text style={styles.confirm}>{messages.description}</Text>
+        <Text style={styles.confirm} allowNewline>
+          {messages.description}
+        </Text>
         <Button
           title={messages.deleteButton}
           onPress={handleConfirmPress}

diff --git a/packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx b/packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx
@@ -6,15 +6,13 @@ import { TouchableOpacity, View } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import IconVolume from 'app/assets/images/iconVolume.svg'
-import Text from 'app/components/text'
+import { Text, FadeInView } from 'app/components/core'
 import UserBadges from 'app/components/user-badges'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
 import { useThemeColors } from 'app/utils/theme'
 
-import { FadeInView } from '../core'
-
 import { LineupTileArt } from './LineupTileArt'
 import { useStyles as useTrackTileStyles } from './styles'
 import type { LineupTileProps } from './types'
@@ -25,15 +23,6 @@ const useStyles = makeStyles(({ palette }) => ({
   metadata: {
     flexDirection: 'row'
   },
-  titlesActive: {
-    color: palette.primary
-  },
-  titlesPressed: {
-    textDecorationLine: 'underline'
-  },
-  titleText: {
-    fontSize: 16
-  },
   playingIndicator: {
     marginLeft: 8
   },
@@ -104,7 +93,7 @@ export const LineupTileMetadata = ({
         <TouchableOpacity style={trackTileStyles.title} onPress={onPressTitle}>
           <>
             <Text
-              style={[styles.titleText, isActive && styles.titlesActive]}
+              color={isActive ? 'primary' : 'neutral'}
               weight='bold'
               numberOfLines={1}
             >
@@ -119,21 +108,19 @@ export const LineupTileMetadata = ({
           style={trackTileStyles.artist}
           onPress={handleArtistPress}
         >
-          <>
-            <Text
-              style={[styles.titleText, isActive && styles.titlesActive]}
-              weight='medium'
-              numberOfLines={1}
-            >
-              {artistName}
-            </Text>
-            <UserBadges
-              user={user}
-              badgeSize={12}
-              style={styles.badge}
-              hideName
-            />
-          </>
+          <Text
+            color={isActive ? 'primary' : 'neutral'}
+            weight='medium'
+            numberOfLines={1}
+          >
+            {artistName}
+          </Text>
+          <UserBadges
+            user={user}
+            badgeSize={12}
+            style={styles.badge}
+            hideName
+          />
         </TouchableOpacity>
       </FadeInView>
       {coSign && (

diff --git a/packages/mobile/src/components/offline-placeholder/OfflinePlaceholder.tsx b/packages/mobile/src/components/offline-placeholder/OfflinePlaceholder.tsx
@@ -9,7 +9,12 @@ import { Button, Text, Tile } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 
-import { messages } from './messages'
+const messages = {
+  reloading: (isReloading: boolean) =>
+    isReloading ? 'Reloading...' : 'Reload',
+  title: `You’re Offline`,
+  subtitle: `We Couldn’t Load the Page.\nConnect to the Internet and Try Again.`
+}
 
 const useStyles = makeStyles(({ typography, spacing }) => ({
   button: {
@@ -59,7 +64,9 @@ export const OfflinePlaceholder = (props: OfflinePlaceholderProps) => {
     <View style={styles.container}>
       <IconNoWifi fill={neutralLight4} />
       <Text style={styles.header}>{messages.title}</Text>
-      <Text style={styles.subHeading}>{messages.subtitle}</Text>
+      <Text style={styles.subHeading} allowNewline>
+        {messages.subtitle}
+      </Text>
       <Button
         title={messages.reloading(isRefreshing)}
         disabled={isRefreshing}

diff --git a/packages/mobile/src/components/offline-placeholder/messages.ts b/packages/mobile/src/components/offline-placeholder/messages.ts
diff --git a/packages/mobile/src/screens/chat-screen/ChatListScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatListScreen.tsx
@@ -81,7 +81,7 @@ const ChatsEmpty = ({ onPress }: { onPress: () => void }) => {
       <Text style={styles.startConversationTitle} fontSize='xxl' weight='bold'>
         {messages.startConversation}
       </Text>
-      <Text style={styles.connect} fontSize='medium'>
+      <Text style={styles.connect} fontSize='medium' allowNewline>
         {messages.connect}
       </Text>
       <Button

diff --git a/packages/mobile/src/screens/search-screen/SearchResults/SearchItem.tsx b/packages/mobile/src/screens/search-screen/SearchResults/SearchItem.tsx
@@ -2,12 +2,13 @@ import { useCallback } from 'react'
 
 import { SquareSizes } from '@audius/common'
 import type { SearchPlaylist, SearchTrack, SearchUser } from '@audius/common'
-import { View, Text } from 'react-native'
+import { View } from 'react-native'
 import { useDispatch } from 'react-redux'
 
+import { Text } from 'app/components/core'
 import { CollectionImage } from 'app/components/image/CollectionImage'
 import { TrackImage } from 'app/components/image/TrackImage'
-import { UserImage } from 'app/components/image/UserImage'
+import { ProfilePicture } from 'app/components/user'
 import UserBadges from 'app/components/user-badges/UserBadges'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { addItem } from 'app/store/search/searchSlice'
@@ -58,11 +59,7 @@ const UserSearchResult = (props: UserSearchResultProps) => {
 
   return (
     <SearchResultItem onPress={handlePress}>
-      <UserImage
-        user={user}
-        style={styles.userImage}
-        size={SquareSizes.SIZE_150_BY_150}
-      />
+      <ProfilePicture profile={user} style={styles.userImage} />
       <UserBadges
         style={styles.badgeContainer}
         nameStyle={styles.name}
@@ -98,7 +95,7 @@ const TrackSearchResult = (props: TrackSearchResultProps) => {
         style={styles.squareImage}
       />
       <View style={styles.nameContainer}>
-        <Text numberOfLines={1} style={styles.name}>
+        <Text numberOfLines={1} variant='body'>
           {track.title}
         </Text>
         <UserBadges
@@ -136,7 +133,7 @@ const PlaylistSearchResult = (props: PlaylistSearchResultProps) => {
         style={styles.squareImage}
       />
       <View style={styles.nameContainer}>
-        <Text numberOfLines={1} style={styles.name}>
+        <Text numberOfLines={1} variant='body'>
           {playlist.playlist_name}
         </Text>
         <UserBadges
@@ -174,7 +171,7 @@ const AlbumSearchResult = (props: AlbumSearchResultProps) => {
         style={styles.squareImage}
       />
       <View style={styles.nameContainer}>
-        <Text numberOfLines={1} style={styles.name}>
+        <Text numberOfLines={1} variant='body'>
           {album.playlist_name}
         </Text>
         <UserBadges

diff --git a/packages/mobile/src/screens/tip-artist-screen/SendTipStatusText.tsx b/packages/mobile/src/screens/tip-artist-screen/SendTipStatusText.tsx
@@ -29,7 +29,7 @@ export const SendTipStatusText = () => {
     return (
       <View>
         <DescriptionText>{messages.maintenance}</DescriptionText>
-        <DescriptionText>
+        <DescriptionText allowNewline>
           {messages.fewMinutes} {'\n'}
           {messages.holdOn}
         </DescriptionText>