frankcollins3 / Next-Water-App

Happy, Healthy Water Cycling App that tracks user/human fluid intake.
https://next-water-app.vercel.app
1 stars 0 forks source link

space-between and sharing elements [4:37pm] #45

Closed frankcollins3 closed 11 months ago

frankcollins3 commented 11 months ago

attempting to do: space-between with column look good. was messing with space-between before putting in the <GoogleLogin> component. (there is a green G button on the bottom to act as a dummy-placeholder until the <GoogleLogin/> is used)

here's the UI: Screen Shot 2023-07-14 at 4 36 39 PM

error: without the <GoogleLogin>, the hand.png goes way up top, and (login) (signup) buttons that display form go way below.

proposed approach: 0: google login button will already null everything that this point discusses but in the future, if there's no bottom element, then things can be too spread.

1: [invisible_element_for_space_between] i.e. in water app: (to toggle form from showing) (login) (signup)

*** if the google login wasn't there you could create an element and make it opacity: 0.0 and everything will space evenly. *** if there's no invisible element: will sit too close to the top (login) (signup) the login buttons will be all the way at the bottom, which would look terrible in my opinion. 2: tons of padding to bring them nearly in the center. [4:39pm]