remove back button from 1st onboarding q

calblueprint · Dec 23, 2024 · 4c831ad · 4c831ad
1 parent b05c9d8
commit 4c831ad
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 54 deletions.
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
@@ -56,6 +56,8 @@ function SelectionScreen<T = string>({
   onBack?: () => void;
   onNext: () => void;
 }) {
+  // TODO: Maybe make total question number a prop
+  // rather than hard-code as 3
   return (
     <>
       <ProgressBar progress={progress} />
@@ -82,14 +84,16 @@ function SelectionScreen<T = string>({
           />
         </Flex>
         <ButtonDiv>
-          <Button
-            onClick={onBack}
-            $primaryColor="white"
-            $secondaryColor={COLORS.shrub}
-            $textColor={COLORS.shrub}
-          >
-            Back
-          </Button>
+          {onBack && (
+            <Button
+              onClick={onBack}
+              $primaryColor="white"
+              $secondaryColor={COLORS.shrub}
+              $textColor={COLORS.shrub}
+            >
+              Back
+            </Button>
+          )}
           <Button
             onClick={onNext}
             disabled={selectedValue === undefined}
@@ -140,45 +144,41 @@ const ReviewPage = ({
     <>
       <ProgressBar progress={100} />
       <OnboardingContainer>
-        <div
-          style={{ width: '100%', display: 'flex', flexDirection: 'column' }}
+        <H3
+          $color={COLORS.shrub}
+          style={{
+            textAlign: 'center',
+            marginTop: '40px',
+            marginBottom: '40px',
+          }}
         >
-          <H3
-            $color={COLORS.shrub}
-            style={{
-              textAlign: 'center',
-              marginTop: '40px',
-              marginBottom: '40px',
-            }}
-          >
-            Review & Submit
-          </H3>
-          <ContentContainer>
-            <P1 style={{ color: COLORS.shrub, marginBottom: '16px' }}>
-              Your Responses
-            </P1>
-            <Flex $direction="column" $gap="24px">
-              <CustomSelect
-                label="State Location"
-                value={selectedState}
-                options={usStateOptions}
-                onChange={setSelectedState}
-              />
-              <CustomSelect
-                label="Garden Type"
-                value={selectedGardenType}
-                options={gardenTypeOptions}
-                onChange={setSelectedGardenType}
-              />
-              <CustomSelect
-                label="Plot Status"
-                value={selectedPlot}
-                options={plotOptions}
-                onChange={value => setSelectedPlot(value)}
-              />
-            </Flex>
-          </ContentContainer>
-        </div>
+          Review & Submit
+        </H3>
+        <ContentContainer>
+          <P1 style={{ color: COLORS.shrub, marginBottom: '16px' }}>
+            Your Responses
+          </P1>
+          <Flex $direction="column" $gap="24px">
+            <CustomSelect
+              label="State Location"
+              value={selectedState}
+              options={usStateOptions}
+              onChange={setSelectedState}
+            />
+            <CustomSelect
+              label="Garden Type"
+              value={selectedGardenType}
+              options={gardenTypeOptions}
+              onChange={setSelectedGardenType}
+            />
+            <CustomSelect
+              label="Plot Status"
+              value={selectedPlot}
+              options={plotOptions}
+              onChange={value => setSelectedPlot(value)}
+            />
+          </Flex>
+        </ContentContainer>
         <ButtonDiv>
           <Button
             onClick={onBack}
@@ -238,7 +238,7 @@ export default function OnboardingFlow() {
     <>
       {step === 1 && (
         <SelectionScreen
-          progress={2.6}
+          progress={3}
           questionNumber={1}
           questionTitle="What state are you in?"
           options={usStateOptions}

diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
@@ -4,16 +4,14 @@ import COLORS from '@/styles/colors';
 export const OnboardingContainer = styled.div`
   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: 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
+  margin: auto;
 `;
 export const ContentContainer = styled.div`
   width: 100%;
@@ -28,11 +26,10 @@ export const ContentContainer = styled.div`
 
 export const QuestionDiv = styled.div`
   display: flex;
-  flex-direction: column;
-  height: max(60px, max-content);
+  flex-direction: row;
+  min-height: 60px;
   align-items: center;
-  justify-content: end;
-  align-content: center;
+  /* align-items: flex-end; */ // this would match designs
   margin-bottom: 40px;
   text-align: center;
 `;