From bbeb3e4d4b822d64ae869111c6f386f95a48ab9f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 15 Oct 2020 17:10:54 -0300
Subject: [PATCH 1/3] changes

---
 components/core/UserNav/UserNav.tsx           |  2 +-
 .../ProductCard/ProductCard.module.css        | 22 +++++++++++++++++--
 .../product/ProductCard/ProductCard.tsx       |  6 ++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 3a288fd87..812c2a413 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -16,8 +16,8 @@ const countItems = (count: number, items: any[]) =>
   items.reduce(countItem, count)
 
 const UserNav: FC<Props> = ({ className }) => {
-  const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const { data } = useCart()
+  const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
   return (
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
index f91c7873b..b8329a94f 100644
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/components/product/ProductCard/ProductCard.module.css
@@ -66,8 +66,26 @@
 }
 
 .productTitle {
-  @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex;
-  max-width: calc(100% - 50px);
+  /* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */
+  /* max-width: calc(100% - 50px); */
+  line-height: 1.3;
+  padding: 2px 0;
+  border-left: 20px solid #c0c;
+  width: 400px;
+  margin: 20px auto;
+
+  & h2 {
+    background-color: #c0c;
+    padding: 4px 0;
+    color: #fff;
+    display: inline;
+    margin: 0;
+
+    & .strong {
+      position: relative;
+      left: -10px;
+    }
+  }
 
   @screen lg {
     @apply text-2xl;
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 2effe27eb..2637b8a76 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -48,7 +48,11 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
           <div className="flex flex-col flex-1 overflow-hidden">
             <div className="flex-1">
-              <span className={s.productTitle}>{p.name}</span>
+              <span className={s.productTitle}>
+                <h2>
+                  <strong>{p.name}</strong>
+                </h2>
+              </span>
             </div>
             <div className="flex-0">
               <div className={s.productPrice}>${p.prices.price.value}</div>

From ef636cde7cb6f55be1874993a9a5bfc7d18c2ad0 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 15 Oct 2020 17:16:26 -0300
Subject: [PATCH 2/3] changes

---
 components/core/Layout/Layout.tsx | 20 +++++++-------------
 pages/_app.tsx                    | 15 +++++++++++----
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index a9039b1fd..0660e6cc2 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -1,13 +1,11 @@
 import cn from 'classnames'
 import { FC } from 'react'
-
+import s from './Layout.module.css'
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
 import { UIProvider, useUI } from '@components/ui/context'
-import s from './Layout.module.css'
-import { ThemeProvider } from 'next-themes'
-import { SSRProvider, OverlayProvider } from 'react-aria'
+import { CommerceProvider } from '@lib/bigcommerce'
 
 interface Props {
   className?: string
@@ -37,15 +35,11 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
 }
 
 const Layout: FC<Props> = (props) => (
-  <UIProvider>
-    <ThemeProvider>
-      <SSRProvider>
-        <OverlayProvider>
-          <CoreLayout {...props} />
-        </OverlayProvider>
-      </SSRProvider>
-    </ThemeProvider>
-  </UIProvider>
+  <CommerceProvider locale="en-us">
+    <UIProvider>
+      <CoreLayout {...props} />
+    </UIProvider>
+  </CommerceProvider>
 )
 
 export default Layout
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 0339d477f..1ce069d66 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,7 +5,8 @@ import 'animate.css'
 import { FC } from 'react'
 import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
-
+import { ThemeProvider } from 'next-themes'
+import { SSRProvider, OverlayProvider } from 'react-aria'
 import config from '../config.json'
 import Head from 'next/head'
 import { CommerceProvider } from '@lib/bigcommerce'
@@ -23,9 +24,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       </Head>
       <DefaultSeo {...config.seo} />
       <CommerceProvider locale="en-us">
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
+        <ThemeProvider>
+          <SSRProvider>
+            <OverlayProvider>
+              <Layout>
+                <Component {...pageProps} />
+              </Layout>
+            </OverlayProvider>
+          </SSRProvider>
+        </ThemeProvider>
       </CommerceProvider>
     </>
   )

From 8737f70b9722ddfb2d7ee7b3c951ea28e5e74f18 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 15 Oct 2020 17:18:53 -0300
Subject: [PATCH 3/3] changes

---
 components/core/Layout/Layout.tsx | 17 +++++++++++------
 pages/_app.tsx                    | 15 ++++-----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 0660e6cc2..e3d0e02b8 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -6,7 +6,8 @@ import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
 import { UIProvider, useUI } from '@components/ui/context'
 import { CommerceProvider } from '@lib/bigcommerce'
-
+import { ThemeProvider } from 'next-themes'
+import { SSRProvider, OverlayProvider } from 'react-aria'
 interface Props {
   className?: string
   children?: any
@@ -35,11 +36,15 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
 }
 
 const Layout: FC<Props> = (props) => (
-  <CommerceProvider locale="en-us">
-    <UIProvider>
-      <CoreLayout {...props} />
-    </UIProvider>
-  </CommerceProvider>
+  <ThemeProvider>
+    <SSRProvider>
+      <OverlayProvider>
+        <UIProvider>
+          <CoreLayout {...props} />
+        </UIProvider>
+      </OverlayProvider>
+    </SSRProvider>
+  </ThemeProvider>
 )
 
 export default Layout
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1ce069d66..0339d477f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,8 +5,7 @@ import 'animate.css'
 import { FC } from 'react'
 import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
-import { ThemeProvider } from 'next-themes'
-import { SSRProvider, OverlayProvider } from 'react-aria'
+
 import config from '../config.json'
 import Head from 'next/head'
 import { CommerceProvider } from '@lib/bigcommerce'
@@ -24,15 +23,9 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       </Head>
       <DefaultSeo {...config.seo} />
       <CommerceProvider locale="en-us">
-        <ThemeProvider>
-          <SSRProvider>
-            <OverlayProvider>
-              <Layout>
-                <Component {...pageProps} />
-              </Layout>
-            </OverlayProvider>
-          </SSRProvider>
-        </ThemeProvider>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
       </CommerceProvider>
     </>
   )