Review Header #38
Review Header #38
Conversation
BREAKING CHANGE: modify schema
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RishikeshNK
requested review from
RishikeshNK
and removed request for
RishikeshNK
| @@ -43,6 +43,7 @@ | |||
| "superjson": "^2.2.1", | |||
| "tailwind-merge": "^2.2.1", | |||
| "tailwindcss-animate": "^1.0.7", | |||
| "yup": "^1.3.3", | |||
There was a problem hiding this comment.
Was Yup installed accidentally? If we want any schema validation, we can use Zod which is currently being used for validating the tRPC endpoints and the form.
| className="space-y-6" | ||
| <> | ||
| <header | ||
| className={`relative z-10 mt-8 flex justify-center ${isSticky ? "sticky top-[-2rem] sm:top-[-5rem]" : ""}`} |
There was a problem hiding this comment.
For chaining Tailwind utility classes, can we try using the cn(... inputs: ClassValue[]) function from ~/lib/utils.ts? All conflicts and composition logic can be handled by this function.
| <h1 className="text-3xl font-semibold">Submit a Co-op Review</h1> | ||
| <p className="my-4">description about this form here.</p> | ||
| </div> | ||
| <div className={`mt-2 flex justify-around`}> |
There was a problem hiding this comment.
Can we move the header to a different component in order to keep the size of the review-form.tsx file minimal?
| </Button> | ||
| <Button type="submit">Submit</Button> | ||
| <div | ||
| className={`space-4 relative flex min-w-[95vw] flex-col rounded-xl bg-white p-8 sm:min-w-[66vw] ${isSticky ? "outline" : ""}`} |
There was a problem hiding this comment.
Could you increase the spacing between the circles on smaller devices? The second and third label is sticking to each other on smaller devices.
| </Button> | ||
| <Button type="submit">Submit</Button> | ||
| <div | ||
| className={`space-4 relative flex min-w-[95vw] flex-col rounded-xl bg-white p-8 sm:min-w-[66vw] ${isSticky ? "outline" : ""}`} |
There was a problem hiding this comment.
Also, is there anyway we can refactor this to use the FormCard component from ~/components/form-card?
| const [headerPercentage, setHeaderPercentage] = useState<number>(40); | ||
| const [isSticky, setIsSticky] = useState<boolean>(false); | ||
| const [higlightedSectionIdx, setHighlightedSectionIdx] = useState<number>(0); | ||
| useEffect(() => { |
There was a problem hiding this comment.
Also, this could be low-priority but can we refactor this to use the useScroll hook from framer-motion instead of manually handling the scroll progress in a useEffect?
No specific task number
Description
Added the header to the review form. I had to not use the FormCard for the header due to issues I was having with the unique sticky behavior.
Things to be reviewed
Log in as a user and go to /review to see the header.
To Do:
Screenshots
When reviewing, double click and hit "inspect element" . Ensure the responsive icon is selected (in blue).
Next, tap on different screen sizes (the bar which says Mobile S - 320px can be changed) to see how the change looks on different screen sizes.
Checklist