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:
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]
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](https://github.com/frankcollins3/Next-Water-App/assets/73137934/9f033a23-5160-41ff-99a1-2ed4bfb0726e)
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)