From f75961876aff1f6eb9dc3fec5430f7cd614c6854 Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Tue, 13 Jul 2021 15:46:25 -0700
Subject: [PATCH] Fix display of report typing indicator and participant local
 time

---
 src/languages/en.js                           |  3 +-
 src/languages/es.js                           |  3 +-
 src/pages/home/report/ParticipantLocalTime.js | 31 ++++++++++---------
 .../home/report/ReportTypingIndicator.js      | 14 ++++++---
 src/styles/styles.js                          |  8 +++++
 5 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 8ed303938417..2e2f6857f118 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -57,6 +57,8 @@ export default {
         notifications: 'Notifications',
         noResultsFound: 'No results found',
         deletedCommentMessage: 'Comment deleted',
+        timePrefix: 'It\'s',
+        conjunctionFor: 'for',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',
@@ -106,7 +108,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}`,
     },
     contextMenuItem: {
         copyToClipboard: 'Copy to Clipboard',
diff --git a/src/languages/es.js b/src/languages/es.js
index 35f9e620b953..1c3a8fdfd367 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -53,6 +53,8 @@ export default {
         notifications: 'Notificaciones',
         noResultsFound: 'No se han encontrado resultados',
         deletedCommentMessage: 'Comentario borrado',
+        timePrefix: 'Son las',
+        conjunctionFor: 'para',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',
@@ -101,7 +103,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
index 6876ffeb32c8..595ccb40ae29 100644
--- 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
index 65d70e39b8b9..d12fdd35d032 100755
--- 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
index d28ae33337af..b98e7c3924f3 100644
--- 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,
     },