ProductStyling

components/core/Layout/Layout.tsx

@@ -4,16 +4,15 @@ 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 { 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
 }
 
-const CoreLayout: FC<Props> = ({ className, children }) => {
+const Layout: FC<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   const { displaySidebar, closeSidebar } = useUI()
 
@@ -35,16 +34,4 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
   )
 }
 
-const Layout: FC<Props> = (props) => (
-  <ThemeProvider>
-    <SSRProvider>
-      <OverlayProvider>
-        <UIProvider>
-          <CoreLayout {...props} />
-        </UIProvider>
-      </OverlayProvider>
-    </SSRProvider>
-  </ThemeProvider>
-)
-
 export default Layout

components/product/ProductCard/ProductCard.module.css

@@ -6,31 +6,31 @@
       @apply scale-75;
     }
 
-    & .productTitle,
+    & .productTitle > span,
     & .productPrice,
     & .wishlistButton {
       @apply bg-secondary text-secondary;
     }
 
-    &:nth-child(6n + 1) .productTitle,
+    &:nth-child(6n + 1) .productTitle > span,
     &:nth-child(6n + 1) .productPrice,
     &:nth-child(6n + 1) .wishlistButton {
       @apply bg-violet text-white;
     }
 
-    &:nth-child(6n + 5) .productTitle,
+    &:nth-child(6n + 5) .productTitle > span,
     &:nth-child(6n + 5) .productPrice,
     &:nth-child(6n + 5) .wishlistButton {
       @apply bg-blue text-white;
     }
 
-    &:nth-child(6n + 3) .productTitle,
+    &:nth-child(6n + 3) .productTitle > span,
     &:nth-child(6n + 3) .productPrice,
     &:nth-child(6n + 3) .wishlistButton {
       @apply bg-pink text-white;
     }
 
-    &:nth-child(6n + 6) .productTitle,
+    &:nth-child(6n + 6) .productTitle > span,
     &:nth-child(6n + 6) .productPrice,
     &:nth-child(6n + 6) .wishlistButton {
       @apply bg-cyan text-white;
@@ -66,29 +66,13 @@
 }
 
 .productTitle {
-  /* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */
+  line-height: 51px;
-  /* max-width: calc(100% - 50px); */
+  width: 200px;
-  line-height: 1.3;
-  padding: 2px 0;
-  border-left: 20px solid #c0c;
-  width: 400px;
-  margin: 20px auto;
 
-  & h2 {
+  & span {
-    background-color: #c0c;
+    @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
-    padding: 4px 0;
+    box-decoration-break: clone;
-    color: #fff;
+    -webkit-box-decoration-break: clone;
-    display: inline;
-    margin: 0;
-
-    & .strong {
-      position: relative;
-      left: -10px;
-    }
-  }
-
-  @screen lg {
-    @apply text-2xl;
   }
 }
 

components/product/ProductCard/ProductCard.tsx

@@ -46,17 +46,11 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
         </div>
         <div className={s.squareBg} />
         <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="">
-            <div className="flex-1">
+            <div className={s.productTitle}>
-              <span className={s.productTitle}>
+              <span>{p.name}</span>
-                <h2>
-                  <strong>{p.name}</strong>
-                </h2>
-              </span>
-            </div>
-            <div className="flex-0">
-              <div className={s.productPrice}>${p.prices.price.value}</div>
             </div>
+            <span className={s.productPrice}>${p.prices.price.value}</span>
           </div>
           <div className={s.wishlistButton}>
             <Heart />

components/ui/context.tsx

@@ -1,4 +1,6 @@
 import React, { FC } from 'react'
+import { ThemeProvider } from 'next-themes'
+import { SSRProvider, OverlayProvider } from 'react-aria'
 
 export interface State {
   displaySidebar: boolean
@@ -63,3 +65,13 @@ function uiReducer(state: State, action: Action) {
     }
   }
 }
+
+export const ManagedUIContext: FC = ({ children }) => (
+  <UIProvider>
+    <ThemeProvider>
+      <SSRProvider>
+        <OverlayProvider>{children}</OverlayProvider>
+      </SSRProvider>
+    </ThemeProvider>
+  </UIProvider>
+)

lib/commerce/cart/use-cart.tsx

@@ -18,7 +18,7 @@ export default function useCart<T>(
   fetcherFn: HookFetcher<T | null, CartInput>,
   swrOptions?: ConfigInterface<T | null>
 ) {
-  const { cartCookie } = useCommerce()
+  const { cartCookie = '' } = useCommerce() | {}
   const fetcher: typeof fetcherFn = (options, input, fetch) => {
     input.cartId = Cookies.get(cartCookie)
     return fetcherFn(options, input, fetch)

pages/_app.tsx

@@ -3,9 +3,9 @@ import '@assets/tailwind.css'
 import '@assets/utils.css'
 import 'animate.css'
 import { FC } from 'react'
-
+import { Head } from '@components/core'
 import type { AppProps } from 'next/app'
-
+import { ManagedUIContext } from '@components/ui/context'
 import { CommerceProvider } from '@lib/bigcommerce'
 
 const Noop: FC = ({ children }) => <>{children}</>
@@ -15,10 +15,13 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <>
+      <Head />
       <CommerceProvider locale="en-us">
-        <Layout>
+        <ManagedUIContext>
-          <Component {...pageProps} />
+          <Layout>
-        </Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </ManagedUIContext>
       </CommerceProvider>
     </>
   )