Make The Review Form Pretty (#52)

* feat(form): made the form prettier a little * feat(form): make it even PRETTIER * feat(form): add more form style changes * fix(form): fix card border color * fix: remove console log * fix(form): change error state font * feat(form): add a final confirmation page * fix(form): fix spacing between checkbox elements * refactor(app): refactor form components * refactor(app): move components to form folder * fix(app): fix background color on review page * fix: fix eslint * fix(ui): fix button size diff * fix(ui): fix steps type --------- Co-authored-by: cinyecai <cinyecai@gmail.com>
sandboxnu · Apr 11, 2024 · 2e3fc9f · 2e3fc9f
1 parent 55a7d93
commit 2e3fc9f
Show file tree

Hide file tree

Showing 25 changed files with 228 additions and 144 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.50.1",
+    "react-scroll": "^1.9.0",
     "server-only": "^0.0.1",
     "sonner": "^1.4.3",
     "superjson": "^2.2.1",
@@ -55,6 +56,7 @@
     "@types/node": "^18.19.15",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@types/react-scroll": "^1.8.10",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.17",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/svg/verified.svg b/public/svg/verified.svg
diff --git a/src/app/(protected)/review/page.tsx b/src/app/(protected)/review/page.tsx
@@ -1,4 +1,4 @@
-import { ReviewForm } from "~/components/review-form";
+import { ReviewForm } from "~/components/form/review-form";
 import { getServerSession } from "next-auth";
 import { authOptions } from "~/server/auth";
 import { redirect, notFound } from "next/navigation";
@@ -45,13 +45,15 @@ export default async function Page({
     }
 
     return (
-      <div className="container mx-auto px-4 py-10 sm:px-6 lg:px-8">
-        <div className="mx-auto max-w-lg">
-          <ReviewForm
-            company={company}
-            roleId={role.id}
-            profileId={profile.id}
-          />
+      <div className="min-h-screen bg-cooper-blue-200">
+        <div className="mx-auto w-full px-4 py-16">
+          <div className="mx-auto max-w-6xl">
+            <ReviewForm
+              company={company}
+              roleId={role.id}
+              profileId={profile.id}
+            />
+          </div>
         </div>
       </div>
     );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import "~/styles/globals.css";
 import { TRPCReactProvider } from "~/trpc/react";
-import { Toaster } from "~/components/ui/sonner";
 import { cn } from "~/lib/utils";
 import { bentonSansFont } from "~/styles/font";
 
@@ -23,7 +22,6 @@ export default function RootLayout({
     >
       <body className={cn("min-h-screen bg-white font-sans antialiased")}>
         <TRPCReactProvider>{children}</TRPCReactProvider>
-        <Toaster />
       </body>
     </html>
   );

diff --git a/src/components/company-details-section.tsx → ...mponents/form/company-details-section.tsx b/src/components/company-details-section.tsx → ...mponents/form/company-details-section.tsx
@@ -1,5 +1,6 @@
+import { useState } from "react";
 import { useFormContext } from "react-hook-form";
-import { FormSection } from "~/components/form-section";
+import { FormSection } from "~/components/form/form-section";
 import {
   FormControl,
   FormField,
@@ -8,10 +9,10 @@ import {
   FormMessage,
 } from "~/components/ui/form";
 import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
-import { Input } from "~/components/ui/input";
 import { Checkbox } from "~/components/ui/checkbox";
 
-import { benefits } from "~/components/review-form";
+import { benefits } from "~/components/form/review-form";
+import { Textarea } from "~/components/ui/textarea";
 
 type CompanyDetailsSectionProps = {
   companyName: string;
@@ -23,22 +24,23 @@ type CompanyDetailsSectionProps = {
  */
 export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
   const form = useFormContext();
+  const [otherBenefits, setOtherBenefits] = useState(false);
 
   return (
-    <FormSection title="4. Company Details">
+    <FormSection title="Company Details" className="text-cooper-red-500">
       <FormField
         control={form.control}
         name="workEnvironment"
         render={({ field }) => (
-          <FormItem className="space-y-3">
+          <FormItem className="space-y-6">
             <FormLabel>What kind of work model?*</FormLabel>
             <FormControl>
               <RadioGroup
                 onValueChange={field.onChange}
                 defaultValue={field.value}
-                className="flex flex-col space-y-1"
+                className="flex flex-col space-y-3"
               >
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="INPERSON"
@@ -47,7 +49,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
                   </FormControl>
                   <FormLabel>In-person</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="HYBRID"
@@ -56,7 +58,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
                   </FormControl>
                   <FormLabel>Hybrid</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="REMOTE"
@@ -75,15 +77,15 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
         control={form.control}
         name="drugTest"
         render={({ field }) => (
-          <FormItem className="space-y-3">
+          <FormItem className="space-y-6">
             <FormLabel>Did {props.companyName} drug test?*</FormLabel>
             <FormControl>
               <RadioGroup
                 onValueChange={field.onChange}
                 defaultValue={field.value}
-                className="flex flex-col space-y-1"
+                className="flex flex-col space-y-3"
               >
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="true"
@@ -92,7 +94,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
                   </FormControl>
                   <FormLabel>Yes</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="false"
@@ -111,15 +113,15 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
         control={form.control}
         name="overtimeNormal"
         render={({ field }) => (
-          <FormItem className="space-y-3">
+          <FormItem className="space-y-6">
             <FormLabel>Was working overtime common?*</FormLabel>
             <FormControl>
               <RadioGroup
                 onValueChange={field.onChange}
                 defaultValue={field.value}
-                className="flex flex-col space-y-1"
+                className="flex flex-col space-y-3"
               >
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="true"
@@ -128,7 +130,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
                   </FormControl>
                   <FormLabel>Yes</FormLabel>
                 </FormItem>
-                <FormItem className="flex items-center space-x-3 space-y-0">
+                <FormItem className="flex items-center space-x-4 space-y-0">
                   <FormControl>
                     <RadioGroupItem
                       value="false"
@@ -152,7 +154,7 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
           control={form.control}
           name={benefit.field}
           render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+            <FormItem className="flex flex-row items-start space-x-4 space-y-0">
               <FormControl>
                 <Checkbox
                   checked={field.value}
@@ -164,23 +166,31 @@ export function CompanyDetailsSection(props: CompanyDetailsSectionProps) {
           )}
         />
       ))}
-      <FormField
-        control={form.control}
-        name="otherBenefits"
-        render={({ field }) => (
-          <FormItem className="flex flex-row items-start space-x-2 space-y-0">
-            <Checkbox checked={!!field.value} className="pointer-events-none" />
-            <FormControl>
-              <Input
-                {...field}
-                placeholder="Other..."
-                className="highlight h-4 border-none bg-white pl-1 font-medium focus:ring-0"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+      <FormItem className="flex flex-row items-start space-x-4 space-y-0">
+        <Checkbox
+          checked={otherBenefits}
+          onCheckedChange={(c) => setOtherBenefits(!!c)}
+        />
+        <FormLabel>Other</FormLabel>
+        <FormMessage />
+      </FormItem>
+      {otherBenefits && (
+        <FormField
+          control={form.control}
+          name="otherBenefits"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder="Please type the other benefits here."
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      )}
     </FormSection>
   );
 }