[MM-26465] Background and general layout for cloud onboarding

[devinbinnie]

Summary

Basic background and layout for the cloud onboarding screen for both Admin and End-User.
Currently on by default, logic to turn on based on first-use to come in a future PR. Here for UX/CSS review.

Ticket Link

https://mattermost.atlassian.net/browse/MM-26465

[matthewbirtch]

Hey @devinbinnie, this is looking great. First pass on the review and a few things I'm thinking we could tweak:

1. I think we can hide the Mattermost logo at breakpoints below 1000 (ish). It interferes with the text to the left.

2. On mobile screen widths can we center the background image horizontally?

3. Can we set a min-width (192px) on this image? It scales down a bit too small. It's ok if the right side gets more obscured

[jwilander]

Looks good - just some minor comments

[stevemudie]

This looks better concerning the logo vanishing (as to not interfere with the text on the left) but the desktop image acts odd nearly vanishing off screen before popping back in as the window gets narrowed further.

I know people won't likely drag it to size like I did but is it a concern or no?

[devinbinnie]

This looks better concerning the logo vanishing (as to not interfere with the text on the left) but the desktop image acts odd nearly vanishing off screen before popping back in as the window gets narrowed further.

I know people won't likely drag it to size like I did but is it a concern or no?

@matthewbirtch had asked me to remove the logo in tablet view so that the text doesn't get too squished. I'm guessing people won't be resizing their window like that too often, so I think we're okay.

[matthewbirtch]

@devinbinnie @stevemudie we can probably just hide the illustration at the same breakpoint we are hiding the logo.

[stevemudie]

Looks great!

[deanwhillier]

Okay, looking good so far. A couple initial things off the bat and then onto looking at the code for a deeper review.

1. 768px and below, the background wave is currently anchored to the top of the screen. This should be changed so it stays anchored to the bottom (I double checked with Matt).
   

2. The MM logo in the top right corner should always be aligned with the text to the left such that the baseline of the "Mattermost" part of the logo is in line with the baseline of the "Welcome to Mattermost" part of the heading. Currently the logo is vertically centred with the text of the full heading making it jump up/down when the text to the left wraps/unwraps pushing the logo down too far.

   What I'm seeing:

   

   Where it should be:

   

3. We should use semantic markup for the HTML. I would:

   • change the . NextStepsView's <div> to a <section> tag (I'm tempted to use <main> but this isn't a self-contained webpage).
   • change the .NextStepsView__header's <div> to a <header> tag
   • use an <h1> for the large heading text and an <h2> for the smaller heading text. (I wish <hgroup> hadn't been removed 😛)
   • possibly use a further <section> tag to replace the <div> for .NextStepsView__body, but I'm 0/5 on that one

[deanwhillier]

A few things to consider below.

Also, a mobile first approach typically starts with the mobile view as the default and then using media query breakpoints with min-width; ###, adjusts the layout etc as you work up to the desktop view. I'm 0/5 on whether you should change your approach here, just mentioning as this can be a bit easier in the long run.

[deanwhillier]

From my comment above:

Suggested change

	<div
	id='app-content'
	className='app__content NextStepsView'
	>
	<div className='NextStepsView__header'>
	<div className='NextStepsView__header-headerText'>
	<div className='NextStepsView__header-headerTopText'>
	<FormattedMessage
	id='next_steps_view.welcomeToMattermost'
	defaultMessage='Welcome to Mattermost'
	/>
	</div>
	<div className='NextStepsView__header-headerBottomText'>
	{this.getBottomText()}
	</div>
	</div>
	<div className='NextStepsView__header-logo'>
	<img src={this.getLogo()}/>
	</div>
	</div>
	<div className='NextStepsView__body'>
	<div className='NextStepsView__body-main'/>
	<div className='NextStepsView__body-graphic'/>
	</div>
	</div>
	<section
	id='app-content'
	className='app__content NextStepsView'
	>
	<header className='NextStepsView__header'>
	<div className='NextStepsView__header-headerText'>
	<h1 className='NextStepsView__header-headerTopText'>
	<FormattedMessage
	id='next_steps_view.welcomeToMattermost'
	defaultMessage='Welcome to Mattermost'
	/>
	</h1>
	<h2 className='NextStepsView__header-headerBottomText'>
	{this.getBottomText()}
	</h2>
	</div>
	<div className='NextStepsView__header-logo'>
	<img src={this.getLogo()}/>
	</div>
	</header>
	<div className='NextStepsView__body'>
	<div className='NextStepsView__body-main'/>
	<div className='NextStepsView__body-graphic'/>
	</div>
	</section>

[devinbinnie]

@matthewbirtch @deanwhillier Can you guys review ASAP? I have other PRs that are dependent on this one.

[matthewbirtch]

• 768px and below, the background wave is currently anchored to the top of the screen. This should be changed so it stays anchored to the bottom (I double checked with Matt).
  
• The MM logo in the top right corner should always be aligned with the text to the left such that the baseline of the "Mattermost" part of the logo is in line with the baseline of the "Welcome to Mattermost" part of the heading. Currently the logo is vertically centred with the text of the full heading making it jump up/down when the text to the left wraps/unwraps pushing the logo down too far.
  What I'm seeing:
  
  Where it should be:
  

@devinbinnie I'm not seeing things updated based on the previous visual review from @deanwhillier

[devinbinnie]

• 768px and below, the background wave is currently anchored to the top of the screen. This should be changed so it stays anchored to the bottom (I double checked with Matt).
  
• The MM logo in the top right corner should always be aligned with the text to the left such that the baseline of the "Mattermost" part of the logo is in line with the baseline of the "Welcome to Mattermost" part of the heading. Currently the logo is vertically centred with the text of the full heading making it jump up/down when the text to the left wraps/unwraps pushing the logo down too far.
  What I'm seeing:
  
  Where it should be:
  

@devinbinnie I'm not seeing things updated based on the previous visual review from @deanwhillier

@matthewbirtch Sorry, you need to wait for the Mattermost test server updated with git commit message from mm-cloud-bot to pop up before you see the changes.

[devinbinnie]

@matthewbirtch @deanwhillier Should be ready now.

[matthewbirtch]

Looks great @devinbinnie. Thanks! I think you've resolved the remaining visual issues identified

[deanwhillier]

LGTM!

[mm-cloud-bot]

Test server destroyed

[mm-cloud-bot]

Test server destroyed