Implement stepper for compare mode

christianjro commented 10 months ago

Description

The Compare Mode is not implemented with a stepper component. The stepper component allows the user to see their progress as they fill out the steps.

To solve this I used the stepper component from the UI library and adjusted spacings to align with the UX design.

Related Issues

Resolves #556

Testing

Testing suites fail since the PR for #555 hasn't been merged, but the changes in this PR aren't expected to affect testing suites.

Checklist

[X] I have followed all conventions outlined in our documentation.
[X] I have fully tested my changes and confirmed that all new and existing tests pass.
[X] I have written meaningful commit messages for all changes.
[X] I have linted and formatted my changes to follow the code style of this repository.
[X] I have updated our documentation, accordingly.
[X] I have checked currently opened pull requests to ensure that there are no pending pull request for the same changes or issues.
[X] I have confirmed that this pull request fully meets the acceptance criteria for all related issues listed above.

netlify[bot] commented 10 months ago

Deploy Preview for lucky-parking-staging ready!

Name	Link
Latest commit	da2104cb250538925f6469be270ab8bc045b743e
Latest deploy log	https://app.netlify.com/sites/lucky-parking-staging/deploys/6537f4e9b7768100089eaf0c
Deploy Preview	https://deploy-preview-564--lucky-parking-staging.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify[bot] commented 10 months ago

Deploy Preview for lucky-parking-staging-storybook canceled.

Name	Link
Latest commit	da2104cb250538925f6469be270ab8bc045b743e
Latest deploy log	https://app.netlify.com/sites/lucky-parking-staging-storybook/deploys/6537f4e9d7f93b0007cb4ae6

gibsonliketheguitar commented 10 months ago

Solid work!

2 UI comments. Lets make sure the stepper is aligned and the "see Data 1" font matches the "first region" font.

Screenshot 2023-10-22 at 03 38 11

glenflorendo commented 10 months ago

Solid work!

2 UI comments. Lets make sure the stepper is aligned and the "see Data 1" font matches the "first region" font.

@gibsonliketheguitar I'm not seeing this in the deploy preview.

deploy-preview-564--lucky-parking-staging netlify app_

It might be the resolution you're using when you're testing. Your screenshot shows a bit of the radius tool, so the lower resolution might be the issue.

If that's the case, we can ignore this issue for now. @christianjro

christianjro commented 10 months ago

Solid work! 2 UI comments. Lets make sure the stepper is aligned and the "see Data 1" font matches the "first region" font.

@gibsonliketheguitar I'm not seeing this in the deploy preview.

It might be the resolution you're using when you're testing. Your screenshot shows a bit of the radius tool, so the lower resolution might be the issue.

If that's the case, we can ignore this issue for now. @christianjro

I couldn't replicate this view, but I also had to hard code some of the CSS (such as the First/Second region input widths) since the containers were being funky. This will probably have to be adjusted at some point if we want to make it more responsive.

gibsonliketheguitar commented 10 months ago

@christianjro I just checked my browser settings. I have my font size set to Large, that seems to be the issue. I think changes to fix would be making the stepper container expand to w-full and the parent container of the input expanding to w-full

glenflorendo commented 10 months ago

Great work here! I really appreciate the teamwork and collaboration in this PR. Thanks, @christianjro @gibsonliketheguitar

hackforla / lucky-parking