fix adaptive styles

dev-KPI · Feb 3, 2024 · 1c4855b · 1c4855b
1 parent 1dff0f0
commit 1c4855b
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 14 deletions.
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
@@ -6,14 +6,14 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 
 export default function Auth() {
   return (
-    <AuthContent className="pt-24">
+    <AuthContent className="*:*:pt-36 md:*:*:pt-10">
       <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>
-          <div className="hidden xs:block">
+          <div className="hidden md:block">
             <ThemeToggler />
           </div>
         </header>

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -7,7 +7,7 @@ import { ThemeToggler } from '@/components/ui/theme-toggler'
 export default function Profile() {
   return (
     <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">
+      <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">
@@ -16,7 +16,7 @@ export default function Profile() {
       <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 xs:block">
+          <div className="hidden md:block">
             <ThemeToggler />
           </div>
         </header>

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="*:*:flex-col md:*:*:flex-row">
-      <ImageCard className="bg-none px-0 pb-[0.625rem] pt-10 md:hidden">
+      <ImageCard className="bg-none px-0 pb-[0.625rem] pt-[2.75rem] md:pt-10 md:hidden">
         <Icons.messages />
       </ImageCard>
       <ImageCard className="-my-[4.375rem] hidden md:flex">

diff --git a/src/components/pages/auth-content.tsx b/src/components/pages/auth-content.tsx
@@ -11,7 +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 p-0 flex gap-7 rounded-3xl dark:bg-base-black xs:p-4 sm:p-7 md:bg-base-white md:gap-[1.75rem] lg:gap-16">
+        <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>

diff --git a/src/components/pages/auth/auth-form.tsx b/src/components/pages/auth/auth-form.tsx
@@ -49,7 +49,10 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel htmlFor="email">
+              <FormLabel
+                className="block h-[2.75rem] md:h-auto"
+                htmlFor="email"
+              >
                 Confirm your email and get dynamically generated code
               </FormLabel>
               <FormControl>
@@ -63,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 pb-2 pt-8 xs:py-5 xs:pb-0 md:py-0">
+            <FormItem className="flex flex-row items-start space-x-3 pb-2 pt-8 py-5 md:pb-0 md:py-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 +83,7 @@ const AuthForm: FC<FormAuthProps> = ({ className }) => {
             </FormItem>
           )}
         />
-        <Button className="!mt-8 w-full md:!mt-3" type="submit">
+        <Button className="!mt-[2.125rem] 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
@@ -41,7 +41,7 @@ const ProfileForm: FC<FormProfileProps> = ({ className }) => {
     <Form {...form}>
       <form
         className={cn(
-          'space-y-8 max-w-[343px] md:max-w-none md:pr-16 lg:pr-[9.75rem]',
+          'space-y-8 xs:max-w-[343px] md:max-w-none md:pr-16 lg:pr-[9.75rem]',
           className
         )}
         onSubmit={form.handleSubmit(onSubmit)}
@@ -64,8 +64,8 @@ const ProfileForm: FC<FormProfileProps> = ({ className }) => {
             </FormItem>
           )}
         />
-        <Button className="!mt-20 w-full md:!mt-8" 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-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"