forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
b332609f96
@ -1,20 +1,28 @@
|
|||||||
@import './font.css';
|
@import './font.css';
|
||||||
|
|
||||||
:root {
|
: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-primary: black;
|
||||||
--text-secondary: white;
|
--text-secondary: white;
|
||||||
--text-default: #252f3f;
|
|
||||||
|
--hover: rgba(0, 0, 0, 0.075);
|
||||||
|
|
||||||
--cyan: #50e3c2;
|
--cyan: #50e3c2;
|
||||||
|
--green: #37b679;
|
||||||
|
--red: #da3c3c;
|
||||||
|
--pink: #ff0080;
|
||||||
--purple: #f81ce5;
|
--purple: #f81ce5;
|
||||||
|
--violet: #7928ca;
|
||||||
|
--blue: #0070f3;
|
||||||
|
|
||||||
--foreground: #000;
|
--accents-0: #fff;
|
||||||
--background: #fff;
|
|
||||||
--selection: var(--cyan);
|
|
||||||
--accents-1: #fafafa;
|
--accents-1: #fafafa;
|
||||||
--accents-2: #eaeaea;
|
--accents-2: #eaeaea;
|
||||||
--accents-3: #999999;
|
--accents-3: #999999;
|
||||||
@ -23,28 +31,31 @@
|
|||||||
--accents-6: #444444;
|
--accents-6: #444444;
|
||||||
--accents-7: #333333;
|
--accents-7: #333333;
|
||||||
--accents-8: #111111;
|
--accents-8: #111111;
|
||||||
|
--accents-9: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme='dark'] {
|
[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-primary: white;
|
||||||
--text-secondary: black;
|
--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-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 {
|
.fit {
|
||||||
@ -73,7 +84,7 @@ body {
|
|||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
background-color: var(--bg-primary);
|
background-color: var(--primary);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
.quantity {
|
.quantity {
|
||||||
appearance: textfield;
|
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,
|
.quantity::-webkit-outer-spin-button,
|
||||||
|
@ -60,7 +60,7 @@ const CartItem = ({
|
|||||||
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
<div className="w-12 h-12 bg-violet relative overflow-hidden">
|
||||||
<img className={s.productImage} src={item.image_url} />
|
<img className={s.productImage} src={item.image_url} />
|
||||||
</div>
|
</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>
|
<span className="font-bold mb-3">{item.name}</span>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<button type="button" onClick={() => increaseQuantity(-1)}>
|
<button type="button" onClick={() => increaseQuantity(-1)}>
|
||||||
@ -80,7 +80,7 @@ const CartItem = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<span>{price}</span>
|
||||||
<button
|
<button
|
||||||
className="flex justify-end"
|
className="flex justify-end"
|
||||||
|
@ -92,7 +92,7 @@ const CartSidebarView: FC = () => {
|
|||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="px-4 sm:px-6 flex-1">
|
<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
|
My Cart
|
||||||
</h2>
|
</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">
|
<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">
|
||||||
|
@ -10,7 +10,7 @@ interface Props {
|
|||||||
|
|
||||||
const Featurebar: FC<Props> = ({ title, description, className }) => {
|
const Featurebar: FC<Props> = ({ title, description, className }) => {
|
||||||
const rootClassName = cn(
|
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
|
className
|
||||||
)
|
)
|
||||||
return (
|
return (
|
||||||
|
4
components/core/Layout/Layout.module.css
Normal file
4
components/core/Layout/Layout.module.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.root {
|
||||||
|
@apply h-full bg-primary mx-auto;
|
||||||
|
max-width: 2460px;
|
||||||
|
}
|
@ -1,10 +1,13 @@
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
|
import cn from 'classnames'
|
||||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import { CommerceProvider } from '@lib/bigcommerce'
|
|
||||||
import { Navbar, Featurebar, Footer } from '@components/core'
|
import { Navbar, Featurebar, Footer } from '@components/core'
|
||||||
import { Container, Sidebar } from '@components/ui'
|
import { Container, Sidebar } from '@components/ui'
|
||||||
import { CartSidebarView } from '@components/cart'
|
import { CartSidebarView } from '@components/cart'
|
||||||
import { UIProvider, useUI } from '@components/ui/context'
|
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 {
|
interface LayoutProps {
|
||||||
pageProps: {
|
pageProps: {
|
||||||
@ -13,7 +16,6 @@ interface LayoutProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children?: any
|
|
||||||
pages?: Page[]
|
pages?: Page[]
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -21,7 +23,7 @@ const CoreLayout: FC<Props> = ({ children, pages }) => {
|
|||||||
const { displaySidebar, closeSidebar } = useUI()
|
const { displaySidebar, closeSidebar } = useUI()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full bg-primary">
|
<div className={cn(s.root)}>
|
||||||
<Featurebar
|
<Featurebar
|
||||||
title="Free Standard Shipping on orders over $99.99"
|
title="Free Standard Shipping on orders over $99.99"
|
||||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
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 }) => (
|
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
|
export default Layout
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
.link {
|
.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;
|
||||||
}
|
}
|
||||||
|
@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
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
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
@ -6,10 +6,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.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 {
|
&:hover {
|
||||||
@apply text-secondary;
|
@apply text-accents-8;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
@ -29,7 +29,7 @@ const UserNav: FC<Props> = ({ className }) => {
|
|||||||
>
|
>
|
||||||
<Bag />
|
<Bag />
|
||||||
{itemsCount > 0 && (
|
{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}
|
{itemsCount}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
& .productTitle,
|
& .productTitle,
|
||||||
& .productPrice,
|
& .productPrice,
|
||||||
& .wishlistButton {
|
& .wishlistButton {
|
||||||
@apply bg-black text-white;
|
@apply bg-secondary text-secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(6n + 1) .productTitle,
|
&:nth-child(6n + 1) .productTitle,
|
||||||
@ -66,7 +66,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.productTitle {
|
.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);
|
max-width: calc(100% - 50px);
|
||||||
|
|
||||||
@screen lg {
|
@screen lg {
|
||||||
@ -75,9 +75,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.productPrice {
|
.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 {
|
.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;
|
||||||
}
|
}
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
.root {
|
.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
|
items-center justify-center cursor-pointer transition duration-75 ease-in-out
|
||||||
p-0 shadow-none border-gray-200 border box-border;
|
p-0 shadow-none border-gray-200 border box-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active.size {
|
.active.size {
|
||||||
@apply border-secondary border-2;
|
@apply border-accents-2 border-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:hover {
|
.root:hover {
|
||||||
@apply transform scale-110 bg-primary-hover;
|
@apply transform scale-110 bg-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorViolet {
|
.colorViolet {
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
.root {
|
.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
|
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
|
text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
|
||||||
border border-transparent items-center;
|
border border-transparent items-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:hover {
|
.root:hover {
|
||||||
@apply bg-primary-accent text-primary border border-secondary;
|
@apply bg-accents-0 text-base border border-secondary;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:focus {
|
.root:focus {
|
||||||
|
@ -6,12 +6,12 @@ const Logo = () => (
|
|||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
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
|
<path
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
clipRule="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"
|
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>
|
</svg>
|
||||||
)
|
)
|
||||||
|
@ -73,7 +73,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
|
|||||||
leaveTo="translate-x-full"
|
leaveTo="translate-x-full"
|
||||||
>
|
>
|
||||||
<div className="h-full w-screen max-w-lg">
|
<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}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.root {
|
.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) {
|
&:nth-child(3n + 1) {
|
||||||
& .productBg {
|
& .productBg {
|
||||||
|
@ -5,10 +5,10 @@ import 'animate.css'
|
|||||||
import { FC } from 'react'
|
import { FC } from 'react'
|
||||||
import { DefaultSeo } from 'next-seo'
|
import { DefaultSeo } from 'next-seo'
|
||||||
import type { AppProps } from 'next/app'
|
import type { AppProps } from 'next/app'
|
||||||
import { ThemeProvider } from 'next-themes'
|
|
||||||
import { SSRProvider, OverlayProvider } from 'react-aria'
|
|
||||||
import config from '../config.json'
|
import config from '../config.json'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
|
import { CommerceProvider } from '@lib/bigcommerce'
|
||||||
|
|
||||||
const Noop: FC = ({ children }) => <>{children}</>
|
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" />
|
<link rel="manifest" href="/site.webmanifest" key="site-manifest" />
|
||||||
</Head>
|
</Head>
|
||||||
<DefaultSeo {...config.seo} />
|
<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>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -18,7 +18,7 @@ export default function Home({}: InferGetStaticPropsType<
|
|||||||
>) {
|
>) {
|
||||||
return (
|
return (
|
||||||
<Container>
|
<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
|
My Cart
|
||||||
</h2>
|
</h2>
|
||||||
</Container>
|
</Container>
|
||||||
|
@ -47,21 +47,21 @@ export default function Home({
|
|||||||
<div className="py-12 flex flex-row w-full px-12">
|
<div className="py-12 flex flex-row w-full px-12">
|
||||||
<div className="pr-3 w-48">
|
<div className="pr-3 w-48">
|
||||||
<ul className="mb-10">
|
<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
|
All Categories
|
||||||
</li>
|
</li>
|
||||||
{categories.map((cat) => (
|
{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>
|
<a href="#">{cat.name}</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="">
|
<ul className="">
|
||||||
<li className="py-1 text-primary font-bold tracking-wide">
|
<li className="py-1 text-base font-bold tracking-wide">
|
||||||
All Designers
|
All Designers
|
||||||
</li>
|
</li>
|
||||||
{brands.flatMap(({ node }) => (
|
{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>
|
<a href="#">{node.name}</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
|
@ -60,7 +60,7 @@ export default function Search({
|
|||||||
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
|
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<ul className="mb-10">
|
<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 }}>
|
<Link href={{ pathname: getCategoryPath('', brand), query }}>
|
||||||
<a>All Categories</a>
|
<a>All Categories</a>
|
||||||
</Link>
|
</Link>
|
||||||
@ -68,7 +68,7 @@ export default function Search({
|
|||||||
{categories.map((cat) => (
|
{categories.map((cat) => (
|
||||||
<li
|
<li
|
||||||
key={cat.path}
|
key={cat.path}
|
||||||
className={cn('py-1 text-default', {
|
className={cn('py-1 text-accents-8', {
|
||||||
underline: activeCategory?.entityId === cat.entityId,
|
underline: activeCategory?.entityId === cat.entityId,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
@ -84,7 +84,7 @@ export default function Search({
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<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 }}>
|
<Link href={{ pathname: getDesignerPath('', category), query }}>
|
||||||
<a>All Designers</a>
|
<a>All Designers</a>
|
||||||
</Link>
|
</Link>
|
||||||
@ -92,7 +92,7 @@ export default function Search({
|
|||||||
{brands.flatMap(({ node }) => (
|
{brands.flatMap(({ node }) => (
|
||||||
<li
|
<li
|
||||||
key={node.path}
|
key={node.path}
|
||||||
className={cn('py-1 text-default', {
|
className={cn('py-1 text-accents-8', {
|
||||||
underline: activeBrand?.entityId === node.entityId,
|
underline: activeBrand?.entityId === node.entityId,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
@ -158,9 +158,9 @@ export default function Search({
|
|||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<ul>
|
<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
|
<li
|
||||||
className={cn('py-1 text-default', {
|
className={cn('py-1 text-accents-8', {
|
||||||
underline: !sort,
|
underline: !sort,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
@ -171,7 +171,7 @@ export default function Search({
|
|||||||
{SORT.map(([key, text]) => (
|
{SORT.map(([key, text]) => (
|
||||||
<li
|
<li
|
||||||
key={key}
|
key={key}
|
||||||
className={cn('py-1 text-default', {
|
className={cn('py-1 text-accents-8', {
|
||||||
underline: sort === key,
|
underline: sort === key,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
|
@ -24,7 +24,7 @@ export default function Home({
|
|||||||
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
|
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<ul className="mb-10">
|
<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
|
All Categories
|
||||||
</li>
|
</li>
|
||||||
{categories.map((cat) => (
|
{categories.map((cat) => (
|
||||||
@ -35,7 +35,7 @@ export default function Home({
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-8">
|
<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
|
My Wishlist
|
||||||
</h2>
|
</h2>
|
||||||
<div className="group flex flex-col">
|
<div className="group flex flex-col">
|
||||||
@ -46,7 +46,7 @@ export default function Home({
|
|||||||
</div>
|
</div>
|
||||||
<div className="col-span-2">
|
<div className="col-span-2">
|
||||||
<ul>
|
<ul>
|
||||||
<li className="py-1 text-primary font-bold tracking-wide">
|
<li className="py-1 text-base font-bold tracking-wide">
|
||||||
Relevance
|
Relevance
|
||||||
</li>
|
</li>
|
||||||
<li className="py-1 text-secondary">Latest arrivals</li>
|
<li className="py-1 text-secondary">Latest arrivals</li>
|
||||||
|
@ -14,6 +14,12 @@ module.exports = {
|
|||||||
075: '0.75',
|
075: '0.75',
|
||||||
},
|
},
|
||||||
colors: {
|
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-1': 'var(--accents-1)',
|
||||||
'accents-2': 'var(--accents-2)',
|
'accents-2': 'var(--accents-2)',
|
||||||
'accents-3': 'var(--accents-3)',
|
'accents-3': 'var(--accents-3)',
|
||||||
@ -22,19 +28,16 @@ module.exports = {
|
|||||||
'accents-6': 'var(--accents-6)',
|
'accents-6': 'var(--accents-6)',
|
||||||
'accents-7': 'var(--accents-7)',
|
'accents-7': 'var(--accents-7)',
|
||||||
'accents-8': 'var(--accents-8)',
|
'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: {
|
textColor: {
|
||||||
base: 'var(--text-primary)',
|
base: 'var(--text-base)',
|
||||||
primary: 'var(--text-primary)',
|
primary: 'var(--text-primary)',
|
||||||
secondary: 'var(--text-secondary)',
|
secondary: 'var(--text-secondary)',
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user