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

Style polish #94

Open
9 tasks done
perennialAutodidact opened this issue Sep 7, 2024 · 0 comments
Open
9 tasks done

Style polish #94

perennialAutodidact opened this issue Sep 7, 2024 · 0 comments
Assignees
Labels
frontend Issue pertains to the frontend client work in progress Feature incomplete, but in progress

Comments

@perennialAutodidact
Copy link
Owner

perennialAutodidact commented Sep 7, 2024

There are a few style adjustments that need to be made:

  • The form steps should be center-justified. On mobile, the button should be centered. On desktop, the button should be right-justified
  • The form steps need ~30px of padding (maybe more on desktop) on everything below the progress bar. The progress bar should still extend to the edges
  • The button and placeholder text for each step should have a capitalized first letter
  • The slider background is hard to read. Let's try making the slider track dark gray and the slider handle the same color blue as player 2's color. If the gray track is weird, we could also try keeping it the current color and adding a border and/or drop shadow to give it some contrast.
  • The slider needs min/max labels and to display the current slider value
  • The form errors should have a human-readable message. "player1Name must be at least 3 characters" -> "Please enter at least three characters" (this can be done in the Yup validation schema for each step)
  • If the form has errors, the form field should render Bootstrap's validation styling
  • The form error should have ~10px of top padding to push it down away from the input field
  • Form errors should stay left-justified relative to the input field (they do this now, but should continue to do so after centered everything else)
@russfraze russfraze added the work in progress Feature incomplete, but in progress label Sep 27, 2024
@perennialAutodidact perennialAutodidact added the frontend Issue pertains to the frontend client label Nov 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend Issue pertains to the frontend client work in progress Feature incomplete, but in progress
Projects
None yet
Development

No branches or pull requests

2 participants