From c13d70ce48a33c3e090646c761e2eebcd0d56b4e Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 15:49:46 +0700 Subject: [PATCH 1/8] :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 = { From a0ed04329d1596ba685557de5a34a5474e6dd014 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 16:25:44 +0700 Subject: [PATCH 2/8] :bug: bug: home feature :%s --- pages/index.tsx | 8 ++-- .../home/HomeFeature/HomeFeature.module.scss | 20 +++++----- .../HomeFeatureItem.module.scss | 37 +++++++++---------- 3 files changed, 32 insertions(+), 33 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index 6d6f1a6e9..1d3072ef7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,14 +1,14 @@ import { Layout } from 'src/components/common' -import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories } from 'src/components/modules/home'; -import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe'; +import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home'; export default function Home() { return ( <> - - + + + diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss index 451dc39c5..1753edf99 100644 --- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss +++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss @@ -1,14 +1,16 @@ -@import '../../../../../../styles/utilities'; +@import "../../../../styles/utilities"; .homeFeature { - @apply spacing-horizontal-left grid grid-cols-1; - background-color: #FFFFFF; + @apply spacing-horizontal; + background-color: #ffffff; height: fit-content; - padding-top: 3.2rem; - padding-bottom: 3.2rem; - + margin: 3.2rem auto; @screen md { - @apply spacing-horizontal grid-cols-3; - margin-bottom: 6.4rem; + @apply grid grid-cols-3; + grid-gap: 2.4rem; + margin: 6.4rem auto; } -} \ No newline at end of file + @screen md { + grid-gap: 4rem; + } +} diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss index a31e5e4fe..d3dcb518b 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss @@ -1,18 +1,16 @@ -@import '../../../../../../styles/utilities'; +@import "../../../../../../styles/utilities"; .homeFeatureItem { - @apply flex; - align-items: center; - vertical-align: middle; - height: fit-content; + @apply flex items-center; width: fit-content; + margin: auto; @screen md { - @apply block; + @apply flex flex-col items-center justify-between; } @screen lg { - @apply flex; + @apply flex flex-row; } .itemImg { @@ -21,39 +19,38 @@ align-items: center; &.firstImg { margin-top: 1rem; - content:url("../../assets/10h30-11h-desktop.png"); + content: url("../../assets/10h30-11h-desktop.png"); } &.secondImg { margin-top: 1rem; - content:url("../../assets/8h-desktop.png"); + content: url("../../assets/8h-desktop.png"); } &.thirdImg { margin-top: 1rem; - content:url("../../assets/green-desktop.png"); + content: url("../../assets/green-desktop.png"); } - + @screen md { - @apply flex justify-center items-center; + @apply flex flex-col justify-center items-center; margin: auto; + margin-top: 0.8rem; } @screen lg { @apply flex float-left clear-both; margin-right: 2.4rem; + margin-top: 0; } } .itemText { - @apply inline-block; max-width: 28rem; min-width: 12rem; - color: #000; - margin-right: 2.4rem; - align-items: center; - @screen md { - @apply flex; + @apply text-center; + } + @screen lg { + @apply text-left; } } - -} \ No newline at end of file +} From 3f70dc73465d9718333788863c540a5afe77ad6d Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 16:29:05 +0700 Subject: [PATCH 3/8] :bug: bug: set z index header menu :%s --- .../HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss index 5480b5d10..230d9e59e 100644 --- a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss +++ b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.module.scss @@ -7,6 +7,7 @@ padding: 2rem 1rem; border-top: 1px solid var(--border-line); box-shadow: -5px 6px 10px rgba(0, 0, 0, 0.2); + z-index: 9999; .menu { @apply grid grid-cols-4; li { From 6aed5f261810e0df66eac3e7e96e11a3b2439d5e Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 16:37:15 +0700 Subject: [PATCH 4/8] :art: styles: form login responsive :%s --- .../components/FormLogin/FormLogin.module.scss | 5 ++++- .../SocialAuthen/SocialAuthen.module.scss | 7 +++++++ .../components/SocialAuthen/SocialAuthen.tsx | 14 ++++++++------ 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss index 4792b3be6..9d5cf2f12 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss @@ -1,8 +1,11 @@ .login { + margin: auto; @screen md { max-width: 52rem; } .inner { + max-width: 100%; + overflow: hidden; .body { > div { &:not(:last-child) { @@ -12,7 +15,7 @@ } .bottom { @apply flex justify-between items-center; - margin-top: 4rem; + margin: 4rem auto; .forgotPassword { @apply font-bold; color: var(--primary); diff --git a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss index ec78064fd..24b8b0c5c 100644 --- a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss +++ b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss @@ -22,6 +22,13 @@ grid-gap: 1.6rem; .buttonWithIcon { @apply flex items-center; + .label { + @apply hidden; + @screen md { + @apply inline-block; + margin-left: .8rem; + } + } } } } diff --git a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx index 6405544db..3cfdc80dd 100644 --- a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx +++ b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.tsx @@ -12,19 +12,21 @@ const SocialAuthen = () => {
- + -  Facebook + Facebook - + -  Apple + + Apple - + -  Google + + Google
From d228ea0e31c2ae193269bb28a70d755e8303f35b Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 17:19:56 +0700 Subject: [PATCH 5/8] :art: styles: form authen :%s --- .../ModalAuthenticate.module.scss | 4 ++ .../ModalAuthenticate/ModalAuthenticate.tsx | 16 +++++-- .../components/FormAuthen.module.scss | 35 +++++++++++++++ .../FormLogin/FormLogin.module.scss | 45 +++++-------------- .../components/FormLogin/FormLogin.tsx | 16 ++++--- .../FormRegister/FormRegister.module.scss | 21 +++++++++ .../components/FormRegister/FormRegister.tsx | 41 +++++++++++++++++ src/styles/_base.scss | 2 +- 8 files changed, 135 insertions(+), 45 deletions(-) create mode 100644 src/components/common/ModalAuthenticate/components/FormAuthen.module.scss create mode 100644 src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss create mode 100644 src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss index e69de29bb..040e74bd2 100644 --- a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss +++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss @@ -0,0 +1,4 @@ +.formAuthenticate { + @apply grid grid-cols-2 overflow-hidden; + width: 200%; +} diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx index c5bd94939..1486b2adf 100644 --- a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx +++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx @@ -1,11 +1,19 @@ -import React from 'react' +import React, { useState } from 'react' import FormLogin from './components/FormLogin/FormLogin' +import FormRegister from './components/FormRegister/FormRegister' import s from './ModalAuthenticate.module.scss' const ModalAuthenticate = () => { - return( -
- + const [isLogin, setIsLogin] = useState(true) + + const onSwitch = () => { + setIsLogin(!isLogin) + } + + return ( +
+ +
) } diff --git a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss new file mode 100644 index 000000000..6b5b01dc4 --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss @@ -0,0 +1,35 @@ +.formAuthen { + @apply transition-all duration-200 bg-white w-full; + .inner { + @screen md { + max-width: 52rem; + margin: auto; + } + .body { + > div { + &:not(:last-child) { + margin-bottom: 1.6rem; + } + } + } + .others { + @apply font-bold text-center; + margin-top: 4rem; + + span { + @apply text-active; + margin-right: 0.8rem; + } + button { + all: unset; + @apply text-primary cursor-pointer; + &:focus-visible { + outline: 2px solid #000; + } + &:focus { + outline: none; + } + } + } + } +} diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss index 9d5cf2f12..52415a6a3 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss @@ -1,38 +1,13 @@ -.login { - margin: auto; - @screen md { - max-width: 52rem; - } - .inner { - max-width: 100%; - overflow: hidden; - .body { - > div { - &:not(:last-child) { - margin-bottom: 1.6rem; - } - } - } - .bottom { - @apply flex justify-between items-center; - margin: 4rem auto; - .forgotPassword { - @apply font-bold; - color: var(--primary); - } - } - .others { - @apply font-bold text-center; - margin-top: 4rem; +.hide { + transform: translateX(-200%); +} - span { - @apply text-active; - margin-right: 0.8rem; - } - button { - all: unset; - @apply text-primary; - } - } +.bottom { + @apply flex justify-between items-center; + margin: 4rem auto; + .forgotPassword { + @apply font-bold; + color: var(--primary); } } + diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx index 889ad3ce0..cca8c75a1 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -3,23 +3,29 @@ 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' +import s from '../FormAuthen.module.scss' +import styles from './FormLogin.module.scss' +import classNames from 'classnames' interface Props { + isHide: boolean, onSwitch: () => void } -const FormLogin = ({ onSwitch }: Props) => { +const FormLogin = ({ onSwitch, isHide }: Props) => { return ( -
+
-
+
- + Forgot Password? diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss new file mode 100644 index 000000000..2201cc01c --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss @@ -0,0 +1,21 @@ +@import '../../../../../styles/utilities'; + +.formRegister { + transform: translateX(-100%); + &.hide { + transform: none; + } + .passwordNote { + @apply text-center caption; + margin-top: 0.8rem; + } + + .bottom { + @apply flex justify-between items-center w-full; + margin: 4rem auto; + button { + @apply w-full; + } + } +} + diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx new file mode 100644 index 000000000..608ffc0b6 --- /dev/null +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import { ButtonCommon, Inputcommon } from 'src/components/common' +import s from '../FormAuthen.module.scss' +import styles from './FormRegister.module.scss' +import SocialAuthen from '../SocialAuthen/SocialAuthen' +import classNames from 'classnames' + +interface Props { + isHide: boolean, + onSwitch: () => void +} + +const FormRegister = ({ onSwitch, isHide }: Props) => { + return ( +
+
+
+ + +
+ Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character. +
+
+
+ Create Account +
+ +
+ Already an account? + +
+
+
+ ) +} + +export default FormRegister \ No newline at end of file diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 5d0cd8322..67eb96726 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -34,7 +34,7 @@ --border-line: #ebebeb; --background: #fff; --gray: #f8f8f8; - --white: #fbfbfb; + --white: #fff; --background-arrow:rgba(20, 20, 20, 0.05); --font-size: 1.6rem; --line-height: 2.4rem; From f29f675438e6da53efa9640f51142aa20adcfb87 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 17:50:45 +0700 Subject: [PATCH 6/8] :sparkles: feat: open modal authen from the header :%s --- src/components/common/Header/Header.tsx | 13 ++++--- .../components/HeaderMenu/HeaderMenu.tsx | 35 +++++++++++-------- .../MenuDropdown/MenuDropdown.module.scss | 18 +++++++--- .../common/MenuDropdown/MenuDropdown.tsx | 15 +++++--- .../ModalAuthenticate.module.scss | 7 ++-- .../ModalAuthenticate/ModalAuthenticate.tsx | 21 ++++++++--- src/components/hooks/useModalCommon.tsx | 23 ++++++++++++ 7 files changed, 93 insertions(+), 39 deletions(-) create mode 100644 src/components/hooks/useModalCommon.tsx diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index d1cad0746..7e6978d03 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,5 +1,6 @@ import classNames from 'classnames' import React, { memo, useEffect, useState } from 'react' +import { useModalCommon } from 'src/components/hooks/useModalCommon' import { isMobile } from 'src/utils/funtion.utils' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight' @@ -8,13 +9,10 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu' import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile' import s from './Header.module.scss' -interface Props { - className?: string - children?: any -} -const Header = memo(({ }: Props) => { +const Header = memo(() => { const [isFullHeader, setIsFullHeader] = useState(true) + const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: true }) useEffect(() => { window.addEventListener('scroll', handleScroll) @@ -37,12 +35,13 @@ const Header = memo(({ }: Props) => {
- +
- + visible = {visibleModalAuthen.toString()} + ) }) diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index 8f19b11e8..a5ef71951 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -1,30 +1,35 @@ import classNames from 'classnames' import Link from 'next/link' -import { memo } from 'react' +import { memo, useMemo } from 'react' import InputSearch from 'src/components/common/InputSearch/InputSearch' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons' import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' import s from './HeaderMenu.module.scss' -const OPTION_MENU = [ - { - link: ROUTE.ACCOUNT, - name: 'Account', - }, - { - link: '/', - name: 'Logout', - }, - -] - interface Props { children?: any, isFull: boolean, + openModalAuthen: () => void, } -const HeaderMenu = memo(({ isFull }: Props) => { +const HeaderMenu = memo(({ isFull, openModalAuthen }: Props) => { + const optionMenu = useMemo(() => [ + { + onClick: openModalAuthen, + name: 'Login (Demo)', + }, + { + link: ROUTE.ACCOUNT, + name: 'Account', + }, + { + link: '/', + name: 'Logout', + }, + + ], [openModalAuthen]) + return (
@@ -54,7 +59,7 @@ const HeaderMenu = memo(({ isFull }: Props) => {
  • - +
  • + : + + + {item.name} + + }
    • ) } diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss index 040e74bd2..775e283c3 100644 --- a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss +++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss @@ -1,4 +1,7 @@ .formAuthenticate { - @apply grid grid-cols-2 overflow-hidden; - width: 200%; + @apply overflow-hidden; + .inner { + @apply grid grid-cols-2 overflow-hidden; + width: 200%; + } } diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx index 1486b2adf..f6c952bf2 100644 --- a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx +++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx @@ -1,9 +1,15 @@ import React, { useState } from 'react' +import ModalCommon from '../ModalCommon/ModalCommon' import FormLogin from './components/FormLogin/FormLogin' import FormRegister from './components/FormRegister/FormRegister' import s from './ModalAuthenticate.module.scss' -const ModalAuthenticate = () => { +interface Props { + visible: boolean, + closeModal: () => void, +} + +const ModalAuthenticate = ({ visible, closeModal }: Props) => { const [isLogin, setIsLogin] = useState(true) const onSwitch = () => { @@ -11,10 +17,15 @@ const ModalAuthenticate = () => { } return ( -
    - - -
    + +
    +
    + + +
    +
    +     + ) } diff --git a/src/components/hooks/useModalCommon.tsx b/src/components/hooks/useModalCommon.tsx new file mode 100644 index 000000000..02626ce94 --- /dev/null +++ b/src/components/hooks/useModalCommon.tsx @@ -0,0 +1,23 @@ +import { useState } from 'react'; + +interface Props { + initialValue?: boolean, +} + +export const useModalCommon = ({ initialValue = false }: Props) => { + const [visible, setVisible] = useState(initialValue) + + const openModal = (e?: any) => { + e && e.stopPropagation() + setVisible(true) + } + + const closeModal = (e?: any) => { + e && e.stopPropagation() + setVisible(false) + } + + return { + visible, openModal, closeModal + } +}; From a3170ee04dad64c7e7419bccb941eef0ae34af2c Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 27 Aug 2021 18:01:44 +0700 Subject: [PATCH 7/8] :sparkles: feat: auto focus input in form login/ register :%s --- src/components/common/Header/Header.tsx | 1 - .../components/FormLogin/FormLogin.tsx | 13 +++++++++++-- .../FormRegister/FormRegister.module.scss | 3 +-- .../components/FormRegister/FormRegister.tsx | 11 ++++++++++- .../common/ModalCommon/ModalCommon.module.scss | 8 ++++++-- 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 7e6978d03..5cafab930 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -40,7 +40,6 @@ const Header = memo(() => {
    - visible = {visibleModalAuthen.toString()} ) diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx index cca8c75a1..d09cd85d5 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -1,11 +1,12 @@ import Link from 'next/link' -import React from 'react' +import React, { useRef, useEffect } from 'react' import { Inputcommon, ButtonCommon } from 'src/components/common' import { ROUTE } from 'src/utils/constanst.utils' import SocialAuthen from '../SocialAuthen/SocialAuthen' import s from '../FormAuthen.module.scss' import styles from './FormLogin.module.scss' import classNames from 'classnames' +import { CustomInputCommon } from 'src/utils/type.utils' interface Props { isHide: boolean, @@ -13,6 +14,14 @@ interface Props { } const FormLogin = ({ onSwitch, isHide }: Props) => { + const emailRef = useRef(null) + + useEffect(() => { + if (!isHide) { + emailRef.current?.focus() + } + }, [isHide]) + return (
    { })}>
    - +
    diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss index 2201cc01c..ed18090d6 100644 --- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss @@ -6,10 +6,9 @@ transform: none; } .passwordNote { - @apply text-center caption; + @apply text-center caption text-label; margin-top: 0.8rem; } - .bottom { @apply flex justify-between items-center w-full; margin: 4rem auto; diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx index 608ffc0b6..8b66449b1 100644 --- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx @@ -1,9 +1,10 @@ -import React from 'react' +import React, { useEffect, useRef } from 'react' import { ButtonCommon, Inputcommon } from 'src/components/common' import s from '../FormAuthen.module.scss' import styles from './FormRegister.module.scss' import SocialAuthen from '../SocialAuthen/SocialAuthen' import classNames from 'classnames' +import { CustomInputCommon } from 'src/utils/type.utils' interface Props { isHide: boolean, @@ -11,6 +12,14 @@ interface Props { } const FormRegister = ({ onSwitch, isHide }: Props) => { + const emailRef = useRef(null) + + useEffect(() => { + if (!isHide) { + emailRef.current?.focus() + } + }, [isHide]) + return (
    Date: Fri, 27 Aug 2021 18:29:41 +0700 Subject: [PATCH 8/8] :art: styles: modal authen :%s --- .../common/ButtonCommon/ButtonCommon.module.scss | 15 ++++++++++++--- .../ModalAuthenticate.module.scss | 5 ++++- .../ModalAuthenticate/ModalAuthenticate.tsx | 6 +++++- .../components/FormAuthen.module.scss | 2 +- .../components/FormLogin/FormLogin.module.scss | 4 ---- .../components/FormLogin/FormLogin.tsx | 2 +- .../FormRegister/FormRegister.module.scss | 9 ++------- .../components/FormRegister/FormRegister.tsx | 4 ++-- .../SocialAuthen/SocialAuthen.module.scss | 6 ++++-- 9 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index 6e4975914..4cfe737de 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/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 { diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss b/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss index 775e283c3..e61000bbf 100644 --- a/src/components/common/ModalAuthenticate/ModalAuthenticate.module.scss +++ b/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%); + } } } diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx index f6c952bf2..31ca3fb81 100644 --- a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx +++ b/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 (
    -
    +
    diff --git a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss index 6b5b01dc4..bdfc69387 100644 --- a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss +++ b/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; diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss index 52415a6a3..a269e9441 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.module.scss +++ b/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; diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx index d09cd85d5..7ef3ec9ba 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -25,7 +25,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => { return (
    diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss index ed18090d6..95f6cfb04 100644 --- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.module.scss +++ b/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 @@ } } } - diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx index 8b66449b1..1624f2c1c 100644 --- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx @@ -24,11 +24,11 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
    - +
    Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character. diff --git a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss b/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss index 24b8b0c5c..425037e15 100644 --- a/src/components/common/ModalAuthenticate/components/SocialAuthen/SocialAuthen.module.scss +++ b/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; } } }