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

assets/global.css

@@ -1,20 +1,28 @@
 @import './font.css';
 
 :root {
-  --bg-primary: white;
+  --primary: white;
-  --bg-primary-hover: rgba(0, 0, 0, 0.075);
+  --primary-2: #f1f3f5;
-  --bg-primary-accent: #f1f3f5;
+  --secondary: black;
-  --bg-secondary: black;
+  --secondary-2: #111;
+
+  --selection: var(--cyan);
+
+  --text-base: black;
   --text-primary: black;
   --text-secondary: white;
-  --text-default: #252f3f;
+
+  --hover: rgba(0, 0, 0, 0.075);
 
   --cyan: #50e3c2;
+  --green: #37b679;
+  --red: #da3c3c;
+  --pink: #ff0080;
   --purple: #f81ce5;
+  --violet: #7928ca;
+  --blue: #0070f3;
 
-  --foreground: #000;
+  --accents-0: #fff;
-  --background: #fff;
-  --selection: var(--cyan);
   --accents-1: #fafafa;
   --accents-2: #eaeaea;
   --accents-3: #999999;
@@ -23,28 +31,31 @@
   --accents-6: #444444;
   --accents-7: #333333;
   --accents-8: #111111;
+  --accents-9: #000;
 }
 
 [data-theme='dark'] {
-  --bg-primary: black;
+  --primary: black;
-  --bg-secondary: white;
+  --primary-2: #111;
-  --bg-primary-hover: rgba(255, 255, 255, 0.075);
+  --secondary: white;
-  --bg-primary-accent: #111;
+  --secondary-2: #f1f3f5;
+  --hover: rgba(255, 255, 255, 0.075);
+  --selection: var(--purple);
+
+  --text-base: white;
   --text-primary: white;
   --text-secondary: black;
-  --text-default: white;
 
-  --foreground: #fff;
+  --accents-0: #000;
-  --background: #000;
-  --selection: var(--purple);
-  --accents-8: #fafafa;
-  --accents-7: #eaeaea;
-  --accents-6: #999999;
-  --accents-5: #888888;
-  --accents-4: #666666;
-  --accents-3: #444444;
-  --accents-2: #333333;
   --accents-1: #111111;
+  --accents-2: #333333;
+  --accents-3: #444444;
+  --accents-4: #666666;
+  --accents-5: #888888;
+  --accents-6: #999999;
+  --accents-7: #eaeaea;
+  --accents-8: #fafafa;
+  --accents-9: #fff;
 }
 
 .fit {
@@ -73,7 +84,7 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--bg-primary);
+  background-color: var(--primary);
   color: var(--text-primary);
 }
 

components/cart/CartItem/CartItem.module.css

@@ -1,6 +1,6 @@
 .quantity {
   appearance: textfield;
-  @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm text-black;
+  @apply w-8 border-accents-2 border mx-3 rounded text-center text-sm text-black;
 }
 
 .quantity::-webkit-outer-spin-button,

components/cart/CartItem/CartItem.tsx

@@ -60,7 +60,7 @@ const CartItem = ({
       <div className="w-12 h-12 bg-violet relative overflow-hidden">
         <img className={s.productImage} src={item.image_url} />
       </div>
-      <div className="flex-1 flex flex-col justify-between text-primary">
+      <div className="flex-1 flex flex-col justify-between text-base">
         <span className="font-bold mb-3">{item.name}</span>
         <div className="flex items-center">
           <button type="button" onClick={() => increaseQuantity(-1)}>
@@ -80,7 +80,7 @@ const CartItem = ({
           </button>
         </div>
       </div>
-      <div className="flex flex-col justify-between space-y-2 text-primary">
+      <div className="flex flex-col justify-between space-y-2 text-base">
         <span>{price}</span>
         <button
           className="flex justify-end"

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -92,7 +92,7 @@ const CartSidebarView: FC = () => {
       ) : (
         <>
           <div className="px-4 sm:px-6 flex-1">
-            <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
+            <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
               My Cart
             </h2>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200">

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>
-    <UIProvider>
+    <ThemeProvider>
-      <CoreLayout pages={pageProps.pages}>{children}</CoreLayout>
+      <SSRProvider>
-    </UIProvider>
+        <OverlayProvider>
-  </CommerceProvider>
+          <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>
           )}

components/product/ProductCard/ProductCard.module.css

@@ -9,7 +9,7 @@
     & .productTitle,
     & .productPrice,
     & .wishlistButton {
-      @apply bg-black text-white;
+      @apply bg-secondary text-secondary;
     }
 
     &:nth-child(6n + 1) .productTitle,
@@ -66,7 +66,7 @@
 }
 
 .productTitle {
-  @apply p-3 h-14 bg-primary text-primary font-bold text-xl truncate leading-8 inline-flex;
+  @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex;
   max-width: calc(100% - 50px);
 
   @screen lg {
@@ -75,9 +75,9 @@
 }
 
 .productPrice {
-  @apply px-3 py-1 pb-2 bg-primary text-primary font-semibold inline-block text-sm leading-6;
+  @apply px-3 py-1 pb-2 bg-primary text-base font-semibold inline-block text-sm leading-6;
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex items-center justify-center bg-primary text-primary font-semibold inline-block text-xs leading-6 cursor-pointer;
+  @apply w-10 h-10 flex items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
 }

components/product/Swatch/Swatch.module.css

@@ -1,15 +1,15 @@
 .root {
-  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
+  @apply h-12 w-12 bg-primary text-base rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-75 ease-in-out
   p-0 shadow-none border-gray-200 border box-border;
 }
 
 .active.size {
-  @apply border-secondary border-2;
+  @apply border-accents-2 border-2;
 }
 
 .root:hover {
-  @apply transform scale-110 bg-primary-hover;
+  @apply transform scale-110 bg-hover;
 }
 
 .colorViolet {

components/ui/Button/Button.module.css

@@ -1,12 +1,12 @@
 .root {
-  @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
+  @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6
   bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
   text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
   border border-transparent items-center;
 }
 
 .root:hover {
-  @apply bg-primary-accent text-primary border border-secondary;
+  @apply bg-accents-0 text-base border border-secondary;
 }
 
 .root:focus {

components/ui/Logo/Logo.tsx

@@ -6,12 +6,12 @@ const Logo = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="32" height="32" rx="16" fill="var(--bg-secondary)" />
+    <rect width="32" height="32" rx="16" fill="var(--secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="var(--bg-primary)"
+      fill="var(--primary)"
     />
   </svg>
 )

components/ui/Sidebar/Sidebar.tsx

@@ -73,7 +73,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveTo="translate-x-full"
                 >
                   <div className="h-full w-screen max-w-lg">
-                    <div className="h-full flex flex-col text-primary bg-primary-accent shadow-xl overflow-y-auto">
+                    <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
                       {children}
                     </div>
                   </div>

components/wishlist/WishlistCard/WishlistCard.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-hover;
+  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2;
 
   &:nth-child(3n + 1) {
     & .productBg {

pages/_app.tsx

@@ -5,10 +5,10 @@ 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'
 
 const Noop: FC = ({ children }) => <>{children}</>
 
@@ -22,15 +22,11 @@ export default function MyApp({ Component, pageProps }: AppProps) {
         <link rel="manifest" href="/site.webmanifest" key="site-manifest" />
       </Head>
       <DefaultSeo {...config.seo} />
-      <ThemeProvider>
+      <CommerceProvider locale="en-us">
-        <SSRProvider>
+        <Layout pageProps={pageProps}>
-          <OverlayProvider>
+          <Component {...pageProps} />
-            <Layout pageProps={pageProps}>
+        </Layout>
-              <Component {...pageProps} />
+      </CommerceProvider>
-            </Layout>
-          </OverlayProvider>
-        </SSRProvider>
-      </ThemeProvider>
     </>
   )
 }

pages/cart.tsx

@@ -18,7 +18,7 @@ export default function Home({}: InferGetStaticPropsType<
 >) {
   return (
     <Container>
-      <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
+      <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
         My Cart
       </h2>
     </Container>

pages/index.tsx

@@ -47,21 +47,21 @@ export default function Home({
       <div className="py-12 flex flex-row w-full px-12">
         <div className="pr-3 w-48">
           <ul className="mb-10">
-            <li className="py-1 text-primary font-bold tracking-wide">
+            <li className="py-1 text-base font-bold tracking-wide">
               All Categories
             </li>
             {categories.map((cat) => (
-              <li key={cat.path} className="py-1 text-default">
+              <li key={cat.path} className="py-1 text-accents-8">
                 <a href="#">{cat.name}</a>
               </li>
             ))}
           </ul>
           <ul className="">
-            <li className="py-1 text-primary font-bold tracking-wide">
+            <li className="py-1 text-base font-bold tracking-wide">
               All Designers
             </li>
             {brands.flatMap(({ node }) => (
-              <li key={node.path} className="py-1 text-default">
+              <li key={node.path} className="py-1 text-accents-8">
                 <a href="#">{node.name}</a>
               </li>
             ))}

pages/search.tsx

@@ -60,7 +60,7 @@ export default function Search({
       <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
         <div className="col-span-2">
           <ul className="mb-10">
-            <li className="py-1 text-primary font-bold tracking-wide">
+            <li className="py-1 text-base font-bold tracking-wide">
               <Link href={{ pathname: getCategoryPath('', brand), query }}>
                 <a>All Categories</a>
               </Link>
@@ -68,7 +68,7 @@ export default function Search({
             {categories.map((cat) => (
               <li
                 key={cat.path}
-                className={cn('py-1 text-default', {
+                className={cn('py-1 text-accents-8', {
                   underline: activeCategory?.entityId === cat.entityId,
                 })}
               >
@@ -84,7 +84,7 @@ export default function Search({
             ))}
           </ul>
           <ul>
-            <li className="py-1 text-primary font-bold tracking-wide">
+            <li className="py-1 text-base font-bold tracking-wide">
               <Link href={{ pathname: getDesignerPath('', category), query }}>
                 <a>All Designers</a>
               </Link>
@@ -92,7 +92,7 @@ export default function Search({
             {brands.flatMap(({ node }) => (
               <li
                 key={node.path}
-                className={cn('py-1 text-default', {
+                className={cn('py-1 text-accents-8', {
                   underline: activeBrand?.entityId === node.entityId,
                 })}
               >
@@ -158,9 +158,9 @@ export default function Search({
         </div>
         <div className="col-span-2">
           <ul>
-            <li className="py-1 text-primary font-bold tracking-wide">Sort</li>
+            <li className="py-1 text-base font-bold tracking-wide">Sort</li>
             <li
-              className={cn('py-1 text-default', {
+              className={cn('py-1 text-accents-8', {
                 underline: !sort,
               })}
             >
@@ -171,7 +171,7 @@ export default function Search({
             {SORT.map(([key, text]) => (
               <li
                 key={key}
-                className={cn('py-1 text-default', {
+                className={cn('py-1 text-accents-8', {
                   underline: sort === key,
                 })}
               >

pages/wishlist.tsx

@@ -24,7 +24,7 @@ export default function Home({
       <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
         <div className="col-span-2">
           <ul className="mb-10">
-            <li className="py-1 text-primary font-bold tracking-wide">
+            <li className="py-1 text-base font-bold tracking-wide">
               All Categories
             </li>
             {categories.map((cat) => (
@@ -35,7 +35,7 @@ export default function Home({
           </ul>
         </div>
         <div className="col-span-8">
-          <h2 className="pt-1 px-3 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
+          <h2 className="pt-1 px-3 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
             My Wishlist
           </h2>
           <div className="group flex flex-col">
@@ -46,7 +46,7 @@ export default function Home({
         </div>
         <div className="col-span-2">
           <ul>
-            <li className="py-1 text-primary font-bold tracking-wide">
+            <li className="py-1 text-base font-bold tracking-wide">
               Relevance
             </li>
             <li className="py-1 text-secondary">Latest arrivals</li>

tailwind.config.js

@@ -14,6 +14,12 @@ module.exports = {
         075: '0.75',
       },
       colors: {
+        primary: 'var(--primary)',
+        'primary-2': 'var(--primary-2)',
+        secondary: 'var(--secondary)',
+        'secondary-2': 'var(--secondary-2)',
+        hover: 'var(--hover)',
+        'accents-0': 'var(--accents-0)',
         'accents-1': 'var(--accents-1)',
         'accents-2': 'var(--accents-2)',
         'accents-3': 'var(--accents-3)',
@@ -22,19 +28,16 @@ module.exports = {
         'accents-6': 'var(--accents-6)',
         'accents-7': 'var(--accents-7)',
         'accents-8': 'var(--accents-8)',
-        violet: '#7928CA',
+        'accents-9': 'var(--accents-9)',
-        pink: '#FF0080',
+        violet: 'var(--violet)',
-        cyan: '#50E3C2',
+        pink: 'var(--pink)',
-        blue: '#0070F3',
+        cyan: 'var(--cyan)',
-        green: '#37B679',
+        blue: 'var(--blue)',
-        red: '#DA3C3C',
+        green: 'var(--green)',
-        primary: 'var(--bg-primary)',
+        red: 'var(--red)',
-        secondary: 'var(--bg-secondary)',
-        'primary-accent': 'var(--bg-primary-accent)',
-        'primary-hover': 'var(--bg-primary-hover)',
       },
       textColor: {
-        base: 'var(--text-primary)',
+        base: 'var(--text-base)',
         primary: 'var(--text-primary)',
         secondary: 'var(--text-secondary)',
       },