Update form to look better & add automatic lunch toggle

apps/next/src/components/layout/profile/avatar-upload.tsx

@@ -191,10 +191,7 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
         {croppedImage && (
           <div className='flex flex-col items-center gap-3'>
             <Avatar className='h-42 w-42'>
-              <AvatarImage
-                alt='Cropped preview'
-                src={croppedImage}
-              />
+              <AvatarImage alt='Cropped preview' src={croppedImage} />
             </Avatar>
             <div className='flex items-center gap-1'>
               <Button

apps/next/src/components/layout/profile/user-info.tsx

@@ -10,7 +10,6 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
-  Checkbox,
   Form,
   FormControl,
   FormDescription,
@@ -20,6 +19,7 @@ import {
   FormMessage,
   Input,
   SubmitButton,
+  Switch,
 } from '@/components/ui';
 import { toast } from 'sonner';
 
@@ -54,7 +54,9 @@ export const UserInfoForm = ({ preloadedUser }: UserInfoFormProps) => {
   const updateUserName = useMutation(api.auth.updateUserName);
   const updateUserEmail = useMutation(api.auth.updateUserEmail);
   const updateUserLunchtime = useMutation(api.auth.updateUserLunchtime);
-  const updateUserAutomaticLunch = useMutation(api.auth.updateUserAutomaticLunch);
+  const updateUserAutomaticLunch = useMutation(
+    api.auth.updateUserAutomaticLunch,
+  );
 
   const initialValues = useMemo<z.infer<typeof formSchema>>(
     () => ({
@@ -81,7 +83,7 @@ export const UserInfoForm = ({ preloadedUser }: UserInfoFormProps) => {
     if (email !== (user?.email ?? '')) ops.push(updateUserEmail({ email }));
     if (lunchTime !== (user?.lunchTime ?? ''))
       ops.push(updateUserLunchtime({ lunchTime }));
-    if (automaticLunch !== (user?.automaticLunch))
+    if (automaticLunch !== user?.automaticLunch)
       ops.push(updateUserAutomaticLunch({ automaticLunch }));
     if (ops.length === 0) return;
     setLoading(true);
@@ -101,13 +103,14 @@ export const UserInfoForm = ({ preloadedUser }: UserInfoFormProps) => {
     <>
       <CardHeader>
         <CardTitle className='text-2xl'>Account Information</CardTitle>
-        <CardDescription>
-          Update your account information here.
-        </CardDescription>
+        <CardDescription>Update your account information here.</CardDescription>
       </CardHeader>
       <CardContent>
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6'>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className='space-y-6'
+          >
             <FormField
               control={form.control}
               name='name'
@@ -139,23 +142,19 @@ export const UserInfoForm = ({ preloadedUser }: UserInfoFormProps) => {
                 </FormItem>
               )}
             />
-            <div className='flex flex-row justify-center space-x-6'>
+            <div className='flex flex-row justify-center space-x-10'>
               <FormField
                 control={form.control}
                 name='lunchTime'
                 render={({ field }) => (
-                  <FormItem className='w-2/5'>
-                    <FormLabel>Lunch Time</FormLabel>
-                    <FormControl>
-                      <Input
-                        type='time'
-                        className='max-w-26'
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Your regular lunch time.
-                    </FormDescription>
+                  <FormItem className='sm:w-2/5'>
+                    <div className='flex flex-row space-x-2 my-auto'>
+                      <FormLabel>Lunch Time</FormLabel>
+                      <FormControl>
+                        <Input type='time' className='w-28' {...field} />
+                      </FormControl>
+                    </div>
+                    <FormDescription>Your regular lunch time.</FormDescription>
                     <FormDescription className='dark:text-red-300/60 text-red-800/80'>
                       {!user?.lunchTime && 'Not currently set.'}
                     </FormDescription>
@@ -167,10 +166,10 @@ export const UserInfoForm = ({ preloadedUser }: UserInfoFormProps) => {
                 control={form.control}
                 name='automaticLunch'
                 render={({ field }) => (
-                  <FormItem className='w-2/5'>
+                  <FormItem className='w-2/5 mt-2'>
                     <div className='flex flex-row space-x-2 my-auto'>
                       <FormControl>
-                        <Checkbox
+                        <Switch
                           className='border-solid border-primary'
                           checked={field.value}
                           onCheckedChange={field.onChange}
@@ -187,8 +186,12 @@ export const UserInfoForm = ({ preloadedUser }: UserInfoFormProps) => {
               />
             </div>
 
-            <div className='flex justify-center'>
-              <SubmitButton disabled={loading} pendingText='Saving...'>
+            <div className='flex justify-center mt-5'>
+              <SubmitButton
+                className='lg:w-1/3 w-2/3 text-[1.0rem]'
+                disabled={loading}
+                pendingText='Saving...'
+              >
                 Save Changes
               </SubmitButton>
             </div>