Design adjustments for the Hold/Next Steps/Scanning/Pending message

[shawnborton]

We'd like to make a few design adjustments to the Next Steps banner pattern we have. The adjustments should look like this:

• fixed badge width of 68px for better alignment on mobile
• use smaller font size (micro size at 11px) for the badge label
• use smaller font size (label size at 13px) for the next steps text
• use textSupporting color for the next steps text
• always put next step banner at the bottom of the header area, the primary button would go above this on mobile

cc @mountiny @JmillsExpensify @Expensify/design

Issue Owner

Current Issue Owner: @sophiepintoraetz

[melvin-bot]

Triggered auto assignment to @sophiepintoraetz (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[mountiny]

Asking in Slack which Callstack engineer can take this one

[rezkiy37]

Hi, I’m Michael (Mykhailo) from Callstack and I would like to work on this issue.

[mountiny]

Michael can start working on this on Wednesday

[rezkiy37]

Gonna to kick off on Wednesday.

[rezkiy37]

I've started working on the issue. Already have some drafts, will share soon.

[rezkiy37]

One thing that currently in the app there is only "Next Steps" message, so I am applying design adjustments for this.