Merge branch 'master' of https://github.com/okbel/e-comm-example

components/core/Featurebar/Featurebar.tsx

@@ -10,7 +10,7 @@ interface Props {
 
 const Featurebar: FC<Props> = ({ title, description, className }) => {
   const rootClassName = cn(
-    'hidden py-2 px-6 bg-primary-accent text-primary text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-primary-accent',
+    'hidden py-2 px-6 bg-accents-1 border-b border-accents-2 text-base text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-accents-1',
     className
   )
   return (

components/core/Layout/Layout.module.css

@@ -0,0 +1,4 @@
+.root {
+  @apply h-full bg-primary mx-auto;
+  max-width: 2460px;
+}

components/core/Layout/Layout.tsx

@@ -1,10 +1,13 @@
 import { FC } from 'react'
+import cn from 'classnames'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
-import { CommerceProvider } from '@lib/bigcommerce'
 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'
 
 interface LayoutProps {
   pageProps: {
@@ -13,7 +16,6 @@ interface LayoutProps {
 }
 
 interface Props {
-  children?: any
   pages?: Page[]
 }
 
@@ -21,7 +23,7 @@ const CoreLayout: FC<Props> = ({ children, pages }) => {
   const { displaySidebar, closeSidebar } = useUI()
 
   return (
-    <div className="h-full bg-primary">
+    <div className={cn(s.root)}>
       <Featurebar
         title="Free Standard Shipping on orders over $99.99"
         description="Due to COVID-19, some orders may experience processing and delivery delays."
@@ -39,11 +41,15 @@ const CoreLayout: FC<Props> = ({ children, pages }) => {
 }
 
 const Layout: FC<LayoutProps> = ({ children, pageProps }) => (
-  <CommerceProvider locale="en-us">
-    <UIProvider>
-      <CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
-    </UIProvider>
-  </CommerceProvider>
+  <UIProvider>
+    <ThemeProvider>
+      <SSRProvider>
+        <OverlayProvider>
+          <CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
+        </OverlayProvider>
+      </SSRProvider>
+    </ThemeProvider>
+  </UIProvider>
 )
 
 export default Layout

components/core/Navbar/Navbar.module.css

@@ -1,3 +1,3 @@
 .link {
-  @apply group text-primary inline-flex items-center text-base leading-6 font-medium hover:text-secondary focus:outline-none focus:text-secondary transition ease-in-out duration-100 cursor-pointer;
+  @apply group text-base inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-100 cursor-pointer;
 }

components/core/Searchbar/Searchbar.tsx

@@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
   return (
     <div
       className={cn(
-        'relative rounded-lg text-sm bg-primary-accent text-primary w-full',
+        'relative rounded-lg text-sm bg-accents-1 text-base w-full border border-accents-2',
         className
       )}
     >

components/core/UserNav/UserNav.module.css

@@ -6,10 +6,10 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base;
 
   &:hover {
-    @apply text-secondary;
+    @apply text-accents-8;
   }
 
   &:last-child {

components/core/UserNav/UserNav.tsx

@@ -29,7 +29,7 @@ const UserNav: FC<Props> = ({ className }) => {
         >
           <Bag />
           {itemsCount > 0 && (
-            <span className="bg-black h-4 w-4 absolute rounded-full right-3 top-3 text-white flex items-center justify-center font-bold text-xs">
+            <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
               {itemsCount}
             </span>
           )}