Merge pull request #4020 from Expensify/Rory-FixUserTypingIndicator

Fix display of report typing indicator and participant local time (cherry picked from commit 0639c67)
Expensify · Jul 14, 2021 · 53fd87c · 53fd87c
1 parent ef752cd
commit 53fd87c
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 20 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -56,6 +56,12 @@ export default {
         send: 'Send',
         notifications: 'Notifications',
         noResultsFound: 'No results found',
+<<<<<<< HEAD
+=======
+        deletedCommentMessage: 'Comment deleted',
+        timePrefix: 'It\'s',
+        conjunctionFor: 'for',
+>>>>>>> 0639c6771 (Merge pull request #4020 from Expensify/Rory-FixUserTypingIndicator)
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',
@@ -105,7 +111,6 @@ export default {
         blockedFromConcierge: 'Communication is barred',
         youAppearToBeOffline: 'You appear to be offline.',
         fileUploadFailed: 'Upload Failed. File is not supported.',
-        localTime: ({user, time}) => `It's ${time} for ${user}`,
     },
     reportActionContextMenu: {
         copyToClipboard: 'Copy to Clipboard',

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -52,6 +52,12 @@ export default {
         send: 'Enviar',
         notifications: 'Notificaciones',
         noResultsFound: 'No se han encontrado resultados',
+<<<<<<< HEAD
+=======
+        deletedCommentMessage: 'Comentario borrado',
+        timePrefix: 'Son las',
+        conjunctionFor: 'para',
+>>>>>>> 0639c6771 (Merge pull request #4020 from Expensify/Rory-FixUserTypingIndicator)
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',
@@ -100,7 +106,6 @@ export default {
         writeSomething: 'Escribe algo...',
         blockedFromConcierge: 'Comunicación no permitida',
         youAppearToBeOffline: 'Parece que estás desconectado.',
-        localTime: ({user, time}) => `Son las ${time} para ${user}`,
     },
     reportActionContextMenu: {
         copyToClipboard: 'Copiar al Portapapeles',

diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
@@ -58,21 +58,24 @@ class ParticipantLocalTime extends React.Component {
         return (
             isReportRecipientLocalTimeReady ? (
                 <View style={[styles.chatItemComposeSecondaryRow]}>
-                    <ExpensiText
-                        style={[
-                            styles.chatItemComposeSecondaryRowSubText,
-                            styles.chatItemComposeSecondaryRowOffset,
-                        ]}
-                        numberOfLines={1}
+                    <View style={[
+                        styles.chatItemComposeSecondaryRowOffset,
+                        styles.flexRow,
+                        styles.alignItemsCenter]}
                     >
-                        {this.props.translate(
-                            'reportActionCompose.localTime',
-                            {
-                                user: reportRecipientDisplayName,
-                                time: this.state.localTime,
-                            },
-                        )}
-                    </ExpensiText>
+                        <ExpensiText style={[styles.chatItemComposeSecondaryRowSubText, styles.mr1]}>
+                            {this.props.translate('common.timePrefix')}
+                        </ExpensiText>
+                        <ExpensiText style={[styles.textMicroSupportingBold, styles.mr1]}>
+                            {this.state.localTime}
+                        </ExpensiText>
+                        <ExpensiText style={[styles.chatItemComposeSecondaryRowSubText, styles.mr1]}>
+                            {this.props.translate('common.conjunctionFor')}
+                        </ExpensiText>
+                        <ExpensiText style={[styles.textMicroSupportingBold]}>
+                            {reportRecipientDisplayName}
+                        </ExpensiText>
+                    </View>
                 </View>
             )
                 : <View style={[styles.chatItemComposeSecondaryRow]} />

diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
@@ -59,7 +59,9 @@ class ReportTypingIndicator extends React.Component {
                             styles.chatItemComposeSecondaryRowOffset,
                         ]}
                         >
-                            <Text style={[styles.textStrong]}>{getDisplayName(this.state.usersTyping[0])}</Text>
+                            <Text style={[styles.textMicroSupportingBold]}>
+                                {getDisplayName(this.state.usersTyping[0])}
+                            </Text>
                             {` ${this.props.translate('reportTypingIndicator.isTyping')}`}
                         </Text>
                     </View>
@@ -72,9 +74,13 @@ class ReportTypingIndicator extends React.Component {
                             styles.chatItemComposeSecondaryRowOffset,
                         ]}
                         >
-                            <Text style={[styles.textStrong]}>{getDisplayName(this.state.usersTyping[0])}</Text>
+                            <Text style={[styles.textMicroSupportingBold]}>
+                                {getDisplayName(this.state.usersTyping[0])}
+                            </Text>
                             {` ${this.props.translate('common.and')} `}
-                            <Text style={[styles.textStrong]}>{getDisplayName(this.state.usersTyping[1])}</Text>
+                            <Text style={[styles.textMicroSupportingBold]}>
+                                {getDisplayName(this.state.usersTyping[1])}
+                            </Text>
                             {` ${this.props.translate('reportTypingIndicator.areTyping')}`}
                         </Text>
                     </View>
@@ -87,7 +93,7 @@ class ReportTypingIndicator extends React.Component {
                             styles.chatItemComposeSecondaryRowOffset,
                         ]}
                         >
-                            <Text style={[styles.textStrong]}>
+                            <Text style={[styles.textMicroSupportingBold]}>
                                 {this.props.translate('reportTypingIndicator.multipleUsers')}
                             </Text>
                             {` ${this.props.translate('reportTypingIndicator.areTyping')}`}

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -82,6 +82,14 @@ const styles = {
         lineHeight: 14,
     },
 
+    textMicroSupportingBold: {
+        color: themeColors.textSupporting,
+        fontFamily: fontFamily.GTA_BOLD,
+        fontWeight: fontWeightBold,
+        fontSize: variables.fontSizeSmall,
+        lineHeight: 14,
+    },
+
     textLarge: {
         fontSize: variables.fontSizeLarge,
     },