Skip to content

Conversation

stevenseb
Copy link

@stevenseb stevenseb commented May 5, 2025

Attached to issue: #6

Still much to do on finer details:

  • 1. Likely need to get the Figma logo version updated in the code
  • 2. May need to get with MK to review application of color palette to make sure it is all correct
  • 3. Attempted to solve known issue with Auth0 and SPA given that hitting back button after registration can result in Auth0 error page since the connection is closed once registration complete (attempted a fix in /components/BackNavigationFix.tsx but doesn't seem to work
  • 4. Still need to render login button, component with logic in /auth0 folder however, need to discuss entire header layout, proper logged-in button views etc. so we can get it all correct together
  • 5. Used '/' root route to display a mock-up landing page to simulate hitting the sign-up button from WP site or external source to test the entire flow and created a PublicHeader component based off of the Header component but we have 2 headers with slightly different styling, but really the PublicHeader.tsx is just for testing/dev so, need to focus on making Header.tsx work as it should for logged in user.
  • 6. Have not really implemented or thoroughly tested mobile styling, just have some basic minimums.
  • 7. Need to resolve the consent popup which we don't want right now.
  • 8. May need to enhance the form validator as it's only checking completion right now.
  • 9. Still plan to refactor some code to separate concerns and improve readability.
  1. Probably will be helpful if we check global styles and set more of them as appropriate.
  2. I moved any css stylesheets into /styles folder inside of /components and /pages and a mockDB file is inside the /utils folder.
  3. Just a fairly good MVP right now to see if on the right track

Welcome feedback on styling and thorough testing to find any other potential bugs. Next steps are verify/correct styling per MK and Figma designs and fully code the logic for header and buttons when logged in. Functionality requires .env variables which I can share with Peter via Slack if that's acceptable.

image

{874482EF-97A0-4534-BE55-2AB147C74CEC}

{05AF4CA5-C5CB-42A2-ADDF-F21895EC649D}

localhost_5173_signup

Copy link

netlify bot commented May 5, 2025

Deploy Preview for helpful-platform ready!

Name Link
🔨 Latest commit 8889a2a
🔍 Latest deploy log https://app.netlify.com/projects/helpful-platform/deploys/68b6007ffe04360008092ebd
😎 Deploy Preview https://deploy-preview-8--helpful-platform.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 96
Accessibility: 100
Best Practices: 83
SEO: 91
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@Jbutler-helpful
Copy link

Jbutler-helpful commented May 13, 2025

Yes!!! it deployed, I can't get to the top registration page using the sign in/sign up

@mkharkar
Copy link

mkharkar commented May 15, 2025

Hey @stevenseb ! Thanks for sharing the screenshots. Few quick notes -

  1. The styling of the field boxes needs to be updated—please refer to the final version here: https://www.figma.com/design/Q2OzxOL3BB6aqwuXBGZG0w/Low-Fidelity?node-id=68-2963&t=ZL2zjetwQwHS6MNq-1 for reference.
  2. The spacing between fields could use a bit more breathing room and should be consistent throughout.
  3. For the selected skill pills, the grey background color from the final design needs to be applied here as well.
  4. The top nav bar should follow the light grey style that we’ve used consistently across other pages.
  5. Overall, we just need to tighten up spacing, color usage, and box styles to align with the final design.

@psprings psprings added the enhancement New feature or request label May 15, 2025
@psprings psprings linked an issue May 15, 2025 that may be closed by this pull request
@Jbutler-helpful
Copy link

@mkharkar What do you think of @stevenseb progress?

@stevenseb
Copy link
Author

stevenseb commented May 29, 2025

Hey @stevenseb ! Thanks for sharing the screenshots. Few quick notes -

  1. The styling of the field boxes needs to be updated—please refer to the final version here: https://www.figma.com/design/Q2OzxOL3BB6aqwuXBGZG0w/Low-Fidelity?node-id=68-2963&t=ZL2zjetwQwHS6MNq-1 for reference.
  2. The spacing between fields could use a bit more breathing room and should be consistent throughout.
  3. For the selected skill pills, the grey background color from the final design needs to be applied here as well.
  4. The top nav bar should follow the light grey style that we’ve used consistently across other pages.
  5. Overall, we just need to tighten up spacing, color usage, and box styles to align with the final design.

Based on today's standup these items have all been addressed in the new commit done today. Here is a screenshot of the current view. Designers will be working on refinement to the header design.

localhost_5173_signup (1)

@Jbutler-helpful
Copy link

@gurupreeth6 this is ready for review, let me know how it goes for you trying to log in and get to the dashboard

@stevenseb
Copy link
Author

stevenseb commented Jul 27, 2025

@mkharkar

Current progress includes:

  • Header changes to match design final handoff (question about 16px font size for nav menu whether this looks good)
  • Dynamic log in / log out / sign up buttons dependent on what state current user is in
  • Set padding to 1.8rem for contributor agreement text in modal

Please remember that the left/right margins are exaggerated in some screenshots when I used the Google Chrome dev tools. The first shot is the best example of what those margins look like.

header margins contributor agreement 1 8rem padding localhost_5173_signup (2) localhost_5173_dashboard localhost_5173_

@gurupreeth6
Copy link

Below are my findings:

  1. There is no validation for invalid/special characters entered in the input field.
  2. After successful signup, user is not navigated to the dashboard; it directs back to the form page
  3. During the signup, while filling the form if user clicks on signout, error page is displayed. Attached screenshot for the same
  4. If user tries to signup with the already signed-up email, then error "Something went wrong, please try again later" is thrown. Attached screenshot for the same
  5. Existing user, when tried to login, is also taken to the form filling page, instead of dashboard.
Screenshot 2025-08-02 at 10 49 41 PM Screenshot 2025-08-03 at 7 17 22 AM

@mkharkar
Copy link

mkharkar commented Aug 5, 2025

[@stevenseb] Hey Eric! I did see the changes you made. Here are my few findings.

  1. The line borders on the welcome screen is not consistent. Border size is 0.5 px for all.
  2. The space between two fields is 14 px. Currently it looks inconsistent.
  3. The field that we finalised for the Welcome page were:
  • Time Zone
  • Current Profession
  • Years of Experience
  • Preferred Language
  • Skills
  1. The space between"Read full terms" & "Accept the Terms and conditions" is too much. You can refer to the sizings on the "Design Review - Final Handoffs" page.
  2. We need newly designed top nav bar for all pageg. Can refer to the same page mentioned above.

@stevenseb
Copy link
Author

@gurupreeth6 comments noted, will work on these. For #2 and #5 of your comments, this is the intended behavior. The user can't access the dashboard until completing the additional signup form. As for #3, I can't replicate this error in my development environment. When I click logout while on the signup form I am redirected to the user not logged in view/welcome message. May need to get Peter involved on that to see what's happening in the Netlify deployment.

@mkharkar Thank you for the feedback, I will get to those items soon.

@stevenseb
Copy link
Author

Hello @mkharkar and @AfnanZ will one of you please review the current state of styling for the header, signup page and particularly the drop-down menu styling. Please use the deploy preview link: https://deploy-preview-8--helpful-platform.netlify.app/ and you can begin registration using your email but if you don't hit submit on the additional signup page you will always be able to come back as "halfway registered" state. This way you won't be blocked from viewing the additional signup page in the future as you would if you fully submit the additional signup data.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

We need a signup + flow that includes basic authentication
5 participants