Auth responsive layout

package.json

@@ -14,7 +14,8 @@
     "typescript:check": "tsc -p tsconfig.json",
     "env:local": "cp .env.local.dist .env.local",
     "prepare": "husky install",
-    "cspell": "cspell --show-suggestions --show-context --gitignore ."
+    "cspell": "cspell --show-suggestions --show-context --gitignore .",
+    "cspell:apply": "cspell --words-only --unique --gitignore . >> project-words.txt"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",

src/app/auth/page.tsx

@@ -6,16 +6,18 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 
 export default function Auth() {
   return (
-    <AuthContent>
-      <ImageCard className="-my-[4.375rem] hidden sm:flex">
+    <AuthContent className="auth-page">
+      <ImageCard className="-my-[4.375rem] hidden md:flex">
         <Icons.golub />
       </ImageCard>
       <article>
-        <header className="flex justify-between pb-2">
+        <header className="flex justify-between">
           <h1 className="title-lg">Authentication</h1>
-          <ThemeToggler />
+          <div className="hidden md:block">
+            <ThemeToggler />
+          </div>
         </header>
-        <AuthForm className="mt-5" />
+        <AuthForm className="mt-8 md:mt-5" />
       </article>
     </AuthContent>
   )

src/app/globals.css

@@ -95,3 +95,37 @@
     @apply text-xs uppercase;
   }
 }
+
+.auth-page section {
+  padding-top: 9rem;
+  padding-bottom: 9rem;
+}
+
+@media (min-width: theme('screens.md')) {
+  .auth-page section {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+  }
+}
+
+.profile-page section {
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+@media (min-width: theme('screens.md')) {
+  .profile-page section {
+    flex-direction: row;
+    flex-grow: 0;
+  }
+}
+
+.verification-page section {
+  flex-direction: column;
+}
+
+@media (min-width: theme('screens.md')) {
+  .verification-page section {
+    flex-direction: row;
+  }
+}

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="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>
-        <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 md:block">
+            <ThemeToggler />
+          </div>
         </header>
-        <ProfileForm className="mt-5" />
+        <ProfileForm className="grow mt-[2.1875rem] md:mt-5" />
       </article>
     </AuthContent>
   )

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="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-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>
   )

src/components/pages/auth-content.tsx

@@ -10,8 +10,8 @@ type AuthContentProps = {
 const AuthContent: FC<AuthContentProps> = ({ children, className }) => {
   return (
     <div className={cn('h-screen w-screen bg-gradient-blue-white', className)}>
-      <Content className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8">
-        <section className="p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] rounded-3xl bg-base-white dark:bg-base-black">
+      <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>
       </Content>

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

@@ -49,11 +49,20 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel htmlFor="email">
+              <FormLabel
+                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>
@@ -63,15 +72,15 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
           control={form.control}
           name="agreement"
           render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3">
+            <FormItem className="flex flex-row items-start space-x-3 pt-[1.75rem] md:pt-0">
               <FormControl>
                 <Checkbox
                   checked={field.value}
                   id="agreement"
                   onCheckedChange={field.onChange}
                 />
               </FormControl>
-              <div className="!mt-0">
+              <div className="!mt-0 h-[2.5rem] md:h-auto">
                 <FormLabel htmlFor="agreement">
                   I agree to Terms & Conditions and Privacy Policy
                 </FormLabel>
@@ -80,7 +89,7 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
             </FormItem>
           )}
         />
-        <Button className="!mt-3 w-full" type="submit">
+        <Button className="!mt-8 w-full md:!mt-3" type="submit">
           Submit
         </Button>
       </form>

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

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

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

@@ -33,10 +33,10 @@ const OtpControl: FC<OtpControlProps> = ({ className }) => {
   }
 
   return (
-    <div className={cn('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',
+          'cursor-default text-base-gray-6 text-center md:text-left',
           otpIsInvalid && 'text-bright-red'
         )}
       >
@@ -45,17 +45,17 @@ const OtpControl: FC<OtpControlProps> = ({ className }) => {
           : 'Paste dynamically generated code'}
       </p>
       <OtpInput
-        className="mt-3"
+        className="mt-10 md:mt-3"
         isError={otpIsInvalid}
         length={LENGTH_OTP}
         onChange={otpChange}
         otpValue={otp}
       />
-      <button className="block mt-4 text-bright-orange">
+      <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-3"
+        className="w-full mt-[2.3125rem] md:mt-3"
         disabled={otpIncomplete}
         onClick={validateOtp}
         variant={otpIncomplete ? 'disabled' : 'default'}

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

@@ -142,7 +142,7 @@ const OtpInput: FC<OtpInputProps> = ({
         <Input
           autoComplete="one-time-code"
           className={cn(
-            'flex-shrink-0 max-w-[3.5rem] text-center font-title py-5 text-[1.75rem] leading-[2.125rem] focus:border-bright-blue font-medium tracking-[0.0225rem]',
+            'flex-shrink-0 max-w-[3.125rem] text-center font-title py-5 text-[1.75rem] leading-[2.125rem] focus:border-bright-blue font-medium tracking-[0.0225rem] vs:max-w-[3.75rem]',
             isError && 'text-bright-red'
           )}
           inputMode="numeric"

src/components/ui/content.tsx

@@ -7,7 +7,11 @@ type ContentProps = {
 }
 
 const Content: FC<ContentProps> = ({ children, className }) => {
-  return <div className={cn('px-5 w-full h-full', className)}>{children}</div>
+  return (
+    <div className={cn('px-4 w-full h-full sm:px-5', className)}>
+      {children}
+    </div>
+  )
 }
 
 export default Content

src/components/ui/icons.tsx

@@ -62,6 +62,27 @@ export const Icons = {
       />
     </svg>
   ),
+  messages: (props: IconProps) => {
+    return (
+      <svg
+        fill="none"
+        height="66"
+        viewBox="0 0 66 66"
+        width="66"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+          d="M0 20.7647C0 9.84896 8.83164 1 19.726 1H40.274C51.1684 1 60 9.84896 60 20.7647V23.2353C60 34.151 51.1684 43 40.274 43H19.726C8.83164 43 0 34.151 0 23.2353V20.7647Z"
+          fill="#7F92DC"
+        />
+        <path
+          d="M33.9452 64.1149V51.7067L46.274 51.6268C57.1684 51.6268 66 42.6811 66 31.646V29.9809C66 18.9457 57.1684 10 46.274 10H25.726C14.8316 10 6 18.9457 6 29.9809V31.646C6 39.3053 10.0997 44.5851 12.1495 46.2677C17.492 51.7254 28.6849 63.0881 30.6575 65.0862C32.6301 67.0843 33.9452 65.3637 33.9452 64.1149Z"
+          fill="#3571CF"
+        />
+      </svg>
+    )
+  },
   mingcute_camera: (props: IconProps) => (
     <svg
       fill="none"

src/components/ui/image-card.tsx

@@ -10,7 +10,7 @@ const ImageCard: FC<ImageCardProps> = ({ children, className }) => {
   return (
     <div
       className={cn(
-        'flex-shrink-0 flex items-center justify-center rounded-3xl bg-gradient-purple-blue pt-24 pr-8 pb-36 pl-5',
+        'flex-shrink-0 flex items-center justify-center rounded-3xl bg-gradient-purple-blue pt-24 pr-6 pb-36 pl-5',
         className
       )}
     >

src/components/ui/input.tsx

@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           <div className="relative">
             <input
               className={cn(
-                'relative z-[5] peer pt-5 px-4 pb-2.5 w-full outline-none rounded-2xl border border-base-gray-3 focus:border-base-gray-5 dark:border-base-gray-7 bg-transparent placeholder:opacity-0 transition-colors',
+                'relative peer pt-5 px-4 pb-2.5 w-full outline-none rounded-2xl border border-base-gray-3 focus:border-base-gray-5 dark:border-base-gray-7 bg-transparent placeholder:opacity-0 transition-colors',
                 className
               )}
               placeholder={placeholder}
@@ -27,7 +27,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ) : (
           <input
             className={cn(
-              'relative z-[5] peer pt-5 px-4 pb-2.5 w-full outline-none rounded-2xl border border-base-gray-3 focus:border-base-gray-5 dark:border-base-gray-7 bg-transparent placeholder:opacity-0 transition-colors',
+              'relative peer pt-5 px-4 pb-2.5 w-full outline-none rounded-2xl border border-base-gray-3 focus:border-base-gray-5 dark:border-base-gray-7 bg-transparent placeholder:opacity-0 transition-colors',
               className
             )}
             ref={ref}

tailwind.config.ts

@@ -1,5 +1,7 @@
 import type { Config } from 'tailwindcss'
 
+import defaultTheme from 'tailwindcss/defaultTheme'
+
 const config: Config = {
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
@@ -109,6 +111,11 @@ const config: Config = {
         },
       },
     },
+    screens: {
+      vs: '360px',
+      xs: '475px',
+      ...defaultTheme.screens,
+    },
   },
 }
 export default config