[Implement New Design] Redesign "adopt" button to help button

[ri0nardo]

current adopt button is confusing since its gives steps on how to adopt a tree. I also don't like the modal since its in the users face once clicked on. Redesign it to pop up but not force you to close it.

[ri0nardo]

@zoobot I redesigned the "adopt" water button to be a help button (its more of a how to adopt a tree button). I didn't like the modal, but figured it content in the modal is valuable. I prefer the button to be on the top right since thats were I would look for help on what is going on. I would prefer the animation to be more fluid, but wanted to try to get the idea out first. Let me know if this is a solution we can revise the current adopt button with. See the screen recording on how it works.

https://user-images.githubusercontent.com/98299952/209611838-ec4609a7-82a8-4e00-916d-607397d1f638.mp4

[zoobot]

@ri0nardo I like where you are going with this!

I agree about the modal, we can add the info to the side slide-out panel. Is that better?

What do you think about adding the adopt button to the top menu and putting the question mark inside a simple tree icon next to the hamburger?

[ri0nardo]

@zoobot im dont want to use the sidebar for everything. It should service the purpose for the tree information mainly. (at least thats the one way i am currently thinking of it).

I like the idea of the help button in the hamburger menu but it would essentially be a modal again?

Haven't given this too much thought, just want to get rid of the modal. Wanted to try out something new and bring some new motion into the map.

[ri0nardo]

For mobile, this component should have take over the whole screen so users can read the directions / steps on how to adopt a tree.

[ri0nardo]

For the menu that appears to take over the screen. I like how the bottom portion has a designated area to close. There is no need to the close on top and ok at the bottom. Should go with one, but the infrastructure is there for mobile. Will explore options with that is existing.

[ri0nardo]

I am exploring this screen, and found an opportunity to have people sign-up after reading through the steps. I see this as a golden opportunity.

I am pushing this idea of fixed horizontal sections that don't move even if you scroll. This would allow people to constantly see where to signup.

If the user is already signed up, the button either doesn't appear or changes to say "User Profile"? Still exploring. This is a first pass.

[ri0nardo]

@zoobot Ive been thinking about the adopt / how to adopt. I was thinking since the dropdown doesn't work for mobile, do we want to redirect users to a separate page with graphics on how to care for trees? How I see it working is there is still a button for help / how to. But rather than just redirecting the user it opens another window?

While i thought a separate page for how to care for your tree is important, we essentially would have two locations with the same information. I would prefer this information only being present at one location.

[ri0nardo]

New plan

The help button will redirect users to the FAQ / support page.