Fix: Style for onboarding flow #2516

mmioana · 2024-06-11T10:48:43Z

Description

Refactor landing page item to render children
Fix styling issue on smaller devices

Testing

TODO: Button styling issue for actionable item list on landing page.

Step 1. Open landing page
Step 2. Check the actionable item list on both mobile and desktop

Resolves #2111

CLAassistant · 2024-06-11T10:48:49Z

All committers have signed the CLA.

melyndav

Hey @mmioana congrats on getting started with your first PR.

The scope of the issue is to make the landing page, profile creation and colony creation flows responsive for mobile.

Currently, only desktop was built for these and they are not optimised for our mobile users. Tablet also needs to be considered as part of this scope.

In the issue you'll find a Figma link that shows the complete mobile flows and the landing page variations. Please let me know if you'd like a call to walk through what's needed for this issue. 👍

melyndav

Hey again @mmioana nice start on this one! A big one to tackle.

Some feedback below to align the UI with the Figma designs and existing mobile interactions:

Landing page

The padding between the 'Colony app' title and the 'Welcome to Colony' should match Figma.

The blue pill should be removed on mobile as per Figma

The icon and background box should be aligned to the top of the content block to match the Figma design.

Flow

The stepped navigation pills are missing the background styling.

The buttons should be styled to match Figma.

I have my wallet connected, but the header doesn't display the connected state. I should see the chain, my avatar and the settings icon as per the Figma designs.

Padding between these two select boxes should match Figma.

These input fields should be aligned according to Figma (stacked for better touch interactions)

The button buttons should be sticky and the content scrolls.
These radios should use the existing component and match the desktop styling

Can you make this button in the bottom widget within the modal full width?

rdig

Codewise this looks good. I like the desktop / mobile sidebar refactor into a separate component, and the introduction of enums for the flow types.

However, please take care of the styling issues that were pointed out by Mel, before merging this

rdig · 2024-06-13T15:58:42Z

src/components/frame/LandingPage/LandingPage.tsx

 const LandingPage = () => {
- const [, setHoveredItem] = useState<number>(1);
+ const [, /* hoveredItemIndex */ setHoveredItemIndex] = useState<number>(1);


Is this a leftover from debugging ?

As only one item on the page is enabled and setter is already used, thought to comment the actual state to use it after we enable the other items

rdig · 2024-06-13T15:58:55Z

src/components/frame/LandingPage/LandingPage.tsx

+ headingText={MSG.createColonyTitle}
+ headingDescription={MSG.createColonyDescription}
+ icon={Layout}
+ // imgSrc={CreateAColonyBanner}


rdig · 2024-06-13T15:59:04Z

src/components/frame/LandingPage/LandingPage.tsx

+ }
+ headingDescription={MSG.viewUserProfileDescription}
+ icon={UserCircle}
+ // imgSrc={CreateAProfileBanner}


Refactor landing page item to render children Fix styling issue on smaller devices Resolves #2111

Use stepper component for mobile wizard sidebar Adjust stepper component to snap to active step item

Refactor onboarding helper to compare against enum values

Fix styling issue on smaller devices

Fix lint issues

rumzledz · 2024-06-14T07:11:03Z

src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx

 const Icon = icon || ICON_NAME_MAP[stage];
 const isMobile = useMobile();

+ useEffect(() => {
+ if (ref?.current && isHighlighted) {
+ ref.current.scrollIntoView({ behavior: 'smooth', inline: 'end' });


Great start on your 1st PR @mmioana ! 🥳

Code-wise all good apart from the ones mentioned! This is not a change request but thought I'd say this would be pretty cool as a hook i.e.

const { ref } = useScrollIntoView({ scrollCondition: yourCondition, ...otherParams })

or maybe expose a scroll function for a more imperative approach

const { ref, scroll } = useScrollIntoView(); if (condition) { scroll() }

or a mixture of both! 😄

bassgeta

Smashing work on your first PR, immediately a refactor, nice 😎
Codewise it looks good, will approve after the UI issues have been resolved!

Fix styling changes on smaller devices after review

Use custom useMediaQuery for mobile and tablet Update button row styling

Refactor declarative scroll into view behaviour into custom hook

Fix styling for checked radio buttons

melyndav

Hey @mmioana,

Nice work on the requested updates! Just one minor change is needed to align it with the Figma designs.

This heading doesn't need to be shown and isn't in the designs, so please remove and match the paddings accordingly:

Thanks again for your continued work on this! 🐞

Remove sidebar title on mobile Remove bottom margin

melyndav

Thanks for the final fix on this PR @mmioana, appreciate your work! 🎉

bassgeta

Nice changes, good job handling the myriad of required CSS fixes! 💪

mmioana self-assigned this Jun 11, 2024

mmioana requested review from a team as code owners June 11, 2024 10:48

melyndav requested changes Jun 11, 2024

View reviewed changes

mmioana marked this pull request as draft June 11, 2024 13:34

mmioana force-pushed the fix/2111-mobile-onboarding branch from 9bc521d to 83ee976 Compare June 13, 2024 12:29

mmioana changed the title ~~Fix: Style for landing page items~~ Fix: Style for onboarding flow Jun 13, 2024

mmioana marked this pull request as ready for review June 13, 2024 12:51

melyndav requested changes Jun 13, 2024

View reviewed changes

rdig previously approved these changes Jun 13, 2024

View reviewed changes

mmioana added 5 commits June 14, 2024 08:05

Fix: Style for landing page items

79f6835

Refactor landing page item to render children Fix styling issue on smaller devices Resolves #2111

Refactor: Onboarding wizard sidebar

11326b8

Use stepper component for mobile wizard sidebar Adjust stepper component to snap to active step item

Refactor: Use of enum values

8f425c7

Refactor onboarding helper to compare against enum values

Fix: Style for onboarding flow

e1778aa

Fix styling issue on smaller devices

Refactor: Changes after linting

4f51791

Fix lint issues

rumzledz reviewed Jun 14, 2024

View reviewed changes

bassgeta requested changes Jun 14, 2024

View reviewed changes

mmioana added 2 commits June 14, 2024 13:07

Fix: Style changes for onboarding flow

806f81d

Fix styling changes on smaller devices after review

Fix: Update onboarding button row styling

9601c46

Use custom useMediaQuery for mobile and tablet Update button row styling

mmioana dismissed rdig’s stale review via 9601c46 June 14, 2024 14:17

mmioana force-pushed the fix/2111-mobile-onboarding branch from 83ee976 to 9601c46 Compare June 14, 2024 14:17

mmioana added 2 commits June 17, 2024 08:13

Refactor: Use useScrollIntoView hook

8b62ba6

Refactor declarative scroll into view behaviour into custom hook

Fix: Radio buttons styling

354d05d

Fix styling for checked radio buttons

mmioana requested a review from melyndav June 17, 2024 10:12

melyndav requested changes Jun 17, 2024

View reviewed changes

Fix: Remove sidebar title on mobile

10057d6

Remove sidebar title on mobile Remove bottom margin

mmioana requested a review from melyndav June 17, 2024 13:00

melyndav approved these changes Jun 18, 2024

View reviewed changes

bassgeta approved these changes Jun 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Style for onboarding flow #2516

Fix: Style for onboarding flow #2516

mmioana commented Jun 11, 2024

CLAassistant commented Jun 11, 2024 •

edited

melyndav left a comment

melyndav left a comment •

edited

rdig left a comment

rdig Jun 13, 2024

mmioana Jun 14, 2024

rdig Jun 13, 2024

rdig Jun 13, 2024

rumzledz Jun 14, 2024 •

edited

bassgeta left a comment

melyndav left a comment

melyndav left a comment

bassgeta left a comment

Fix: Style for onboarding flow #2516

Are you sure you want to change the base?

Fix: Style for onboarding flow #2516

Conversation

mmioana commented Jun 11, 2024

Description

Testing

CLAassistant commented Jun 11, 2024 • edited

melyndav left a comment

Choose a reason for hiding this comment

melyndav left a comment • edited

Choose a reason for hiding this comment

Landing page

Flow

rdig left a comment

Choose a reason for hiding this comment

rdig Jun 13, 2024

Choose a reason for hiding this comment

mmioana Jun 14, 2024

Choose a reason for hiding this comment

rdig Jun 13, 2024

Choose a reason for hiding this comment

rdig Jun 13, 2024

Choose a reason for hiding this comment

rumzledz Jun 14, 2024 • edited

Choose a reason for hiding this comment

bassgeta left a comment

Choose a reason for hiding this comment

melyndav left a comment

Choose a reason for hiding this comment

melyndav left a comment

Choose a reason for hiding this comment

bassgeta left a comment

Choose a reason for hiding this comment

CLAassistant commented Jun 11, 2024 •

edited

melyndav left a comment •

edited

rumzledz Jun 14, 2024 •

edited