crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-19 05:31:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
Bel Curcio 2021-05-25 17:53:57 -03:00
parent 4b06e7c062
commit c7207c8e1a
40 changed files with 365 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
assets/base.css
View File

@ -20,16 +20,20 @@
--blue: #0070f3;
--violet: #5f3dc4;
--violet-light: #7048e8;
--accents-0: #f8f9fa;
--accents-1: #f1f3f5;
--accents-2: #e9ecef;
--accents-3: #dee2e6;
--accents-4: #ced4da;
--accents-5: #adb5bd;
--accents-6: #868e96;
--accents-7: #495057;
--accents-8: #343a40;
--accents-9: #212529;
--accent-0: #fff;
--accent-05: #f8f9fa;
--accent-1: #f1f3f5;
--accent-2: #e9ecef;
--accent-3: #dee2e6;
--accent-4: #ced4da;
--accent-5: #adb5bd;
--accent-6: #868e96;
--accent-7: #495057;
--accent-8: #343a40;
--accent-9: #212529;
--accent-10: #000;
--font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue',
'Helvetica', sans-serif;
}
@ -48,16 +52,18 @@
--text-primary: white;
--text-secondary: black;
--accents-0: #212529;
--accents-1: #343a40;
--accents-2: #495057;
--accents-3: #868e96;
--accents-4: #adb5bd;
--accents-5: #ced4da;
--accents-6: #dee2e6;
--accents-7: #e9ecef;
--accents-8: #f1f3f5;
--accents-9: #f8f9fa;
--accent-0: #000;
--accent-05: #212529;
--accent-1: #343a40;
--accent-2: #495057;
--accent-3: #868e96;
--accent-4: #adb5bd;
--accent-5: #ced4da;
--accent-6: #dee2e6;
--accent-7: #e9ecef;
--accent-8: #f1f3f5;
--accent-9: #f8f9fa;
--accent-10: #fff;
}
*,
@ -127,4 +133,3 @@ a {
opacity: 1;
}
}

2
components/auth/ForgotPassword.tsx
View File

@ -61,7 +61,7 @@ const ForgotPassword: FC<Props> = () => {
</div>
<span className="pt-3 text-center text-sm">
<span className="text-accents-7">Do you have an account?</span>
<span className="text-accent-7">Do you have an account?</span>
{` `}
<a
className="text-accent-9 font-bold hover:underline cursor-pointer"

2
components/auth/LoginView.tsx
View File

@ -87,7 +87,7 @@ const LoginView: FC<Props> = () => {
Log In
</Button>
<div className="pt-1 text-center text-sm">
<span className="text-accents-7">Don't have an account?</span>
<span className="text-accent-7">Don't have an account?</span>
{` `}
<a
className="text-accent-9 font-bold hover:underline cursor-pointer"

4
components/auth/SignUpView.tsx
View File

@ -76,7 +76,7 @@ const SignUpView: FC<Props> = () => {
<Input placeholder="Last Name" onChange={setLastName} />
<Input type="email" placeholder="Email" onChange={setEmail} />
<Input type="password" placeholder="Password" onChange={setPassword} />
<span className="text-accents-8">
<span className="text-accent-8">
<span className="inline-block align-middle ">
<Info width="15" height="15" />
</span>{' '}
@ -97,7 +97,7 @@ const SignUpView: FC<Props> = () => {
</div>
<span className="pt-1 text-center text-sm">
<span className="text-accents-7">Do you have an account?</span>
<span className="text-accent-7">Do you have an account?</span>
{` `}
<a
className="text-accent-9 font-bold hover:underline cursor-pointer"

8
components/cart/CartItem/CartItem.module.css
View File

@ -7,25 +7,25 @@
}
.actions {
@apply flex p-1 border-accents-3 border items-center justify-center w-12 text-accents-7;
@apply flex p-1 border-accent-3 border items-center justify-center w-12 text-accent-7;
transition-property: border-color, background, color, transform, box-shadow;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.actions:hover {
@apply bg-accents-1 border-accents-4 text-accents-9;
@apply bg-accent-1 border-accent-4 text-accent-9;
transition: border-color;
z-index: 10;
}
.actions:focus {
@apply bg-accents-2 outline-none;
@apply bg-accent-2 outline-none;
}
.quantity {
appearance: textfield;
@apply w-8 border-accents-2 border mx-3 rounded text-center text-sm text-black;
@apply w-8 border-accent-2 border mx-3 rounded text-center text-sm text-black;
}
.quantity::-webkit-outer-spin-button,

76
components/cart/CartItem/CartItem.tsx
View File

@ -20,8 +20,10 @@ type ItemOption = {
const CartItem = ({
item,
currencyCode,
noEdit = false,
...rest
}: {
noEdit?: boolean
item: LineItem
currencyCode: string
}) => {
@ -123,18 +125,18 @@ const CartItem = ({
{options.map((option: ItemOption, i: number) => (
<div
key={`${item.id}-${option.name}`}
className="text-sm font-semibold text-accents-7 inline-flex items-center justify-center"
className="text-sm font-semibold text-accent-7 inline-flex items-center justify-center"
>
{option.name}
{option.name === 'Color' ? (
<span
className="mx-2 rounded-full bg-transparent border w-5 h-5 p-1 text-accents-9 inline-flex items-center justify-center overflow-hidden"
className="mx-2 rounded-full bg-transparent border w-5 h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden"
style={{
backgroundColor: `${option.value}`,
}}
></span>
) : (
<span className="mx-2 rounded-full bg-transparent border h-5 p-1 text-accents-9 inline-flex items-center justify-center overflow-hidden">
<span className="mx-2 rounded-full bg-transparent border h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden">
{option.value}
</span>
)}
@ -148,38 +150,42 @@ const CartItem = ({
<span>{price}</span>
</div>
</div>
<div className="flex flex-row h-9">
<button className={s.actions} onClick={handleRemove}>
<Cross width={20} height={20} />
</button>
<label className="w-full border-accents-3 border ml-2">
<input
type="number"
max={99}
min={0}
className="bg-transparent px-4 w-full h-full focus:outline-none"
value={quantity}
onChange={handleQuantity}
onBlur={handleBlur}
/>
</label>
<button
type="button"
onClick={() => increaseQuantity(-1)}
className={s.actions}
style={{ marginLeft: '-1px' }}
>
<Minus width={18} height={18} />
</button>
<button
type="button"
onClick={() => increaseQuantity(1)}
className={cn(s.actions)}
style={{ marginLeft: '-1px' }}
>
<Plus width={18} height={18} />
</button>
</div>
{!noEdit ? (
<div className="flex flex-row h-9">
<button className={s.actions} onClick={handleRemove}>
<Cross width={20} height={20} />
</button>
<label className="w-full border-accent-3 border ml-2">
<input
type="number"
max={99}
min={0}
className="bg-transparent px-4 w-full h-full focus:outline-none"
value={quantity}
onChange={handleQuantity}
onBlur={handleBlur}
/>
</label>
<button
type="button"
onClick={() => increaseQuantity(-1)}
className={s.actions}
style={{ marginLeft: '-1px' }}
>
<Minus width={18} height={18} />
</button>
<button
type="button"
onClick={() => increaseQuantity(1)}
className={cn(s.actions)}
style={{ marginLeft: '-1px' }}
>
<Plus width={18} height={18} />
</button>
</div>
) : (
<div>x{quantity}</div>
)}
</li>
)
}

3
components/cart/CartSidebarView/CartSidebarView.module.css
View File

@ -1,6 +1,5 @@
.root {
@apply h-full flex flex-col relative w-full;
height: calc(100vh + 300px);
@apply h-full flex flex-col relative w-full relative;
}
.root.empty {

12
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -47,7 +47,7 @@ const CartSidebarView: FC = () => {
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
>
<Cross className="h-6 w-6" />
<span className="ml-2 text-accents-7 text-xs hover:text-gray-500">
<span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
Close
</span>
</button>
@ -66,7 +66,7 @@ const CartSidebarView: FC = () => {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty
</h2>
<p className="text-accents-3 px-10 text-center pt-2">
<p className="text-accent-3 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>
@ -94,13 +94,13 @@ const CartSidebarView: FC = () => {
<div className="px-4 sm:px-6 flex-1">
<Link href="/cart">
<h2
className="pt-1 pb-2 text-sm uppercase font-semibold tracking-wide cursor-pointer inline-block"
className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block"
onClick={handleClose}
>
My Cart
</h2>
</Link>
<ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-accents-3">
<ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-3 border-accent-3">
{data!.lineItems.map((item: any) => (
<CartItem
key={item.id}
@ -111,7 +111,7 @@ const CartSidebarView: FC = () => {
</ul>
</div>
<div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accents-0 shadow-outline-normal text-sm">
<div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 shadow-outline-normal text-sm">
<ul className="pb-2">
<li className="flex justify-between py-1">
<span>Subtotal</span>
@ -126,7 +126,7 @@ const CartSidebarView: FC = () => {
<span className="font-bold tracking-wide">FREE</span>
</li>
</ul>
<div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-2">
<div className="flex justify-between border-t border-accent-3 py-3 font-bold mb-2">
<span>Total</span>
<span>{total}</span>
</div>

15
components/checkout/CheckoutSidebarView/CheckoutSidebarView.module.css
View File

@ -1,16 +1,3 @@
.root {
@apply h-full flex flex-col relative w-full;
height: calc(100vh + 300px);
}
.root.empty {
@apply bg-secondary text-secondary;
}
.root.success {
@apply bg-green text-white;
}
.root.error {
@apply bg-red text-white;
@apply h-full flex flex-col relative w-full relative;
}

47
components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
View File

@ -13,6 +13,7 @@ import {
MapPin,
CreditCard,
ChevronLeft,
ChevronRight,
} from '@components/icons'
import useCart from '@framework/cart/use-cart'
import usePrice from '@framework/product/use-price'
@ -53,7 +54,7 @@ const CheckoutSidebarView: FC = () => {
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
>
<ChevronLeft className="h-6 w-6" />
<span className="ml-2 text-accents-7 text-xs hover:text-gray-500">
<span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
Back
</span>
</button>
@ -72,7 +73,7 @@ const CheckoutSidebarView: FC = () => {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty
</h2>
<p className="text-accents-3 px-10 text-center pt-2">
<p className="text-accent-3 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>
@ -99,10 +100,7 @@ const CheckoutSidebarView: FC = () => {
<>
<div className="px-4 sm:px-6 flex-1">
<Link href="/cart">
<h2
className="pt-1 pb-2 text-sm uppercase font-semibold tracking-wide cursor-pointer inline-block"
onClick={handleClose}
>
<h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
Checkout
</h2>
</Link>
@ -111,47 +109,54 @@ const CheckoutSidebarView: FC = () => {
{/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
<div
onClick={() => setSidebarView('PAYMENT_VIEW')}
className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4"
className="border border-accent-2 px-6 py-5 mb-4 text-center flex items-center cursor-pointer hover:border-accent-4"
>
<div className="mr-5">
<CreditCard />
</div>
<div className="text-sm text-center font-medium">
<span>Add Payment Method</span>
<div className="flex flex-1 items-center">
<CreditCard className="w-5 flex" />
<span className="ml-5 text-sm text-center font-medium">
Add Payment Method
</span>
{/* <span>VISA #### #### #### 2345</span> */}
</div>
<div>
<ChevronRight />
</div>
</div>
{/* Shipping Address */}
{/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
<div
onClick={() => setSidebarView('SHIPPING_VIEW')}
className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4"
className="border border-accent-2 px-6 py-5 mb-4 text-center flex items-center cursor-pointer hover:border-accent-4"
>
<div className="mr-5">
<MapPin />
</div>
<div className="text-sm text-center font-medium">
<span>Add Shipping Address</span>
<div className="flex flex-1 items-center">
<MapPin className="w-5 flex" />
<span className="ml-5 text-sm text-center font-medium">
Add Shipping Address
</span>
{/* <span>
1046 Kearny Street.<br/>
San Franssisco, California
</span> */}
</div>
<div>
<ChevronRight />
</div>
</div>
<ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-accents-3">
<ul className="py-4 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-3 border-accent-3">
{data!.lineItems.map((item: any) => (
<CartItem
key={item.id}
item={item}
currencyCode={data!.currency.code}
noEdit
/>
))}
</ul>
</div>
<div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accents-0 shadow-outline-normal text-sm">
<div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 shadow-outline-normal text-sm">
<ul className="pb-2">
<li className="flex justify-between py-1">
<span>Subtotal</span>
@ -166,7 +171,7 @@ const CheckoutSidebarView: FC = () => {
<span className="font-bold tracking-wide">FREE</span>
</li>
</ul>
<div className="flex justify-between border-t border-accents-3 py-3 font-bold mb-2">
<div className="flex justify-between border-t border-accent-3 py-3 font-bold mb-2">
<span>Total</span>
<span>{total}</span>
</div>

19
components/checkout/PaymentMethodView/PaymentMethodView.module.css
View File

@ -1,2 +1,21 @@
.root {
@apply h-full flex flex-col relative w-full relative;
}
.fieldset {
@apply flex flex-col my-3;
}
.fieldset .label {
@apply text-accent-7 uppercase text-xs font-medium mb-2;
}
.fieldset .input,
.fieldset .select {
@apply p-2 border border-accent-3 w-full text-sm font-normal;
}
.fieldset .input:focus,
.fieldset .select:focus {
@apply outline-none shadow-outline-normal;
}

70
components/checkout/PaymentMethodView/PaymentMethodView.tsx
View File

@ -3,6 +3,8 @@ import s from './PaymentMethodView.module.css'
import { ChevronLeft } from '@components/icons'
import { UserNav } from '@components/common'
import { useUI } from '@components/ui/context'
import Button from '@components/ui/Button'
import cn from 'classnames'
const PaymentMethodView: FC = () => {
const { setSidebarView } = useUI()
@ -18,7 +20,7 @@ const PaymentMethodView: FC = () => {
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
>
<ChevronLeft className="h-6 w-6" />
<span className="ml-2 text-accents-7 text-xs hover:text-gray-500">
<span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
Back
</span>
</button>
@ -29,9 +31,73 @@ const PaymentMethodView: FC = () => {
</div>
</header>
<div className="px-4 sm:px-6 flex-1">
<h2 className="pt-1 pb-2 text-sm uppercase font-semibold tracking-wide cursor-pointer inline-block">
<h2 className="pt-1 pb-6 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
Payment Method
</h2>
<div>
<div className={s.fieldset}>
<label className={s.label}>Cardholder Name</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-7')}>
<label className={s.label}>Card Number</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-3')}>
<label className={s.label}>Expires</label>
<input className={s.input} placeholder="MM/YY" />
</div>
<div className={cn(s.fieldset, 'col-span-2')}>
<label className={s.label}>CVC</label>
<input className={s.input} />
</div>
</div>
<hr className="border-accent-3 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select className={s.select}>
<option>Hong Kong</option>
</select>
</div>
<div className="mt-10 sticky z-20 bottom-0 w-full right-0 left-0 ">
<Button Component="a" width="100%" variant="ghost">
Continue
</Button>
</div>
</div>
</div>
</div>
)

23
components/checkout/ShippingView/ShippingView.module.css
View File

@ -1,2 +1,25 @@
.root {
@apply h-full flex flex-col relative w-full relative;
}
.fieldset {
@apply flex flex-col my-3;
}
.fieldset .label {
@apply text-accent-7 uppercase text-xs font-medium mb-2;
}
.fieldset .input,
.fieldset .select {
@apply p-2 border border-accent-3 w-full text-sm font-normal;
}
.fieldset .input:focus,
.fieldset .select:focus {
@apply outline-none shadow-outline-normal;
}
.radio {
@apply bg-black;
}

62
components/checkout/ShippingView/ShippingView.tsx
View File

@ -3,6 +3,8 @@ import s from './ShippingView.module.css'
import { ChevronLeft } from '@components/icons'
import { UserNav } from '@components/common'
import { useUI } from '@components/ui/context'
import Button from '@components/ui/Button'
import cn from 'classnames'
const PaymentMethodView: FC = () => {
const { setSidebarView } = useUI()
@ -18,7 +20,7 @@ const PaymentMethodView: FC = () => {
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
>
<ChevronLeft className="h-6 w-6" />
<span className="ml-2 text-accents-7 text-xs hover:text-gray-500">
<span className="ml-2 text-accent-7 text-xs hover:text-gray-500">
Back
</span>
</button>
@ -29,9 +31,65 @@ const PaymentMethodView: FC = () => {
</div>
</header>
<div className="px-4 sm:px-6 flex-1">
<h2 className="pt-1 pb-2 text-sm uppercase font-semibold tracking-wide cursor-pointer inline-block">
<h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
Shipping
</h2>
<div>
<div className="flex flex-row my-3 items-center">
<input className={s.radio} type="radio" />
<span className="ml-3 text-sm">Same as billing address</span>
</div>
<div className="flex flex-row my-3 items-center">
<input className={s.radio} type="radio" />
<span className="ml-3 text-sm">
Use a different shipping address
</span>
</div>
<hr className="border-accent-3 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select className={s.select}>
<option>Hong Kong</option>
</select>
</div>
</div>
</div>
<div className="mt-10 sticky z-20 bottom-0 w-full right-0 left-0 p-6">
<Button href="/checkout" Component="a" width="100%" variant="ghost">
Continue
</Button>
</div>
</div>
)

12
components/common/Footer/Footer.tsx
View File

@ -24,7 +24,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
return (
<footer className={rootClassName}>
<Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accent-2 py-12 text-primary bg-primary transition-colors duration-150">
<div className="col-span-1 lg:col-span-2">
<Link href="/">
<a className="flex flex-initial items-center font-bold md:mr-24">
@ -39,21 +39,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
<ul className="flex flex-initial flex-col md:flex-1">
<li className="py-3 md:py-0 md:pb-4">
<Link href="/">
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
<a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
Home
</a>
</Link>
</li>
<li className="py-3 md:py-0 md:pb-4">
<Link href="/">
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
<a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
Careers
</a>
</Link>
</li>
<li className="py-3 md:py-0 md:pb-4">
<Link href="/blog">
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
<a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
Blog
</a>
</Link>
@ -61,7 +61,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{sitePages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}>
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
<a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
{page.name}
</a>
</Link>
@ -74,7 +74,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{legalPages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}>
<a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
<a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
{page.name}
</a>
</Link>

4
components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
View File

@ -28,7 +28,7 @@ const HomeAllProductsGrid: FC<Props> = ({
</Link>
</li>
{categories.map((cat: any) => (
<li key={cat.path} className="py-1 text-accents-8 text-base">
<li key={cat.path} className="py-1 text-accent-8 text-base">
<Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a>
</Link>
@ -42,7 +42,7 @@ const HomeAllProductsGrid: FC<Props> = ({
</Link>
</li>
{brands.flatMap(({ node }: any) => (
<li key={node.path} className="py-1 text-accents-8 text-base">
<li key={node.path} className="py-1 text-accent-8 text-base">
<Link href={getDesignerPath(node.path)}>
<a>{node.name}</a>
</Link>

8
components/common/I18nWidget/I18nWidget.module.css
View File

@ -3,11 +3,11 @@
}
.button {
@apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
@apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center;
}
.button:hover {
@apply border-accents-4 shadow-sm;
@apply border-accent-4 shadow-sm;
}
.button:focus {
@ -18,7 +18,7 @@
@apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
@screen lg {
@apply absolute border border-accents-1 shadow-lg w-56 h-auto;
@apply absolute border border-accent-1 shadow-lg w-56 h-auto;
}
}
@ -34,7 +34,7 @@
}
.item:hover {
@apply bg-accents-1;
@apply bg-accent-1;
}
.icon {

6
components/common/Navbar/Navbar.module.css
View File

@ -3,15 +3,15 @@
}
.link {
@apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6;
@apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accent-6;
}
.link:hover {
@apply text-accents-9;
@apply text-accent-9;
}
.link:focus {
@apply outline-none text-accents-8;
@apply outline-none text-accent-8;
}
.logo {

2
components/common/Searchbar/Searchbar.tsx
View File

@ -19,7 +19,7 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
() => (
<div
className={cn(
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
'relative text-sm bg-accent-1 text-base w-full transition-colors duration-150',
className
)}
>

6
components/common/UserNav/DropdownMenu.module.css
View File

@ -2,7 +2,7 @@
@apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
@screen lg {
@apply absolute top-10 border border-accents-1 shadow-lg w-56 h-auto;
@apply absolute top-10 border border-accent-1 shadow-lg w-56 h-auto;
}
}
@ -12,11 +12,11 @@
}
.link:hover {
@apply bg-accents-1;
@apply bg-accent-1;
}
.link.active {
@apply font-bold bg-accents-2;
@apply font-bold bg-accent-2;
}
.off {

2
components/common/UserNav/DropdownMenu.tsx
View File

@ -109,7 +109,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
</li>
<li>
<a
className={cn(s.link, 'border-t border-accents-2 mt-4')}
className={cn(s.link, 'border-t border-accent-2 mt-4')}
onClick={() => logout()}
>
Logout

4
components/common/UserNav/UserNav.module.css
View File

@ -10,7 +10,7 @@
@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;
@apply text-accent-6 transition scale-110 duration-100;
}
&:last-child {
@ -24,7 +24,7 @@
}
.bagCount {
@apply border border-accents-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
@apply border border-accent-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
padding-left: 2.5px;
padding-right: 2.5px;
min-width: 1.25rem;

20
components/icons/ChevronRight.tsx Normal file
View File

@ -0,0 +1,20 @@
const ChevronUp = ({ ...props }) => {
return (
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
{...props}
>
<path d="M9 18l6-6-6-6" />
</svg>
)
}
export default ChevronUp

1
components/icons/CreditCard.tsx
View File

@ -10,6 +10,7 @@ const CreditCard = ({ ...props }) => {
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
{...props}
>
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
<path d="M1 10h22" />

1
components/icons/index.ts
View File

@ -16,4 +16,5 @@ export { default as MapPin } from './MapPin'
export { default as CreditCard } from './CreditCard'
export { default as ChevronUp } from './ChevronUp'
export { default as ChevronLeft } from './ChevronLeft'
export { default as ChevronRight } from './ChevronRight'
export { default as DoubleChevron } from './DoubleChevron'

2
components/product/ProductCard/ProductCard.module.css
View File

@ -81,7 +81,7 @@
.simple {
& .squareBg {
@apply bg-accents-0 !important;
@apply bg-accent-0 !important;
background-image: url('/bg-products.svg');
}

2
components/product/ProductView/ProductView.tsx
View File

@ -162,7 +162,7 @@ const ProductView: FC<Props> = ({ product }) => {
<div className="mt-2">
<ul>
<li className="border-b border-accents-2 py-4 px-2 flex flex-row">
<li className="border-b border-accent-2 py-4 px-2 flex flex-row">
Details
</li>
</ul>

2
components/product/Swatch/Swatch.module.css
View File

@ -28,6 +28,6 @@
.active {
&.size {
@apply border-accents-9 border-2;
@apply border-accent-9 border-2;
}
}

10
components/ui/Button/Button.module.css
View File

@ -1,12 +1,12 @@
.root {
@apply bg-secondary text-accents-1 cursor-pointer inline-flex
@apply bg-secondary text-accent-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 {
@apply bg-accents-0 text-primary border border-secondary;
@apply bg-accent-0 text-primary border border-secondary;
}
.root:focus {
@ -18,7 +18,7 @@
}
.loading {
@apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
@apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed;
}
.slim {
@ -26,12 +26,12 @@
}
.ghost {
@apply border border-accents-3 bg-accents-0 text-accents-9 text-sm;
@apply border border-accent-3 bg-accent-0 text-accent-9 text-sm;
}
.disabled,
.disabled:hover {
@apply text-accents-4 border-accents-2 bg-accents-1 cursor-not-allowed;
@apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;
filter: grayscale(1);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;

2
components/ui/Input/Input.module.css
View File

@ -1,5 +1,5 @@
.root {
@apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6;
@apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accent-3 text-accent-6;
}
.root:focus {

2
components/ui/LoadingDots/LoadingDots.module.css
View File

@ -2,7 +2,7 @@
@apply inline-flex text-center items-center leading-7;
& span {
@apply bg-accents-6 rounded-full h-2 w-2;
@apply bg-accent-6 rounded-full h-2 w-2;
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;

2
components/ui/Modal/Modal.module.css
View File

@ -4,7 +4,7 @@
}
.modal {
@apply bg-primary p-12 border border-accents-2 relative;
@apply bg-primary p-12 border border-accent-2 relative;
}
.modal:focus {

2
components/ui/Sidebar/Sidebar.tsx
View File

@ -40,7 +40,7 @@ const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
/>
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
<div className="h-full md:w-screen md:max-w-md">
<div className="h-full flex flex-col text-base bg-accents-0 shadow-xl overflow-y-auto">
<div className="h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto">
{children}
</div>
</div>

16
components/ui/Skeleton/Skeleton.module.css
View File

@ -2,10 +2,10 @@
@apply block;
background-image: linear-gradient(
270deg,
var(--accents-1),
var(--accents-2),
var(--accents-2),
var(--accents-1)
var(--accent-1),
var(--accent-2),
var(--accent-2),
var(--accent-1)
);
background-size: 400% 100%;
animation: loading 8s ease-in-out infinite;
@ -28,10 +28,10 @@
z-index: 100;
background-image: linear-gradient(
270deg,
var(--accents-1),
var(--accents-2),
var(--accents-2),
var(--accents-1)
var(--accent-1),
var(--accent-2),
var(--accent-2),
var(--accent-1)
);
background-size: 400% 100%;
animation: loading 8s ease-in-out infinite;

2
components/ui/Text/Text.module.css
View File

@ -11,5 +11,5 @@
}
.sectionHeading {
@apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accents-2 mb-3;
@apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accent-2 mb-3;
}

2
components/wishlist/WishlistCard/WishlistCard.module.css
View File

@ -1,5 +1,5 @@
.root {
@apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2 transition duration-100 ease-in-out;
@apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accent-2 transition duration-100 ease-in-out;
&:nth-child(3n + 1) {
& .productBg {

14
pages/cart.tsx
View File

@ -48,7 +48,7 @@ export default function Cart() {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your cart is empty
</h2>
<p className="text-accents-6 px-10 text-center pt-2">
<p className="text-accent-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>
@ -75,7 +75,7 @@ export default function Cart() {
<div className="px-4 sm:px-6 flex-1">
<Text variant="pageHeading">My Cart</Text>
<Text variant="sectionHeading">Review your Order</Text>
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-2 border-b border-accents-2">
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accent-2 border-b border-accent-2">
{data!.lineItems.map((item) => (
<CartItem
key={item.id}
@ -93,7 +93,7 @@ export default function Cart() {
{[1, 2, 3, 4, 5, 6].map((x) => (
<div
key={x}
className="border border-accents-3 w-full h-24 bg-accents-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75"
className="border border-accent-3 w-full h-24 bg-accent-2 bg-opacity-50 transform cursor-pointer hover:scale-110 duration-75"
/>
))}
</div>
@ -107,7 +107,7 @@ export default function Cart() {
<>
{/* Shipping Address */}
{/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
<div className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4">
<div className="rounded-md border border-accent-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accent-4">
<div className="mr-5">
<MapPin />
</div>
@ -121,7 +121,7 @@ export default function Cart() {
</div>
{/* Payment Method */}
{/* Only available with checkout set to true - Meaning that the provider does offer checkout functionality. */}
<div className="rounded-md border border-accents-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accents-4">
<div className="rounded-md border border-accent-2 px-6 py-6 mb-4 text-center flex items-center justify-center cursor-pointer hover:border-accent-4">
<div className="mr-5">
<CreditCard />
</div>
@ -132,7 +132,7 @@ export default function Cart() {
</div>
</>
)}
<div className="border-t border-accents-2">
<div className="border-t border-accent-2">
<ul className="py-3">
<li className="flex justify-between py-1">
<span>Subtotal</span>
@ -147,7 +147,7 @@ export default function Cart() {
<span className="font-bold tracking-wide">FREE</span>
</li>
</ul>
<div className="flex justify-between border-t border-accents-2 py-3 font-bold mb-10">
<div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-10">
<span>Total</span>
<span>{total}</span>
</div>

2
pages/orders.tsx
View File

@ -27,7 +27,7 @@ export default function Orders() {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
No orders found
</h2>
<p className="text-accents-6 px-10 text-center pt-2">
<p className="text-accent-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>

2
pages/wishlist.tsx
View File

@ -48,7 +48,7 @@ export default function Wishlist() {
<h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
Your wishlist is empty
</h2>
<p className="text-accents-6 px-10 text-center pt-2">
<p className="text-accent-6 px-10 text-center pt-2">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p>
</div>

22
tailwind.config.js
View File

@ -27,16 +27,16 @@ module.exports = {
hover: 'var(--hover)',
'hover-1': 'var(--hover-1)',
'hover-2': 'var(--hover-2)',
'accents-0': 'var(--accents-0)',
'accents-1': 'var(--accents-1)',
'accents-2': 'var(--accents-2)',
'accents-3': 'var(--accents-3)',
'accents-4': 'var(--accents-4)',
'accents-5': 'var(--accents-5)',
'accents-6': 'var(--accents-6)',
'accents-7': 'var(--accents-7)',
'accents-8': 'var(--accents-8)',
'accents-9': 'var(--accents-9)',
'accent-0': 'var(--accent-0)',
'accent-1': 'var(--accent-1)',
'accent-2': 'var(--accent-2)',
'accent-3': 'var(--accent-3)',
'accent-4': 'var(--accent-4)',
'accent-5': 'var(--accent-5)',
'accent-6': 'var(--accent-6)',
'accent-7': 'var(--accent-7)',
'accent-8': 'var(--accent-8)',
'accent-9': 'var(--accent-9)',
violet: 'var(--violet)',
'violet-light': 'var(--violet-light)',
pink: 'var(--pink)',
@ -51,7 +51,7 @@ module.exports = {
secondary: 'var(--text-secondary)',
},
boxShadow: {
'outline-normal': '0 0 0 2px var(--accents-2)',
'outline-normal': '0 0 0 2px var(--accent-2)',
magical:
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
},