From 0179ea1fa933797d9ee37d2b267d97555153d966 Mon Sep 17 00:00:00 2001
From: Catherine Tan <catherine95118@gmail.com>
Date: Sun, 8 Dec 2024 01:35:43 -0800
Subject: [PATCH] remove absolute styling of next button

---
 app/onboarding/page.tsx  | 173 ++++++++++++++++++++-------------------
 app/onboarding/styles.ts |  17 ++--
 2 files changed, 100 insertions(+), 90 deletions(-)

diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index 38906d7..2daf1e1 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -8,6 +8,7 @@ import LabeledCustomSelect from '@/components/EditableInput';
 import ProgressBar from '@/components/ProgressBar';
 import RadioGroup from '@/components/RadioGroup';
 import COLORS from '@/styles/colors';
+import { Flex } from '@/styles/containers';
 import { H3, P1, P3 } from '@/styles/text';
 import { DropdownOption, Profile, UserTypeEnum } from '@/types/schema';
 import { useAuth } from '@/utils/AuthProvider';
@@ -68,18 +69,20 @@ const StateSelection = ({
 }: StateSelectionProps & { onNext: () => void }) => {
   return (
     <OnboardingContainer>
-      <ProgressBar progress={2.6} />
-      <P3 $color={COLORS.shrub} style={{ marginTop: '2.5rem' }}>
-        QUESTION 1 OF 3
-      </P3>
-      <QuestionDiv>
-        <H3 $color={COLORS.shrub}>What state are you in?</H3>
-      </QuestionDiv>
-      <RadioGroup
-        name="StateRadioGroup"
-        options={stateOptions}
-        onChange={setSelectedState}
-      />
+      <Flex $direction="column" $align="center">
+        <ProgressBar progress={2.6} />
+        <P3 $color={COLORS.shrub} style={{ marginTop: '2.5rem' }}>
+          QUESTION 1 OF 3
+        </P3>
+        <QuestionDiv>
+          <H3 $color={COLORS.shrub}>What state are you in?</H3>
+        </QuestionDiv>
+        <RadioGroup
+          name="StateRadioGroup"
+          options={stateOptions}
+          onChange={setSelectedState}
+        />
+      </Flex>
       <ButtonDiv>
         <Button
           onClick={onNext}
@@ -104,20 +107,22 @@ const GardenTypeSelection = ({
 }) => {
   return (
     <OnboardingContainer>
-      <ProgressBar progress={33} />
-      <P3 $color={COLORS.shrub} style={{ marginTop: '2.5rem' }}>
-        QUESTION 2 OF 3
-      </P3>
-      <QuestionDiv>
-        <H3 $color={COLORS.shrub} style={{ textAlign: 'center' }}>
-          What type of garden are you starting?
-        </H3>
-      </QuestionDiv>
-      <RadioGroup
-        name="GardenTypeRadioGroup"
-        options={gardenTypeOptions}
-        onChange={setSelectedGardenType}
-      />
+      <Flex $direction="column" $align="center">
+        <ProgressBar progress={33} />
+        <P3 $color={COLORS.shrub} style={{ marginTop: '2.5rem' }}>
+          QUESTION 2 OF 3
+        </P3>
+        <QuestionDiv>
+          <H3 $color={COLORS.shrub} style={{ textAlign: 'center' }}>
+            What type of garden are you starting?
+          </H3>
+        </QuestionDiv>
+        <RadioGroup
+          name="GardenTypeRadioGroup"
+          options={gardenTypeOptions}
+          onChange={setSelectedGardenType}
+        />
+      </Flex>
       <ButtonDiv>
         <Button
           onClick={onBack}
@@ -150,20 +155,22 @@ const PlotSelection = ({
 }) => {
   return (
     <OnboardingContainer>
-      <ProgressBar progress={66} />
-      <P3 $color={COLORS.shrub} style={{ marginTop: '2.5rem' }}>
-        QUESTION 3 OF 3
-      </P3>
-      <QuestionDiv>
-        <H3 $color={COLORS.shrub} style={{ textAlign: 'center' }}>
-          Do you already have a plot?
-        </H3>
-      </QuestionDiv>
-      <RadioGroup
-        name="PlotSelectionRadioGroup"
-        options={plotOptions}
-        onChange={setSelectedPlot}
-      />
+      <Flex $direction="column" $align="center">
+        <ProgressBar progress={66} />
+        <P3 $color={COLORS.shrub} style={{ marginTop: '2.5rem' }}>
+          QUESTION 3 OF 3
+        </P3>
+        <QuestionDiv>
+          <H3 $color={COLORS.shrub} style={{ textAlign: 'center' }}>
+            Do you already have a plot?
+          </H3>
+        </QuestionDiv>
+        <RadioGroup
+          name="PlotSelectionRadioGroup"
+          options={plotOptions}
+          onChange={setSelectedPlot}
+        />
+      </Flex>
       <ButtonDiv>
         <Button
           onClick={onBack}
@@ -221,47 +228,49 @@ const ReviewPage = ({
 
   return (
     <OnboardingContainer>
-      <ProgressBar progress={100} />
-      <QuestionDiv>
-        <H3
-          $color={COLORS.shrub}
-          style={{
-            textAlign: 'center',
-            marginTop: '90px',
-            marginBottom: '40px',
-          }}
-        >
-          Review & Submit
-        </H3>
-      </QuestionDiv>
-      <ContentContainer>
-        <P1 style={{ color: COLORS.shrub, marginBottom: '16px' }}>
-          Your Responses
-        </P1>
-        <LabeledCustomSelect
-          label="State Location"
-          value={selectedState}
-          options={stateOptions}
-          onChange={setSelectedState}
-        />
+      <Flex $direction="column" $justify="start">
+        <ProgressBar progress={100} />
+        <QuestionDiv>
+          <H3
+            $color={COLORS.shrub}
+            style={{
+              textAlign: 'center',
+              marginTop: '90px',
+              marginBottom: '40px',
+            }}
+          >
+            Review & Submit
+          </H3>
+        </QuestionDiv>
+        <ContentContainer>
+          <P1 style={{ color: COLORS.shrub, marginBottom: '16px' }}>
+            Your Responses
+          </P1>
+          <LabeledCustomSelect
+            label="State Location"
+            value={selectedState}
+            options={stateOptions}
+            onChange={setSelectedState}
+          />
 
-        <LabeledCustomSelect
-          label="Garden Type"
-          value={selectedGardenType}
-          options={gardenTypeOptions}
-          onChange={setSelectedGardenType} // Directly pass the selected value
-        />
-        <LabeledCustomSelect
-          label="Plot Status"
-          value={selectedPlot}
-          options={plotOptions}
-          onChange={value => setSelectedPlot(value === true)} // Convert the value as needed
-        />
-        <div style={{ height: '12.625rem' }} />
-        <BigButton color={COLORS.shrub} onClick={handleSubmit}>
-          Let&apos;s Start Growing !
-        </BigButton>
-      </ContentContainer>
+          <LabeledCustomSelect
+            label="Garden Type"
+            value={selectedGardenType}
+            options={gardenTypeOptions}
+            onChange={setSelectedGardenType} // Directly pass the selected value
+          />
+          <LabeledCustomSelect
+            label="Plot Status"
+            value={selectedPlot}
+            options={plotOptions}
+            onChange={value => setSelectedPlot(value === true)} // Convert the value as needed
+          />
+          <div style={{ height: '12.625rem' }} />
+          <BigButton color={COLORS.shrub} onClick={handleSubmit}>
+            Let&apos;s Start Growing !
+          </BigButton>
+        </ContentContainer>
+      </Flex>
     </OnboardingContainer>
   );
 };
@@ -302,7 +311,7 @@ export default function OnboardingFlow() {
     // TODO: implement an actual loading screen (spinner?)
     <>Loading</>
   ) : (
-    <div>
+    <Flex>
       {step === 1 && (
         <StateSelection
           selectedState={selectedState}
@@ -337,6 +346,6 @@ export default function OnboardingFlow() {
           setSelectedPlot={setSelectedPlot}
         />
       )}
-    </div>
+    </Flex>
   );
 }
diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
index e6b746a..501881c 100644
--- a/app/onboarding/styles.ts
+++ b/app/onboarding/styles.ts
@@ -1,14 +1,17 @@
 import styled from 'styled-components';
 
 export const OnboardingContainer = styled.div`
-  min-height: 100vh;
+  min-height: calc(100vh - 60px); // 60px is the hardcoded height of Header
   width: min(392px, 100vw);
   background-color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 1rem;
+  padding: 24px; // set left and right padding to 24px
+  padding-top: 0px;
+  padding-bottom: 100px;
   position: relative;
+  justify-content: space-between;
   margin: auto; // center horizontally and vertically
 `;
 export const ContentContainer = styled.div`
@@ -24,20 +27,18 @@ export const ContentContainer = styled.div`
 export const QuestionDiv = styled.div`
   display: flex;
   flex-direction: column;
-  height: 6.875rem;
+  min-height: 60px;
   align-items: center;
-  justify-content: center;
+  justify-content: end;
   align-content: center;
   margin-bottom: 40px;
 `;
 
 export const ButtonDiv = styled.div`
   display: flex;
-  padding-left: 10px;
-  padding-right: 10px;
   width: 100%;
-  bottom: 103px;
-  position: absolute;
+  /* bottom: 103px; */
+  /* position: absolute; */
   justify-content: space-between;
   &:has(:only-child) {
     justify-content: flex-end;