fix margins and paddings to fit design for auth pages

dev-KPI · Feb 3, 2024 · 1b2f77a · 1b2f77a
1 parent 1d8c592
commit 1b2f77a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 12 deletions.
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -10,7 +10,7 @@ export default function Profile() {
       <h3 className="text-lg font-medium text-center py-[0.4375rem] md:hidden">
         Profile
       </h3>
-      <ImageCard className="p-0 bg-none md:-my-[4.375rem] md:py-32 md:px-[3.25rem] md:bg-gradient-purple-blue">
+      <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">
@@ -20,7 +20,7 @@ export default function Profile() {
             <ThemeToggler />
           </div>
         </header>
-        <ProfileForm className="grow mt-8 md:mt-5" />
+        <ProfileForm className="grow mt-[2.1875rem] md:mt-5" />
       </article>
     </AuthContent>
   )

diff --git a/src/app/verification/page.tsx b/src/app/verification/page.tsx
@@ -7,7 +7,7 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 export default function Verification() {
   return (
     <AuthContent className="verification-page">
-      <ImageCard className="bg-none px-0 pb-[0.625rem] pt-[2.75rem] md:pt-10 md:hidden">
+      <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">

diff --git a/src/components/pages/auth/auth-form.tsx b/src/components/pages/auth/auth-form.tsx
@@ -50,13 +50,19 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
           render={({ field }) => (
             <FormItem>
               <FormLabel
-                className="block h-[2.75rem] md:h-auto"
+                className="block h-[2.75rem] pb-1 md:pb-0 md:h-auto"
                 htmlFor="email"
               >
                 Confirm your email and get dynamically generated code
               </FormLabel>
               <FormControl>
-                <Input id="email" placeholder="Email" type="text" {...field} />
+                <Input
+                  className="bg-white md:bg-transparent"
+                  id="email"
+                  placeholder="Email"
+                  type="text"
+                  {...field}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -66,7 +72,7 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
           control={form.control}
           name="agreement"
           render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 pb-2 pt-8 py-5 md:pb-0 md:py-0">
+            <FormItem className="flex flex-row items-start space-x-3 pt-[1.75rem] md:pt-0">
               <FormControl>
                 <Checkbox
                   checked={field.value}
@@ -83,7 +89,7 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
             </FormItem>
           )}
         />
-        <Button className="!mt-[2.125rem] w-full md:!mt-3" type="submit">
+        <Button className="!mt-8 w-full md:!mt-3" type="submit">
           Submit
         </Button>
       </form>

diff --git a/src/components/pages/profile/profile-form.tsx b/src/components/pages/profile/profile-form.tsx
@@ -53,7 +53,7 @@ const ProfileForm: FC<FormProfileProps> = ({ className }) => {
             <FormItem>
               <FormControl>
                 <Input
-                  className="md:min-w-[343px]"
+                  className="md:min-w-[343px] bg-base-gray-2 md:bg-transparent"
                   id="profile_name"
                   placeholder="Profile Name"
                   type="text"

diff --git a/src/components/pages/verification/otp-control.tsx b/src/components/pages/verification/otp-control.tsx
@@ -33,7 +33,7 @@ const OtpControl: FC<OtpControlProps> = ({ className }) => {
   }
 
   return (
-    <div className={cn('mt-4 md:mt-5 md:pr-14 lg:pr-28', className)}>
+    <div className={cn('mt-3 md:mt-5 md:pr-14 lg:pr-28', className)}>
       <p
         className={cn(
           'cursor-default text-base-gray-6 text-center md:text-left',
@@ -45,17 +45,17 @@ const OtpControl: FC<OtpControlProps> = ({ className }) => {
           : 'Paste dynamically generated code'}
       </p>
       <OtpInput
-        className="mt-8 md:mt-3"
+        className="mt-10 md:mt-3"
         isError={otpIsInvalid}
         length={LENGTH_OTP}
         onChange={otpChange}
         otpValue={otp}
       />
-      <button className="block mt-8 text-bright-orange w-full text-center md:text-left md:mt-4">
+      <button className="block mt-[1.75rem] 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-10 md:mt-3"
+        className="w-full mt-[2.3125rem] md:mt-3"
         disabled={otpIncomplete}
         onClick={validateOtp}
         variant={otpIncomplete ? 'disabled' : 'default'}