From c13d70ce48a33c3e090646c761e2eebcd0d56b4e Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 15:49:46 +0700 Subject: [PATCH] :art: styles: form login :%s --- .../ButtonCommon/ButtonCommon.module.scss | 4 -- src/components/common/Header/Header.tsx | 2 + .../common/InputCommon/InputCommon.tsx | 2 +- .../ModalAuthenticate.module.scss | 0 .../ModalAuthenticate/ModalAuthenticate.tsx | 13 +++++++ .../FormLogin/FormLogin.module.scss | 35 +++++++++++++++++ .../components/FormLogin/FormLogin.tsx | 38 +++++++++++++++++++ .../SocialAuthen/SocialAuthen.module.scss | 27 +++++++++++++ .../components/SocialAuthen/SocialAuthen.tsx | 35 +++++++++++++++++ src/components/common/index.ts | 1 + src/components/icons/IconApple.tsx | 18 +++++++++ src/components/icons/IconFacebookColor.tsx | 19 ++++++++++ src/components/icons/IconGoogleColor.tsx | 21 ++++++++++ src/components/icons/index.ts | 3 ++ src/utils/constanst.utils.ts | 1 + 15 files changed, 214 insertions(+), 5 deletions(-) create mode 100644 src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss create mode 100644 src/components/common/ModalAuthenticate/ModalAuthenticate.tsx create mode 100644 src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss create mode 100644 src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx create mode 100644 src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss create mode 100644 src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx create mode 100644 src/components/icons/IconApple.tsx create mode 100644 src/components/icons/IconFacebookColor.tsx create mode 100644 src/components/icons/IconGoogleColor.tsx diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index 324035ade..2b22f2a49 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -97,10 +97,6 @@ .icon { margin: 0 1.6rem 0 0; - } - - .label, - .icon { svg path { fill: currentColor; } diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index dfce58b57..d1cad0746 100644 --- a/src/components/common/Header/Header.tsx +++ b/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) => { + ) }) diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx index be98fba24..6a42d5537 100644 --- a/src/components/common/InputCommon/InputCommon.tsx +++ b/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, diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx new file mode 100644 index 000000000..c5bd94939 --- /dev/null +++ b/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( +
+ +
+ ) +} + +export default ModalAuthenticate \ No newline at end of file diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss new file mode 100644 index 000000000..4792b3be6 --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx new file mode 100644 index 000000000..889ad3ce0 --- /dev/null +++ b/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 ( +
+
+
+ + +
+
+ + + Forgot Password? + + + Sign in +
+ +
+ Don't have an account? + +
+
+
+ ) +} + +export default FormLogin \ No newline at end of file diff --git a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss new file mode 100644 index 000000000..ec78064fd --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx new file mode 100644 index 000000000..6405544db --- /dev/null +++ b/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 ( +
+
+ + OR CONTINUE WITH + +
+
+ + +  Facebook + + + + +  Apple + + + + +  Google + + +
+
+ ) +} + +export default SocialAuthen \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 650ec34bc..01fca6e98 100644 --- a/src/components/common/index.ts +++ b/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' diff --git a/src/components/icons/IconApple.tsx b/src/components/icons/IconApple.tsx new file mode 100644 index 000000000..798d32419 --- /dev/null +++ b/src/components/icons/IconApple.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +const IconApple = () => { + return ( + + + + + + + + + + + ) +} + +export default IconApple diff --git a/src/components/icons/IconFacebookColor.tsx b/src/components/icons/IconFacebookColor.tsx new file mode 100644 index 000000000..71251a1fa --- /dev/null +++ b/src/components/icons/IconFacebookColor.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +const IconFacebookColor = () => { + return ( + + + + + + + + + + + + ) +} + +export default IconFacebookColor diff --git a/src/components/icons/IconGoogleColor.tsx b/src/components/icons/IconGoogleColor.tsx new file mode 100644 index 000000000..2cbf508bd --- /dev/null +++ b/src/components/icons/IconGoogleColor.tsx @@ -0,0 +1,21 @@ +import React from 'react' + +const IconGoogleColor = () => { + return ( + + + + + + + + + + + + + + ) +} + +export default IconGoogleColor diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index ae39054a8..2aacbbe04 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -9,3 +9,6 @@ export { default as IconHome } from './IconHome' export { default as IconShopping } from './IconShopping' export { default as IconHeart } from './IconHeart' export { default as IconVector } from './IconVector' +export { default as IconFacebookColor } from './IconFacebookColor' +export { default as IconGoogleColor } from './IconGoogleColor' +export { default as IconApple } from './IconApple' diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 0d66ecda0..c7002a730 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -18,6 +18,7 @@ export const ROUTE = { TERM_CONDITION: '/term-condition', PRIVACY_POLICY: '/privacy-policy', BLOGS: '/blogs', + FORGOT_PASSWORD: '/forgot-password' } export const ACCOUNT_TAB = {