Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design adjustments for the Next Steps message #32561

Merged
merged 10 commits into from
Dec 11, 2023
Merged

Design adjustments for the Next Steps message #32561

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b5b8ef4
restyle badge label
rezkiy37 Dec 5, 2023
7b69693
move status bar down
rezkiy37 Dec 5, 2023
979c12e
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…
rezkiy37 Dec 6, 2023
c786e74
integrate a custom tag to style next step
rezkiy37 Dec 6, 2023
2870ef0
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…
rezkiy37 Dec 7, 2023
55122f6
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…
rezkiy37 Dec 7, 2023
7e246b4
increased bottom padding
rezkiy37 Dec 7, 2023
8d4c0c8
apply same styles for MoneyRequestHeaderStatusBar
rezkiy37 Dec 8, 2023
038c6bc
fix tagName
rezkiy37 Dec 11, 2023
e680da7
Merge branch 'main' of https://github.com/rezkiy37/Expensify into fea…
rezkiy37 Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
10 changes: 5 additions & 5 deletions src/components/MoneyReportHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/MoneyReportHeaderStatusBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/MoneyRequestHeaderStatusBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/libs/NextStepUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ function parseMessage(messageToParse) {
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
Expand Down
4 changes: 2 additions & 2 deletions src/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3775,9 +3775,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',
Expand Down