4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-15 15:20:54 -05:00
commit b332609f96
23 changed files with 112 additions and 92 deletions

View File

@ -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);
} }

View File

@ -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,

View File

@ -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"

View File

@ -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">

View File

@ -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 (

View File

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

View File

@ -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

View File

@ -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;
} }

View File

@ -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
)} )}
> >

View File

@ -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 {

View File

@ -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>
)} )}

View File

@ -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;
} }

View File

@ -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 {

View File

@ -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 {

View File

@ -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>
) )

View File

@ -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>

View File

@ -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 {

View File

@ -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>
</> </>
) )
} }

View File

@ -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>

View File

@ -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>
))} ))}

View File

@ -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,
})} })}
> >

View File

@ -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>

View File

@ -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)',
}, },