From 486d981fe075341d4a7bc54cf6a5197e1e5e8008 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 11:14:01 -0300
Subject: [PATCH 01/32] remove layout code

---
 components/core/Layout/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index e6e45fb26..883ddd45b 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -33,12 +33,12 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Featurebar
           title="This site uses cookies to improve your experience."
           description="By clicking, you agree to our Privacy Policy."
+          hide={acceptedCookies}
           action={
             <Button className="mx-5" onClick={() => setAcceptedCookies(true)}>
               Accept cookies
             </Button>
           }
-          className={cn({ ['translate-y-full']: acceptedCookies })}
         />
       </div>
     </CommerceProvider>

From cd3a80a3816815102422633bb2035fab8f0210f4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:13:41 -0300
Subject: [PATCH 02/32] fix cookie mobile

---
 components/core/Featurebar/Featurebar.module.css |  9 ---------
 components/core/Featurebar/Featurebar.tsx        | 10 +++++-----
 2 files changed, 5 insertions(+), 14 deletions(-)
 delete mode 100644 components/core/Featurebar/Featurebar.module.css

diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css
deleted file mode 100644
index f8aa6ba4d..000000000
--- a/components/core/Featurebar/Featurebar.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.separator {
-  @apply mx-3 bg-secondary;
-  width: 1px;
-  height: 20px;
-}
-
-.separator:before {
-  content: '';
-}
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index 0f77fece6..22d637113 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -1,6 +1,5 @@
 import cn from 'classnames'
 import { FC } from 'react'
-import s from './Featurebar.module.css'
 
 interface Props {
   className?: string
@@ -18,15 +17,16 @@ const Featurebar: FC<Props> = ({
   hide,
 }) => {
   const rootClassName = cn(
-    'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
+    'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
     { 'translate-y-full': hide },
     className
   )
   return (
     <div className={rootClassName}>
-      <span>{title}</span>
-      <span className={s.separator} />
-      <span>{description}</span>
+      <span className="block md:inline">{title}</span>
+      <span className="block mb-6 md:inline md:mb-0 md:ml-2">
+        {description}
+      </span>
       {action && action}
     </div>
   )

From c28b7589d3dfe1219fe3c50a5e6c360d7fdd802e Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:32:22 -0300
Subject: [PATCH 03/32] add scaling animation

---
 components/product/ProductCard/ProductCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index dc04715c2..e64f79468 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
-            className="w-full object-cover"
+            className="w-full object-cover transform scale-90 hover:scale-100 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From 8078c0b8326c401ef565a0de8049dc191c611ad4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:51:46 -0300
Subject: [PATCH 04/32] add different approach on hover animation

---
 .../ProductCard/ProductCard.module.css        | 22 ++++++++++++++++++-
 .../product/ProductCard/ProductCard.tsx       |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index d0ea6d80c..a2edab7d0 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -35,6 +35,26 @@
     &:nth-child(6n + 6) .wishlistButton {
       @apply bg-cyan text-white;
     }
+
+    & .squareBg {
+      @apply bg-white;
+    }
+
+    &:nth-child(6n + 1) .squareBg {
+      @apply bg-white;
+    }
+
+    &:nth-child(6n + 5) .squareBg {
+      @apply bg-white;
+    }
+
+    &:nth-child(6n + 3) .squareBg {
+      @apply bg-white;
+    }
+
+    &:nth-child(6n + 6) .squareBg {
+      @apply bg-white;
+    }
   }
 
   &:nth-child(6n + 1) .squareBg {
@@ -58,7 +78,7 @@
 .productTitle > span,
 .productPrice,
 .wishlistButton {
-  @apply transition ease-in-out duration-300;
+  @apply transition ease-in-out duration-500;
 }
 
 .squareBg {
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index e64f79468..7c0a15573 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
-            className="w-full object-cover transform scale-90 hover:scale-100 transition-transform duration-500"
+            className="w-full object-cover transform scale-75 hover:scale-90 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From cf3d5323c4a869765a4090f7fc0aa44231bc05b3 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 19:58:36 -0300
Subject: [PATCH 05/32] replace colors

---
 assets/global.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/global.css b/assets/global.css
index 4d3d23402..e147ef27a 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -14,12 +14,12 @@
 
   --hover: rgba(0, 0, 0, 0.075);
 
-  --cyan: #50e3c2;
+  --cyan: #22b8cf;
   --green: #37b679;
   --red: #da3c3c;
-  --pink: #ff0080;
+  --pink: #e64980;
   --purple: #f81ce5;
-  --violet: #7928ca;
+  --violet: #5f3dc4;
   --blue: #0070f3;
 
   --accents-0: #f8f9fa;

From 1eb8c48f2e41163f54ad09149ebce5d8174a208d Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Wed, 21 Oct 2020 20:14:44 -0300
Subject: [PATCH 06/32] move theme switcher

---
 components/core/Navbar/Navbar.tsx          | 12 +++---------
 components/core/UserNav/UserNav.module.css |  2 +-
 components/core/UserNav/UserNav.tsx        | 15 ++++++++++++++-
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index 39e22eb17..db3e8f1ae 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -1,16 +1,16 @@
 import s from './Navbar.module.css'
 import { FC } from 'react'
 import Link from 'next/link'
-import { useTheme } from 'next-themes'
 import { Logo } from '@components/ui'
-import { Searchbar, Toggle, UserNav } from '@components/core'
+import { Searchbar, UserNav } from '@components/core'
+
 interface Props {
   className?: string
 }
 
 const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = className
-  const { theme, setTheme } = useTheme()
+
   return (
     <div className={rootClassName}>
       <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
@@ -38,12 +38,6 @@ const Navbar: FC<Props> = ({ className }) => {
         </div>
 
         <div className="flex flex-1 justify-end space-x-8">
-          <Toggle
-            checked={theme === 'dark'}
-            onChange={() =>
-              theme === 'dark' ? setTheme('light') : setTheme('dark')
-            }
-          />
           <UserNav />
         </div>
       </div>
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 530cea1ae..c187c9001 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -26,6 +26,6 @@
   }
 
   & .link {
-    @apply px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+    @apply px-6 py-3 flex items-center space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
   }
 }
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index b25ffee6c..49a355c93 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -1,10 +1,11 @@
 import { FC, useState } from 'react'
 import cn from 'classnames'
 import useCart from '@lib/bigcommerce/cart/use-cart'
-import { Avatar } from '@components/core'
+import { Avatar, Toggle } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import s from './UserNav.module.css'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 interface Props {
   className?: string
@@ -17,6 +18,7 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
+  const { theme, setTheme } = useTheme()
   const [displayDropdown, setDisplayDropdown] = useState(false)
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
@@ -59,6 +61,17 @@ const UserNav: FC<Props> = ({ className }) => {
             <Link href="#">
               <a className={s.link}>My Account</a>
             </Link>
+            <span className="inline-flex items-start px-6 py-2">
+              <span className="capitalize inline-block mr-2 text-base leading-6 font-medium text-gray-900">
+                Theme
+              </span>
+              <Toggle
+                checked={theme === 'dark'}
+                onChange={() =>
+                  theme === 'dark' ? setTheme('light') : setTheme('dark')
+                }
+              />
+            </span>
             <Link href="#">
               <a className={cn(s.link, 'mt-4')}>Logout</a>
             </Link>

From 8d1901241ee3e06493599cfd12aa40f64ea184b4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 11:20:29 -0300
Subject: [PATCH 07/32] add textured bg

---
 .../ProductCard/ProductCard.module.css        | 28 ++++++++++++++++---
 .../product/ProductCard/ProductCard.tsx       |  2 +-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index a2edab7d0..442422eee 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -3,7 +3,27 @@
 
   &:hover {
     & .squareBg {
-      @apply scale-75;
+      background-color: var(--violet);
+      background: radial-gradient(
+          circle,
+          transparent 20%,
+          var(--violet) 20%,
+          var(--violet) 80%,
+          transparent 80%,
+          transparent
+        ),
+        radial-gradient(
+            circle,
+            transparent 20%,
+            var(--violet) 20%,
+            var(--violet) 80%,
+            transparent 80%,
+            transparent
+          )
+          50px 50px,
+        linear-gradient(red 4px, transparent 4px) 0 -2px,
+        linear-gradient(90deg, red 4px, var(--violet) 4px) -2px 0;
+      background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
     }
 
     & .productTitle > span,
@@ -36,7 +56,7 @@
       @apply bg-cyan text-white;
     }
 
-    & .squareBg {
+    /* & .squareBg {
       @apply bg-white;
     }
 
@@ -54,7 +74,7 @@
 
     &:nth-child(6n + 6) .squareBg {
       @apply bg-white;
-    }
+    } */
   }
 
   &:nth-child(6n + 1) .squareBg {
@@ -122,5 +142,5 @@
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
+  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
 }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 7c0a15573..90ba7b79a 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
-            className="w-full object-cover transform scale-75 hover:scale-90 transition-transform duration-500"
+            className="w-full object-cover transform hover:scale-95 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From ef406cfaf6f4bec300bb5d976d4cd9bb409d74d8 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 11:53:35 -0300
Subject: [PATCH 08/32] add bg pattern

---
 .../ProductCard/ProductCard.module.css        | 43 +------------------
 .../product/ProductCard/ProductCard.tsx       |  2 +-
 2 files changed, 3 insertions(+), 42 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 442422eee..a531855fd 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -3,27 +3,7 @@
 
   &:hover {
     & .squareBg {
-      background-color: var(--violet);
-      background: radial-gradient(
-          circle,
-          transparent 20%,
-          var(--violet) 20%,
-          var(--violet) 80%,
-          transparent 80%,
-          transparent
-        ),
-        radial-gradient(
-            circle,
-            transparent 20%,
-            var(--violet) 20%,
-            var(--violet) 80%,
-            transparent 80%,
-            transparent
-          )
-          50px 50px,
-        linear-gradient(red 4px, transparent 4px) 0 -2px,
-        linear-gradient(90deg, red 4px, var(--violet) 4px) -2px 0;
-      background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
+      transform: scale(1.05);
     }
 
     & .productTitle > span,
@@ -55,26 +35,6 @@
     &:nth-child(6n + 6) .wishlistButton {
       @apply bg-cyan text-white;
     }
-
-    /* & .squareBg {
-      @apply bg-white;
-    }
-
-    &:nth-child(6n + 1) .squareBg {
-      @apply bg-white;
-    }
-
-    &:nth-child(6n + 5) .squareBg {
-      @apply bg-white;
-    }
-
-    &:nth-child(6n + 3) .squareBg {
-      @apply bg-white;
-    }
-
-    &:nth-child(6n + 6) .squareBg {
-      @apply bg-white;
-    } */
   }
 
   &:nth-child(6n + 1) .squareBg {
@@ -103,6 +63,7 @@
 
 .squareBg {
   @apply transform absolute inset-0 z-0 bg-secondary;
+  background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.3' x1='9.41421' y1='7' x2='21' y2='18.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 7)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .simple {
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 90ba7b79a..39889130b 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
-            className="w-full object-cover transform hover:scale-95 transition-transform duration-500"
+            className="w-full object-cover transform hover:scale-90 transition-transform duration-500"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From a0720a2ee91b23866a377ff48f40eed63f830cd4 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 12:04:22 -0300
Subject: [PATCH 09/32] fix the scale

---
 components/product/ProductCard/ProductCard.module.css | 8 ++++++++
 components/product/ProductCard/ProductCard.tsx        | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index a531855fd..6606f748e 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -6,6 +6,10 @@
       transform: scale(1.05);
     }
 
+    & .product-image {
+      @apply scale-90;
+    }
+
     & .productTitle > span,
     & .productPrice,
     & .wishlistButton {
@@ -37,6 +41,10 @@
     }
   }
 
+  & .product-image {
+    @apply transform transition-transform duration-500;
+  }
+
   &:nth-child(6n + 1) .squareBg {
     @apply bg-violet;
   }
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 39889130b..b621ba5d2 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
       >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
-            className="w-full object-cover transform hover:scale-90 transition-transform duration-500"
+            className={cn('w-full object-cover', s['product-image'])}
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>

From dd08b0946be7e6c6855cc1903f3a958e2a71b78d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 12:08:50 -0300
Subject: [PATCH 10/32] Changes

---
 .../core/UserNav/DropdownMenu.module.css      | 10 +-
 components/core/UserNav/DropdownMenu.tsx      | 92 ++++++++-----------
 components/core/UserNav/UserNav.module.css    |  2 +-
 components/core/UserNav/UserNav.tsx           | 32 +++++--
 components/icon/Moon.tsx                      |  1 +
 components/icon/Sun.tsx                       |  1 +
 6 files changed, 67 insertions(+), 71 deletions(-)

diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css
index ee30070d2..884bab67b 100644
--- a/components/core/UserNav/DropdownMenu.module.css
+++ b/components/core/UserNav/DropdownMenu.module.css
@@ -1,9 +1,9 @@
 .dropdownMenu {
-  @apply fixed top-0 right-0 z-20 w-full h-full;
+  @apply fixed pt-6 right-0 z-20 w-full h-full;
 
   @screen lg {
     @apply absolute right-0 w-screen;
-    max-width: 200px;
+    max-width: 185px;
   }
 
   & .dropdownMenuContainer {
@@ -15,12 +15,8 @@
   }
 
   & .link {
-    @apply flex space-x-2 cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
+    @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
     text-transform: capitalize;
-
-    & .icons svg {
-      @apply w-6 h-6;
-    }
   }
 
   &.off {
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index e510bdd29..c7e247501 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -1,74 +1,60 @@
-import { useTheme } from 'next-themes'
-import s from './DropdownMenu.module.css'
 import { FC } from 'react'
-import { FocusScope } from '@react-aria/focus'
-import {
-  useOverlay,
-  DismissButton,
-  usePreventScroll,
-} from '@react-aria/overlays'
 import Link from 'next/link'
+import { useTheme } from 'next-themes'
 import cn from 'classnames'
+import s from './DropdownMenu.module.css'
 import { Moon, Sun } from '@components/icon'
+import { Menu } from '@headlessui/react'
 interface DropdownMenuProps {
   onClose: () => void
-  innerRef: React.MutableRefObject<HTMLInputElement>
 }
 
 const DropdownMenu: FC<DropdownMenuProps> = ({
   onClose,
   children,
-  innerRef,
+
   ...props
 }) => {
   const { theme, setTheme } = useTheme()
-
-  let { overlayProps } = useOverlay(
-    {
-      isDismissable: true,
-      onClose: onClose,
-      isOpen: true,
-    },
-    innerRef
-  )
-
-  usePreventScroll()
   return (
-    <FocusScope restoreFocus>
-      <div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
-        {/* Needed placeholder for User Interation*/}
-        <div className="flex justify-end">
-          <span onClick={onClose} className="bg-transparent h-12 w-12" />
-        </div>
-
-        <nav className={s.dropdownMenuContainer}>
-          <Link href="#">
-            <a className={s.link}>My Purchases</a>
-          </Link>
-          <Link href="#">
-            <a className={s.link}>My Account</a>
-          </Link>
-          <a
-            className={s.link}
-            onClick={() =>
-              theme === 'dark' ? setTheme('light') : setTheme('dark')
-            }
-          >
-            <span>
-              Theme: <strong>{theme}</strong>{' '}
-            </span>
-            <span className={s.icons}>
-              {theme === 'dark' ? <Moon /> : <Sun />}
-            </span>
-          </a>
-          <Link href="#">
+    <nav className={cn(s.dropdownMenu)}>
+      <Menu.Items className={s.dropdownMenuContainer}>
+        <Menu.Item>
+          {({ active }) => <a className={s.link}>My Purchases</a>}
+        </Menu.Item>
+        <Menu.Item>
+          {({ active }) => <a className={s.link}>My Account</a>}
+        </Menu.Item>
+        <Menu.Item>
+          {({ active }) => (
+            <a
+              className={cn(s.link, 'justify-between')}
+              onClick={() =>
+                theme === 'dark' ? setTheme('light') : setTheme('dark')
+              }
+            >
+              <div>
+                Theme: <strong>{theme}</strong>{' '}
+              </div>
+              <div className="ml-3">
+                {theme == 'dark' ? (
+                  <Moon width={20} height={20} />
+                ) : (
+                  <Sun width="20" height={20} />
+                )}
+              </div>
+            </a>
+          )}
+        </Menu.Item>
+        <Menu.Item>
+          {({ active }) => (
             <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
               Logout
             </a>
-          </Link>
-        </nav>
-      </div>
-    </FocusScope>
+          )}
+        </Menu.Item>
+      </Menu.Items>
+    </nav>
   )
 }
 
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 9753b23c3..96926796b 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -13,7 +13,7 @@
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
 
   &:hover {
-    @apply text-accents-8 transition ease-in-out duration-100 transform scale-110;
+    @apply text-accents-8;
   }
 
   &.heart:hover svg {
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 738793cf5..3d07f0b5a 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -7,7 +7,7 @@ import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
-
+import { Menu, Transition } from '@headlessui/react'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 
 interface Props {
@@ -52,18 +52,30 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
               <Heart />
             </li>
           </Link>
-          <li
-            className={s.item}
-            onClick={() => (displayDropdown ? closeDropdown() : openDropdown())}
-          >
-            <Avatar />
+          <li className={s.item}>
+            <Menu>
+              {({ open }) => (
+                <>
+                  <Menu.Button className="inline-flex justify-center">
+                    <Avatar />
+                  </Menu.Button>
+                  <Transition
+                    show={open}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <DropdownMenu onClose={closeDropdown} />
+                  </Transition>
+                </>
+              )}
+            </Menu>
           </li>
         </ul>
       </div>
-
-      {displayDropdown && (
-        <DropdownMenu onClose={closeDropdown} innerRef={ref} />
-      )}
     </nav>
   )
 }
diff --git a/components/icon/Moon.tsx b/components/icon/Moon.tsx
index db94ac7bd..bc848700f 100644
--- a/components/icon/Moon.tsx
+++ b/components/icon/Moon.tsx
@@ -10,6 +10,7 @@ const Moon = ({ ...props }) => {
       stroke-linejoin="round"
       fill="none"
       shape-rendering="geometricPrecision"
+      {...props}
     >
       <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
     </svg>
diff --git a/components/icon/Sun.tsx b/components/icon/Sun.tsx
index 7457650b0..949ac1cd1 100644
--- a/components/icon/Sun.tsx
+++ b/components/icon/Sun.tsx
@@ -10,6 +10,7 @@ const Sun = ({ ...props }) => {
       stroke-linejoin="round"
       fill="none"
       shape-rendering="geometricPrecision"
+      {...props}
     >
       <circle cx="12" cy="12" r="5" />
       <path d="M12 1v2" />

From b488afe519523ab039b01284567d140e9e9cb5d5 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 12:18:09 -0300
Subject: [PATCH 11/32] lower pattern opacity

---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 6606f748e..919dedbf0 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -71,7 +71,7 @@
 
 .squareBg {
   @apply transform absolute inset-0 z-0 bg-secondary;
-  background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.3' x1='9.41421' y1='7' x2='21' y2='18.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 7)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='7' x2='21' y2='18.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 7)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .simple {

From 9c28486170194ddf72c6bad35201537e0076257c Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 12:22:25 -0300
Subject: [PATCH 12/32] fix padding on y axis

---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 919dedbf0..0129abdf1 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -71,7 +71,7 @@
 
 .squareBg {
   @apply transform absolute inset-0 z-0 bg-secondary;
-  background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='7' x2='21' y2='18.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 7)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .simple {

From 7d4b11d2041aa09da2dbe73916ed8f385d8e5d68 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 12:53:49 -0300
Subject: [PATCH 13/32] Changes

---
 .../core/UserNav/DropdownMenu.module.css      | 13 ++----------
 components/core/UserNav/DropdownMenu.tsx      | 21 ++++++++++++++-----
 components/core/UserNav/UserNav.tsx           | 15 ++-----------
 components/ui/Modal/Modal.tsx                 |  8 +------
 4 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css
index 884bab67b..ad0903df5 100644
--- a/components/core/UserNav/DropdownMenu.module.css
+++ b/components/core/UserNav/DropdownMenu.module.css
@@ -1,17 +1,8 @@
 .dropdownMenu {
-  @apply fixed pt-6 right-0 z-20 w-full h-full;
+  @apply fixed right-0 mt-7 origin-top-right outline-none bg-primary z-40 w-full h-full;
 
   @screen lg {
-    @apply absolute right-0 w-screen;
-    max-width: 185px;
-  }
-
-  & .dropdownMenuContainer {
-    @apply flex-col py-6 bg-primary h-full justify-around;
-
-    @screen lg {
-      @apply border border-accents-1 shadow-lg py-2 h-auto;
-    }
+    @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
   }
 
   & .link {
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index c7e247501..e1cdac125 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -4,21 +4,32 @@ import { useTheme } from 'next-themes'
 import cn from 'classnames'
 import s from './DropdownMenu.module.css'
 import { Moon, Sun } from '@components/icon'
-import { Menu } from '@headlessui/react'
+import { Menu, Transition } from '@headlessui/react'
+import { usePreventScroll } from '@react-aria/overlays'
 interface DropdownMenuProps {
   onClose: () => void
+  open: boolean
 }
 
 const DropdownMenu: FC<DropdownMenuProps> = ({
   onClose,
   children,
-
+  open = false,
   ...props
 }) => {
   const { theme, setTheme } = useTheme()
+  usePreventScroll()
   return (
-    <nav className={cn(s.dropdownMenu)}>
-      <Menu.Items className={s.dropdownMenuContainer}>
+    <Transition
+      show={open}
+      enter="transition ease-out duration-100"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+    >
+      <Menu.Items className={s.dropdownMenu}>
         <Menu.Item>
           {({ active }) => <a className={s.link}>My Purchases</a>}
         </Menu.Item>
@@ -54,7 +65,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
           )}
         </Menu.Item>
       </Menu.Items>
-    </nav>
+    </Transition>
   )
 }
 
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 3d07f0b5a..2f0d4925d 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -2,12 +2,11 @@ import Link from 'next/link'
 import cn from 'classnames'
 import s from './UserNav.module.css'
 import { FC, useRef } from 'react'
-
 import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
-import { Menu, Transition } from '@headlessui/react'
+import { Menu } from '@headlessui/react'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 
 interface Props {
@@ -59,17 +58,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
                   <Menu.Button className="inline-flex justify-center">
                     <Avatar />
                   </Menu.Button>
-                  <Transition
-                    show={open}
-                    enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
-                    leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
-                  >
-                    <DropdownMenu onClose={closeDropdown} />
-                  </Transition>
+                  <DropdownMenu onClose={closeDropdown} open={open} />
                 </>
               )}
             </Menu>
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index c9a0bc0c3..97f750efd 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -2,13 +2,7 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import {
-  useOverlay,
-  usePreventScroll,
-  useModal,
-  OverlayProvider,
-  OverlayContainer,
-} from '@react-aria/overlays'
+import { useOverlay, usePreventScroll, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
 
 interface Props {

From 7e73f00860c20552985b25fcc09d21dee5d379e1 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 12:59:47 -0300
Subject: [PATCH 14/32] Changes Scroll

---
 components/core/Footer/Footer.tsx        |   2 +-
 components/core/UserNav/DropdownMenu.tsx |   6 +++++-
 public/us-flag.png                       | Bin 0 -> 762 bytes
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 public/us-flag.png

diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index 55f855429..26f1b010c 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -24,7 +24,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
     <div className="bg-black text-white">
       <footer className={rootClassName}>
         <Link href="/">
-          <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
+          <a className="flex flex-initial items-center  font-bold md:mr-24">
             <span className="rounded-full border border-gray-700 mr-2">
               <Logo />
             </span>
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index e1cdac125..13e2adfc4 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -18,7 +18,11 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
   ...props
 }) => {
   const { theme, setTheme } = useTheme()
-  usePreventScroll()
+
+  usePreventScroll({
+    isDisabled: !open,
+  })
+
   return (
     <Transition
       show={open}
diff --git a/public/us-flag.png b/public/us-flag.png
new file mode 100644
index 0000000000000000000000000000000000000000..763f34fbf6d24f03b0090f3645f8719a2bd76807
GIT binary patch
literal 762
zcmV<W0tNkvP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0*^^VK~#7FwUte1
z6G0Tm-)=W<qzP^a(JHiA5X4WK92Bh|Bo-7}C3-5fRSKS^35W+Tr5D9o$U?-EB7zZ7
zBt@HoMcI_9co0lMErKx-4~=PJ)_g!0my9#32}#;bS51G1-T%xm??3b2>?{R3aa|F4
zV1R!(a|=+ZByF6!7u7S5X&CgH=(4OgjvU%%b%f^@IMPR}4;nHj1|_T_G(r=WaPW>+
z3~I%|e$hcGv>y+;NV~J0gSoGgIySi_y*!B7lrWw==B6krv8qAfS!{UvLsBTp3T(Bt
zLNX^qwSIiQ3mV|VCPH;bO^Uk5XNNzh^FrGO7Gfy{OhyLU@Di$Z?$YH(2L4R%09eC8
zVc8CFT6lBIx;R-ap_OG|CH-hV1gl}#Zg-k4`l2-krvk6yg9keJ8)6JhIN;eXJJf5!
z^9x5n2N9eqcg5i7m^cI!eOu4WDJSUS=fZcl`ON8vT7$lQ9iBH|vN+d8IKF!md`cBG
zbx{y>8Q_(Vs5>DIPvB)1A>ax)&m<)TE&X7pqR)V3CHC-s3*#CS9r-1NBLT=NpT7GB
zTAILi>#6~PLkRH<-V0Y=W%7p%jWj_z=L6l?tUMD+zW`Xw{O*{q8r0H%f%5(%P-Gie
z$6;-7szsJ(UuTglbI?R8MJA2n)$398=VEIXI5RWktr{5mJfm#qE*CTrI+qVYI9TH-
zqUKSlY2`Lu>>cp6(DYkq0<@yI%ev-&fUjCFvuB4N{)19l@>y<<Yu_h$dtUVKc<bX)
z8YcYGlW7s<3q0t6vA0JI2ltY{SyY!nnRHM85VX)93aLl9{yUNI(I&@x)HZoHq7|c|
sK{ctKeg{R<s)@oViOm!D6ME+T0`BRUVWfOux&QzG07*qoM6N<$f_UXbivR!s

literal 0
HcmV?d00001


From 14630c89c87a6fe4725eb1e92512ffbb2a174854 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 13:42:49 -0300
Subject: [PATCH 15/32] Changes Scroll

---
 components/core/Footer/Footer.tsx        | 48 ++++++++++++++++++------
 components/core/UserNav/DropdownMenu.tsx |  2 +-
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index 26f1b010c..c205b98ba 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -23,16 +23,40 @@ const Footer: FC<Props> = ({ className, pages }) => {
   return (
     <div className="bg-black text-white">
       <footer className={rootClassName}>
-        <Link href="/">
-          <a className="flex flex-initial items-center  font-bold md:mr-24">
-            <span className="rounded-full border border-gray-700 mr-2">
-              <Logo />
-            </span>
-            <span>ACME</span>
-          </a>
-        </Link>
+        <div className="grid grid-col-12"></div>
+        <div>
+          <Link href="/">
+            <a className="flex flex-initial items-center  font-bold md:mr-24">
+              <span className="rounded-full border border-gray-700 mr-2">
+                <Logo />
+              </span>
+              <span>ACME</span>
+            </a>
+          </Link>
+        </div>
 
         <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+          <li className="py-3 md:py-0 md:pb-4">
+            <Link href="/">
+              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                Home
+              </a>
+            </Link>
+          </li>
+          <li className="py-3 md:py-0 md:pb-4">
+            <Link href="/">
+              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                Careers
+              </a>
+            </Link>
+          </li>
+          <li className="py-3 md:py-0 md:pb-4">
+            <Link href="/blog">
+              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                Blog
+              </a>
+            </Link>
+          </li>
           {sitePages.map((page) => (
             <li key={page.url} className="py-3 md:py-0 md:pb-4">
               <Link href={page.url!}>
@@ -56,9 +80,11 @@ const Footer: FC<Props> = ({ className, pages }) => {
           ))}
         </ul>
 
-        <small className="text-base">
-          &copy; 2020 ACME, Inc. All rights reserved.
-        </small>
+        <div>
+          <small className="text-white">
+            &copy; 2020 ACME, Inc. All rights reserved.
+          </small>
+        </div>
       </footer>
     </div>
   )
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index 13e2adfc4..61f8d4ca2 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -26,7 +26,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
   return (
     <Transition
       show={open}
-      enter="transition ease-out duration-100"
+      enter="transition ease-out duration-100 z-20"
       enterFrom="transform opacity-0 scale-95"
       enterTo="transform opacity-100 scale-100"
       leave="transition ease-in duration-75"

From b6acbc38b1e8f7e34bab9e96b9a4c4f07e4065a2 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 14:19:16 -0300
Subject: [PATCH 16/32] New Footer

---
 components/core/Footer/Footer.tsx | 151 +++++++++++++++++-------------
 components/icon/Github.tsx        |  20 ++++
 components/icon/index.ts          |   1 +
 public/vercel.png                 | Bin 0 -> 3258 bytes
 4 files changed, 106 insertions(+), 66 deletions(-)
 create mode 100644 components/icon/Github.tsx
 create mode 100644 public/vercel.png

diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index c205b98ba..7fefce4df 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -3,7 +3,8 @@ import cn from 'classnames'
 import Link from 'next/link'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
-import { Logo } from '@components/ui'
+import { Logo, Container } from '@components/ui'
+import { Github } from '@components/icon'
 
 interface Props {
   className?: string
@@ -14,79 +15,97 @@ interface Props {
 const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
 
 const Footer: FC<Props> = ({ className, pages }) => {
-  const rootClassName = cn(
-    'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto',
-    className
-  )
+  const rootClassName = cn(className)
   const { sitePages, legalPages } = getPages(pages)
 
   return (
-    <div className="bg-black text-white">
-      <footer className={rootClassName}>
-        <div className="grid grid-col-12"></div>
-        <div>
-          <Link href="/">
-            <a className="flex flex-initial items-center  font-bold md:mr-24">
-              <span className="rounded-full border border-gray-700 mr-2">
-                <Logo />
-              </span>
-              <span>ACME</span>
-            </a>
-          </Link>
+    <footer className={rootClassName}>
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-2 border-b border-accents-2 py-6">
+          <div className="col-span-1 lg:col-span-2">
+            <Link href="/">
+              <a className="flex flex-initial items-center  font-bold md:mr-24">
+                <span className="rounded-full border border-gray-700 mr-2">
+                  <Logo />
+                </span>
+                <span>ACME</span>
+              </a>
+            </Link>
+          </div>
+          <div className="col-span-1 lg:col-span-2">
+            {' '}
+            <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+              <li className="py-3 md:py-0 md:pb-4">
+                <Link href="/">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    Home
+                  </a>
+                </Link>
+              </li>
+              <li className="py-3 md:py-0 md:pb-4">
+                <Link href="/">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    Careers
+                  </a>
+                </Link>
+              </li>
+              <li className="py-3 md:py-0 md:pb-4">
+                <Link href="/blog">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    Blog
+                  </a>
+                </Link>
+              </li>
+              {sitePages.map((page) => (
+                <li key={page.url} className="py-3 md:py-0 md:pb-4">
+                  <Link href={page.url!}>
+                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                      {page.name}
+                    </a>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="col-span-1 lg:col-span-2">
+            <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+              {legalPages.map((page) => (
+                <li key={page.url} className="py-3 md:py-0 md:pb-4">
+                  <Link href={page.url!}>
+                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                      {page.name}
+                    </a>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="col-span-1 lg:col-span-6 flex justify-end">
+            {' '}
+            <div>
+              <small className="text-white">
+                <Github />
+              </small>
+            </div>
+          </div>
         </div>
-
-        <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                Home
-              </a>
-            </Link>
-          </li>
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                Careers
-              </a>
-            </Link>
-          </li>
-          <li className="py-3 md:py-0 md:pb-4">
-            <Link href="/blog">
-              <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                Blog
-              </a>
-            </Link>
-          </li>
-          {sitePages.map((page) => (
-            <li key={page.url} className="py-3 md:py-0 md:pb-4">
-              <Link href={page.url!}>
-                <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                  {page.name}
-                </a>
-              </Link>
-            </li>
-          ))}
-        </ul>
-
-        <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
-          {legalPages.map((page) => (
-            <li key={page.url} className="py-3 md:py-0 md:pb-4">
-              <Link href={page.url!}>
-                <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
-                  {page.name}
-                </a>
-              </Link>
-            </li>
-          ))}
-        </ul>
-
-        <div>
+        <div className="py-12 flex flex-row justify-between">
           <small className="text-white">
             &copy; 2020 ACME, Inc. All rights reserved.
           </small>
+          <div className="flex items-center text-accents-4">
+            Crafted by
+            <a href="https://vercel.com">
+              <img
+                src="/vercel.png"
+                alt="Vercel.com Logo"
+                className="inline-block h-6 ml-4"
+              />
+            </a>
+          </div>
         </div>
-      </footer>
-    </div>
+      </Container>
+    </footer>
   )
 }
 
diff --git a/components/icon/Github.tsx b/components/icon/Github.tsx
new file mode 100644
index 000000000..b8cc0c558
--- /dev/null
+++ b/components/icon/Github.tsx
@@ -0,0 +1,20 @@
+const Sun = ({ ...props }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 0C5.37 0 0 5.50583 0 12.3035C0 17.7478 3.435 22.3463 8.205 23.9765C8.805 24.0842 9.03 23.715 9.03 23.3921C9.03 23.0999 9.015 22.131 9.015 21.1005C6 21.6696 5.22 20.347 4.98 19.6549C4.845 19.3012 4.26 18.2092 3.75 17.917C3.33 17.6863 2.73 17.1173 3.735 17.1019C4.68 17.0865 5.355 17.9939 5.58 18.363C6.66 20.2239 8.385 19.701 9.075 19.3781C9.18 18.5783 9.495 18.04 9.84 17.7325C7.17 17.4249 4.38 16.3637 4.38 11.6576C4.38 10.3196 4.845 9.21227 5.61 8.35102C5.49 8.04343 5.07 6.78232 5.73 5.09058C5.73 5.09058 6.735 4.76762 9.03 6.3517C9.99 6.07487 11.01 5.93645 12.03 5.93645C13.05 5.93645 14.07 6.07487 15.03 6.3517C17.325 4.75224 18.33 5.09058 18.33 5.09058C18.99 6.78232 18.57 8.04343 18.45 8.35102C19.215 9.21227 19.68 10.3042 19.68 11.6576C19.68 16.3791 16.875 17.4249 14.205 17.7325C14.64 18.1169 15.015 18.8552 15.015 20.0086C15.015 21.6542 15 22.9768 15 23.3921C15 23.715 15.225 24.0995 15.825 23.9765C18.2072 23.1519 20.2773 21.5822 21.7438 19.4882C23.2103 17.3942 23.9994 14.8814 24 12.3035C24 5.50583 18.63 0 12 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export default Sun
diff --git a/components/icon/index.ts b/components/icon/index.ts
index 929003d6f..399ae4f5b 100644
--- a/components/icon/index.ts
+++ b/components/icon/index.ts
@@ -8,3 +8,4 @@ export { default as Minus } from './Minus'
 export { default as Check } from './Check'
 export { default as Sun } from './Sun'
 export { default as Moon } from './Moon'
+export { default as Github } from './Github'
diff --git a/public/vercel.png b/public/vercel.png
new file mode 100644
index 0000000000000000000000000000000000000000..659ca11d04cfe2b1b0ee8e66fa70fdfec6abd831
GIT binary patch
literal 3258
zcmV;r3`O&aP)<h;3K|Lk000e1NJLTq007hg001xu1^@s6X$w@000009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH3{Oc!K~#7F?On}o
z)JhgU9S8v-m;n31VFSAxc!B9K`<ZYTtk96$MF6o#=RUw-cz_#nB}DkUNdzkv{LBN8
zX7)pJcSK0U%oas7ivS{lzTX$h+>TRKcDZeL(()&@y5q84RrWb`PJMMwMWjI7zI}Uq
zW@e^eN|fkQ^hiOtdGn^%Y&Nfd{`~ohlqk`qC`_RMUwzl0TvaJiq6<-oLfyJ`Yq+PU
z=Y070u3fuID^;Q^QIP@wg<8g!7dbp~;lhPE$r*R<+_?f*v#Klm^5x6bOP4OyrGstg
z?d?4?Iy%~r5<3D9A3l_~Z{ME8d;29?hIhQMTXF{6yAj!{OoR`D;%VN(w7$MR2kYqT
z%3vw^RhJyW{(t@Y)z_6(DwWw%nRXUdS62n{)UO*LajcoE%SR#tm7Cl<@6)GGHOU#U
zKmqzWr7Pn@f%VL_4VL~lXd$IUS0V2?lrMVg^sVxqo^dLj<cz+)J|ABuOK>GGDxb>)
zV(34t))bXpN^})+Qz&Jf&c~eAk8>s^XDGMIWDWZBpz_r+fyw#>P$pkWbRBY2C<jFu
zE`mk}0dgI4mb#(1mV>4A#cZ8@Dbbb4MWGZCF`V@LqG)v6oCR%|k&F;you3rJZkFf_
za#1MDL|ls^$N@r8<WI!VhO8{5O*t`lnvfD*i_B?ruDL*HJaGrff!t|i3N#eHil1AE
z2pp#(3`iTGbvCUzktR<<M35xGysnD-97UT3!{ccCdweb9`0qumpJf5GRc2>r`@!h4
zAD%?qVDxVh&m|Ze8(Wl&Fh4&pFJHd&@UzPLFu)xR%iyKF$)nB?nJ(-qS7$*q!kPpS
zn5#uh*3nMiWJTL;gJBVy2ypKqn?g|;@$%1`6f%MagyIPVWX?sopsba(wY6uOq9z3F
z^rizX%7D6t@i~eQ&-+ngfakz3UNfGsKLO{sYOy^KM}%#~y5l&W^N3j3<#y`C^AkLe
zA;`}&O&jL3R;bwo%$^l^7z26J$;tvy@jXp(W6z#F18FR!vd+Gt*ccf?S5sL>Pf~!E
zFR4&aq0slQnxZD!w=o6a2*0$n<l$!x_vZU-9Uzx+-Z9JlLxKBE3g{2<;K2j=@Zkd$
z*O!!oIWUR$el703$0<~1bEt$gc`ULd2Tb5Yqa`vFr=ro>e~U5&CS{@$;<?RBO5r2$
zB1iaw88azug2MUg)vIv`^#ZMnI0)$7yLYLqlS<e;Nr|vOam*{N5(NAZlxd!s43b`%
zhzYd)MZ0WoW(uW*qHSbJ4%mRvZ#ITTuZkOdOPQ94fC5Zfl+YEN`#pkCrykTe`hNWQ
z(N80s=t~8Cp;gL?TpEB(y};u5psrB4c!%h|CUhy2*7>X*rOHI1Eb)4&pxmF_5ksRV
zwo*54+!!=jXSy%2PFt8oS|*7Xz6ONl2|lyxyB>3X1$~-KD-dvHMxhkW)|raPIVmkm
z%&Byz7TFKgmpD@35YBs~>(BlB_h}7(L;0ZX1}G2I^V@ia3F_QXs<hEFZL@r8K9co1
zl1JhoZ-Ro8`RVEDDdpO1f}--zCs{Mvy?gg#Q<+X_W86bg0;i3H=ktc(4=Yl|(_DTC
zg8?nYX>mgZ_x!gwLNRIswxtqNe<E|WaZ5EkCkX#w#P`a|3f;nCOPy0F=U}#|X)o{R
zTc#)jkZC@PpT!YvTPU(BlA(19!8pGn(&b~~{QS5!*sQZ+41?(Ln02bF7cX8MGBJ0Y
z|IuBAz))cV-8tc4Anx!Ye>c>~UPHTRy+(2D*VYqWzkW?cd}O+ztv^FULxQs4`0?X4
z)Ip*nXsw&qf+#o@z4rb4_crB!M>ZArt?6iS*2#Br<j9c`$nGgIJVQwtJ=2zjiW_O$
zL}>YPT?nOsq90R+5jKp7_jT9CMAHZO%<8T&`TQ=FJ%n%>qx)%$>^cIVqS(3A5gBaD
z-o1OT+gLBfcvV~1%A)s3(jN*rEJxU%7iu{`I~cWCCr@*$ChGh#$uh#(vuD}<1+@Ps
z9b+foo*|8ell--7p?t{~wSou=UkoFaEg~MS9)(t02KWZrcf@eMQ@|{R@bKZo%MhSz
zx^hMCc;b$C7`acfEpZew20Sjim@MJ4Yk%OLEpy2NmSxmLnXj&{R$$@(r7Kel=XFU4
z^p6RibyIqe8kC%nTA`w8?RlZ7I6vji=%9^=PfL@dKYue^<BKCW%5t6{W|y@pZfN2&
zaryG)L=glSP+0#DhWj|@dO?6Cff9>>h+v(+iX#plJlI4ZOqRUgbx>-@<;y+of>85;
zVI5PJB{;HyqOBX;v5koM$mr*r?gha(V=A+-QZ>{+A}K%$S>KGx58?ol2bg;#b`v3p
z{L=OZmgcEs47z)bMq?1|)Xi&YEhq5|#Ra%u+$mMjxb7yTQmCwH@&uTKzgy2c&JTY3
zD1>BLSEejwoxj<C8%-V)BW5Bw1`Udl8ffER98Pbd?TM8sWXqINMbXIPT`~O}@2KBU
zr)0Pu^&L!icRF7j5i=3b3x%c2n<6M$BjRoS-%e@mu0hH;|G8v?TnD}a!Nux)6-r{#
z+VetD>GEW@#F8$r7GynLp@}B%6!6Rfm-EY%{4L=8%4u+La{01~*Gq|h<#vrqj-aao
zOGGQ9n<Mtyh=_!&Rv?CGbgt@4hCo~YD><QBtx6CC4Uz;JcwE2B+U@f^k8WmQDo+qe
z;tDEM-Q@x&h3Y9_{|6fw+5)9^N>@k&rpse;`%g!o+)sEO=T~0zAnJO`#Yov9AR`BB
zO@#?W(;t=pRF@1vY8``JAm2QQs4LbqMVAzb#4ev}T6<pD4(ak5EGA8B$9=W)6s~y`
z;nHRaDisF;T@l`sa~M-n!19{v{6$hAOEM_2LUn+M(4x5w(&eMT3qB(Wv2WkLS<%nY
z=+ZvkN&lS$?QI$qYU4e*M81cq81M`h)I3!S(D9W1Im10pLN=U~ic~zK*6-cBS0QuR
zE)pq}Z6e+wTq#2E)cz0Fc|g*%_7Ex;%e3+4;M&^Sd=g6)3LpgNF+Q(T#_qKRMjBvo
zw=Vi9la0vtBsp4<RE$B+Q%!whogj|tmeiXGDpe>SChJ4xVamzM%E~e3L9MT^|8Hq&
zX@JMtQLNaET}4E+l>nCqwnMtSBuH!5K}G0uy~{Kx1gP@~Ub1#GOkS^2y=#$s%;VTk
zw)P~+*mZ#|gEfRH1Ggo`-WEN-pyKlampbK}lKZe||G{?y=Wi@T!$Y9k&Fejej^W;$
zk|<SMuN^pWVENp+bK=t9L@DrDq_yV+j`SxxoGw2>0z*<jrM<@vg?PctAL8Bzp`{#*
z%K^f<GrhgNKkHbwtQCq-$%Qj<auW6h=l;%(Q&hx5RqV-(j2=G~ea}j;{UlQnS~Jwe
zJvbVw&TzvRW1aY1#q-$WNwk#$-(i|O4*f-?%ZonZI7q8Z1m|d$_`&Z`$}>!cQ+)>G
zuE7ZV|04eh!PwYX6K)uvku5^xdtX|T5$O)vl!^YD*5WGH&$n!4&{}U*)H76ddU2P)
z14y;VZB;0A{IP6f6qPQ|I6{rj?n|3sUK3qLG3VsCf}{Cp(c3(e?Hd^xc?b83Ia-N`
zoCKhiIAe?9j3`wWR2}cJ3}yOz(g5Koj0&Y_^4QU^)96IHyh>|NoomzzWvPbnY3qJ;
zH<W8MD;<D}6o0pW|9&!_v{r$n1DV5ld`{sR#|GF^sZN|YL8UsT7IxDp7O&x8bhWRq
z?^If4B8+n=%l>lP5fkmWUr8}NJ<a{m$Mf3iOtE{M7cj-cOK=J21asUgA?bo<9&@ND
z!oXRyYZz{MTt@eI1!zf?Pvvff36J>6;N^eFpYCMEQYRx+=0H|V!OF(E$t_8h(K%Gb
zNJ_-)FSi|$dM`Z}sQnyjMYvSl_ysH!bFR3_<k9drUfLV^#x5?lGm;hs^&kJZiOrx&
zCt(D<Cx2Qn?&A6emf?94fli80@L4CG*&%%YH7pCCA&xy~3ch5BEefTGh-KM%xQ-FF
z+&8>LN1-$EzU)lYOnbPMC{YwPDU@x0xgCOz2Je<Au}Pt9`^)VF6h)(#C}F~Ph3Y_B
zdoCc2zLNq>OLP}D6skjM?RlY)bomk`bl6ZRrk6_>Sf>z0?K)ecL=-)0F|pf5^!~NA
swUVGHQ8;L!eCa}{bor{3C{ZB(0B(k@O1$VP_W%F@07*qoM6N<$f;HDEb^rhX

literal 0
HcmV?d00001


From 5b385d8870fe4f9714756890ee86def3eb484a70 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 14:19:50 -0300
Subject: [PATCH 17/32] fix gray color on product bg

---
 components/product/ProductCard/ProductCard.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 0129abdf1..e77328676 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -70,7 +70,8 @@
 }
 
 .squareBg {
-  @apply transform absolute inset-0 z-0 bg-secondary;
+  @apply transform absolute inset-0 z-0;
+  background-color: #212529;
   background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 

From 5f68e9ca5a8480875c19ffe14e7a7bdb6bde563d Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 14:21:08 -0300
Subject: [PATCH 18/32] shorter transition

---
 components/product/ProductCard/ProductCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index e77328676..2cd18cc8c 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -7,7 +7,7 @@
     }
 
     & .product-image {
-      @apply scale-90;
+      transform: scale(0.98);
     }
 
     & .productTitle > span,

From 4a328a8ae742ea7edf3f359acc1c5d0b9682dfae Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 14:44:09 -0300
Subject: [PATCH 19/32] New Footer

---
 components/core/Footer/Footer.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index 7fefce4df..ebe137856 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -24,7 +24,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-2 border-b border-accents-2 py-6">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
-              <a className="flex flex-initial items-center  font-bold md:mr-24">
+              <a className="flex flex-initial items-center font-bold md:mr-24">
                 <span className="rounded-full border border-gray-700 mr-2">
                   <Logo />
                 </span>
@@ -81,11 +81,8 @@ const Footer: FC<Props> = ({ className, pages }) => {
             </ul>
           </div>
           <div className="col-span-1 lg:col-span-6 flex justify-end">
-            {' '}
-            <div>
-              <small className="text-white">
-                <Github />
-              </small>
+            <div className="text-white">
+              <Github />
             </div>
           </div>
         </div>

From e4a99601f52492260ea3d8c2df2109daa4011d89 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 22 Oct 2020 13:25:44 -0500
Subject: [PATCH 20/32] Updated types, API, and make the signup work

---
 .../handlers/get-logged-in-customer.ts        |  2 +-
 .../api/customers/handlers/signup.ts          | 76 +++++++++----------
 .../api/operations/get-all-product-paths.ts   |  6 +-
 .../api/operations/get-all-products.ts        |  2 +-
 lib/bigcommerce/api/operations/get-product.ts |  7 +-
 .../api/operations/get-site-info.ts           |  7 +-
 lib/bigcommerce/api/operations/login.ts       | 21 ++++-
 lib/bigcommerce/api/utils/concat-cookie.ts    | 14 ++++
 .../api/utils/fetch-graphql-api.ts            | 28 +++----
 lib/commerce/api/index.ts                     | 25 ++++--
 10 files changed, 111 insertions(+), 77 deletions(-)
 create mode 100644 lib/bigcommerce/api/utils/concat-cookie.ts

diff --git a/lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts b/lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts
index 99e9191f5..6ed97bec3 100644
--- a/lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts
+++ b/lib/bigcommerce/api/customers/handlers/get-logged-in-customer.ts
@@ -26,7 +26,7 @@ const getLoggedInCustomer: CustomersHandlers['getLoggedInCustomer'] = async ({
   res,
   config,
 }) => {
-  const data = await config.fetch<GetLoggedInCustomerQuery>(
+  const { data } = await config.fetch<GetLoggedInCustomerQuery>(
     getLoggedInCustomerQuery
   )
   const { customer } = data
diff --git a/lib/bigcommerce/api/customers/handlers/signup.ts b/lib/bigcommerce/api/customers/handlers/signup.ts
index 911919088..ff45adadb 100644
--- a/lib/bigcommerce/api/customers/handlers/signup.ts
+++ b/lib/bigcommerce/api/customers/handlers/signup.ts
@@ -18,51 +18,45 @@ const signup: SignupHandlers['signup'] = async ({
   // Passwords must be at least 7 characters and contain both alphabetic
   // and numeric characters.
 
-  let result: { data?: any } = {}
+  try {
+    await config.storeApiFetch('/v3/customers', {
+      method: 'POST',
+      body: JSON.stringify([
+        {
+          first_name: firstName,
+          last_name: lastName,
+          email,
+          authentication: {
+            new_password: password,
+          },
+        },
+      ]),
+    })
+  } catch (error) {
+    if (error instanceof BigcommerceApiError && error.status === 422) {
+      const hasEmailError = '0.email' in error.data?.errors
 
-  // try {
-  //   result = await config.storeApiFetch('/v3/customers', {
-  //     method: 'POST',
-  //     body: JSON.stringify([
-  //       {
-  //         first_name: firstName,
-  //         last_name: lastName,
-  //         email,
-  //         authentication: {
-  //           new_password: password,
-  //         },
-  //       },
-  //     ]),
-  //   })
-  // } catch (error) {
-  //   if (error instanceof BigcommerceApiError && error.status === 422) {
-  //     const hasEmailError = '0.email' in error.data?.errors
+      // If there's an error with the email, it most likely means it's duplicated
+      if (hasEmailError) {
+        return res.status(400).json({
+          data: null,
+          errors: [
+            {
+              message: 'The email is already in use',
+              code: 'duplicated_email',
+            },
+          ],
+        })
+      }
+    }
 
-  //     // If there's an error with the email, it most likely means it's duplicated
-  //     if (hasEmailError) {
-  //       return res.status(400).json({
-  //         data: null,
-  //         errors: [
-  //           {
-  //             message: 'The email is already in use',
-  //             code: 'duplicated_email',
-  //           },
-  //         ],
-  //       })
-  //     }
-  //   }
+    throw error
+  }
 
-  //   throw error
-  // }
+  // Login the customer right after creating it
+  await login({ variables: { email, password }, res, config })
 
-  console.log('DATA', result.data)
-
-  // TODO: Currently not working, fix this asap.
-  const loginData = await login({ variables: { email, password }, config })
-
-  console.log('LOGIN DATA', loginData)
-
-  res.status(200).json({ data: result.data ?? null })
+  res.status(200).json({ data: null })
 }
 
 export default signup
diff --git a/lib/bigcommerce/api/operations/get-all-product-paths.ts b/lib/bigcommerce/api/operations/get-all-product-paths.ts
index 278fb78fe..483160f6b 100644
--- a/lib/bigcommerce/api/operations/get-all-product-paths.ts
+++ b/lib/bigcommerce/api/operations/get-all-product-paths.ts
@@ -49,9 +49,9 @@ async function getAllProductPaths({
   config = getConfig(config)
   // RecursivePartial forces the method to check for every prop in the data, which is
   // required in case there's a custom `query`
-  const data = await config.fetch<RecursivePartial<GetAllProductPathsQuery>>(
-    query
-  )
+  const { data } = await config.fetch<
+    RecursivePartial<GetAllProductPathsQuery>
+  >(query)
   const products = data.site?.products?.edges
 
   return {
diff --git a/lib/bigcommerce/api/operations/get-all-products.ts b/lib/bigcommerce/api/operations/get-all-products.ts
index c4408a4b6..699fa8310 100644
--- a/lib/bigcommerce/api/operations/get-all-products.ts
+++ b/lib/bigcommerce/api/operations/get-all-products.ts
@@ -111,7 +111,7 @@ async function getAllProducts({
 
   // RecursivePartial forces the method to check for every prop in the data, which is
   // required in case there's a custom `query`
-  const data = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
+  const { data } = await config.fetch<RecursivePartial<GetAllProductsQuery>>(
     query,
     { variables }
   )
diff --git a/lib/bigcommerce/api/operations/get-product.ts b/lib/bigcommerce/api/operations/get-product.ts
index a4f91afdb..95b3bdc31 100644
--- a/lib/bigcommerce/api/operations/get-product.ts
+++ b/lib/bigcommerce/api/operations/get-product.ts
@@ -71,9 +71,10 @@ async function getProduct({
     ...vars,
     path: slug ? `/${slug}/` : vars.path!,
   }
-  const data = await config.fetch<RecursivePartial<GetProductQuery>>(query, {
-    variables,
-  })
+  const { data } = await config.fetch<RecursivePartial<GetProductQuery>>(
+    query,
+    { variables }
+  )
   const product = data.site?.route?.node
 
   if (product?.__typename === 'Product') {
diff --git a/lib/bigcommerce/api/operations/get-site-info.ts b/lib/bigcommerce/api/operations/get-site-info.ts
index a992ba980..cc9063b07 100644
--- a/lib/bigcommerce/api/operations/get-site-info.ts
+++ b/lib/bigcommerce/api/operations/get-site-info.ts
@@ -90,9 +90,10 @@ async function getSiteInfo({
   config = getConfig(config)
   // RecursivePartial forces the method to check for every prop in the data, which is
   // required in case there's a custom `query`
-  const data = await config.fetch<RecursivePartial<GetSiteInfoQuery>>(query, {
-    variables,
-  })
+  const { data } = await config.fetch<RecursivePartial<GetSiteInfoQuery>>(
+    query,
+    { variables }
+  )
   const categories = data.site?.categoryTree
   const brands = data.site?.brands?.edges
 
diff --git a/lib/bigcommerce/api/operations/login.ts b/lib/bigcommerce/api/operations/login.ts
index a73e6beb4..c371e71d5 100644
--- a/lib/bigcommerce/api/operations/login.ts
+++ b/lib/bigcommerce/api/operations/login.ts
@@ -1,8 +1,10 @@
+import type { ServerResponse } from 'http'
 import type {
   LoginMutation,
   LoginMutationVariables,
 } from 'lib/bigcommerce/schema'
 import type { RecursivePartial } from '../utils/types'
+import concatHeader from '../utils/concat-cookie'
 import { BigcommerceConfig, getConfig } from '..'
 
 export const loginMutation = /* GraphQL */ `
@@ -20,28 +22,41 @@ export type LoginVariables = LoginMutationVariables
 async function login(opts: {
   variables: LoginVariables
   config?: BigcommerceConfig
+  res: ServerResponse
 }): Promise<LoginResult>
 
 async function login<T extends { result?: any }, V = any>(opts: {
   query: string
   variables: V
+  res: ServerResponse
   config?: BigcommerceConfig
 }): Promise<LoginResult<T>>
 
 async function login({
   query = loginMutation,
   variables,
+  res: response,
   config,
 }: {
   query?: string
   variables: LoginVariables
+  res: ServerResponse
   config?: BigcommerceConfig
 }): Promise<LoginResult> {
   config = getConfig(config)
 
-  const data = await config.fetch<RecursivePartial<LoginMutation>>(query, {
-    variables,
-  })
+  const { data, res } = await config.fetch<RecursivePartial<LoginMutation>>(
+    query,
+    { variables }
+  )
+  const cookie = res.headers.get('Set-Cookie')
+
+  if (cookie && typeof cookie === 'string') {
+    response.setHeader(
+      'Set-Cookie',
+      concatHeader(response.getHeader('Set-Cookie'), cookie)!
+    )
+  }
 
   return {
     result: data.login?.result,
diff --git a/lib/bigcommerce/api/utils/concat-cookie.ts b/lib/bigcommerce/api/utils/concat-cookie.ts
new file mode 100644
index 000000000..362e12e99
--- /dev/null
+++ b/lib/bigcommerce/api/utils/concat-cookie.ts
@@ -0,0 +1,14 @@
+type Header = string | number | string[] | undefined
+
+export default function concatHeader(prev: Header, val: Header) {
+  if (!val) return prev
+  if (!prev) return val
+
+  if (Array.isArray(prev)) return prev.concat(String(val))
+
+  prev = String(prev)
+
+  if (Array.isArray(val)) return [prev].concat(val)
+
+  return [prev, String(val)]
+}
diff --git a/lib/bigcommerce/api/utils/fetch-graphql-api.ts b/lib/bigcommerce/api/utils/fetch-graphql-api.ts
index 1ab323832..4adec7f4d 100644
--- a/lib/bigcommerce/api/utils/fetch-graphql-api.ts
+++ b/lib/bigcommerce/api/utils/fetch-graphql-api.ts
@@ -1,18 +1,21 @@
-import { CommerceAPIFetchOptions } from 'lib/commerce/api'
+import type { GraphQLFetcher } from 'lib/commerce/api'
 import { getConfig } from '..'
 import log from '@lib/logger'
 
-export default async function fetchGraphqlApi<Q, V = any>(
+const fetchGraphqlApi: GraphQLFetcher = async (
   query: string,
-  { variables, preview }: CommerceAPIFetchOptions<V> = {}
-): Promise<Q> {
+  { variables, preview } = {},
+  fetchOptions
+) => {
   // log.warn(query)
   const config = getConfig()
   const res = await fetch(config.commerceUrl + (preview ? '/preview' : ''), {
+    ...fetchOptions,
     method: 'POST',
     headers: {
-      'Content-Type': 'application/json',
       Authorization: `Bearer ${config.apiToken}`,
+      ...fetchOptions?.headers,
+      'Content-Type': 'application/json',
     },
     body: JSON.stringify({
       query,
@@ -20,22 +23,13 @@ export default async function fetchGraphqlApi<Q, V = any>(
     }),
   })
 
-  // console.log('HEADERS', getRawHeaders(res))
-
   const json = await res.json()
   if (json.errors) {
     console.error(json.errors)
     throw new Error('Failed to fetch BigCommerce API')
   }
-  return json.data
+
+  return { data: json.data, res }
 }
 
-function getRawHeaders(res: Response) {
-  const headers: { [key: string]: string } = {}
-
-  res.headers.forEach((value, key) => {
-    headers[key] = value
-  })
-
-  return headers
-}
+export default fetchGraphqlApi
diff --git a/lib/commerce/api/index.ts b/lib/commerce/api/index.ts
index 38ed70d4a..db55e1daa 100644
--- a/lib/commerce/api/index.ts
+++ b/lib/commerce/api/index.ts
@@ -3,14 +3,29 @@ export interface CommerceAPIConfig {
   apiToken: string
   cartCookie: string
   cartCookieMaxAge: number
-  fetch<Q, V = any>(
+  fetch<Data = any, Variables = any>(
     query: string,
-    queryData?: CommerceAPIFetchOptions<V>
-  ): Promise<Q>
+    queryData?: CommerceAPIFetchOptions<Variables>,
+    fetchOptions?: RequestInit
+  ): Promise<GraphQLFetcherResult<Data>>
 }
 
-export interface CommerceAPIFetchOptions<V> {
-  variables?: V
+export type GraphQLFetcher<
+  Data extends GraphQLFetcherResult = GraphQLFetcherResult,
+  Variables = any
+> = (
+  query: string,
+  queryData?: CommerceAPIFetchOptions<Variables>,
+  fetchOptions?: RequestInit
+) => Promise<Data>
+
+export interface GraphQLFetcherResult<Data = any> {
+  data: Data
+  res: Response
+}
+
+export interface CommerceAPIFetchOptions<Variables> {
+  variables?: Variables
   preview?: boolean
 }
 

From a7b0d9391af5d8e951aac62acf5ff841e0e1736c Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 15:35:09 -0300
Subject: [PATCH 21/32] New Footer

---
 assets/utils.css                           | 1 +
 components/core/UserNav/UserNav.tsx        | 2 +-
 components/ui/Skeleton/Skeleton.module.css | 2 +-
 package.json                               | 4 ++--
 yarn.lock                                  | 2 +-
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/assets/utils.css b/assets/utils.css
index 65dd5f63a..281d90c76 100644
--- a/assets/utils.css
+++ b/assets/utils.css
@@ -1 +1,2 @@
+@tailwind screens;
 @tailwind utilities;
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 2f0d4925d..bf5a5a4b2 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -55,7 +55,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             <Menu>
               {({ open }) => (
                 <>
-                  <Menu.Button className="inline-flex justify-center">
+                  <Menu.Button className="inline-flex justify-center rounded-full">
                     <Avatar />
                   </Menu.Button>
                   <DropdownMenu onClose={closeDropdown} open={open} />
diff --git a/components/ui/Skeleton/Skeleton.module.css b/components/ui/Skeleton/Skeleton.module.css
index 6def0a5e0..5a852562b 100644
--- a/components/ui/Skeleton/Skeleton.module.css
+++ b/components/ui/Skeleton/Skeleton.module.css
@@ -1,5 +1,5 @@
 .skeleton {
-  @apply block rounded;
+  @apply block;
   background-image: linear-gradient(
     270deg,
     var(--accents-1),
diff --git a/package.json b/package.json
index 9365500a3..4608e0479 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
     "react-swipeable-views": "^0.13.9",
     "react-swipeable-views-utils": "^0.14.0-alpha.0",
     "react-ticker": "^1.2.2",
-    "swr": "^0.3.3"
+    "swr": "^0.3.3",
+    "tailwindcss": "^1.9"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.17.10",
@@ -65,7 +66,6 @@
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.1.2",
-    "tailwindcss": "^1.8.10",
     "typescript": "^4.0.3"
   },
   "resolutions": {
diff --git a/yarn.lock b/yarn.lock
index 023467d2b..999b4c92e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8017,7 +8017,7 @@ symbol-observable@^1.0.4, symbol-observable@^1.1.0:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-tailwindcss@^1.8.10:
+tailwindcss@^1.9:
   version "1.9.5"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.9.5.tgz#3339b790a68bc1f09a8efd8eb94cb05aed5235c2"
   integrity sha512-Je5t1fAfyW333YTpSxF+8uJwbnrkpyBskDtZYgSMMKQbNp6QUhEKJ4g/JIevZjD2Zidz9VxLraEUq/yWOx6nQg==

From 7ebdd243a83274d2f9df7c4e2491063307b6ce22 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 15:43:09 -0300
Subject: [PATCH 22/32] Dropdown Menu

---
 assets/{global.css => base.css} |  6 ------
 assets/components.css           |  3 +++
 assets/main.css                 |  8 ++++++++
 assets/tailwind.css             |  2 --
 assets/utils.css                |  2 --
 package.json                    |  1 +
 pages/_app.tsx                  |  4 +---
 yarn.lock                       | 25 +++++++++++++++++++++++--
 8 files changed, 36 insertions(+), 15 deletions(-)
 rename assets/{global.css => base.css} (95%)
 create mode 100644 assets/components.css
 create mode 100644 assets/main.css
 delete mode 100644 assets/tailwind.css
 delete mode 100644 assets/utils.css

diff --git a/assets/global.css b/assets/base.css
similarity index 95%
rename from assets/global.css
rename to assets/base.css
index 4d3d23402..9cfd1cf0b 100644
--- a/assets/global.css
+++ b/assets/base.css
@@ -1,5 +1,3 @@
-@import './font.css';
-
 :root {
   --primary: white;
   --primary-2: #f1f3f5;
@@ -58,10 +56,6 @@
   --accents-9: #f8f9fa;
 }
 
-.fit {
-  min-height: calc(100vh - 88px - 41px);
-}
-
 *,
 *:before,
 *:after {
diff --git a/assets/components.css b/assets/components.css
new file mode 100644
index 000000000..eab469589
--- /dev/null
+++ b/assets/components.css
@@ -0,0 +1,3 @@
+.fit {
+  min-height: calc(100vh - 88px - 41px);
+}
diff --git a/assets/main.css b/assets/main.css
new file mode 100644
index 000000000..e18f81fbf
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,8 @@
+@import 'tailwindcss/base';
+@import './font.css';
+@import './base.css';
+
+@import 'tailwindcss/components';
+@import './components.css';
+
+@import 'tailwindcss/utilities';
diff --git a/assets/tailwind.css b/assets/tailwind.css
deleted file mode 100644
index 605a9cef0..000000000
--- a/assets/tailwind.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@tailwind base;
-@tailwind components;
diff --git a/assets/utils.css b/assets/utils.css
deleted file mode 100644
index 281d90c76..000000000
--- a/assets/utils.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@tailwind screens;
-@tailwind utilities;
diff --git a/package.json b/package.json
index 4608e0479..e4b34f4e8 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "nextjs-progressbar": "^0.0.6",
+    "postcss-import": "^13.0.0",
     "postcss-nesting": "^7.0.1",
     "react": "^16.14.0",
     "react-aria": "^3.0.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f6c1ffcd8..986ccedbe 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,4 @@
-import '@assets/global.css'
-import '@assets/tailwind.css'
-import '@assets/utils.css'
+import '@assets/main.css'
 
 // To be removed
 import 'animate.css'
diff --git a/yarn.lock b/yarn.lock
index 999b4c92e..b8c69bb0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6439,6 +6439,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
 pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -6613,6 +6618,15 @@ postcss-image-set-function@^3.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-import@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-13.0.0.tgz#d6960cd9e3de5464743b04dd8cd9d870662f8b8c"
+  integrity sha512-LPUbm3ytpYopwQQjqgUH4S3EM/Gb9QsaSPP/5vnoi+oKVy3/mIk2sc0Paqw7RL57GpScm9MdIMUypw2znWiBpg==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-initial@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.2.tgz#f018563694b3c16ae8eaabe3c585ac6319637b2d"
@@ -6827,7 +6841,7 @@ postcss-value-parser@^3.3.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
@@ -7139,6 +7153,13 @@ react@^16.14.0:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
+  dependencies:
+    pify "^2.3.0"
+
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -7419,7 +7440,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.8.1:
   version "1.18.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130"
   integrity sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==

From 9e7e5b02a2151cfd79ce5052e273464657264fc6 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 16:47:58 -0300
Subject: [PATCH 23/32] Dropdown Menu

---
 components/core/Footer/Footer.tsx             | 21 +++++++++---------
 components/icon/DoubleChevron.tsx             | 22 +++++++++++++++++++
 .../ProductView/ProductView.module.css        |  7 +++---
 .../product/ProductView/ProductView.tsx       | 10 ++++-----
 4 files changed, 41 insertions(+), 19 deletions(-)
 create mode 100644 components/icon/DoubleChevron.tsx

diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index ebe137856..83bde14b0 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-2 border-b border-accents-2 py-6">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
@@ -33,8 +33,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
             </Link>
           </div>
           <div className="col-span-1 lg:col-span-2">
-            {' '}
-            <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+            <ul className="flex flex-initial flex-col md:flex-1">
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
                   <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
@@ -68,7 +67,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
             </ul>
           </div>
           <div className="col-span-1 lg:col-span-2">
-            <ul className="flex flex-initial flex-col divide-y divide-gray-700 md:divide-y-0 my-12 md:my-0 md:flex-1">
+            <ul className="flex flex-initial flex-col md:flex-1">
               {legalPages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
@@ -80,18 +79,18 @@ const Footer: FC<Props> = ({ className, pages }) => {
               ))}
             </ul>
           </div>
-          <div className="col-span-1 lg:col-span-6 flex justify-end">
-            <div className="text-white">
+          <div className="col-span-1 lg:col-span-6 flex lg:justify-end text-white">
+            <div>
               <Github />
             </div>
           </div>
         </div>
-        <div className="py-12 flex flex-row justify-between">
-          <small className="text-white">
-            &copy; 2020 ACME, Inc. All rights reserved.
-          </small>
+        <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
+          <div className="text-white">
+            <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
+          </div>
           <div className="flex items-center text-accents-4">
-            Crafted by
+            <span>Crafted by</span>
             <a href="https://vercel.com">
               <img
                 src="/vercel.png"
diff --git a/components/icon/DoubleChevron.tsx b/components/icon/DoubleChevron.tsx
new file mode 100644
index 000000000..a26cb755e
--- /dev/null
+++ b/components/icon/DoubleChevron.tsx
@@ -0,0 +1,22 @@
+const Sun = ({ ...props }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16 8.90482L12 4L8 8.90482M8 15.0952L12 20L16 15.0952"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Sun
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index c17ad9565..a1e5df481 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -7,7 +7,7 @@
 }
 
 .productDisplay {
-  @apply relative flex px-0 pb-0 relative box-border col-span-7;
+  @apply relative flex px-0 pb-0 relative box-border col-span-1;
   margin-right: -2rem;
   margin-left: -2rem;
   min-height: 400px;
@@ -17,7 +17,7 @@
   }
 
   @screen lg {
-    @apply mx-0;
+    @apply mx-0 col-span-7;
     min-height: 100%;
     height: 100%;
   }
@@ -55,9 +55,10 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-5;
+  @apply flex flex-col col-span-1;
 
   @screen lg {
+    @apply col-span-5;
     padding-top: 5rem;
   }
 }
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 91747cd92..16d333a0c 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -1,14 +1,14 @@
+import cn from 'classnames'
 import { NextSeo } from 'next-seo'
+import s from './ProductView.module.css'
 import { FC, useState, useEffect } from 'react'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
-import { getProductOptions } from '../helpers'
-import s from './ProductView.module.css'
 import { isDesktop } from '@lib/browser'
-import cn from 'classnames'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
+import { getProductOptions } from '../helpers'
 interface Props {
   className?: string
   children?: any
@@ -130,7 +130,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
             ))}
             <div className="pb-12">
               <div
-                className="pb-14 break-words"
+                className="pb-14 break-words w-full"
                 dangerouslySetInnerHTML={{ __html: product.description }}
               />
               <Button

From 6dfb557019824cd5506909c48a772111f2be0dc2 Mon Sep 17 00:00:00 2001
From: Franco Arza <franco@basement.studio>
Date: Thu, 22 Oct 2020 17:49:12 -0300
Subject: [PATCH 24/32] tweak bg colors

---
 .../product/ProductCard/ProductCard.module.css      | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index 2cd18cc8c..9246c2f7c 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -2,12 +2,12 @@
   @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
 
   &:hover {
-    & .squareBg {
-      transform: scale(1.05);
+    & .squareBg:before {
+      transform: scale(0.98);
     }
 
     & .product-image {
-      transform: scale(0.98);
+      transform: scale(1.05);
     }
 
     & .productTitle > span,
@@ -72,12 +72,17 @@
 .squareBg {
   @apply transform absolute inset-0 z-0;
   background-color: #212529;
+}
+
+.squareBg:before {
+  @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
+  content: '';
   background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .simple {
   & .squareBg {
-    @apply bg-gray-300 !important;
+    @apply bg-accents-0 !important;
   }
 
   & .productTitle {

From 3644d637dd90ed1661ec8e71960a25a467d98201 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 22 Oct 2020 15:57:33 -0500
Subject: [PATCH 25/32] Improve error handling for hooks

---
 lib/bigcommerce/index.tsx      |  5 +++--
 lib/bigcommerce/use-signup.tsx | 10 +++++----
 lib/commerce/utils/errors.ts   | 40 ++++++++++++++++++++++++++++++++++
 pages/login.tsx                | 26 +++++++++++++++++++++-
 4 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 lib/commerce/utils/errors.ts

diff --git a/lib/bigcommerce/index.tsx b/lib/bigcommerce/index.tsx
index fb2d15757..f02d7d5ab 100644
--- a/lib/bigcommerce/index.tsx
+++ b/lib/bigcommerce/index.tsx
@@ -4,6 +4,7 @@ import {
   CommerceProvider as CoreCommerceProvider,
   useCommerce as useCoreCommerce,
 } from 'lib/commerce'
+import { FetcherError } from '@lib/commerce/utils/errors'
 
 async function getText(res: Response) {
   try {
@@ -16,9 +17,9 @@ async function getText(res: Response) {
 async function getError(res: Response) {
   if (res.headers.get('Content-Type')?.includes('application/json')) {
     const data = await res.json()
-    return data.errors[0]
+    return new FetcherError({ errors: data.errors, status: res.status })
   }
-  return { message: await getText(res) }
+  return new FetcherError({ message: await getText(res), status: res.status })
 }
 
 export const bigcommerceConfig: CommerceConfig = {
diff --git a/lib/bigcommerce/use-signup.tsx b/lib/bigcommerce/use-signup.tsx
index 68183aa6c..2756bdf09 100644
--- a/lib/bigcommerce/use-signup.tsx
+++ b/lib/bigcommerce/use-signup.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import { CommerceError } from '@lib/commerce/utils/errors'
+import type { HookFetcher } from '@lib/commerce/utils/types'
 import useCommerceSignup from '@lib/commerce/use-signup'
 import type { SignupBody } from './api/customers/signup'
 
@@ -16,9 +17,10 @@ export const fetcher: HookFetcher<null, SignupBody> = (
   fetch
 ) => {
   if (!(firstName && lastName && email && password)) {
-    throw new Error(
-      'A first name, last name, email and password are required to signup'
-    )
+    throw new CommerceError({
+      message:
+        'A first name, last name, email and password are required to signup',
+    })
   }
 
   return fetch({
diff --git a/lib/commerce/utils/errors.ts b/lib/commerce/utils/errors.ts
new file mode 100644
index 000000000..76f899ab7
--- /dev/null
+++ b/lib/commerce/utils/errors.ts
@@ -0,0 +1,40 @@
+export type ErrorData = {
+  message: string
+  code?: string
+}
+
+export type ErrorProps = {
+  code?: string
+} & (
+  | { message: string; errors?: never }
+  | { message?: never; errors: ErrorData[] }
+)
+
+export class CommerceError extends Error {
+  code?: string
+  errors: ErrorData[]
+
+  constructor({ message, code, errors }: ErrorProps) {
+    const error: ErrorData = message
+      ? { message, ...(code ? { code } : {}) }
+      : errors![0]
+
+    super(error.message)
+    this.errors = message ? [error] : errors!
+
+    if (error.code) this.code = error.code
+  }
+}
+
+export class FetcherError extends CommerceError {
+  status: number
+
+  constructor(
+    options: {
+      status: number
+    } & ErrorProps
+  ) {
+    super(options)
+    this.status = options.status
+  }
+}
diff --git a/pages/login.tsx b/pages/login.tsx
index b9cec445e..ce12ce401 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -1,7 +1,29 @@
+import useSignup from '@lib/bigcommerce/use-signup'
 import { Layout } from '@components/core'
 import { Logo, Modal, Button } from '@components/ui'
 
 export default function Login() {
+  const signup = useSignup()
+  // TODO: use this method
+  const handleSignup = async () => {
+    // TODO: validate the password and email before calling the signup
+    // Passwords must be at least 7 characters and contain both alphabetic
+    // and numeric characters.
+    try {
+      await signup({
+        // This account already exists, so it will throw the "duplicated_email" error
+        email: 'luis@vercel.com',
+        firstName: 'Luis',
+        lastName: 'Alvarez',
+        password: 'luis123',
+      })
+    } catch (error) {
+      if (error.code === 'duplicated_email') {
+        // TODO: handle duplicated email
+      }
+    }
+  }
+
   return (
     <div className="pb-20">
       <Modal close={() => {}}>
@@ -22,7 +44,9 @@ export default function Login() {
                 className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
               />
             </div>
-            <Button variant="slim">Log In</Button>
+            <Button variant="slim" onClick={handleSignup}>
+              Log In
+            </Button>
             <span className="pt-3 text-center text-sm">
               <span className="text-accents-7">Don't have an account?</span>
               {` `}

From 400e40358bfb78e0cad7fc2a880ce17ec3fbf266 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 18:13:45 -0300
Subject: [PATCH 26/32] New Container

---
 assets/base.css                                |   5 ++++-
 components/core/Footer/Footer.tsx              |  17 ++++++++++++-----
 components/icon/DoubleChevron.tsx              |   4 ++--
 components/icon/index.ts                       |   1 +
 .../product/ProductView/ProductView.module.css |  15 +++++----------
 components/product/ProductView/ProductView.tsx |   1 -
 components/ui/Container/Container.tsx          |   2 +-
 components/ui/Modal/Modal.tsx                  |   5 ++++-
 components/ui/Sidebar/Sidebar.tsx              |   2 +-
 public/{us-flag.png => flag-us.png}            | Bin
 tailwind.config.js                             |   4 ++++
 11 files changed, 34 insertions(+), 22 deletions(-)
 rename public/{us-flag.png => flag-us.png} (100%)

diff --git a/assets/base.css b/assets/base.css
index af58c1b0f..3c962b16c 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -17,9 +17,12 @@
   --red: #da3c3c;
   --pink: #e64980;
   --purple: #f81ce5;
-  --violet: #5f3dc4;
+
   --blue: #0070f3;
 
+  --violet-light: #7048e8;
+  --violet: #5f3dc4;
+
   --accents-0: #f8f9fa;
   --accents-1: #f1f3f5;
   --accents-2: #e9ecef;
diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index 83bde14b0..e98cf1bda 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
 import { Logo, Container } from '@components/ui'
-import { Github } from '@components/icon'
+import { Github, DoubleChevron } from '@components/icon'
 
 interface Props {
   className?: string
@@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
@@ -79,14 +79,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
               ))}
             </ul>
           </div>
-          <div className="col-span-1 lg:col-span-6 flex lg:justify-end text-white">
-            <div>
+          <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
+            <div className="flex space-x-6 items-center h-10">
               <Github />
+              <div className="h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center">
+                <img className="" src="/flag-us.png" />
+                <span>English</span>
+                <span className="">
+                  <DoubleChevron />
+                </span>
+              </div>
             </div>
           </div>
         </div>
         <div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
-          <div className="text-white">
+          <div>
             <span>&copy; 2020 ACME, Inc. All rights reserved.</span>
           </div>
           <div className="flex items-center text-accents-4">
diff --git a/components/icon/DoubleChevron.tsx b/components/icon/DoubleChevron.tsx
index a26cb755e..00ed94a60 100644
--- a/components/icon/DoubleChevron.tsx
+++ b/components/icon/DoubleChevron.tsx
@@ -1,4 +1,4 @@
-const Sun = ({ ...props }) => {
+const DoubleChevron = ({ ...props }) => {
   return (
     <svg
       width="24"
@@ -19,4 +19,4 @@ const Sun = ({ ...props }) => {
   )
 }
 
-export default Sun
+export default DoubleChevron
diff --git a/components/icon/index.ts b/components/icon/index.ts
index 399ae4f5b..e76cfa493 100644
--- a/components/icon/index.ts
+++ b/components/icon/index.ts
@@ -9,3 +9,4 @@ export { default as Check } from './Check'
 export { default as Sun } from './Sun'
 export { default as Moon } from './Moon'
 export { default as Github } from './Github'
+export { default as DoubleChevron } from './DoubleChevron'
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index a1e5df481..98264a46c 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -7,7 +7,7 @@
 }
 
 .productDisplay {
-  @apply relative flex px-0 pb-0 relative box-border col-span-1;
+  @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
   margin-right: -2rem;
   margin-left: -2rem;
   min-height: 400px;
@@ -34,7 +34,7 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-0 z-10;
+  @apply absolute top-6 left-10 z-10;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -49,7 +49,7 @@
   @screen md {
     & .name,
     & .price {
-      @apply bg-violet text-white;
+      @apply bg-violet-light text-white;
     }
   }
 }
@@ -76,13 +76,8 @@
   }
 
   @screen lg {
-    height: 150%;
-    margin-top: -10%;
-  }
-
-  @screen xl {
-    height: 170%;
-    margin-top: -19%;
+    height: 100%;
+    margin-top: -8%;
   }
 }
 
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 16d333a0c..a582981dc 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -66,7 +66,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
       />
       <div className={cn(s.root, 'fit')}>
         <div className={cn(s.productDisplay, 'fit')}>
-          <div className={s.squareBg}></div>
           <div className={s.nameBox}>
             <h1 className={s.name}>{product.name}</h1>
             <div className={s.price}>
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
index 821c182cd..582c781b3 100644
--- a/components/ui/Container/Container.tsx
+++ b/components/ui/Container/Container.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-7xl px-6', className)
+  const rootClassName = cn('mx-auto max-w-8xl px-12', className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index 97f750efd..e1ff99aa0 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -21,11 +21,14 @@ const Modal: FC<Props> = ({
 }) => {
   const rootClassName = cn(s.root, className)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-  usePreventScroll()
   let { modalProps } = useModal()
   let { overlayProps } = useOverlay(props, ref)
   let { dialogProps } = useDialog(props, ref)
 
+  usePreventScroll({
+    isDisabled: !show,
+  })
+
   return (
     <div className={rootClassName}>
       <FocusScope contain restoreFocus autoFocus>
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index a104ae42d..6f700c221 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -72,7 +72,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveFrom="translate-x-0"
                   leaveTo="translate-x-full"
                 >
-                  <div className="h-full w-screen max-w-lg">
+                  <div className="h-full w-screen max-w-xl">
                     <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
                       {children}
                     </div>
diff --git a/public/us-flag.png b/public/flag-us.png
similarity index 100%
rename from public/us-flag.png
rename to public/flag-us.png
diff --git a/tailwind.config.js b/tailwind.config.js
index 03b3c7f7b..4ef5bb95c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,9 @@ module.exports = {
   purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      maxWidth: {
+        '8xl': '1920px',
+      },
       backgroundOpacity: {
         075: '0.75',
       },
@@ -26,6 +29,7 @@ module.exports = {
         'accents-8': 'var(--accents-8)',
         'accents-9': 'var(--accents-9)',
         violet: 'var(--violet)',
+        'violet-light': 'var(--violet-light)',
         pink: 'var(--pink)',
         cyan: 'var(--cyan)',
         blue: 'var(--blue)',

From c27c55ea4619fc599dc0406e11812e0681bdccbf Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 18:24:04 -0300
Subject: [PATCH 27/32] Modal Dark Mode

---
 components/ui/Modal/Modal.module.css | 4 ++--
 pages/index.tsx                      | 2 +-
 pages/login.tsx                      | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/ui/Modal/Modal.module.css b/components/ui/Modal/Modal.module.css
index 061370cf7..38f20261e 100644
--- a/components/ui/Modal/Modal.module.css
+++ b/components/ui/Modal/Modal.module.css
@@ -1,8 +1,8 @@
 .root {
-  @apply fixed bg-black flex items-center inset-0 z-50 justify-center;
+  @apply fixed bg-primary text-primary flex items-center inset-0 z-50 justify-center;
   background-color: rgba(0, 0, 0, 0.35);
 }
 
 .modal {
-  @apply bg-white p-12;
+  @apply bg-primary p-12 border border-accents-2;
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 4cad5bd6d..6dcb4564a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -70,7 +70,7 @@ export default function Home({
         ))}
       </Grid>
       <Marquee variant="secondary">
-        {bestSelling.slice(0, 3).map(({ node }) => (
+        {bestSelling.slice(3, 6).map(({ node }) => (
           <ProductCard key={node.path} product={node} variant="slim" />
         ))}
       </Marquee>
diff --git a/pages/login.tsx b/pages/login.tsx
index ce12ce401..b393bdca5 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -28,20 +28,20 @@ export default function Login() {
     <div className="pb-20">
       <Modal close={() => {}}>
         <div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
-          <div className="flex justify-center pb-12">
+          <div className="flex justify-center pb-12 ">
             <Logo width="64px" height="64px" />
           </div>
           <div className="flex flex-col space-y-3">
             <div className="border border-accents-3 text-accents-6">
               <input
                 placeholder="Email"
-                className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
+                className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
               />
             </div>
             <div className="border border-accents-3 text-accents-6">
               <input
                 placeholder="Password"
-                className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
+                className="bg-primary focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
               />
             </div>
             <Button variant="slim" onClick={handleSignup}>

From 228f2141e7d11316d97bb5a30f223bc9bb4df681 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 22 Oct 2020 16:27:31 -0500
Subject: [PATCH 28/32] Allow the auth cookie in development

---
 lib/bigcommerce/api/operations/login.ts | 10 +++++++++-
 pages/login.tsx                         |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/lib/bigcommerce/api/operations/login.ts b/lib/bigcommerce/api/operations/login.ts
index c371e71d5..04faba0fe 100644
--- a/lib/bigcommerce/api/operations/login.ts
+++ b/lib/bigcommerce/api/operations/login.ts
@@ -49,9 +49,17 @@ async function login({
     query,
     { variables }
   )
-  const cookie = res.headers.get('Set-Cookie')
+  // Bigcommerce returns a Set-Cookie header with the auth cookie
+  let cookie = res.headers.get('Set-Cookie')
 
   if (cookie && typeof cookie === 'string') {
+    // In development, don't set a secure cookie or the browser will ignore it
+    if (process.env.NODE_ENV !== 'production') {
+      cookie = cookie.replace('; Secure', '')
+      // SameSite=none can't be set unless the cookie is Secure
+      cookie = cookie.replace('; SameSite=none', '; SameSite=lax')
+    }
+
     response.setHeader(
       'Set-Cookie',
       concatHeader(response.getHeader('Set-Cookie'), cookie)!
diff --git a/pages/login.tsx b/pages/login.tsx
index ce12ce401..e3ebc46e9 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -4,7 +4,7 @@ import { Logo, Modal, Button } from '@components/ui'
 
 export default function Login() {
   const signup = useSignup()
-  // TODO: use this method
+  // TODO: use this method. It can take more than 5 seconds to do a signup
   const handleSignup = async () => {
     // TODO: validate the password and email before calling the signup
     // Passwords must be at least 7 characters and contain both alphabetic

From a72c6e49de56172ccbdff76e2b7dc199608fb88f Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 22 Oct 2020 16:28:22 -0500
Subject: [PATCH 29/32] Updated login handler

---
 lib/bigcommerce/api/customers/handlers/login.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/lib/bigcommerce/api/customers/handlers/login.ts b/lib/bigcommerce/api/customers/handlers/login.ts
index 787c055f8..d1000c648 100644
--- a/lib/bigcommerce/api/customers/handlers/login.ts
+++ b/lib/bigcommerce/api/customers/handlers/login.ts
@@ -17,8 +17,7 @@ const loginHandler: LoginHandlers['login'] = async ({
   // Passwords must be at least 7 characters and contain both alphabetic
   // and numeric characters.
 
-  // TODO: Currently not working, fix this asap.
-  const loginData = await login({ variables: { email, password }, config })
+  await login({ variables: { email, password }, config, res })
 
   res.status(200).json({ data: null })
 }

From 3941b90b0fb28ffba829d518f622397e801a42d3 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 22 Oct 2020 16:37:06 -0500
Subject: [PATCH 30/32] Use CommerceError for hooks

---
 lib/bigcommerce/cart/use-add-item.tsx    |  9 +++++----
 lib/bigcommerce/cart/use-update-item.tsx |  7 +++++--
 lib/bigcommerce/use-login.tsx            | 10 ++++++----
 lib/bigcommerce/use-signup.tsx           |  2 +-
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/lib/bigcommerce/cart/use-add-item.tsx b/lib/bigcommerce/cart/use-add-item.tsx
index fa8bb8b46..36fbec7d2 100644
--- a/lib/bigcommerce/cart/use-add-item.tsx
+++ b/lib/bigcommerce/cart/use-add-item.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '@lib/commerce/utils/types'
+import { CommerceError } from '@lib/commerce/utils/errors'
 import useCartAddItem from '@lib/commerce/cart/use-add-item'
 import type { ItemBody, AddItemBody } from '../api/cart'
 import useCart, { Cart } from './use-cart'
@@ -20,9 +21,9 @@ export const fetcher: HookFetcher<Cart, AddItemBody> = (
     item.quantity &&
     (!Number.isInteger(item.quantity) || item.quantity! < 1)
   ) {
-    throw new Error(
-      'The item quantity has to be a valid integer greater than 0'
-    )
+    throw new CommerceError({
+      message: 'The item quantity has to be a valid integer greater than 0',
+    })
   }
 
   return fetch({
diff --git a/lib/bigcommerce/cart/use-update-item.tsx b/lib/bigcommerce/cart/use-update-item.tsx
index bcad7ab3a..875c241f8 100644
--- a/lib/bigcommerce/cart/use-update-item.tsx
+++ b/lib/bigcommerce/cart/use-update-item.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 import debounce from 'lodash.debounce'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '@lib/commerce/utils/types'
+import { CommerceError } from '@lib/commerce/utils/errors'
 import useCartUpdateItem from '@lib/commerce/cart/use-update-item'
 import type { ItemBody, UpdateItemBody } from '../api/cart'
 import { fetcher as removeFetcher } from './use-remove-item'
@@ -24,7 +25,9 @@ export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = (
       return removeFetcher(null, { itemId }, fetch)
     }
   } else if (item.quantity) {
-    throw new Error('The item quantity has to be a valid integer')
+    throw new CommerceError({
+      message: 'The item quantity has to be a valid integer',
+    })
   }
 
   return fetch({
diff --git a/lib/bigcommerce/use-login.tsx b/lib/bigcommerce/use-login.tsx
index d2b86a827..d0465cc5a 100644
--- a/lib/bigcommerce/use-login.tsx
+++ b/lib/bigcommerce/use-login.tsx
@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@lib/commerce/utils/types'
+import type { HookFetcher } from '@lib/commerce/utils/types'
+import { CommerceError } from '@lib/commerce/utils/errors'
 import useCommerceLogin from '@lib/commerce/use-login'
 import type { LoginBody } from './api/customers/login'
 
@@ -16,9 +17,10 @@ export const fetcher: HookFetcher<null, LoginBody> = (
   fetch
 ) => {
   if (!(email && password)) {
-    throw new Error(
-      'A first name, last name, email and password are required to login'
-    )
+    throw new CommerceError({
+      message:
+        'A first name, last name, email and password are required to login',
+    })
   }
 
   return fetch({
diff --git a/lib/bigcommerce/use-signup.tsx b/lib/bigcommerce/use-signup.tsx
index 2756bdf09..709d3f2cf 100644
--- a/lib/bigcommerce/use-signup.tsx
+++ b/lib/bigcommerce/use-signup.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
-import { CommerceError } from '@lib/commerce/utils/errors'
 import type { HookFetcher } from '@lib/commerce/utils/types'
+import { CommerceError } from '@lib/commerce/utils/errors'
 import useCommerceSignup from '@lib/commerce/use-signup'
 import type { SignupBody } from './api/customers/signup'
 

From 2aec3fb5222d692d32642c6c7da96ecbd14340ad Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 18:49:21 -0300
Subject: [PATCH 31/32] Modal Dark Mode

---
 components/core/Avatar/Avatar.tsx          |  2 +-
 components/core/UserNav/UserNav.module.css | 10 +++++-----
 components/core/UserNav/UserNav.tsx        |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
index 7dd3bc5bd..d8bea803a 100644
--- a/components/core/Avatar/Avatar.tsx
+++ b/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-accents-2"
+      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-100"
       style={{
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 96926796b..d76382671 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -13,14 +13,14 @@
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
 
   &:hover {
-    @apply text-accents-8;
-  }
-
-  &.heart:hover svg {
-    fill: var(--accents-9);
+    @apply text-accents-8 transition scale-110 duration-100;
   }
 
   &:last-child {
     @apply mr-0;
   }
+
+  &:focus {
+    outline: none;
+  }
 }
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index bf5a5a4b2..70e2377f3 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -47,7 +47,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             )}
           </li>
           <Link href="/wishlist">
-            <li className={cn(s.item, s.heart)}>
+            <li className={s.item}>
               <Heart />
             </li>
           </Link>

From 7c91f8a80f5b7965f2ea212c0ed2d8dacbeb298e Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Thu, 22 Oct 2020 17:13:28 -0500
Subject: [PATCH 32/32] Login should work now!

---
 .../api/customers/handlers/login.ts           | 26 ++++++++++++++++++-
 .../api/utils/fetch-graphql-api.ts            |  7 +++--
 pages/login.tsx                               | 21 +++++++++++++++
 3 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/lib/bigcommerce/api/customers/handlers/login.ts b/lib/bigcommerce/api/customers/handlers/login.ts
index d1000c648..e744acc31 100644
--- a/lib/bigcommerce/api/customers/handlers/login.ts
+++ b/lib/bigcommerce/api/customers/handlers/login.ts
@@ -1,6 +1,9 @@
+import { FetcherError } from '@lib/commerce/utils/errors'
 import login from '../../operations/login'
 import type { LoginHandlers } from '../login'
 
+const invalidCredentials = /invalid credentials/i
+
 const loginHandler: LoginHandlers['login'] = async ({
   res,
   body: { email, password },
@@ -17,7 +20,28 @@ const loginHandler: LoginHandlers['login'] = async ({
   // Passwords must be at least 7 characters and contain both alphabetic
   // and numeric characters.
 
-  await login({ variables: { email, password }, config, res })
+  try {
+    await login({ variables: { email, password }, config, res })
+  } catch (error) {
+    // Check if the email and password didn't match an existing account
+    if (
+      error instanceof FetcherError &&
+      invalidCredentials.test(error.message)
+    ) {
+      return res.status(401).json({
+        data: null,
+        errors: [
+          {
+            message:
+              'Cannot find an account that matches the provided credentials',
+            code: 'invalid_credentials',
+          },
+        ],
+      })
+    }
+
+    throw error
+  }
 
   res.status(200).json({ data: null })
 }
diff --git a/lib/bigcommerce/api/utils/fetch-graphql-api.ts b/lib/bigcommerce/api/utils/fetch-graphql-api.ts
index 4adec7f4d..f32f369dc 100644
--- a/lib/bigcommerce/api/utils/fetch-graphql-api.ts
+++ b/lib/bigcommerce/api/utils/fetch-graphql-api.ts
@@ -1,3 +1,4 @@
+import { FetcherError } from '@lib/commerce/utils/errors'
 import type { GraphQLFetcher } from 'lib/commerce/api'
 import { getConfig } from '..'
 import log from '@lib/logger'
@@ -25,8 +26,10 @@ const fetchGraphqlApi: GraphQLFetcher = async (
 
   const json = await res.json()
   if (json.errors) {
-    console.error(json.errors)
-    throw new Error('Failed to fetch BigCommerce API')
+    throw new FetcherError({
+      errors: json.errors ?? [{ message: 'Failed to fetch Bigcommerce API' }],
+      status: res.status,
+    })
   }
 
   return { data: json.data, res }
diff --git a/pages/login.tsx b/pages/login.tsx
index 1876c1a53..4fc5c328a 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -1,9 +1,11 @@
 import useSignup from '@lib/bigcommerce/use-signup'
 import { Layout } from '@components/core'
 import { Logo, Modal, Button } from '@components/ui'
+import useLogin from '@lib/bigcommerce/use-login'
 
 export default function Login() {
   const signup = useSignup()
+  const login = useLogin()
   // TODO: use this method. It can take more than 5 seconds to do a signup
   const handleSignup = async () => {
     // TODO: validate the password and email before calling the signup
@@ -21,6 +23,25 @@ export default function Login() {
       if (error.code === 'duplicated_email') {
         // TODO: handle duplicated email
       }
+      // Show a generic error saying that something bad happened, try again later
+    }
+  }
+
+  const handleLogin = async () => {
+    // TODO: validate the password and email before calling the signup
+    // Passwords must be at least 7 characters and contain both alphabetic
+    // and numeric characters.
+    try {
+      await login({
+        email: 'luis@vercel.com',
+        // This is an invalid password so it will throw the "invalid_credentials" error
+        password: 'luis1234', // will work with `luis123`
+      })
+    } catch (error) {
+      if (error.code === 'invalid_credentials') {
+        // The email and password didn't match an existing account
+      }
+      // Show a generic error saying that something bad happened, try again later
     }
   }