From ee496c95b4d7f5cbe3d752d5320dbfb9e0330f63 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Tue, 14 Sep 2021 10:41:00 +0700 Subject: [PATCH] bug: add dot MenuFilter, add page AccountSignIn , fix spacing MenuFilter --- pages/account.tsx | 7 ++- public/assets/images/accountsignin.png | Bin 0 -> 3289 bytes src/components/common/Header/Header.tsx | 6 ++- .../HeaderMenu/HeaderMenu.module.scss | 15 +++++++ .../components/HeaderMenu/HeaderMenu.tsx | 8 +++- src/components/common/Layout/Layout.tsx | 2 +- .../MenuNavigation/MenuNavigation.module.scss | 1 + .../MenuNavigationProductList.module.scss | 14 +++--- .../MenuSort/MenuSort.module.scss | 4 +- .../AccountSignIn/AccountSignIn.module.scss | 37 ++++++++++++++++ .../account/AccountSignIn/AccountSignIn.tsx | 40 ++++++++++++++++++ src/components/modules/account/index.ts | 3 +- src/utils/language.utils.ts | 1 + 13 files changed, 121 insertions(+), 17 deletions(-) create mode 100644 public/assets/images/accountsignin.png create mode 100644 src/components/modules/account/AccountSignIn/AccountSignIn.module.scss create mode 100644 src/components/modules/account/AccountSignIn/AccountSignIn.tsx diff --git a/pages/account.tsx b/pages/account.tsx index 7da102c52..84f0d8d74 100644 --- a/pages/account.tsx +++ b/pages/account.tsx @@ -1,10 +1,13 @@ import React from 'react'; import { Layout } from 'src/components/common'; -import { AccountPage } from 'src/components/modules/account'; +import { AccountPage, AccountSignIn } from 'src/components/modules/account'; const Account = () => { return ( - + // + <> + + ); }; diff --git a/public/assets/images/accountsignin.png b/public/assets/images/accountsignin.png new file mode 100644 index 0000000000000000000000000000000000000000..89fcdd8511389df722df4564387cb29085369747 GIT binary patch literal 3289 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 XgRi~}$KiHt00000NkvXXu0mjfH=-

void + toggleFilter: () => void, + visibleFilter:boolean } -const Header = memo(({ toggleFilter }: props) => { +const Header = memo(({ toggleFilter,visibleFilter }: props) => { const headeFullRef = useRef(null) const [isFullHeader, setIsFullHeader] = useState(true) const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }) @@ -55,6 +56,7 @@ const Header = memo(({ toggleFilter }: props) => {

void, openModalInfo: () => void, toggleFilter:() => void, @@ -19,8 +20,10 @@ interface Props { const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS] -const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => { +const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => { const router = useRouter() + + const optionMenu = useMemo(() => [ { onClick: openModalAuthen, @@ -50,6 +53,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, FILTER_PAGE.includes(router.pathname) && ( ) } diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 8b93825b4..4b8803291 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -29,7 +29,7 @@ const Layout: FC = ({ children }) => { return (
-
+
{children}
diff --git a/src/components/common/MenuNavigation/MenuNavigation.module.scss b/src/components/common/MenuNavigation/MenuNavigation.module.scss index 7535df707..7f0c1d8b6 100644 --- a/src/components/common/MenuNavigation/MenuNavigation.module.scss +++ b/src/components/common/MenuNavigation/MenuNavigation.module.scss @@ -1,5 +1,6 @@ @import "../../../styles/utilities"; .menuNavigationWrapper{ + @apply hidden; .menuNavigationHeading{ @screen md { @apply sub-headline font-bold ; diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss index 042785c05..353b9073e 100644 --- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss @@ -10,8 +10,6 @@ } .menuNavigationProductListMobile{ @apply relative transition-all duration-100; - - &.isShow{ &::after{ content: ""; @@ -39,13 +37,14 @@ transform: translateY(0%) } .content{ - @apply relative w-full h-full; + @apply absolute w-full h-full; margin-top: 3rem; - padding-top: 8rem ; + padding-top: 10rem ; padding-bottom: 10rem; background-color: white; overflow-y: auto; - height: 100vh; + height: 96%; + bottom: 0; border-radius: 2.4rem 2.4rem 0 0; .head{ @apply flex justify-between fixed; @@ -53,7 +52,7 @@ left:0; margin-top: 3rem; border-radius: 2.4rem 2.4rem 0 0; - padding: 3rem 2rem 1rem 2rem; + padding: 4rem 2rem 2rem 2rem; width: 100%; background-color: white; z-index: 10000; @@ -68,7 +67,8 @@ left:0; width: 100%; background-color: white; - padding: 0 1rem 2rem 1rem; + padding: 0 1rem 3rem 1rem; + } button{ margin-top: 2rem; diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss index 19bd605f8..d259611c7 100644 --- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss +++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss @@ -9,7 +9,7 @@ margin: 0.8rem 0; } .menuSortList{ - margin-bottom: 2rem; + padding-bottom: 1rem; box-sizing: border-box; li{ @@ -22,7 +22,7 @@ &.active { @apply font-bold relative; color:var(--text-active); - background-color: var(--primary-lightest); + background-color: var(--gray); &::after{ @apply absolute; content:""; diff --git a/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss b/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss new file mode 100644 index 000000000..f70ecbdec --- /dev/null +++ b/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss @@ -0,0 +1,37 @@ +@import "../../../../styles/utilities"; +.accountSignInWrapper{ + + @screen sm-only{ + @apply w-full; + .imgError{ + width: 30%; + margin: 0 auto; + } + .text{ + @apply sub-headline; + color:var(--text-placeholder); + text-align: center; + margin-top: 3.6rem; + } + .btn{ + @apply flex justify-center; + margin: 2.6rem auto; + button{ + padding: 1.6rem 7rem; + } + } + .dontHaveAccount{ + @apply flex justify-center font-bold; + div{ + color:var(--text-active); + } + span{ + color:var(--positive); + } + } + } + @screen md{ + @apply hidden; + } + +} \ No newline at end of file diff --git a/src/components/modules/account/AccountSignIn/AccountSignIn.tsx b/src/components/modules/account/AccountSignIn/AccountSignIn.tsx new file mode 100644 index 000000000..036a4ef55 --- /dev/null +++ b/src/components/modules/account/AccountSignIn/AccountSignIn.tsx @@ -0,0 +1,40 @@ +import React from "react" +import { ButtonCommon, StaticImage } from "src/components/common"; +import s from './AccountSignIn.module.scss'; +import {LANGUAGE} from 'src/utils/language.utils'; +import AccountSignInImg from '../../../../../public/assets/images/accountsignin.png' +import Link from 'next/link'; +import { useRouter } from 'next/router'; +interface AccountSignIn { + +} + +const AccountSignIn = ({ } : AccountSignIn) => { + const router = useRouter(); + function openLogin(){ + router.push({ + pathname: '/account/query', + search: '?openLogin=true' + }); + } + return ( + <> +
+
+ +
+
+ Sign in to get more interesting
features +
+
+ {LANGUAGE.BUTTON_LABEL.SIGNIN} +
+
+
Don't have an account?  
Create Account +
+
+ + ) +} + +export default AccountSignIn \ No newline at end of file diff --git a/src/components/modules/account/index.ts b/src/components/modules/account/index.ts index 42753b0b5..8cb391e9c 100644 --- a/src/components/modules/account/index.ts +++ b/src/components/modules/account/index.ts @@ -1,3 +1,4 @@ export { default as AccountNavigation } from './AccountNavigation/AccountNavigation' export { default as DeliveryItem } from './DeliveryItem/DeliveryItem' -export { default as AccountPage } from './AccountPage/AccountPage' \ No newline at end of file +export { default as AccountPage } from './AccountPage/AccountPage' +export { default as AccountSignIn } from './AccountSignIn/AccountSignIn' diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts index 8b3d8f8d5..dfd2b9604 100644 --- a/src/utils/language.utils.ts +++ b/src/utils/language.utils.ts @@ -5,6 +5,7 @@ export const LANGUAGE = { CONFIRM:'Confirm', ADD_TO_CARD: 'Add to Cart', PREORDER: 'Pre-Order Now', + SIGNIN :'Sign In' }, PLACE_HOLDER: { SEARCH: 'Search',