From b5b8ef4b3609b08993dcc6b377642af7c4a03a44 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Tue, 5 Dec 2023 17:56:29 +0100 Subject: [PATCH 1/6] restyle badge label --- src/components/MoneyReportHeaderStatusBar.js | 2 +- src/styles/styles.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js index 3f2c06be78cf..48f3bf227763 100644 --- a/src/components/MoneyReportHeaderStatusBar.js +++ b/src/components/MoneyReportHeaderStatusBar.js @@ -27,7 +27,7 @@ function MoneyReportHeaderStatusBar({nextStep}) { return ( - {translate('iou.nextSteps')} + {translate('iou.nextSteps')} diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 983f1ba82caa..2be9df1e7e73 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -3773,9 +3773,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', From 7b696937a3afece36c4a521086c62bf050dc2251 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Tue, 5 Dec 2023 18:00:33 +0100 Subject: [PATCH 2/6] move status bar down --- src/components/MoneyReportHeader.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index 880e46b2592a..e0324f9f0332 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -149,11 +149,6 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt )} - {shouldShowNextSteps && ( - - - - )} {shouldShowSettlementButton && isSmallScreenWidth && ( )} + {shouldShowNextSteps && ( + + + + )} ); From c786e748a53a39812b5d00d9a745ed957f8323eb Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Wed, 6 Dec 2023 13:18:54 +0100 Subject: [PATCH 3/6] integrate a custom tag to style next step --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js | 6 +++++- src/libs/NextStepUtils.js | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index 8cddd3c017de..737ec10eab80 100755 --- 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: 'mention-here', + 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/libs/NextStepUtils.js b/src/libs/NextStepUtils.js index 303f9b2a9925..c1e18dc6f2fb 100644 --- a/src/libs/NextStepUtils.js +++ b/src/libs/NextStepUtils.js @@ -9,10 +9,12 @@ function parseMessage(messageToParse) { nextStepHTML += `<${tagType}>${Str.safeEscape(part.text)}`; }); - return nextStepHTML + const formattedHtml = nextStepHTML .replace(/%expenses/g, 'this expense') .replace(/%Expenses/g, 'This expense') .replace(/%tobe/g, 'is'); + + return `${formattedHtml}`; } // eslint-disable-next-line import/prefer-default-export From 7e246b4e71474984745a30e40c384314c6eed4d7 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 7 Dec 2023 19:33:27 +0100 Subject: [PATCH 4/6] increased bottom padding --- src/components/MoneyReportHeader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js index e0324f9f0332..8bf180018afb 100644 --- a/src/components/MoneyReportHeader.js +++ b/src/components/MoneyReportHeader.js @@ -186,7 +186,7 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt )} {shouldShowNextSteps && ( - + )} From 8d4c0c865081d2d96543fa5139cda15eae4d31c1 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 8 Dec 2023 14:06:17 +0100 Subject: [PATCH 5/6] apply same styles for MoneyRequestHeaderStatusBar --- src/components/MoneyRequestHeaderStatusBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestHeaderStatusBar.js b/src/components/MoneyRequestHeaderStatusBar.js index fc91678cf6fb..e50b69cca1fe 100644 --- a/src/components/MoneyRequestHeaderStatusBar.js +++ b/src/components/MoneyRequestHeaderStatusBar.js @@ -21,7 +21,7 @@ function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom return ( - {title} + {title} {description} From 038c6bc0ee2d0defd37e196582fe620503681dfd Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 11 Dec 2023 10:59:03 +0100 Subject: [PATCH 6/6] fix tagName --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index 737ec10eab80..9a2d7c673c5b 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -61,7 +61,7 @@ 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: 'mention-here', + tagName: 'next-steps', mixedUAStyles: {...styles.textLabelSupporting}, }), }),