create GardenSetUpGuide

calblueprint · Dec 23, 2024 · f82f9f5 · f82f9f5
1 parent b754ad7
commit f82f9f5
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 7 deletions.
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { UUID } from 'crypto';
 import { Button } from '@/components/Buttons';
 import CustomSelect from '@/components/CustomSelect';
+import GardenSetupGuide from '@/components/GardenSetupGuide';
 import ProgressBar from '@/components/ProgressBar';
 import RadioGroup from '@/components/RadioGroup';
 import CONFIG from '@/lib/configs';
@@ -44,6 +45,7 @@ function SelectionScreen<T = string>({
   selectedValue,
   setSelectedValue,
   options,
+  childComponent,
   onBack,
   onNext,
 }: {
@@ -53,6 +55,7 @@ function SelectionScreen<T = string>({
   selectedValue: T | undefined;
   setSelectedValue: (selected: T) => void;
   options: DropdownOption<T>[];
+  childComponent?: React.ReactNode;
   onBack?: () => void;
   onNext: () => void;
 }) {
@@ -82,6 +85,7 @@ function SelectionScreen<T = string>({
             onChange={setSelectedValue}
             defaultValue={selectedValue}
           />
+          <Flex $pt="16px">{childComponent}</Flex>
         </Flex>
         <ButtonDiv>
           {onBack && (
@@ -269,6 +273,12 @@ export default function OnboardingFlow() {
           setSelectedValue={setSelectedPlot}
           onBack={handleBack}
           onNext={handleNext}
+          // GardenSetupGuide should only appear when user selects an option for plotstatus
+          childComponent={
+            selectedPlot === undefined ? undefined : (
+              <GardenSetupGuide userType={selectedGardenType!} />
+            )
+          }
         />
       )}
       {step === 4 && (

diff --git a/app/plant-page/all-plants/[plantId]/style.ts b/app/plant-page/all-plants/[plantId]/style.ts
@@ -6,7 +6,7 @@ export const Container = styled.div`
 `;
 
 export const Header = styled.div`
-  background-color: ${COLORS.backgroundGrey};
+  background-color: ${COLORS.glimpse};
   margin: -28px -28px 24px -28px;
   padding: 12px 20px;
   padding-bottom: 27px;

diff --git a/app/plant-page/style.ts b/app/plant-page/style.ts
@@ -5,7 +5,7 @@ import { H3 } from '@/styles/text';
 // Image Header
 export const ImgHeader = styled.div`
   display: flex;
-  background-color: ${COLORS.backgroundGrey};
+  background-color: ${COLORS.glimpse};
   padding-bottom: 24px;
   position: relative;
   height: 220px;

diff --git a/components/GardenSetupGuide.tsx b/components/GardenSetupGuide.tsx
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+import { P2, P3 } from '@/styles/text';
+import { UserTypeEnum } from '@/types/schema';
+import { userTypeLabels } from '@/utils/helpers';
+
+const gardenSetupGuideLinks: Record<UserTypeEnum, string> = {
+  INDIV:
+    'https://drive.google.com/file/d/1ejoBPm_-UvXnnNhFb4AnOfeVR-BpkRxt/view?usp=sharing',
+  ORG: 'https://drive.google.com/file/d/1FreSIz0CY8qO3mW-pUMqOF1bqmcbvuMn/view?ts=670048d4',
+  SCHOOL:
+    'https://drive.google.com/file/d/1vuLIojh0AnBu31rk1Sz6Oss9VY-0YapT/view?usp=sharing',
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  padding-left: 20px;
+  border-radius: 5px;
+  border: 0.5px solid ${COLORS.lightgray};
+  border-left: 6px solid ${COLORS.lightgray};
+  gap: 8px;
+  background-color: ${COLORS.glimpse};
+`;
+
+export default function GardenSetupGuide({
+  userType,
+}: {
+  userType: UserTypeEnum;
+}) {
+  // TODO: maybe rename UserTypeEnum to GardenTypeEnum
+  return (
+    <Container>
+      <P2>Learn More about Setting Up a Plot</P2>
+      <P3
+        $color={COLORS.blueLink}
+        as="a"
+        href={gardenSetupGuideLinks[userType]}
+      >
+        {userTypeLabels[userType]} Garden Set-up Guide
+      </P3>
+      <P3>
+        This guide walks you through the process of setting up a new garden from
+        scratch, including assembling a team and creating a budget.
+      </P3>
+    </Container>
+  );
+}
diff --git a/components/GardeningTips/style.ts b/components/GardeningTips/style.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import COLORS from '@/styles/colors';
 
 export const Container = styled.div`
-  background-color: ${COLORS.backgroundGrey};
+  background-color: ${COLORS.glimpse};
   padding: 16px;
   border-radius: 8px;
   display: flex;

diff --git a/components/PlantDetails/index.tsx b/components/PlantDetails/index.tsx
@@ -26,7 +26,7 @@ export default function PlantDetails({
     <>
       <Flex
         $h="186px"
-        $background={COLORS.backgroundGrey}
+        $background={COLORS.glimpse}
         $justify="center"
         $align="center"
       >

diff --git a/components/YourPlantDetails/style.ts b/components/YourPlantDetails/style.ts
@@ -4,7 +4,7 @@ import { SmallRoundedButton } from '../Button';
 
 export const Container = styled.div`
   padding: 16px;
-  background-color: ${COLORS.backgroundGrey};
+  background-color: ${COLORS.glimpse};
   border-radius: 5px;
 `;
 

diff --git a/styles/colors.ts b/styles/colors.ts
@@ -12,12 +12,12 @@ const COLORS = {
   darkgray: '#555555',
   midgray: '#888888',
   lightgray: '#DDDDDD',
-  backgroundGrey: '#F7F6F3',
   glimpse: '#F7F6F3',
 
-  // error
+  // accent colors
   errorRed: '#D94E4E',
   successGreen: '#0D8817',
+  blueLink: '#0769BF',
 
   //seasonality chart colors
   indoors: '#F5B868',