From 8e1c9f36f11add0175dff815b9009f2909b33e47 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Oct 2020 13:20:56 -0300 Subject: [PATCH 1/7] UI Tweaks --- components/core/Navbar/Navbar.module.css | 9 +++++++++ components/core/Navbar/Navbar.tsx | 2 +- .../core/UserNav/DropdownMenu.module.css | 4 ++++ components/core/UserNav/DropdownMenu.tsx | 18 ++++++++++++++---- 4 files changed, 28 insertions(+), 5 deletions(-) diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index f24ae8df6..3c56c1348 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/components/core/Navbar/Navbar.module.css @@ -9,3 +9,12 @@ .link:focus { @apply outline-none text-accents-8; } + +.logo { + @apply cursor-pointer rounded-full border transform duration-100 ease-in-out; + + &:hover { + @apply shadow-md; + transform: scale(1.05); + } +} diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index f9c726f40..25dca71cd 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -15,7 +15,7 @@ const Navbar: FC = ({ className }) => {
- + diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css index 755d34974..f81b920ef 100644 --- a/components/core/UserNav/DropdownMenu.module.css +++ b/components/core/UserNav/DropdownMenu.module.css @@ -15,6 +15,10 @@ @apply bg-accents-1; } +.link.active { + @apply font-bold bg-accents-2; +} + .off { @apply hidden; } diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx index dbdf960da..82121605e 100644 --- a/components/core/UserNav/DropdownMenu.tsx +++ b/components/core/UserNav/DropdownMenu.tsx @@ -6,6 +6,8 @@ import s from './DropdownMenu.module.css' import { Moon, Sun } from '@components/icons' import { Menu, Transition } from '@headlessui/react' import useLogout from '@lib/bigcommerce/use-logout' +import { useRouter } from 'next/router' + interface DropdownMenuProps { open: boolean } @@ -20,7 +22,7 @@ const LINKS = [ href: '/profile', }, { - name: 'Cart', + name: 'My Cart', href: '/cart', }, ] @@ -28,6 +30,8 @@ const LINKS = [ const DropdownMenu: FC = ({ open = false }) => { const { theme, setTheme } = useTheme() const logout = useLogout() + const { pathname } = useRouter() + return ( = ({ open = false }) => { {LINKS.map(({ name, href }) => ( - {({ active }) => ( +
- {name} + + {name} + - )} +
))} From 6e2ffa534d8c91df2981650464a5e0265483063a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Oct 2020 13:22:43 -0300 Subject: [PATCH 2/7] UI Tweaks --- components/core/Navbar/Navbar.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index 3c56c1348..f42672365 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/components/core/Navbar/Navbar.module.css @@ -1,9 +1,9 @@ .link { - @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-150 cursor-pointer; + @apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6; } .link:hover { - @apply text-accents-8; + @apply text-accents-9; } .link:focus { From 080616bf7a0a72aff011457ea1e851d74063eff3 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Oct 2020 13:33:25 -0300 Subject: [PATCH 3/7] Changes --- components/core/Avatar/Avatar.tsx | 2 +- components/core/UserNav/UserNav.module.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx index 3797f8073..b7928d4f2 100644 --- a/components/core/Avatar/Avatar.tsx +++ b/components/core/Avatar/Avatar.tsx @@ -12,7 +12,7 @@ const Avatar: FC = ({}) => { return (
Date: Mon, 26 Oct 2020 14:59:02 -0300 Subject: [PATCH 4/7] Added empty states --- components/cart/CartSidebarView/CartSidebarView.tsx | 4 ++-- components/core/UserNav/UserNav.module.css | 4 ++-- pages/orders.tsx | 13 ++++++++++++- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 9f5421519..0ac0bb0ac 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -57,13 +57,13 @@ const CartSidebarView: FC = () => { {isEmpty ? (
- +

Your cart is empty

-

+

Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.

diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index 7219ecdb0..8b8fa8c14 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -7,10 +7,10 @@ } .item { - @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none text-accents-6; + @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none text-primary; &:hover { - @apply text-accents-9 transition scale-110 duration-100; + @apply text-accents-6 transition scale-110 duration-100; } &:last-child { diff --git a/pages/orders.tsx b/pages/orders.tsx index 87c74ac8e..37ba013a8 100644 --- a/pages/orders.tsx +++ b/pages/orders.tsx @@ -1,10 +1,21 @@ import { Layout } from '@components/core' import { Container, Text } from '@components/ui' - +import { Bag } from '@components/icons' export default function Orders() { return ( My Orders +
+ + + +

+ No orders found +

+

+ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +

+
) } From 14cea1fb2780efd6125cb972978f2153c89845cd Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Oct 2020 14:59:35 -0300 Subject: [PATCH 5/7] Added empty states --- components/cart/CartSidebarView/CartSidebarView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 0ac0bb0ac..ae9eb043e 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -116,7 +116,7 @@ const CartSidebarView: FC = () => {
  • Estimated Shipping - FREE + FREE
  • From 836ff1cea20e47ba19833519b325c3802447ed35 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Oct 2020 15:14:36 -0300 Subject: [PATCH 6/7] Changes --- components/cart/CartSidebarView/CartSidebarView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index ae9eb043e..fc9b212fa 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -57,13 +57,13 @@ const CartSidebarView: FC = () => { {isEmpty ? (
    - +

    Your cart is empty

    -

    +

    Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.

    From daaa2a483f20480297f9cb81a7e50b6a755d8b9a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 26 Oct 2020 15:20:15 -0300 Subject: [PATCH 7/7] Changes --- components/cart/CartSidebarView/CartSidebarView.tsx | 4 ++-- pages/cart.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index fc9b212fa..7440a8d81 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -33,7 +33,7 @@ const CartSidebarView: FC = () => { return (
    { {isEmpty ? (
    - +

    diff --git a/pages/cart.tsx b/pages/cart.tsx index 7fee8176d..62fd618b4 100644 --- a/pages/cart.tsx +++ b/pages/cart.tsx @@ -41,14 +41,14 @@ export default function Cart({}: InferGetStaticPropsType<
    {isEmpty ? ( -
    - +
    +

    Your cart is empty

    -

    +

    Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.