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 1/8] 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 2/8] 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 3/8] 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 4/8] 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
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

literal 0
HcmV?d00001


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 5/8] 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 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 6/8] 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 7/8] 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 8/8] 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