[MPDX-8088] Create setup start page

[canac]

Description

• Created a setup start page at /setup/start that lets the user pick their language.
• A future PR will handle automatically detecting when the user needs to start the setup tour.
• Added environment variables to Amplify.

https://jira.cru.org/browse/MPDX-8088

Checklist:

• I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
• I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
• I have requested a review from another person on the project

[github-actions]

Preview branch generated at https://8088-setup-start-page.d3dytjb8adxkk5.amplifyapp.com

[github-actions]

Bundle sizes [mpdx-react]

Compared against 9c76c5c

Route	Size (gzipped)	Diff
/setup/start	94.55 KB	added

[dr-bizz]

The code looks great! It still needs work on the design as it looks a little off compared to the rest of the design on MPDX.

[canac]

The code looks great! It still needs work on the design as it looks a little off compared to the rest of the design on MPDX.

@dr-bizz I don't disagree that there's room for improvement. Let me know if you have any specific suggestions.

@j2trumpet Do you have any ideas for improving the design? I could put it in a card and/or add a blue background, but I'm at a loss besides those ideas. The Angular version looks like the screenshot in this ticket.

[j2trumpet]

Nothing jumps out at me as looking bad. Looking at the Jira ticket, it looks like this screen is all the content on the page rather than a modal appearing over other content. Are there other screens during the account/app setup process that this language screen could be styled like?

[canac]

Are there other screens during the account/app setup process that this language screen could be styled like?

@j2trumpet The connect organization screen looks similar (https://jira.cru.org/browse/MPDX-8089). I'll definitely make these two screens look similar.

[canac]

@dr-bizz I made the setup content a Card on a blue background. Let me know what you think.

[dr-bizz]

I like the changes you made, it's starting to look great. I still think there is some room for improvement.

What are your thoughts to making it like this:

[canac]

@dr-bizz Does your comment on the other PR list the styles you changed to get that screenshot? I see you also made the button full-width. Did you change anything else?

Header text: font-size: 2.75rem
Icon colour: primary
Paragraph - max-width: 500px
Card max-width: 580px

[dr-bizz]

@dr-bizz Does your comment on the other PR list the styles you changed to get that screenshot? I see you also made the button full-width. Did you change anything else?

Header text: font-size: 2.75rem
Icon colour: primary
Paragraph - max-width: 500px
Card max-width: 580px

I also made all the input and paragraphs in line with one another. But I think that is it.

[dr-bizz]

Looks awesome! Great job

[dr-bizz]

Oh just thought on the start pages, is it worth changing the colout of the help icon to something other than blue so it's more visible? - just a thought

[canac]

Oh just thought on the start pages, is it worth changing the colout of the help icon to something other than blue so it's more visible? - just a thought

Good idea. We're switching to HelpJuice pretty soon (I was working on the PR yesterday), and the HelpJuice beacon color is more different from the MPDX background color, so I'll probably leave it as-is if that's OK. And if the contrast doesn't end up being good enough, I can after that.