Merge branch 'master' of https://github.com/okbel/e-comm-example

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -33,7 +33,7 @@ const CartSidebarView: FC = () => {
   return (
     <div
       className={cn('h-full flex flex-col', {
-        'bg-white text-black': isEmpty,
+        'bg-secondary text-secondary': isEmpty,
         'bg-red text-white': error,
         'bg-green text-white': success,
       })}
@@ -57,7 +57,7 @@ const CartSidebarView: FC = () => {
 
       {isEmpty ? (
         <div className="flex-1 px-4 flex flex-col justify-center items-center ">
-          <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
+          <span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
             <Bag className="absolute" />
           </span>
           <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
@@ -116,7 +116,7 @@ const CartSidebarView: FC = () => {
                 </li>
                 <li className="flex justify-between py-1">
                   <span>Estimated Shipping</span>
-                  <span>FREE</span>
+                  <span className="font-bold tracking-wide">FREE</span>
                 </li>
               </ul>
               <div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-10">

components/core/Avatar/Avatar.tsx

@@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
 
   return (
     <div
-      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-150"
+      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
       style={{
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}

components/core/Navbar/Navbar.module.css

@@ -1,11 +1,20 @@
 .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 {
   @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);
+  }
+}

components/core/Navbar/Navbar.tsx

@@ -15,7 +15,7 @@ const Navbar: FC<Props> = ({ className }) => {
       <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
         <div className="flex flex-1 items-center">
           <Link href="/">
-            <a className="cursor-pointer" aria-label="Logo">
+            <a className={s.logo} aria-label="Logo">
               <Logo />
             </a>
           </Link>

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;
 }

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<DropdownMenuProps> = ({ open = false }) => {
   const { theme, setTheme } = useTheme()
   const logout = useLogout()
+  const { pathname } = useRouter()
+
   return (
     <Transition
       show={open}
@@ -41,11 +45,17 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
       <Menu.Items className={s.dropdownMenu}>
         {LINKS.map(({ name, href }) => (
           <Menu.Item key={href}>
-            {({ active }) => (
+            <div>
               <Link href={href}>
-                <a className={cn(s.link, { [s.active]: active })}>{name}</a>
+                <a
+                  className={cn(s.link, {
+                    [s.active]: pathname === href,
+                  })}
+                >
+                  {name}
+                </a>
               </Link>
-            )}
+            </div>
           </Menu.Item>
         ))}
         <Menu.Item>

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;
+  @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-8 transition scale-110 duration-100;
+    @apply text-accents-6 transition scale-110 duration-100;
   }
 
   &:last-child {

pages/cart.tsx

@@ -41,14 +41,14 @@ export default function Cart({}: InferGetStaticPropsType<
     <div className="grid lg:grid-cols-12">
       <div className="lg:col-span-8">
         {isEmpty ? (
-          <div className="flex-1 px-4 flex flex-col justify-center items-center ">
-            <span className="border border-dashed border-white rounded-full flex items-center justify-center w-16 h-16 bg-black p-12 rounded-lg text-white">
+          <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
+            <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
               <Bag className="absolute" />
             </span>
             <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
               Your cart is empty
             </h2>
-            <p className="text-accents-2 px-10 text-center pt-2">
+            <p className="text-accents-6 px-10 text-center pt-2">
               Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
             </p>
           </div>

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 (
     <Container>
       <Text variant="pageHeading">My Orders</Text>
+      <div className="flex-1 p-24 flex flex-col justify-center items-center ">
+        <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-primary text-primary">
+          <Bag className="absolute" />
+        </span>
+        <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
+          No orders found
+        </h2>
+        <p className="text-accents-6 px-10 text-center pt-2">
+          Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
+        </p>
+      </div>
     </Container>
   )
 }