From 283455fc796a5fd1a0835597c1bb129a98297264 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 13 Oct 2020 10:03:53 -0300
Subject: [PATCH] Layout Changes

---
 components/core/Layout/Layout.module.css |  7 ---
 components/core/Layout/Layout.tsx        |  5 +-
 components/core/Navbar/Navbar.tsx        | 68 ++++++++++++------------
 components/ui/Container/Container.tsx    |  2 +-
 pages/wishlist.tsx                       | 28 ++++++++++
 5 files changed, 64 insertions(+), 46 deletions(-)
 delete mode 100644 components/core/Layout/Layout.module.css
 create mode 100644 pages/wishlist.tsx

diff --git a/components/core/Layout/Layout.module.css b/components/core/Layout/Layout.module.css
deleted file mode 100644
index d9ee4fa63..000000000
--- a/components/core/Layout/Layout.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.root {
-  @apply h-full bg-primary;
-}
-
-.main {
-  min-height: 100vh;
-}
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 344ac3f59..ef8df08dd 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,6 +1,5 @@
 import cn from 'classnames'
 import { FC } from 'react'
-import s from './Layout.module.css'
 import { CommerceProvider } from '@lib/bigcommerce'
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
@@ -13,7 +12,7 @@ interface Props {
 }
 
 const CoreLayout: FC<Props> = ({ className, children }) => {
-  const rootClassName = cn(s.root, className)
+  const rootClassName = cn('h-full bg-primary', className)
   const { displaySidebar, closeSidebar } = useUI()
 
   return (
@@ -25,7 +24,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
       <Container>
         <Navbar />
       </Container>
-      <main className={s.main}>{children}</main>
+      <main className="h-screen">{children}</main>
       <Footer />
       <Sidebar show={displaySidebar} close={closeSidebar}>
         <CartSidebarView />
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index 8a7a84f4c..c549b3577 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -2,7 +2,7 @@ import s from './Navbar.module.css'
 import { FC } from 'react'
 import Link from 'next/link'
 import { useTheme } from 'next-themes'
-import { Logo, Container } from '@components/ui'
+import { Logo } from '@components/ui'
 import { Searchbar, Toggle, UserNav } from '@components/core'
 interface Props {
   className?: string
@@ -13,45 +13,43 @@ const Navbar: FC<Props> = ({ className }) => {
   const { theme, setTheme } = useTheme()
   return (
     <div className={rootClassName}>
-      <Container>
-        <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
-          <div className="flex flex-1 items-center">
+      <div className="flex justify-between align-center flex-row py-4 md:py-6 relative">
+        <div className="flex flex-1 items-center">
+          <Link href="/">
+            <a className="cursor-pointer">
+              <Logo />
+            </a>
+          </Link>
+          <nav className="space-x-4 ml-6 hidden md:block">
             <Link href="/">
-              <a className="cursor-pointer">
-                <Logo />
-              </a>
+              <a className={s.link}>All</a>
             </Link>
-            <nav className="space-x-4 ml-6 hidden md:block">
-              <Link href="/">
-                <a className={s.link}>All</a>
-              </Link>
-              <Link href="/">
-                <a className={s.link}>Clothes</a>
-              </Link>
-              <Link href="/">
-                <a className={s.link}>Accessories</a>
-              </Link>
-            </nav>
-          </div>
-
-          <div className="md:flex flex-1 justify-center hidden">
-            <Searchbar />
-          </div>
-
-          <div className="flex flex-initial md:flex-1 justify-end space-x-8">
-            <Toggle
-              checked={theme === 'dark'}
-              onChange={() =>
-                theme === 'dark' ? setTheme('light') : setTheme('dark')
-              }
-            />
-            <UserNav />
-          </div>
+            <Link href="/">
+              <a className={s.link}>Clothes</a>
+            </Link>
+            <Link href="/">
+              <a className={s.link}>Accessories</a>
+            </Link>
+          </nav>
         </div>
-        <div className="block flex pb-4 md:hidden px-4 md:px-6">
+
+        <div className="md:flex flex-1 justify-center hidden">
           <Searchbar />
         </div>
-      </Container>
+
+        <div className="flex flex-initial md:flex-1 justify-end space-x-8">
+          <Toggle
+            checked={theme === 'dark'}
+            onChange={() =>
+              theme === 'dark' ? setTheme('light') : setTheme('dark')
+            }
+          />
+          <UserNav />
+        </div>
+      </div>
+      <div className="block flex pb-4 md:hidden px-4 md:px-6">
+        <Searchbar />
+      </div>
     </div>
   )
 }
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
index 78d0aed0f..fa3c725f0 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', className)
+  const rootClassName = cn('mx-auto max-w-7xl px-6 md:px-12', className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
new file mode 100644
index 000000000..5c656a52d
--- /dev/null
+++ b/pages/wishlist.tsx
@@ -0,0 +1,28 @@
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
+import { Layout } from '@components/core'
+import { Container } from '@components/ui'
+import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
+
+export async function getStaticProps({ preview }: GetStaticPropsContext) {
+  const { products } = await getAllProducts()
+  const { categories, brands } = await getSiteInfo()
+
+  return {
+    props: { products, categories, brands },
+  }
+}
+
+export default function Home({}: InferGetStaticPropsType<
+  typeof getStaticProps
+>) {
+  return (
+    <Container>
+      <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
+        My Wishlist
+      </h2>
+    </Container>
+  )
+}
+
+Home.Layout = Layout