Implement new onboarding modal #346 (#353)

* onboarding form style changes

* made co-op checkbox optional

* added grad year validation msg + updated major form control

* small styling fixes on header, checkbox, and dropdowns

* graduation year validation not needed

* removed unused inport

* fix email placeholder and scroll overflow

Author: leeyandrea

apps/web/src/app/_components/combo-box.tsx

@@ -54,7 +54,7 @@ export default function ComboBox({
 
   const styleVariant =
     variant === "form"
-      ? "flex h-16 w-full rounded-lg border-2 border-cooper-gray-150 bg-white px-3 py-2 text-xl font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      ? "flex h-16 w-full rounded-lg border border-cooper-gray-150 bg-white px-3 py-2 text-xl font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
       : variant === "filtering"
         ? "w-36 md:w-[21rem] h-10 lg:h-12 border-cooper-gray-400 text-lg placeholder:opacity-50 focus:ring-0 active:ring-0 rounded-lg border-[0.75px] py-0"
         : "h-8 py-0";

apps/web/src/app/_components/onboarding/dialog.tsx

@@ -43,7 +43,7 @@ export function OnboardingDialog({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
-        className="max-h-[90dvh] max-w-[85dvw] overflow-y-scroll rounded-lg p-8 md:max-w-[70dvw] lg:max-w-[46rem] lg:p-12"
+        className="max-h-[90dvh] max-w-[85dvw] overflow-y-auto rounded-lg p-6 md:max-w-[70dvw] lg:max-w-[46rem] lg:p-8"
         aria-describedby="The form to create a Cooper profile once you have logged in with a husky google account."
       >
         <OnboardingForm

apps/web/src/app/_components/onboarding/onboarding-form.tsx

@@ -4,10 +4,10 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import type { Session } from "@cooper/auth";
-import { cn } from "@cooper/ui";
 import { Button } from "@cooper/ui/button";
 import { DialogTitle } from "@cooper/ui/dialog";
 import { Form, FormControl, FormField, FormItem } from "@cooper/ui/form";
+import { Checkbox } from "@cooper/ui/checkbox";
 
 import {
   FormLabel,
@@ -40,9 +40,7 @@ const formSchema = z.object({
     .number()
     .min(1, "Graduation month is required")
     .max(12, "Invalid month"),
-  cooped: z.boolean({
-    required_error: "Please select whether you've completed a co-op before",
-  }),
+  cooped: z.boolean().optional(),
 });
 
 export type OnboardingFormType = z.infer<typeof formSchema>;
@@ -101,13 +99,10 @@ export function OnboardingForm({
 
   return (
     <>
-      <DialogTitle className="pb-2 text-center text-2xl font-bold">
-        Create a Cooper Account
+      <DialogTitle className="pb-6 text-left text-lg font-medium ">
+        Let’s get you setup
       </DialogTitle>
       <Form {...form}>
-        <p className="text-gray-500">
-          <span className="text-red-500">* </span>Required
-        </p>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
           className="flex flex-col space-y-6"
@@ -120,7 +115,11 @@ export function OnboardingForm({
                 <FormItem className="max-w-72">
                   <FormLabel required>First Name</FormLabel>
                   <FormControl>
-                    <Input placeholder="First" {...field} />
+                    <Input
+                      placeholder="First"
+                      {...field}
+                      onClear={() => field.onChange("")}
+                    />
                   </FormControl>
                   <FormMessage className="text-base" />
                 </FormItem>
@@ -133,7 +132,11 @@ export function OnboardingForm({
                 <FormItem className="max-w-72 lg:ml-2">
                   <FormLabel required>Last Name</FormLabel>
                   <FormControl>
-                    <Input placeholder="Last" {...field} />
+                    <Input
+                      placeholder="Last"
+                      {...field}
+                      onClear={() => field.onChange("")}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -144,10 +147,14 @@ export function OnboardingForm({
             control={form.control}
             name="email"
             render={({ field }) => (
-              <FormItem className="max-w-72">
+              <FormItem>
                 <FormLabel required>Email</FormLabel>
                 <FormControl>
-                  <Input placeholder="example@example.com" {...field} />
+                  <Input
+                    placeholder="example@husky.neu.edu"
+                    {...field}
+                    onClear={() => field.onChange("")}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -158,25 +165,28 @@ export function OnboardingForm({
               control={form.control}
               name="major"
               render={() => (
-                <FormItem className="max-w-72">
-                  <FormLabel>Major</FormLabel>
-                  <ComboBox
-                    defaultLabel={majorLabel || "Select major..."}
-                    searchPlaceholder="Search major..."
-                    searchEmpty="No major found."
-                    valuesAndLabels={majors.map((major) => ({
-                      value: major,
-                      label: major,
-                    }))}
-                    currLabel={majorLabel}
-                    onSelect={(currentValue) => {
-                      setMajorLabel(
-                        currentValue === majorLabel ? "" : currentValue,
-                      );
-                      form.setValue("major", currentValue);
-                    }}
-                    triggerClassName="max-w-72"
-                  />
+                <FormItem>
+                  <FormLabel required>Major</FormLabel>
+                  <FormControl>
+                    <ComboBox
+                      variant="form"
+                      defaultLabel={majorLabel || "Select major..."}
+                      searchPlaceholder="Search major..."
+                      searchEmpty="No major found."
+                      valuesAndLabels={majors.map((major) => ({
+                        value: major,
+                        label: major,
+                      }))}
+                      currLabel={majorLabel}
+                      onSelect={(currentValue) => {
+                        setMajorLabel(
+                          currentValue === majorLabel ? "" : currentValue,
+                        );
+                        form.setValue("major", currentValue);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -185,42 +195,51 @@ export function OnboardingForm({
               control={form.control}
               name="minor"
               render={({ field }) => (
-                <FormItem className="max-w-72">
+                <FormItem>
                   <FormLabel>Minor</FormLabel>
                   <FormControl>
-                    <Input placeholder="Minor" {...field} />
+                    <Input
+                      placeholder="Minor"
+                      {...field}
+                      onClear={() => field.onChange("")}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
           </div>
+
           <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
             <FormField
               control={form.control}
-              name="graduationYear"
+              name="graduationMonth"
               render={({ field }) => (
-                <FormItem className="max-w-72">
-                  <FormLabel required>Graduation Year</FormLabel>
+                <FormItem>
+                  <FormLabel required>Graduation Month</FormLabel>
                   <FormControl>
-                    <Input placeholder="Year" {...field} />
+                    <Select
+                      placeholder="Month"
+                      options={monthOptions}
+                      className="min-w-full"
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
             <FormField
               control={form.control}
-              name="graduationMonth"
+              name="graduationYear"
               render={({ field }) => (
-                <FormItem className="max-w-72">
-                  <FormLabel required>Graduation Month</FormLabel>
+                <FormItem>
+                  <FormLabel required>Graduation Year</FormLabel>
                   <FormControl>
-                    <Select
-                      placeholder="Month"
-                      options={monthOptions}
-                      className="min-w-full"
+                    <Input
+                      placeholder="Year"
                       {...field}
+                      onClear={() => field.onChange("")}
                     />
                   </FormControl>
                   <FormMessage />
@@ -232,42 +251,21 @@ export function OnboardingForm({
             control={form.control}
             name="cooped"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel required>
-                  Have you completed a co-op before?
-                </FormLabel>
+              <FormItem className="max-w-72">
                 <FormControl>
-                  <FormItem className="flex items-center space-x-4">
+                  <FormItem>
                     <FormControl>
-                      <div>
-                        <Button
-                          type="button"
-                          variant={cooped === true ? "default" : "outline"}
-                          className={cn(
-                            "mr-0 h-12 rounded-r-none border-2 border-cooper-gray-300 text-lg text-cooper-gray-400 shadow-none ring-offset-background hover:bg-accent hover:text-black focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2",
-                            cooped === true && "bg-cooper-blue-200 text-black",
-                          )}
-                          onClick={() => {
-                            setCooped(true);
-                            field.onChange(true);
-                          }}
-                        >
-                          Yes
-                        </Button>
-                        <Button
-                          type="button"
-                          variant={cooped === false ? "default" : "outline"}
-                          className={cn(
-                            "ml-0 h-12 rounded-l-none border-2 border-l-0 border-cooper-gray-300 text-lg text-cooper-gray-400 shadow-none ring-offset-background hover:bg-accent hover:text-black focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2",
-                            cooped === false && "bg-cooper-blue-200 text-black",
-                          )}
-                          onClick={() => {
-                            setCooped(false);
-                            field.onChange(false);
+                      <div className="flex items-center space-x-2">
+                        <Checkbox
+                          checked={cooped}
+                          onCheckedChange={(checked) => {
+                            setCooped(checked === true);
+                            field.onChange(checked === true);
                           }}
-                        >
-                          No
-                        </Button>
+                        />
+                        <FormLabel>
+                          I have completed a co-op or internship
+                        </FormLabel>
                       </div>
                     </FormControl>
                   </FormItem>
@@ -277,8 +275,11 @@ export function OnboardingForm({
             )}
           />
           <div className="mt-4 flex justify-end">
-            <Button type="submit" className="w-24">
-              Next
+            <Button
+              type="submit"
+              className=" bg-cooper-gray-550 border-cooper-gray-550 hover:bg-cooper-gray-300 hover:border-cooper-gray-300 px-3.5 py-2 text-base font-bold"
+            >
+              Finish
             </Button>
           </div>
         </form>

apps/web/src/app/_components/themed/onboarding/form.tsx

@@ -9,7 +9,7 @@ export function FormLabel({
   ...props
 }: React.ComponentProps<typeof FormLabelPrimitive> & { required?: boolean }) {
   return (
-    <FormLabelPrimitive className="text-lg font-semibold text-black" {...props}>
+    <FormLabelPrimitive className="text-sm font-bold text-black" {...props}>
       {children}
       {required && <span className="ml-1 text-red-500">*</span>}
     </FormLabelPrimitive>

apps/web/src/app/_components/themed/onboarding/input.tsx

@@ -1,10 +1,32 @@
 import { Input as InputPrimitive } from "@cooper/ui/input";
+import { X } from "lucide-react";
 
-export function Input(props: React.ComponentProps<typeof InputPrimitive>) {
+interface InputProps extends React.ComponentProps<typeof InputPrimitive> {
+  onClear?: () => void;
+}
+
+export function Input({ onClear, ...props }: InputProps) {
   return (
-    <InputPrimitive
-      className="h-12 rounded-lg border-2 border-cooper-gray-300 text-lg shadow-none hover:bg-accent"
-      {...props}
-    />
+    <div className="relative w-full">
+      <InputPrimitive
+        className="h-9 rounded-lg border border-cooper-gray-150 text-sm shadow-none hover:bg-accent pr-10"
+        {...props}
+      />
+      {onClear && (
+        <div className="absolute inset-y-0 right-3 flex items-center">
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onClear();
+            }}
+            className="pointer-events-auto flex items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
+            aria-label="Clear input"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+    </div>
   );
 }

apps/web/src/app/_components/themed/onboarding/select.tsx

@@ -19,7 +19,7 @@ export const Select: React.FC<SelectProps> = ({
     <div className="relative w-full">
       <select
         className={cn(
-          "h-12 w-full appearance-none rounded-lg border-2 border-cooper-gray-300 bg-transparent px-4 pr-10 text-lg text-cooper-gray-400 shadow-none placeholder:text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "h-9 w-full appearance-none rounded-lg border border-cooper-gray-150 bg-transparent px-4 pr-10 text-sm text-cooper-gray-350 shadow-none placeholder:text-muted-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}

packages/ui/src/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "border-cooper-gray-600 data-[state=checked]:bg-cooper-gray-600 peer h-[23px] w-[23px] shrink-0 rounded-[5px] border bg-white ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white",
+      "border-cooper-gray-600 data-[state=checked]:bg-cooper-gray-550 data-[state=checked]:border-cooper-gray-550 peer h-[23px] w-[23px] shrink-0 rounded-[5px] border bg-white ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white",
       className,
     )}
     {...props}

packages/ui/src/dialog.tsx

@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "relative z-50 mx-2 gap-4 rounded-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+          "relative z-50 mx-2 gap-6 rounded-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
           className,
         )}
         {...props}

packages/ui/src/form.tsx

@@ -70,7 +70,7 @@ const FormItem = React.forwardRef<
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div ref={ref} className={cn("space-y-1.5", className)} {...props} />
     </FormItemContext.Provider>
   );
 });