Re-design for the options tool

[khalifan-kfan]

Description

This PR adds some of the approved UI designs for the option tool from figma

Discussion

Earlier dev meeting in August

Screenshots / Videos

[github-actions]

Visit the preview URL for this PR (updated for commit 9f40609):

https://picsa-extension-toolkit--pr174-ch-redesign-niyzxj3x.web.app

_{(expires Sat, 14 Oct 2023 20:54:10 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2435c4a5f2b9750fe5c819a7a14bcf9433816983}

[chrismclarke]

Many thanks @khalifan-kfan
Great to see this moving forward, I really like the multiple visualisations for inputs and also how the stepper moves left-to-right as you proceed through the steps

• All steps have their own data input section organised within templates
• Custom inputs have been added to tidy code for gender, performance and investment inputs
• Risk input refactored to accept multiple entries
• Time input refactored to accept value with unit (e.g. months, weeks, days)
• Removed range sliders in favour of buttons which should be easier for users to interact with
• Added more images and optimised existing for file size and clarity
• General style improvements

demo video below

Options.webm

[chrismclarke]

Recommended future development:

• Ability to go direct to stepper section when clicking on row, e.g. clicking on the Time entry opens stepper on step 7
• Ability to export as image to share
• Fix bug where adding new option does not always appear in expected order
• Ability to record multiple sets of options, e.g. initial screen and separate pages for crop, livestock or livelihood option lists

[khalifan-kfan]

Hey @chrismclarke,
Thank you for the improvements, the interface really looks nice.