[Tree Details - Design Implementation] Restyling Adopt / Like Component

ri0nardo commented 1 year ago

Quick summary:

Restyling like and adopt button to be styled radio buttons that is more clear and obvious when looking through the tree detail container.

Issues:

The current adopt / like buttons are not very clear and somewhat hidden if you aren't looking closely. It should be very clear and prominent as we want a userbase that is adopting many trees and liking trees they are interested in. (this feature is somewhat like the youtube like button)

Get Started:

Get started with our onboarding, https://github.com/waterthetrees/waterthetrees/wiki/Onboarding and read through the epic for relevant details of this ticket. https://github.com/waterthetrees/wtt_front/issues/433

Resources:

Epic discussion https://github.com/waterthetrees/wtt_front/issues/433
Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085

Example of current state of the adopt/like button:

What the final design should look like:

screen-capture.webm

martinyis commented 1 year ago

Hey, I would like to work on this issue. Where does this component located(path). Thank you!

ibr5500 commented 1 year ago

Hello @ri0nardo, I didn't get what you mean because those buttons are already radio buttons.

ri0nardo commented 1 year ago

Hey, I would like to work on this issue. Where does this component located(path). Thank you!

I believe its in Tree.js @martinyis

ri0nardo commented 1 year ago

Hello @ri0nardo, I didn't get what you mean because those buttons are already radio buttons.

Please read the updated summary above.

waterthetrees / wtt_front