Auth responsive layout (#104)

* extend small screen width classes tailwind * add messages icon * fix reduce pr for two points * fix prettier code refactor in content comp * add new styles to auth-content * fix styles for otp-control comp * add new styles for profile-form comp * fix styles for auth-form comp * complete adaptive layout for main auth pages * add cspell auto-fill command * fix verysmall screen size from 320 to 360px * fix adaptive styles * remove danger style property aka star code * fix auth page margins * fix remove z-5 from input * fix margins and paddings to fit design for auth pages * fix pointer event set to none for input span and absolute error position for form label * remove unused auth classes * fix auth padding and margins with style mistakes * remove usused cn import in auth-from * move themetoggler to auth-content * remove usused themetoggler from auth forms * tiny fixes about usused auth classes and dark bg for content comp
dev-KPI · Feb 5, 2024 · 89a95ea · 89a95ea
1 parent cf50fd5
commit 89a95ea
Show file tree

Hide file tree

Showing 15 changed files with 108 additions and 63 deletions.
diff --git a/package.json b/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",

diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
@@ -2,21 +2,21 @@ import AuthForm from '@/components/pages/auth/auth-form'
 import AuthContent from '@/components/pages/auth-content'
 import { Icons } from '@/components/ui/icons'
 import ImageCard from '@/components/ui/image-card'
-import { ThemeToggler } from '@/components/ui/theme-toggler'
 
 export default function Auth() {
   return (
     <AuthContent>
-      <ImageCard className="-my-[4.375rem] hidden sm:flex">
-        <Icons.golub />
-      </ImageCard>
-      <article>
-        <header className="flex justify-between pb-2">
-          <h1 className="title-lg">Authentication</h1>
-          <ThemeToggler />
-        </header>
-        <AuthForm className="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>
+          </header>
+          <AuthForm className="mt-8 md:mt-5" />
+        </article>
+      </section>
     </AuthContent>
   )
 }
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -2,21 +2,22 @@ import AuthContent from '@/components/pages/auth-content'
 import FileInput from '@/components/pages/profile/file-input'
 import ProfileForm from '@/components/pages/profile/profile-form'
 import ImageCard from '@/components/ui/image-card'
-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]">
-        <FileInput />
-      </ImageCard>
-      <article>
-        <header className="flex justify-between pb-2 mt-8">
-          <h1 className="title-lg">Profile</h1>
-          <ThemeToggler />
-        </header>
-        <ProfileForm className="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>
+          </header>
+          <ProfileForm className="grow mt-9 md:mt-5" />
+        </article>
+      </section>
     </AuthContent>
   )
 }
diff --git a/src/app/verification/page.tsx b/src/app/verification/page.tsx
@@ -2,21 +2,24 @@ import AuthContent from '@/components/pages/auth-content'
 import OtpControl from '@/components/pages/verification/otp-control'
 import { Icons } from '@/components/ui/icons'
 import ImageCard from '@/components/ui/image-card'
-import { ThemeToggler } from '@/components/ui/theme-toggler'
 
 export default function Verification() {
   return (
     <AuthContent>
-      <ImageCard className="-my-[4.375rem] hidden sm:flex">
-        <Icons.golub />
-      </ImageCard>
-      <article>
-        <header className="flex justify-between items-center">
-          <h1 className="title-lg">Check your Email</h1>
-          <ThemeToggler />
-        </header>
-        <OtpControl className="mt-5" />
-      </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>
+          </header>
+          <OtpControl />
+        </article>
+      </section>
     </AuthContent>
   )
 }
diff --git a/src/components/pages/auth-content.tsx b/src/components/pages/auth-content.tsx
@@ -1,4 +1,5 @@
 import Content from '@/components/ui/content'
+import { ThemeToggler } from '@/components/ui/theme-toggler'
 import { cn } from '@/lib/utils'
 import { FC, ReactNode } from 'react'
 
@@ -10,10 +11,11 @@ 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">
-          {children}
-        </section>
+      <Content className="flex items-start justify-center dark:bg-base-gray-9 md:items-center">
+        {children}
+        <div className="absolute top-5 right-5">
+          <ThemeToggler />
+        </div>
       </Content>
     </div>
   )

diff --git a/src/components/pages/auth/auth-form.tsx b/src/components/pages/auth/auth-form.tsx
@@ -11,7 +11,6 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { FC } from 'react'
 import { useForm } from 'react-hook-form'
@@ -40,10 +39,7 @@ 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"
@@ -53,7 +49,13 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
                 Confirm your email and get dynamically generated code
               </FormLabel>
               <FormControl>
-                <Input id="email" placeholder="Email" type="text" {...field} />
+                <Input
+                  className="bg-base-white dark:bg-base-gray-8 md:bg-transparent md:dark:bg-transparent"
+                  id="email"
+                  placeholder="Email"
+                  type="text"
+                  {...field}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -63,7 +65,7 @@ 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 mt-[3.75rem] md:mt-10">
               <FormControl>
                 <Checkbox
                   checked={field.value}
@@ -80,7 +82,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>

diff --git a/src/components/pages/profile/profile-form.tsx b/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(
+          '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-white dark:bg-base-gray-8 md:bg-transparent md:dark: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>

diff --git a/src/components/pages/verification/otp-control.tsx b/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-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-3"
+        className="w-full mt-9 md:mt-3"
         disabled={otpIncomplete}
         onClick={validateOtp}
         variant={otpIncomplete ? 'disabled' : 'default'}

diff --git a/src/components/pages/verification/otp-input.tsx b/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"

diff --git a/src/components/ui/content.tsx b/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
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
@@ -114,6 +114,7 @@ const FormControl = React.forwardRef<
           : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
+      className="relative"
       id={formItemId}
       ref={ref}
       {...props}
@@ -152,7 +153,7 @@ const FormMessage = React.forwardRef<
 
   return (
     <p
-      className={cn('!mt-1 ml-4 text-xs text-bright-red', className)}
+      className={cn('!mt-1 ml-4 text-xs text-bright-red absolute', className)}
       id={formMessageId}
       ref={ref}
       {...props}

diff --git a/src/components/ui/icons.tsx b/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"

diff --git a/src/components/ui/image-card.tsx b/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
       )}
     >

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
@@ -12,22 +12,22 @@ 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}
               ref={ref}
               type={type}
               {...props}
             />
-            <span className="absolute z-0 top-1/2 peer-focus:top-[0.375rem] left-4 -translate-y-1/2 peer-focus:translate-y-0 peer-focus:text-[0.6875rem] peer-focus:leading-[0.8125rem] text-base-gray-5 transition-all peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];">
+            <span className="absolute z-0 top-1/2 pointer-events-none peer-focus:top-[0.375rem] left-4 -translate-y-1/2 peer-focus:translate-y-0 peer-focus:text-[0.6875rem] peer-focus:leading-[0.8125rem] text-base-gray-5 transition-all peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];">
               {placeholder}
             </span>
           </div>
         ) : (
           <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}

diff --git a/tailwind.config.ts b/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