Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create onboarding template #207

Merged
merged 2 commits into from
Apr 5, 2024

Conversation

shouryan01
Copy link
Collaborator

@shouryan01 shouryan01 commented Mar 10, 2024

Description

Starts the template for the onboarding flow for new users

What type of PR is this? (check all applicable)

  • [ x] πŸ’‘ Feature
  • πŸ› Bug Fix
  • πŸ“ Documentation Update
  • 🎨 Style
  • πŸ§‘β€πŸ’» Code Refactor
  • πŸ”₯ Performance Improvements
  • βœ… Test
  • πŸ€– Build
  • πŸ” CI
  • πŸ“¦ Chore (Release)
  • ⏩ Revert

Related Tickets & Documents

#196

Mobile & Desktop Screenshots/Recordings

image
image
image

Steps to QA

  1. Navigate to /onboarding
  2. Click through any options, it is frontend only

Added to documentation?

  • πŸ“œ README.md
  • [ x] πŸ™… no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Copy link

vercel bot commented Mar 10, 2024

@shouryan01 is attempting to deploy a commit to the Salgsmaskin Team on Vercel.

A member of the Team first needs to authorize it.

@shouryan01
Copy link
Collaborator Author

I understand that some ui elements might be too flashy and unnecessary, like the connect account animation. Let me know how to refine this flow and add/remove pages

@Codehagen
Copy link
Owner

@alexghirelli - Do you want to review it? Since it prob you that is going to make the stitch with the Backend?

@Codehagen Codehagen requested a review from alexghirelli March 12, 2024 07:28
@piyusharmap
Copy link

@shouryan01 your design looks good, it's just that there is too much empty space.
What if we use modals instead of screens to show user these optionsπŸ€”
image

@alexghirelli
Copy link

@alexghirelli - Do you want to review it? Since it prob you that is going to make the stitch with the Backend?

I'll check it asap

@alexghirelli
Copy link

The UI it's pretty amazing in dark mode. I'm thinking that we can always force the dark mode into this section in order to make work properly the animation in the background.
Anyway, I saw just two things. The first one is related to the button "Get started" that has a little bug in the dark mode. It always appears total white, both background and text.
(see the screenshot below)

image

I love the animation when you hover the button "connect account", but I don't like so much the shadow under the button. Can we remove it or reduce the size?
image

Another thing to consider. Since we are added the possibility for the user to add accounts and assets manually, we have to consider in the onboarding process also this things. So, we can add one or two more button along with "connect account" button that will be useful to add an account manually and to add an asset manually.
Basically the ui can be something like this:

Screenshot 2024-03-13 at 2 57 35β€―AM

@shouryan01

cc. @meglerhagen @matteobad

Copy link

@alexghirelli alexghirelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the comment above.

@shouryan01
Copy link
Collaborator Author

Thanks @alexghirelli for the comments, I'll make these changes. @piyusharmap, I tried out your suggestion of modals, but it looks unconventional on a mobile-sized display

@piyusharmap
Copy link

What if we apply a blur effect to the boundaries of the animation when hovering over the 'Connect Account' button, in order to blend it with the background? Currently, it feels too boxy.
@alexghirelli @shouryan01

@alexghirelli
Copy link

What if we apply a blur effect to the boundaries of the animation when hovering over the 'Connect Account' button, in order to blend it with the background? Currently, it feels too boxy. @alexghirelli @shouryan01

Can be an idea

@shouryan01
Copy link
Collaborator Author

@alexghirelli review please!

@alexghirelli
Copy link

I will review it today @shouryan01 @meglerhagen

@Codehagen
Copy link
Owner

@shouryan01 Do you want to stitch this to the be, also tried to send you a message on Discord ✨

@shouryan01
Copy link
Collaborator Author

@shouryan01 Do you want to stitch this to the be, also tried to send you a message on Discord ✨

I can take this ticket next week, in the meantime if anyone needs work they are free to take it.
Before that though, the options, number of pages, and design needs to be approved

Copy link

@alexghirelli alexghirelli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Codehagen Codehagen merged commit 72d01d1 into Codehagen:main Apr 5, 2024
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants