complete adaptive layout for main auth pages

dev-KPI · Feb 2, 2024 · aedd02c · aedd02c
1 parent 43901ca
commit aedd02c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
@@ -6,14 +6,16 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 
 export default function Auth() {
   return (
-    <AuthContent>
-      <ImageCard className="-my-[4.375rem] hidden sm:flex">
+    <AuthContent className="pt-24">
+      <ImageCard className="-my-[4.375rem] hidden md:flex">
         <Icons.golub />
       </ImageCard>
       <article>
         <header className="flex justify-between pb-2">
           <h1 className="title-lg">Authentication</h1>
-          <ThemeToggler />
+          <div className="hidden xs:block">
+            <ThemeToggler />
+          </div>
         </header>
         <AuthForm className="mt-5" />
       </article>

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -6,16 +6,21 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 
 export default function Profile() {
   return (
-    <AuthContent>
-      <ImageCard className="-my-[4.375rem] hidden sm:flex py-32 px-[3.25rem]">
+    <AuthContent className="*:*:flex-col *:*:grow bg-white md:*:*:grow-0 md:*:*:flex-row md:bg-gradient-blue-white">
+      <h3 className="text-lg font-medium text-center py-[0.625rem] 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">
         <FileInput />
       </ImageCard>
-      <article>
-        <header className="flex justify-between pb-2 mt-8">
+      <article className="flex justify-center md:block">
+        <header className="hidden justify-between pb-2 mt-8 md:flex">
           <h1 className="title-lg">Profile</h1>
-          <ThemeToggler />
+          <div className="hidden xs:block">
+            <ThemeToggler />
+          </div>
         </header>
-        <ProfileForm className="mt-5" />
+        <ProfileForm className="grow mt-8 md:mt-5" />
       </article>
     </AuthContent>
   )

diff --git a/src/app/verification/page.tsx b/src/app/verification/page.tsx
@@ -6,16 +6,21 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 
 export default function Verification() {
   return (
-    <AuthContent>
-      <ImageCard className="-my-[4.375rem] hidden sm:flex">
+    <AuthContent className="*:*:flex-col md:*:*:flex-row">
+      <ImageCard className="bg-none px-0 pb-[0.625rem] pt-10 md:hidden">
+        <Icons.messages />
+      </ImageCard>
+      <ImageCard className="-my-[4.375rem] hidden md:flex">
         <Icons.golub />
       </ImageCard>
       <article>
-        <header className="flex justify-between items-center">
+        <header className="flex justify-center items-center md:justify-between">
           <h1 className="title-lg">Check your Email</h1>
-          <ThemeToggler />
+          <div className="hidden md:block">
+            <ThemeToggler />
+          </div>
         </header>
-        <OtpControl className="mt-5" />
+        <OtpControl />
       </article>
     </AuthContent>
   )