Merge pull request #32561 from rezkiy37/feature/32434-design-adjustme…

…nts-next-step Design adjustments for the Next Steps message
Expensify · Dec 11, 2023 · 92662c8 · 92662c8
2 parents 1dd07e6 + e680da7
commit 92662c8
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 11 deletions.
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -60,8 +60,12 @@ function BaseHTMLEngineProvider(props) {
             }),
             'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
             'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
+            'next-steps': defaultHTMLElementModels.span.extend({
+                tagName: 'next-steps',
+                mixedUAStyles: {...styles.textLabelSupporting},
+            }),
         }),
-        [styles.colorMuted, styles.formError, styles.mb0],
+        [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting],
     );
 
     // We need to memoize this prop to make it referentially stable.

diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
@@ -149,11 +149,6 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
                 )}
             </HeaderWithBackButton>
             <View style={isMoreContentShown ? [styles.dFlex, styles.flexColumn, styles.borderBottom] : []}>
-                {shouldShowNextSteps && (
-                    <View style={[styles.ph5, styles.pb2]}>
-                        <MoneyReportHeaderStatusBar nextStep={nextStep} />
-                    </View>
-                )}
                 {shouldShowSettlementButton && isSmallScreenWidth && (
                     <View style={[styles.ph5, styles.pb2]}>
                         <SettlementButton
@@ -190,6 +185,11 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
                         />
                     </View>
                 )}
+                {shouldShowNextSteps && (
+                    <View style={[styles.ph5, styles.pb3]}>
+                        <MoneyReportHeaderStatusBar nextStep={nextStep} />
+                    </View>
+                )}
             </View>
         </View>
     );

diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js
@@ -27,7 +27,7 @@ function MoneyReportHeaderStatusBar({nextStep}) {
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100]}>
             <View style={styles.moneyRequestHeaderStatusBarBadge}>
-                <Text style={[styles.textStrong, styles.textLabel]}>{translate('iou.nextSteps')}</Text>
+                <Text style={[styles.textLabel, styles.textMicroBold]}>{translate('iou.nextSteps')}</Text>
             </View>
             <View style={[styles.dFlex, styles.flexRow, styles.flexShrink1]}>
                 <RenderHTML html={messageContent} />

diff --git a/src/components/MoneyRequestHeaderStatusBar.js b/src/components/MoneyRequestHeaderStatusBar.js
@@ -21,7 +21,7 @@ function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.overflowHidden, styles.ph5, styles.pb3, borderBottomStyle]}>
             <View style={[styles.moneyRequestHeaderStatusBarBadge]}>
-                <Text style={[styles.textStrong, styles.textLabel]}>{title}</Text>
+                <Text style={[styles.textStrong, styles.textMicroBold]}>{title}</Text>
             </View>
             <View style={[styles.flexShrink1]}>
                 <Text style={[styles.textLabelSupporting]}>{description}</Text>

diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
@@ -14,10 +14,12 @@ function parseMessage(messages: Message[] | undefined) {
         nextStepHTML += `<${tagType}>${Str.safeEscape(part.text)}</${tagType}>`;
     });
 
-    return nextStepHTML
+    const formattedHtml = nextStepHTML
         .replace(/%expenses/g, 'this expense')
         .replace(/%Expenses/g, 'This expense')
         .replace(/%tobe/g, 'is');
+
+    return `<next-steps>${formattedHtml}</next-steps>`;
 }
 
 // eslint-disable-next-line import/prefer-default-export

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -3781,9 +3781,9 @@ const styles = (theme: ThemeColors) =>
         },
 
         moneyRequestHeaderStatusBarBadge: {
-            paddingHorizontal: 8,
-            borderRadius: variables.componentBorderRadiusSmall,
+            width: 68,
             height: variables.inputHeightSmall,
+            borderRadius: variables.componentBorderRadiusSmall,
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',