🎨 styles: form login

:%s

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

@@ -97,10 +97,6 @@
 
   .icon {
     margin: 0 1.6rem 0 0;
-  }
-
-  .label,
-  .icon {
     svg path {
       fill: currentColor;
     }

src/components/common/Header/Header.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import React, { memo, useEffect, useState } from 'react'
 import { isMobile } from 'src/utils/funtion.utils'
+import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
 import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
 import HeaderMenu from './components/HeaderMenu/HeaderMenu'
 import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
@@ -41,6 +42,7 @@ const Header = memo(({ }: Props) => {
                 </div>
             </header>
             <HeaderSubMenuMobile />
+            <ModalAuthenticate/>
         </>
     )
 })

src/components/common/InputCommon/InputCommon.tsx

@@ -10,7 +10,7 @@ interface Props {
     children?: React.ReactNode,
     value?: string | number,
     placeholder?: string,
-    type?: 'text' | 'number' | 'email',
+    type?: 'text' | 'number' | 'email' | 'password',
     styleType?: 'default' | 'custom',
     backgroundTransparent?: boolean,
     icon?: React.ReactNode,

src/components/common/ModalAuthenticate/ModalAuthenticate.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import FormLogin from './components/FormLogin/FormLogin'
+import s from './ModalAuthenticate.module.scss'
+
+const ModalAuthenticate = () => {
+    return(
+        <section >
+           <FormLogin/>
+        </section>
+    )
+}
+
+export default ModalAuthenticate

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

@@ -0,0 +1,35 @@
+.login {
+    @screen md {
+        max-width: 52rem;
+    }
+    .inner {
+        .body {
+            > div {
+                &:not(:last-child) {
+                    margin-bottom: 1.6rem;
+                }
+            }
+        }
+        .bottom {
+            @apply flex justify-between items-center;
+            margin-top: 4rem;
+            .forgotPassword {
+                @apply font-bold;
+                color: var(--primary);
+            }
+        }
+        .others {
+            @apply font-bold text-center;
+            margin-top: 4rem;
+
+            span {
+                @apply text-active;
+                margin-right: 0.8rem;
+            }
+            button {
+                all: unset;
+                @apply text-primary;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import React from 'react'
+import { Inputcommon, ButtonCommon } from 'src/components/common'
+import { ROUTE } from 'src/utils/constanst.utils'
+import SocialAuthen from '../SocialAuthen/SocialAuthen'
+import s from './FormLogin.module.scss'
+
+interface Props {
+    onSwitch: () => void
+}
+
+const FormLogin = ({ onSwitch }: Props) => {
+    return (
+        <section className={s.login}>
+            <div className={s.inner}>
+                <div className={s.body}>
+                    <Inputcommon placeholder='Email Address' type='email' />
+                    <Inputcommon placeholder='Password' type='password' />
+                </div>
+                <div className={s.bottom}>
+                    <Link href={ROUTE.FORGOT_PASSWORD}>
+                        <a href="" className={s.forgotPassword}>
+                            Forgot Password?
+                        </a>
+                    </Link>
+                    <ButtonCommon size='large'>Sign in</ButtonCommon>
+                </div>
+                <SocialAuthen />
+                <div className={s.others}>
+                    <span>Don't have an account?</span>
+                    <button onClick={onSwitch}>Create Account</button>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default FormLogin

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

@@ -0,0 +1,27 @@
+@import "../../../../../styles/utilities";
+
+.socialAuthen {
+    .captionText {
+        @apply relative text-center;
+        margin-bottom: 4rem;
+        span {
+            @apply bg-white uppercase text-label caption;
+            padding: 0 0.8rem;
+        }
+        &::after {
+            @apply absolute bg-line;
+            content: "";
+            width: 100%;
+            height: 1px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+    .btns {
+        @apply grid grid-cols-3;
+        grid-gap: 1.6rem;
+        .buttonWithIcon {
+            @apply flex items-center;
+        }
+    }
+}

src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import ButtonCommon from 'src/components/common/ButtonCommon/ButtonCommon'
+import { IconApple, IconFacebookColor, IconGoogleColor } from 'src/components/icons'
+import s from './SocialAuthen.module.scss'
+
+const SocialAuthen = () => {
+    return (
+        <section className={s.socialAuthen}>
+            <div className={s.captionText}>
+                <span>
+                    OR CONTINUE WITH
+                </span>
+            </div>
+            <div className={s.btns}>
+                <ButtonCommon type='light'>
+                    <span className={s.buttonWithIcon}>
+                        <IconFacebookColor />&nbsp;Facebook
+                    </span>
+                </ButtonCommon>
+                <ButtonCommon type='light'>
+                    <span className={s.buttonWithIcon}>
+                        <IconApple />&nbsp;Apple
+                    </span>
+                </ButtonCommon>
+                <ButtonCommon type='light'>
+                    <span className={s.buttonWithIcon}>
+                        <IconGoogleColor />&nbsp;Google
+                    </span>
+                </ButtonCommon>
+            </div>
+        </section>
+    )
+}
+
+export default SocialAuthen

src/components/common/index.ts

@@ -23,3 +23,4 @@ export { default as MenuDropdown} from './MenuDropdown/MenuDropdown'
 export { default as NotiMessage} from './NotiMessage/NotiMessage'
 export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
 export { default as SelectCommon} from './SelectCommon/SelectCommon'
+export { default as ModalLogin} from './ModalAuthenticate/components/FormLogin/FormLogin'