UI: Onboarding UI updates

[rumzledz]

Description

We now have a new sidebar for our Onboarding pages. We are now only handling 2 breakpoints for our Onboarding pages: sm and non-sm.

Testing

Note

The Feedback Button will be developed separately
The Colony Switcher UI will be completed separately

Colony Creation Flow

1. Run this command on your terminal to create a colony creation URL:

node scripts/create-colony-url.js

2. Open the URL it generates, it should take you to the Colony Creation flow
3. Set your browser width to at least 768px
4. Verify that the Sidebar matches the Figma designs
5. Set the browser width to 767px
6. Verify that the mobile view is still the same as it was
7. Click the Colony Icon on the Sidebar
8. Verify that the Colony Switcher appears and that you're still on the same page

Account Creation Flow

1. Connect Dev Wallet 16
2. On the Landing page, click "Create profile"
3. Set your browser width to at least 768px
4. Verify that the Sidebar matches the Figma designs
5. Set the browser width to 767px
6. Verify that the mobile view is still the same as it was
7. Click the Colony Icon on the Sidebar
8. Verify that the Colony Switcher appears and that you're still on the same page

Diffs

Changes 🏗

• WizardSidebar is now just called Wizard
• MobileWizardSidebar is now called MobileWizardHeader
• Our PageLayout has been historically designed to switch between tablet and desktop. But it now has a enableMobileAndDesktopLayoutBreakpoints boolean prop which makes it switch between mobile and desktop views instead

Resolves #2889 & #2887

[mmioana]

Really cool work on this one @rumzledz 🥇

I have tested both the Create colony with missing profile and Create colony with leela profile flows



Opening the colony selector

Only a couple of design remarks and one naming comment 🫠

1. When you complete the create profile/create colony flow, the bubble next to the Complete step is invisible
   

2. There is no header padding if you go to http://localhost:9091/go/{COLONY_NAME_HERE}
   

[mmioana]

Can we rename this property into something like isSmPaddingEnabled or applySmPadding or isSmStylingEnabled if we want to be a bit more general? I feel mobileAndDesktopLayout doesn't convey enough information as in why to use it

[rumzledz]

Thanks for reviewing @mmioana !

When you complete the create profile/create colony flow, the bubble next to the Complete step is invisible

I shall investigate and fix this, great spot! 👌

Can we rename this property into something like isSmPaddingEnabled or applySmPadding or isSmStylingEnabled if we want to be a bit more general? I feel mobileAndDesktopLayout doesn't convey enough information as in why to use it

Tbh none of those variable names also convey what I'm trying to achieve here hahaha 😂 variable names are so difficult! It's not really a matter of applying padding on sm. It's a matter of varying the breakpoints primarily between mobile and desktop because by default, we are varying between md and everything above md. Happy to hear another batch of variable name suggestions and from everyone as well!

[rumzledz]

There is no header padding if you go to http://localhost:9091/go/{COLONY_NAME_HERE}

As for this, I'll see if this is relevant to my PR. If it isn't I will open a separate issue 👌

@mmioana

[rumzledz]

@mmioana I've given it a longer name now 😂 I dunno if you're okay with it but would like to get your thoughts tomorrow! Oh and I've fixed the bugs you raised, thanks for that 👌

[mmioana]

Way better than before @rumzledz 🥇 though I believe it's more an enablement than a restriction 🙈

[rumzledz]

hahaha all right all right let's meet halfway, I shall call it enable! 🙌

[rumzledz]

@mmioana pushed! 🚀 I hope the variable name is much better now 🤞

[mmioana]

Thank you for the changes @rumzledz 🙏

Can confirm the complete step bubble is now visible ✅

However regarding the title padding, I noticed if you go below 767px as the screen width, the title is right below the header, but feel free to open another issue for this one

[iamsamgibbs]

Nice job! All looking good to me:

Mobile views are as expected:

All the code changes look sensible too.

[rdig]

Nice and sensible changes. The refactored components seem less complex and convoluted. Nicely done.