[feat] finalize onboarding styling #64

ccatherinetan · 2024-12-08T00:27:44Z

What's new in this PR 🧑‍🌾

Description

Styled Onboarding Pages
- Created ProgressBar
- Consolidated styling in SelectionScreen
- Moved Onboarding DropdownOptions to utils/helpers
Removed hasPlot/setHasPlot from ProfileContext
Refactored components
- RadioGroup: ensure that no value is selected only if defaultValue is null (false should appear)
- CustomSelect: use placeholder and label props
- DateInput: add label prop
- Buttons: styling / fonts
Modified View Plants
- Style Clear Filters Button
- Remove hasPlot from screen selection
Modified Add Details Flow
- Used updated CustomSelect, DateInput in PlantDetails
- Refactored insertUserPlant query to insert userPlant array in 1 go.

Screenshots

Onboarding:

Add Details

View Plants (see Clear Filters Button)

How to review

Next steps

garden set up guide
Planting timeline (key and month label) for plant pages
https://www.developerway.com/posts/react-re-renders-guide
- TODO: We don’t need to memoize the filtering?
  - View Plants: filteredPlantList, filteredUserPlantList
  - Seasonal Planting Guide
TODO: use CONFIG throughout the app
Consolidate Button styles
- BigButton: P2 (14px)
- SmallButton: P3 (12px)
Refactor CustomSelect to take in value:DropdownOption rather than just T
- Need to change onboarding to take all DropdownOption as states…
- Refactor DropdownOption to type Record<T, string>, i.e. use the values as keys.
Separate out PlantContext
- we should prob separate setPlantsToAdd and plantsToAdd out into a separate context. otherwise, updating setPlantsToAdd would trigger a re-render of the entire app

Relevant links

Online sources

https://www.developerway.com/posts/react-re-renders-guide: on how to mitigate re-rendering

Related PRs

CC: @ccatherinetan

ccatherinetan

looking amazing so far! I rebased + added some styling changes to OnboardingContainer, since I was assuming that we'd move OnboardingContainer out of the individual questions and into the OnboardingFlow component.

However, that resulted in the Review page being messed up. You can revert to your original style for OnboardingContainer if you'd like, but i think it's worth considering ways to simplify + reudce redundancy.

Also, after rebasing, there were some issues with the style of the Progress bar against the Header, which we should address

ccatherinetan · 2024-12-08T09:37:30Z

app/onboarding/page.tsx

+        <ProgressBar progress={2.6} />
+        <P3 $color={COLORS.shrub} style={{ marginTop: '2.5rem' }}>
+          QUESTION 1 OF 3
+        </P3>


since the progress bar and the question number are shared between multiple pages, we should move it outside of these individual components and into the OnboardingFlow component to reduce redundancy

If we end up making onboarding a multi-page flow next sem, these would be good candidates of things to include in the layout.tsx

So the individual question components can primarily just be the Question Title + the RadioOptions

we might even consider creating a general component OnboardingQuestion that can be used for all 3 questions

ccatherinetan · 2024-12-08T09:38:06Z

app/onboarding/page.tsx

+      <ButtonDiv>
+        <Button
+          onClick={onNext}
+          disabled={!selectedState}
+          $primaryColor={COLORS.shrub}
+        >
+          Next
+        </Button>
+      </ButtonDiv>


i think it'd make sense to move the next/back buttons to OnboardingFlow as well

ccatherinetan · 2024-12-13T19:52:53Z

app/onboarding/page.tsx

-        </BigButton>
-      </ReviewContainer>
-    </PageContainer>
+          <LabeledCustomSelect


note: instead of creating a new component, we want to just add a new prop to CustomSelect

ccatherinetan · 2024-12-13T23:40:16Z

app/onboarding/page.tsx

+      <BigButton color={COLORS.shrub} onClick={handleSubmit}>
+        Let&apos;s Start Growing!
+      </BigButton>


there should be both a "Back" and a "Let's Grow!" (Submit) button here.
We can copy over the button styles from the other screens here.

ccatherinetan · 2024-12-23T08:53:01Z

app/onboarding/styles.ts

-  min-height: 100vh;
-  background-color: ${COLORS.seed};
+export const OnboardingContainer = styled.div`
+  min-height: calc(100vh - 60px); // 60px is the hardcoded height of Header


we should probably change this to use Flex full-screen so that there's a single source of truth in terms of the screen height

ccatherinetan · 2024-12-23T09:11:30Z

components/ProgressBar/styles.ts

+
+export const BackgroundDiv = styled.div`
+  width: 100%;
+  height: 0.375rem;


this should be px

ccatherinetan · 2024-12-23T19:11:02Z

components/CustomSelect/index.tsx

+        onClick={isContainerClickable ? () => setIsOpen(!isOpen) : undefined}
+      >
+        <P2 $color={COLORS.midgray}>
+          {options.find(option => option.value === value)?.label || placeholder}


we may want to refactor DropdownOption<T> to Record<T, string>, i.e. use the values as keys, to mitigate needing to search through options for the corresponding label.

ccatherinetan · 2024-12-23T19:11:40Z

components/CustomSelect/index.tsx

+          <OptionsContainer>
+            {options.map(option => (
+              <Option
+                key={String(option.value)}


the key can just be an index since the options list is static, but maybe if we foresee ever passing in dynamic options, this might be a good idea

ccatherinetan · 2024-12-23T19:17:26Z

utils/ProfileProvider.tsx

  plantsToAdd: Plant[];
  setProfile: (completeProfile: Profile) => Promise<void>; // Now expects full Profile
  loadProfile: () => Promise<void>;
-  setHasPlot: (plotValue: boolean | null) => void;
  setPlantsToAdd: (plants: Plant[]) => void;


we should prob separate setPlantsToAdd and plantsToAdd out into a separate context. otherwise, updating setPlantsToAdd would trigger a re-render of the entire app

ccatherinetan linked an issue Dec 8, 2024 that may be closed by this pull request

Finalize Onboarding Styles + Create Onboarding Progress Bar #48

Closed

ccatherinetan force-pushed the 48-finalize-onboarding-styles-+-create-onboarding-progress-bar-2 branch from b5a63e7 to 4a9d70e Compare December 8, 2024 08:36

ccatherinetan commented Dec 8, 2024

View reviewed changes

ccatherinetan force-pushed the 48-finalize-onboarding-styles-+-create-onboarding-progress-bar-2 branch from c8b45a4 to accda5c Compare December 13, 2024 19:51

ccatherinetan marked this pull request as ready for review December 13, 2024 19:52

ccatherinetan commented Dec 13, 2024

View reviewed changes

kevin3656 and others added 16 commits December 22, 2024 20:02

feat finalized onboarding styling

11b9907

fix button text font inheritance; center onboarding div

d4b04e5

remove flex from onboarding

39ed17d

remove fixed width in RadioGroup; set height of header

c72e339

remove absolute styling of next button

2e8b6fa

fix review page spacing

3badefd

fix H3 styling in add details

579f73d

fix radiogroup control error

97c00d1

fix styling of CustomSelect

5a3f80d

restyle back/next buttons

e5cefda

remove EditableInput

1bd4c52

create SelectionScreen component

509b674

make CustomSelect label clickable

24d6ad9

move DateInput label inside component

69486f5

make add details button styles consistent with onboarding

76e9059

use Omit<UserPlant> for add details query

057b35d

ccatherinetan force-pushed the 48-finalize-onboarding-styles-+-create-onboarding-progress-bar-2 branch from accda5c to 057b35d Compare December 23, 2024 08:39

ccatherinetan added 2 commits December 23, 2024 00:46

move all filter options in onboarding to utils

16e7ec9

remove hasPlot state from ProfileContext

2a65c7e

ccatherinetan commented Dec 23, 2024

View reviewed changes

ccatherinetan added 3 commits December 23, 2024 00:57

remove gray color

ff5465c

consolidate radiogroup id

546451e

fix progressbar prop naming

888d625

remove unnecessary type extension in CustomSelect

b05c9d8

ccatherinetan commented Dec 23, 2024

View reviewed changes

ccatherinetan added 2 commits December 23, 2024 09:48

remove back button from 1st onboarding q

4c831ad

style Clear Filters button

4804804

ccatherinetan commented Dec 23, 2024

View reviewed changes

use px in ProgressBar

8c12dbc

ccatherinetan merged commit b754ad7 into main Dec 23, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] finalize onboarding styling #64

[feat] finalize onboarding styling #64

ccatherinetan commented Dec 8, 2024 •

edited

Loading

ccatherinetan left a comment

ccatherinetan Dec 8, 2024

ccatherinetan Dec 8, 2024

ccatherinetan Dec 13, 2024

ccatherinetan Dec 13, 2024

ccatherinetan Dec 23, 2024

ccatherinetan Dec 23, 2024

ccatherinetan Dec 23, 2024

ccatherinetan Dec 23, 2024 •

edited

Loading

ccatherinetan Dec 23, 2024

[feat] finalize onboarding styling #64

[feat] finalize onboarding styling #64

Conversation

ccatherinetan commented Dec 8, 2024 • edited Loading

What's new in this PR 🧑‍🌾

Description

Screenshots

How to review

Next steps

Relevant links

Online sources

Related PRs

ccatherinetan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccatherinetan Dec 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccatherinetan commented Dec 8, 2024 •

edited

Loading

ccatherinetan Dec 23, 2024 •

edited

Loading