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 000000000..89fcdd851 Binary files /dev/null and b/public/assets/images/accountsignin.png differ diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 5b42c6aaf..3581dd849 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -11,10 +11,11 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu' import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile' import s from './Header.module.scss' interface props { - toggleFilter: () => 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',