🎨 styles: modal authen

:%s

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -5,7 +5,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.8rem 3.2rem;
+  padding: 1rem 2rem;
+  @screen md {
+    padding: 0.8rem 3.2rem;
+  }
   &:disabled {
     filter: brightness(0.9);
     cursor: not-allowed;
@@ -76,9 +79,15 @@
   }
 
   &.large {
-    padding: 1.6rem 4.8rem;
+    padding: 1rem 1.5rem;
     &.onlyIcon {
-      padding: 1.6rem;
+      padding: 1rem;
+    }
+    @screen md {
+      padding: 1.6rem 4.8rem;
+      &.onlyIcon {
+        padding: 1.6rem;
+      }
     }
     &.loading {
       &::before {

src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss

@@ -1,7 +1,10 @@
 .formAuthenticate {
     @apply overflow-hidden;
     .inner {
-        @apply grid grid-cols-2 overflow-hidden;
+        @apply grid grid-cols-2 overflow-hidden transition-all duration-200;
         width: 200%;
+        &.register {
+            transform: translateX(-50%);
+        }
     }
 }

src/components/common/ModalAuthenticate/ModalAuthenticate.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import React, { useState } from 'react'
 import ModalCommon from '../ModalCommon/ModalCommon'
 import FormLogin from './components/FormLogin/FormLogin'
@@ -19,7 +20,10 @@ const ModalAuthenticate = ({ visible, closeModal }: Props) => {
     return (
         <ModalCommon visible={visible} onClose={closeModal} title={isLogin ? 'Sign In' : 'Create Account'}>
             <section className={s.formAuthenticate}>
-                <div className={s.inner}>
+                <div className={classNames({
+                    [s.inner]: true,
+                    [s.register]: !isLogin,
+                })}>
                     <FormLogin isHide={!isLogin} onSwitch={onSwitch} />
                     <FormRegister isHide={isLogin} onSwitch={onSwitch} />
                 </div>

src/components/common/ModalAuthenticate/components/FormAuthen.module.scss

@@ -1,5 +1,5 @@
 .formAuthen {
-    @apply transition-all duration-200 bg-white w-full;
+    @apply bg-white w-full;
     .inner {
         @screen md {
             max-width: 52rem;

src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss

@@ -1,7 +1,3 @@
-.hide {
-    transform: translateX(-200%);
-}
-
 .bottom {
     @apply flex justify-between items-center;
     margin: 4rem auto;

src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx

@@ -25,7 +25,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
     return (
         <section className={classNames({
             [s.formAuthen]: true,
-            [styles.hide]: isHide
+            // [styles.hide]: isHide
         })}>
             <div className={s.inner}>
                 <div className={s.body}>

src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss

@@ -1,12 +1,8 @@
-@import '../../../../../styles/utilities';
+@import "../../../../../styles/utilities";
 
 .formRegister {
-    transform: translateX(-100%);
-    &.hide {
-        transform: none;
-    }
     .passwordNote {
-    @apply text-center caption text-label;
+        @apply text-center caption text-label;
         margin-top: 0.8rem;
     }
     .bottom {
@@ -17,4 +13,3 @@
         }
     }
 }
-

src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx

@@ -24,11 +24,11 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
         <section className={classNames({
             [s.formAuthen]: true,
             [styles.formRegister]: true,
-            [styles.hide]: isHide
+            // [styles.hide]: isHide
         })}>
             <div className={s.inner}>
                 <div className={s.body}>
-                    <Inputcommon placeholder='Email Address' type='email' />
+                    <Inputcommon placeholder='Email Address' type='email' ref={emailRef}/>
                     <Inputcommon placeholder='Password' type='password' />
                     <div className={styles.passwordNote}>
                         Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character.

src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss

@@ -5,8 +5,9 @@
         @apply relative text-center;
         margin-bottom: 4rem;
         span {
-            @apply bg-white uppercase text-label caption;
+            @apply relative bg-white uppercase text-label caption;
             padding: 0 0.8rem;
+            z-index: 10;
         }
         &::after {
             @apply absolute bg-line;
@@ -14,6 +15,7 @@
             width: 100%;
             height: 1px;
             top: 50%;
+            left: 0;
             transform: translateY(-50%);
         }
     }
@@ -26,7 +28,7 @@
                 @apply hidden;
                 @screen md {
                     @apply inline-block;
-                    margin-left: .8rem;
+                    margin-left: 0.8rem;
                 }
             }
         }