diff --git a/README.md b/README.md index 5df149b06..a586199d2 100644 --- a/README.md +++ b/README.md @@ -1 +1,7 @@ # Next.js Commerce + +## Features + +## Todo + +## Contribute diff --git a/assets/base.css b/assets/base.css index 7d0df28bf..7be74ba3d 100644 --- a/assets/base.css +++ b/assets/base.css @@ -1,13 +1,13 @@ :root { - --primary: white; + --primary: #ffffff; --primary-2: #f1f3f5; - --secondary: black; + --secondary: #000000; --secondary-2: #111; --selection: var(--cyan); - --text-base: black; - --text-primary: black; + --text-base: #000000; + --text-primary: #000000; --text-secondary: white; --hover: rgba(0, 0, 0, 0.075); @@ -38,9 +38,9 @@ } [data-theme='dark'] { - --primary: black; + --primary: #000000; --primary-2: #111; - --secondary: white; + --secondary: #ffffff; --secondary-2: #f1f3f5; --hover: rgba(255, 255, 255, 0.075); --hover-1: rgba(255, 255, 255, 0.15); diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx index 758f3de4b..2c0e6789c 100644 --- a/components/auth/SignUpView.tsx +++ b/components/auth/SignUpView.tsx @@ -59,7 +59,7 @@ const SignUpView: FC = () => { }, [handleValidation]) return ( -
+
diff --git a/components/cart/CartSidebarView/CartSidebarView.module.css b/components/cart/CartSidebarView/CartSidebarView.module.css index c3a2af639..9b94021ad 100644 --- a/components/cart/CartSidebarView/CartSidebarView.module.css +++ b/components/cart/CartSidebarView/CartSidebarView.module.css @@ -1,2 +1,15 @@ .root { + @apply h-full flex flex-col; +} + +.root.empty { + @apply bg-secondary text-secondary; +} + +.root.success { + @apply bg-green text-white; +} + +.root.error { + @apply bg-red text-white; } diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index 7440a8d81..fdee9eecb 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -7,6 +7,7 @@ import { useUI } from '@components/ui/context' import useCart from '@lib/bigcommerce/cart/use-cart' import usePrice from '@lib/bigcommerce/use-price' import CartItem from '../CartItem' +import s from './CartSidebarView.module.css' const CartSidebarView: FC = () => { const { data, isEmpty } = useCart() @@ -32,10 +33,10 @@ const CartSidebarView: FC = () => { return (
@@ -56,7 +57,7 @@ const CartSidebarView: FC = () => {
{isEmpty ? ( -
+
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index 6d5b88a0f..a243590b1 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -6,7 +6,7 @@ import s from './Featurebar.module.css' interface Props { className?: string title: string - description: string + description?: string hide?: boolean action?: React.ReactNode } diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index d409d5958..85da7e847 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -77,8 +77,7 @@ const Layout: FC = ({ children, pageProps }) => { {modalView === 'FORGOT_VIEW' && } setAcceptedCookies(true)}> diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index 8b8fa8c14..a319e3dac 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -7,7 +7,7 @@ } .item { - @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary flex items-center outline-none text-primary; + @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 flex items-center outline-none text-primary; &:hover { @apply text-accents-6 transition scale-110 duration-100; diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index c47a0c287..171190df0 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -83,6 +83,7 @@ .simple { & .squareBg { @apply bg-accents-0 !important; + background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' viewBox='0 0 48 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.05' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.05' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } & .productTitle { diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 478e5a61c..d48c5b4cf 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -11,8 +11,8 @@ interface Props { className?: string product: ProductNode variant?: 'slim' | 'simple' - imgWidth: number - imgHeight: number + imgWidth: number | string + imgHeight: number | string priority?: boolean } diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index a08549ac6..df2be8802 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -1,5 +1,5 @@ .root { - @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 border border-transparent items-center; + @apply bg-secondary text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 border border-transparent items-center; } .root:hover { diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index 3290d5b63..4c7704c4d 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -62,7 +62,7 @@ const Sidebar: FC = ({ className, children, open = false, onClose }) => { leaveFrom="translate-x-0" leaveTo="translate-x-full" > -
+
{children}
diff --git a/pages/index.tsx b/pages/index.tsx index 44a93c1d7..5304f691e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -80,8 +80,8 @@ export default function Home({ key={node.path} product={node} // The first image is the largest one in the grid - imgWidth={i === 0 ? 1600 : 820} - imgHeight={i === 0 ? 1600 : 820} + imgWidth={i === 0 ? '65vw' : '30vw'} + imgHeight={i === 0 ? '45vw' : '22vw'} priority /> ))}