front-end-monorepo icon indicating copy to clipboard operation
front-end-monorepo copied to clipboard

Survey task: Choice and Questions styling improvements

Open seanmiller26 opened this issue 5 months ago • 0 comments

Package

Choose from the list:

  • [ ] app-content-pages
  • [ ] app-project
  • [ x ] lib-classifier
  • [ ] lib-panoptes-js
  • [ ] lib-react-components
  • [ ] unknown

Is your feature request related to a problem? Please describe.

This is in response to feedback stating it takes too much scrolling to see all the choices.

Figma https://www.figma.com/design/ASqNlLhicNRzEDhYDA2t8j/Survey?node-id=0-1&m=dev&t=PxDxXDB67AH8V9Aa-1

Describe the solution you'd like

Increasing the width to match the task area at 540px helps a lot. Standardizing the width of buttons and spacing gives a neater presentation. Allowing for the animal description and 'Often Confused with' to be collapsed allows power users a shortcut past unnecessary info. All fonts have been increased to match our new standard of 1rem / 16pt. The individual animal name is 24pt, bold.

Default view w/ collapsed animal description and 'Often Confused with' Screenshot 2024-08-27 at 4 10 51 PM

Screenshot 2024-08-27 at 3 47 50 PM

Each button has been standardized to 110px W, 40px H. When the copy is longer than that width will allow, please increase the widths by 10px increments (120, 130, 140, etc) with no less than 20px padding.

Screenshot 2024-08-27 at 3 56 01 PM Screenshot 2024-08-27 at 3 54 48 PM

Before and after: Screenshot 2024-08-27 at 4 10 35 PM

Additional context

Add any other context or screenshots about the feature request here.

seanmiller26 avatar Aug 27 '24 21:08 seanmiller26