Add hover-help icon to geo page

[ababaian]

I moved the text at the top of the page to a help icon with hover-text and the box-select information to the bottom. This cleans up the page a little bit. Also learning/playing with deployment.

Preview Link: https://gui-tweak.d1w6d75be7tofa.amplifyapp.com/geo

[victorlin]

Ah I realize this was your initial ask in the PR, but I got lazy and just dumped all the text directly 🙃

I don't like the hover title, it's not intuitive and takes a second to appear depending on browser. Also this seems like too much text for a title. This is what I'd do as a user:

1. see the (?)
2. try clicking it for an action (the icon is a link on other parts of the website)
3. move on without any knowledge since there is no tooltip post-click

If clutter is an issue, I'd recommend an expandable <details> section like this but with some styling: https://codesandbox.io/s/2xyryvynqj

P.S. nice seeing you play with website stuff 👍

[ababaian]

Yep that's much better. I'll wrestle it in :D

[ababaian]

How about this?

https://gui-tweak.d1w6d75be7tofa.amplifyapp.com/geo

[victorlin]

I'm getting some weird behavior, looks like a React issue. try this? https://github.com/facebook/react/issues/15486#issuecomment-488028431

[ababaian]

How about this? https://gui-tweak.d1w6d75be7tofa.amplifyapp.com/

[victorlin]

Styling looks good! But still gets "stuck" after a couple clicks - see my earlier comment https://github.com/serratus-bio/serratus.io/pull/122#issuecomment-799036009

[ababaian]

Can't reproduce, not sure what's up.

[ababaian]

I changed to a different toggle button with some simpler code and I think this will work better.

[ababaian]

Ignore that last link, with the css update the button now works. main.css is in gitignore :)

https://gui-tweak.d1w6d75be7tofa.amplifyapp.com/

[ababaian]

Let me know :D https://gui-tweak.d1w6d75be7tofa.amplifyapp.com/