diff --git a/src/components/common/Layout/Layout.module.scss b/src/components/common/Layout/Layout.module.scss index 679b0b48f..97ed29624 100644 --- a/src/components/common/Layout/Layout.module.scss +++ b/src/components/common/Layout/Layout.module.scss @@ -2,15 +2,22 @@ display: flex; flex-direction: column; min-height: 100vh; - > main { + .wrapperWithBg { + @apply bg-background-gray; + width: 100%; + margin-top: -3.2rem; + } + + > main, + .wrapperWithBg > main { flex: 1; width: 100%; - max-width: min( 100%, 1536px); + max-width: min(100%, 1536px); margin: auto; } } -.filter{ +.filter { @screen xl { display: none; } -} \ No newline at end of file +} diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 233c53bbc..979e55c84 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' import { useModalCommon } from 'src/components/hooks' -import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils' +import { BRAND, CATEGORY, FEATURED, ROUTE } from 'src/utils/constanst.utils' import { ScrollToTop } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' @@ -19,6 +19,8 @@ const Layout: FC = ({ children }) => { const { locale = 'en-US' } = useRouter() const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false }) + const router = useRouter() + const toggleFilter = () => { if (visibleFilter) { closeFilter() @@ -26,11 +28,18 @@ const Layout: FC = ({ children }) => { openFilter() } } + return (
-
{children}
+ { + router.pathname === ROUTE.ACCOUNT ? +
+
{children}
+
: +
{children}
+ }
diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss index 5eece6c80..89beebd86 100644 --- a/src/components/modules/account/AccountPage/AccountPage.module.scss +++ b/src/components/modules/account/AccountPage/AccountPage.module.scss @@ -1,23 +1,26 @@ @import '../../../../styles/utilities'; .accountPage { - @apply spacing-horizontal; - background-color: #F5F4F2; - margin-top: -3.2rem; - padding-top: 3.2rem; - padding-bottom: 3.2rem; + @apply bg-background-gray; + padding: 3.2rem 2rem; min-height: 70rem; - @screen md { - padding-left: 3.2rem; - padding-right: 3.2rem; + padding-left: 2.8rem; + padding-right: 2.8rem; + padding: 5.4rem 2rem; + } + + @screen lg { + padding-left: 6.4rem; + padding-right: 6.4rem; } @screen xl { - @apply spacing-horizontal + padding-left: 11.2rem; + padding-right: 11.2rem; } - + .header { margin-bottom: 1.2rem; diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss index 6e8150f1b..e8dd88a65 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss @@ -16,7 +16,6 @@ margin: auto; margin-bottom: 4rem; - @screen md { margin-left: 0 } @@ -56,22 +55,16 @@ } .editInfoBtn { - @apply text-center font-bold custom-border-radius; - margin: auto; + @apply flex items-center justify-center; margin-top: 2.4rem; margin-bottom: 2.4rem; - padding: .8rem 1.6rem; - color: #141414; - border: 1px solid #141414; - max-width: 8.8rem; - &:hover { - @apply cursor-pointer; - background-color: #FBFBFB; + button div { + background-color: #F5F4F2 !important; } @screen md { - margin-left: 0; + @apply block; } } } \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx index dac651fea..241c631d6 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx @@ -4,6 +4,8 @@ import s from './AccountInfomation.module.scss' import Image from "next/image" import avatar from '../../assets/avatar.png'; +import { ButtonCommon } from 'src/components/common' + interface AccountProps { name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string } @@ -44,7 +46,9 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => { {account.phoneNumber}
-
Edit
+
+ Edit +
) } diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx index 858526f26..211cebe3b 100644 --- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx @@ -25,7 +25,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr { waiting.map((order, i) => { return ( - + ) }) } @@ -36,7 +36,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr { delivering.map((order, i) => { return ( - + ) }) } @@ -47,7 +47,7 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr { delivered.map((order, i) => { return ( - + ) }) } diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx index a8ccbb69d..b42a0f91e 100644 --- a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx +++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx @@ -9,7 +9,7 @@ import ReOrder from './components/ReOrder/ReOrder' interface DeliveryItemProps { id: string; - status: "Waiting" | "Delivering" | "Delivered"; + status: "waiting" | "delivering" | "delivered"; products: string[]; totalPrice: number; } @@ -21,7 +21,7 @@ const DeliveryItem = ({ id, status, products, totalPrice } : DeliveryItemProps)
- + ) } diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx index 578c94f97..d09868272 100644 --- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx @@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss' interface IdAndStatusProps { id?: string; - status: "Waiting" | "Delivering" | "Delivered"; + status: "waiting" | "delivering" | "delivered"; } -const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => { +const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => { return (
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss index 517dd2e4f..8b855196e 100644 --- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss @@ -1,9 +1,21 @@ @import '../../../../../../styles/utilities'; .reOrder { - @apply hidden; + @apply hidden shape-common text-white font-bold; + background-color: var(--primary); margin-right: 1.2rem; - &.show { + padding: .4rem .6rem; + + @screen lg { + padding: .8rem 1.2rem; + margin-right: 2.4rem; + } + + &.visible { @apply block; } + + &:hover { + @apply cursor-pointer; + } } \ No newline at end of file diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx index aaef9153c..4d6164676 100644 --- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx @@ -1,18 +1,22 @@ import classNames from "classnames" import React from "react" import { ButtonCommon } from "src/components/common" +import Link from 'next/link' import s from './ReOrder.module.scss' interface ReOrderProps { - show: boolean; + visible: boolean; + href?: string; } -const ReOrder = ({ show=false } : ReOrderProps) => { +const ReOrder = ({ visible=false, href="#" } : ReOrderProps) => { return (
- Re-Order + + Re-Order +
) }