fix auth padding and margins with style mistakes

src/app/auth/page.tsx

@@ -7,18 +7,20 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 export default function Auth() {
   return (
     <AuthContent className="auth-page">
-      <ImageCard className="-my-[4.375rem] hidden md:flex">
-        <Icons.golub />
-      </ImageCard>
-      <article>
-        <header className="flex justify-between">
-          <h1 className="title-lg">Authentication</h1>
-          <div className="hidden md:block">
-            <ThemeToggler />
-          </div>
-        </header>
-        <AuthForm className="mt-8 md:mt-5" />
-      </article>
+      <section className="justify-center py-36 px-0 flex gap-7 rounded-3xl md:dark:bg-base-black md:py-10 md:px-7 md:bg-base-white md:gap-[1.75rem] lg:gap-16">
+        <ImageCard className="-my-[4.375rem] hidden md:flex">
+          <Icons.golub />
+        </ImageCard>
+        <article>
+          <header className="flex justify-between">
+            <h1 className="title-lg">Authentication</h1>
+            <div className="hidden md:block">
+              <ThemeToggler />
+            </div>
+          </header>
+          <AuthForm className="mt-8 md:mt-5" />
+        </article>
+      </section>
     </AuthContent>
   )
 }

src/app/profile/page.tsx

@@ -6,22 +6,22 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 
 export default function Profile() {
   return (
-    <AuthContent className="profile-page bg-white md:bg-gradient-blue-white">
-      <h3 className="text-lg font-medium text-center py-[0.4375rem] md:hidden">
-        Profile
-      </h3>
-      <ImageCard className="p-0 bg-none -mt-3 md:mt-0 md:-my-[4.375rem] md:py-32 md:px-[3.25rem] md:bg-gradient-purple-blue">
-        <FileInput />
-      </ImageCard>
-      <article className="flex justify-center md:block">
-        <header className="hidden justify-between pb-2 mt-8 md:flex">
-          <h1 className="title-lg">Profile</h1>
-          <div className="hidden md:block">
-            <ThemeToggler />
-          </div>
-        </header>
-        <ProfileForm className="grow mt-[2.1875rem] md:mt-5" />
-      </article>
+    <AuthContent className="bg-base-white md:bg-gradient-blue-white">
+      <section className="justify-center pb-7 px-0 pt-14 flex gap-7 rounded-3xl flex-col grow md:dark:bg-base-black md:flex-row md:grow-0 md:pt-7 md:px-7 md:bg-base-white md:gap-[1.75rem] lg:gap-16">
+        <h2 className="title-sm text-center md:hidden">Profile</h2>
+        <ImageCard className="p-0 bg-none -mt-2 md:mt-0 md:-my-[4.375rem] md:py-32 md:px-[3.25rem] md:bg-gradient-purple-blue">
+          <FileInput />
+        </ImageCard>
+        <article className="flex justify-center md:block">
+          <header className="hidden justify-between mt-8 md:flex">
+            <h1 className="title-lg">Profile</h1>
+            <div className="hidden md:block">
+              <ThemeToggler />
+            </div>
+          </header>
+          <ProfileForm className="grow mt-9 md:mt-5" />
+        </article>
+      </section>
     </AuthContent>
   )
 }

src/app/verification/page.tsx

@@ -7,21 +7,23 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 export default function Verification() {
   return (
     <AuthContent className="verification-page">
-      <ImageCard className="bg-none px-0 pb-[0.25rem] pt-[2.75rem] md:hidden">
-        <Icons.messages />
-      </ImageCard>
-      <ImageCard className="-my-[4.375rem] hidden md:flex">
-        <Icons.golub />
-      </ImageCard>
-      <article>
-        <header className="flex justify-center items-center md:justify-between">
-          <h1 className="title-lg">Check your Email</h1>
-          <div className="hidden md:block">
-            <ThemeToggler />
-          </div>
-        </header>
-        <OtpControl />
-      </article>
+      <section className="justify-center flex-col pb-7 px-0 pt-20 flex gap-8 rounded-3xl md:dark:bg-base-black md:flex-row md:pt-7 md:px-7 md:bg-base-white md:gap-[1.75rem] lg:gap-16">
+        <ImageCard className="bg-none px-0 pt-0 pb-1 md:hidden">
+          <Icons.messages />
+        </ImageCard>
+        <ImageCard className="-my-[4.375rem] hidden md:flex">
+          <Icons.golub />
+        </ImageCard>
+        <article>
+          <header className="flex justify-center items-center md:justify-between">
+            <h1 className="title-lg">Check your Email</h1>
+            <div className="hidden md:block">
+              <ThemeToggler />
+            </div>
+          </header>
+          <OtpControl />
+        </article>
+      </section>
     </AuthContent>
   )
 }

src/components/pages/auth-content.tsx

@@ -11,9 +11,7 @@ const AuthContent: FC<AuthContentProps> = ({ children, className }) => {
   return (
     <div className={cn('h-screen w-screen bg-gradient-blue-white', className)}>
       <Content className="flex items-start justify-center dark:bg-none dark:bg-base-gray-8 md:items-center">
-        <section className="justify-center pb-7 px-0 pt-11 flex gap-7 rounded-3xl md:dark:bg-base-black md:pt-7 md:px-7 md:bg-base-white md:gap-[1.75rem] lg:gap-16">
-          {children}
-        </section>
+        {children}
       </Content>
     </div>
   )

src/components/pages/auth/auth-form.tsx

@@ -40,24 +40,18 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
 
   return (
     <Form {...form}>
-      <form
-        className={cn('space-y-8', className)}
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
+      <form className={className} onSubmit={form.handleSubmit(onSubmit)}>
         <FormField
           control={form.control}
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel
-                className="block h-[2.75rem] pb-1 md:pb-0 md:h-auto"
-                htmlFor="email"
-              >
+              <FormLabel htmlFor="email">
                 Confirm your email and get dynamically generated code
               </FormLabel>
               <FormControl>
                 <Input
-                  className="bg-white md:bg-transparent"
+                  className="bg-base-white dark:bg-base-gray-8 md:bg-transparent md:dark:bg-transparent"
                   id="email"
                   placeholder="Email"
                   type="text"
@@ -72,15 +66,15 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
           control={form.control}
           name="agreement"
           render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 pt-[1.75rem] md:pt-0">
+            <FormItem className="flex flex-row items-start space-x-3 mt-[3.75rem] md:mt-10">
               <FormControl>
                 <Checkbox
                   checked={field.value}
                   id="agreement"
                   onCheckedChange={field.onChange}
                 />
               </FormControl>
-              <div className="!mt-0 h-[2.5rem] md:h-auto">
+              <div className="!mt-0">
                 <FormLabel htmlFor="agreement">
                   I agree to Terms & Conditions and Privacy Policy
                 </FormLabel>
@@ -89,7 +83,7 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
             </FormItem>
           )}
         />
-        <Button className="!mt-8 w-full md:!mt-3" type="submit">
+        <Button className="mt-8 w-full md:mt-3" type="submit">
           Submit
         </Button>
       </form>

src/components/pages/profile/profile-form.tsx

@@ -41,7 +41,7 @@ const ProfileForm: FC<FormProfileProps> = ({ className }) => {
     <Form {...form}>
       <form
         className={cn(
-          'space-y-8 xs:max-w-[343px] md:max-w-none md:pr-16 lg:pr-[9.75rem]',
+          'xs:max-w-[343px] md:max-w-none md:pr-16 lg:pr-[9.75rem]',
           className
         )}
         onSubmit={form.handleSubmit(onSubmit)}
@@ -53,7 +53,7 @@ const ProfileForm: FC<FormProfileProps> = ({ className }) => {
             <FormItem>
               <FormControl>
                 <Input
-                  className="md:min-w-[343px] bg-base-gray-2 md:bg-transparent"
+                  className="md:min-w-[343px] bg-base-white dark:bg-base-gray-8 md:bg-transparent md:dark:bg-transparent"
                   id="profile_name"
                   placeholder="Profile Name"
                   type="text"
@@ -64,7 +64,7 @@ const ProfileForm: FC<FormProfileProps> = ({ className }) => {
             </FormItem>
           )}
         />
-        <Button className="!mt-[5.75rem] w-full md:!mt-8" type="submit">
+        <Button className="mt-[5.75rem] w-full md:mt-8" type="submit">
           Done
         </Button>
       </form>

src/components/pages/verification/otp-control.tsx

@@ -51,11 +51,11 @@ const OtpControl: FC<OtpControlProps> = ({ className }) => {
         onChange={otpChange}
         otpValue={otp}
       />
-      <button className="block mt-[1.75rem] text-bright-orange w-full text-center md:text-left md:mt-4">
+      <button className="block mt-7 text-bright-orange w-full text-center md:text-left md:mt-4">
         Didn&apos;t get anything? Resend me code.
       </button>
       <Button
-        className="w-full mt-[2.3125rem] md:mt-3"
+        className="w-full mt-9 md:mt-3"
         disabled={otpIncomplete}
         onClick={validateOtp}
         variant={otpIncomplete ? 'disabled' : 'default'}