consolidate form margins

xvvvyz · Jul 13, 2024 · c0ee890 · c0ee890
1 parent 5544952
commit c0ee890
Show file tree

Hide file tree

Showing 16 changed files with 170 additions and 188 deletions.
diff --git a/app/_components/account-email-form.tsx b/app/_components/account-email-form.tsx
@@ -28,6 +28,7 @@ const AccountEmailForm = ({ user }: AccountEmailFormProps) => {
 
   return (
     <form
+      className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8"
       onSubmit={form.handleSubmit((values) =>
         startTransition(async () => {
           const supabase = createBrowserSupabaseClient();
@@ -47,20 +48,16 @@ const AccountEmailForm = ({ user }: AccountEmailFormProps) => {
         }),
       )}
     >
-      <div className="px-4 pb-8 pt-6 sm:px-8">
-        <Input
-          label="Email address"
-          required
-          type="email"
-          {...form.register('email')}
-        />
-      </div>
+      <Input
+        label="Email address"
+        required
+        type="email"
+        {...form.register('email')}
+      />
       {form.formState.errors.root && (
-        <div className="px-4 py-8 text-center sm:px-8">
-          {form.formState.errors.root.message}
-        </div>
+        <div className="text-center">{form.formState.errors.root.message}</div>
       )}
-      <div className="flex gap-4 px-4 py-8 sm:px-8">
+      <div className="flex gap-4 pt-8">
         <BackButton className="w-full" colorScheme="transparent">
           Close
         </BackButton>

diff --git a/app/_components/account-password-form.tsx b/app/_components/account-password-form.tsx
@@ -23,6 +23,7 @@ const AccountPasswordForm = () => {
 
   return (
     <form
+      className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8"
       onSubmit={form.handleSubmit((values) =>
         startTransition(async () => {
           const supabase = createBrowserSupabaseClient();
@@ -44,21 +45,17 @@ const AccountPasswordForm = () => {
         }),
       )}
     >
-      <div className="px-4 pb-8 pt-6 sm:px-8">
-        <Input
-          label="New password"
-          minLength={6}
-          placeholder="••••••••••••"
-          type="password"
-          {...form.register('password')}
-        />
-      </div>
+      <Input
+        label="New password"
+        minLength={6}
+        placeholder="••••••••••••"
+        type="password"
+        {...form.register('password')}
+      />
       {form.formState.errors.root && (
-        <div className="px-4 py-8 text-center sm:px-8">
-          {form.formState.errors.root.message}
-        </div>
+        <div className="text-center">{form.formState.errors.root.message}</div>
       )}
-      <div className="flex gap-4 px-4 py-8 sm:px-8">
+      <div className="flex gap-4 pt-8">
         <BackButton className="w-full" colorScheme="transparent">
           Close
         </BackButton>

diff --git a/app/_components/account-profile-form.tsx b/app/_components/account-profile-form.tsx
@@ -35,6 +35,7 @@ const AccountProfileForm = ({ user }: AccountProfileFormProps) => {
 
   return (
     <form
+      className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8"
       onSubmit={form.handleSubmit((values) =>
         startTransition(async () => {
           const supabase = createBrowserSupabaseClient();
@@ -71,37 +72,33 @@ const AccountProfileForm = ({ user }: AccountProfileFormProps) => {
         }),
       )}
     >
-      <div className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8">
-        <div className="flex gap-6">
-          <Input label="First name" required {...form.register('firstName')} />
-          <Input label="Last name" required {...form.register('lastName')} />
-        </div>
-        <div className="relative">
-          <label className="group">
-            <span className="label">Profile image</span>
-            <AvatarDropzone
-              file={form.watch('avatar')}
-              id={user.id}
-              onDrop={(files) => form.setValue('avatar', files[0])}
-            />
-          </label>
-          {form.watch('avatar') && (
-            <Button
-              className="absolute right-2 top-0"
-              onClick={() => form.setValue('avatar', null)}
-              variant="link"
-            >
-              Remove image
-            </Button>
-          )}
-        </div>
+      <div className="flex gap-6">
+        <Input label="First name" required {...form.register('firstName')} />
+        <Input label="Last name" required {...form.register('lastName')} />
+      </div>
+      <div className="relative">
+        <label className="group">
+          <span className="label">Profile image</span>
+          <AvatarDropzone
+            file={form.watch('avatar')}
+            id={user.id}
+            onDrop={(files) => form.setValue('avatar', files[0])}
+          />
+        </label>
+        {form.watch('avatar') && (
+          <Button
+            className="absolute right-2 top-0"
+            onClick={() => form.setValue('avatar', null)}
+            variant="link"
+          >
+            Remove image
+          </Button>
+        )}
       </div>
       {form.formState.errors.root && (
-        <div className="px-4 py-8 text-center sm:px-8">
-          {form.formState.errors.root.message}
-        </div>
+        <div className="text-center">{form.formState.errors.root.message}</div>
       )}
-      <div className="flex gap-4 px-4 py-8 sm:px-8">
+      <div className="flex gap-4 pt-8">
         <BackButton className="w-full" colorScheme="transparent">
           Close
         </BackButton>

diff --git a/app/_components/change-password-form.tsx b/app/_components/change-password-form.tsx
@@ -9,7 +9,7 @@ const ChangePasswordForm = () => {
   const [state, action] = useActionState(updatePassword, null);
 
   return (
-    <form action={action} className="flex flex-col gap-6">
+    <form action={action} className="flex flex-col gap-8">
       <Input
         label="New password"
         minLength={6}

diff --git a/app/_components/event-form.tsx b/app/_components/event-form.tsx
@@ -139,7 +139,7 @@ const EventForm = ({
   return (
     <form
       action={() => {}}
-      className={twMerge('flex flex-col gap-6 px-4 sm:px-8', className)}
+      className={twMerge('flex flex-col gap-8 px-4 sm:px-8', className)}
       onSubmit={form.handleSubmit((values) =>
         startTransition(async () => {
           pendingComment.current = values.comment;
@@ -299,12 +299,10 @@ const EventForm = ({
         />
       )}
       {form.formState.errors.root && (
-        <div className="py-8 text-center">
-          {form.formState.errors.root.message}
-        </div>
+        <div className="text-center">{form.formState.errors.root.message}</div>
       )}
       {!isPublic && !isArchived && (!event || form.formState.isDirty) && (
-        <div className="flex gap-4 pt-10">
+        <div className="flex gap-4 pt-8">
           {!event && !isMission && (
             <BackButton className="w-full" colorScheme="transparent">
               Close

diff --git a/app/_components/event-type-form.tsx b/app/_components/event-type-form.tsx
@@ -128,7 +128,7 @@ const EventTypeForm = ({
           )}
         />
         {form.formState.errors.root && (
-          <div className="py-8 text-center">
+          <div className="text-center">
             {form.formState.errors.root.message}
           </div>
         )}

diff --git a/app/_components/forgot-password-form.tsx b/app/_components/forgot-password-form.tsx
@@ -12,7 +12,7 @@ const ForgotPasswordForm = () => {
   });
 
   return (
-    <form action={action} className="flex flex-col gap-6">
+    <form action={action} className="flex flex-col gap-8">
       <Input
         defaultValue={state.defaultValues.email}
         label="Email address"

diff --git a/app/_components/module-card.tsx b/app/_components/module-card.tsx
@@ -39,7 +39,7 @@ const ModuleCard = ({
       className="space-y-16 pb-8 pt-10"
       defaultOpen={!event && !disabled}
       title={
-        <div className="min-w-0 py-2 text-left">
+        <div className="min-w-0 text-left">
           <div className="truncate leading-snug">
             Module {(eventType.order as number) + 1}
             {eventType.name ? `: ${eventType.name}` : ''}

diff --git a/app/_components/sign-in-form.tsx b/app/_components/sign-in-form.tsx
@@ -16,7 +16,7 @@ const SignInForm = ({ next }: SignInFormProps) => {
   });
 
   return (
-    <form action={action} className="flex flex-col gap-6">
+    <form action={action} className="flex flex-col gap-8">
       <Input
         defaultValue={state.defaultValues.email}
         label="Email address"

diff --git a/app/_components/sign-up-form.tsx b/app/_components/sign-up-form.tsx
@@ -16,7 +16,7 @@ const SignUpForm = ({ next }: SignUpFormProps) => {
   });
 
   return (
-    <form action={action} className="flex flex-col gap-6">
+    <form action={action} className="flex flex-col gap-8">
       <div className="flex gap-6">
         <Input
           defaultValue={state.defaultValues.firstName}