front-end-monorepo
front-end-monorepo copied to clipboard
Survey task: Choice and Questions styling improvements
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'
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.
Before and after:
Additional context
Add any other context or screenshots about the feature request here.