Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make The Review Form Pretty #52

Merged
merged 15 commits into from
Apr 11, 2024
Merged

Make The Review Form Pretty #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
8f3defc
feat(form): made the form prettier a little
cinyecai Mar 23, 2024
99581e4
feat(form): make it even PRETTIER
RishikeshNK Mar 24, 2024
b3e11a2
feat(form): add more form style changes
RishikeshNK Mar 24, 2024
5c625d7
fix(form): fix card border color
RishikeshNK Mar 25, 2024
502bfa3
fix: remove console log
RishikeshNK Mar 25, 2024
1885a93
fix(form): change error state font
RishikeshNK Mar 25, 2024
a246a98
feat(form): add a final confirmation page
RishikeshNK Mar 31, 2024
9c6544b
fix(form): fix spacing between checkbox elements
RishikeshNK Mar 31, 2024
1524f7d
chore: merge main
RishikeshNK Mar 31, 2024
a2fa348
refactor(app): refactor form components
RishikeshNK Apr 2, 2024
36c5708
refactor(app): move components to form folder
RishikeshNK Apr 2, 2024
dcfc761
fix(app): fix background color on review page
RishikeshNK Apr 2, 2024
70ef608
fix: fix eslint
RishikeshNK Apr 2, 2024
8a0093f
fix(ui): fix button size diff
RishikeshNK Apr 11, 2024
10279ab
fix(ui): fix steps type
RishikeshNK Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
39 changes: 37 additions & 2 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions public/svg/verified.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 10 additions & 8 deletions src/app/(protected)/review/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>
);
Expand Down
2 changes: 0 additions & 2 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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>
);
Expand Down
80 changes: 45 additions & 35 deletions src/components/company-details-section.tsx → ...mponents/form/company-details-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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}
Expand All @@ -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>
);
}
Loading
Loading