4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-26 17:16:27 -05:00
commit 928bd5ac00
13 changed files with 42 additions and 22 deletions

View File

@ -1 +1,7 @@
# Next.js Commerce
## Features
## Todo
## Contribute

View File

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

View File

@ -59,7 +59,7 @@ const SignUpView: FC<Props> = () => {
}, [handleValidation])
return (
<div className="w-96 flex flex-col justify-between p-3">
<div className="w-80 flex flex-col justify-between p-3">
<div className="flex justify-center pb-12 ">
<Logo width="64px" height="64px" />
</div>

View File

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

View File

@ -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 (
<div
className={cn('h-full flex flex-col', {
'bg-secondary text-secondary': isEmpty,
'bg-red text-white': error,
'bg-green text-white': success,
className={cn(s.root, {
[s.empty]: error,
[s.empty]: success,
[s.empty]: isEmpty,
})}
>
<header className="px-4 pt-6 pb-4 sm:px-6">
@ -56,7 +57,7 @@ const CartSidebarView: FC = () => {
</header>
{isEmpty ? (
<div className="flex-1 px-4 flex flex-col justify-center items-center ">
<div className="flex-1 px-4 flex flex-col justify-center items-center">
<span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
<Bag className="absolute" />
</span>

View File

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

View File

@ -77,8 +77,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
</Modal>
<Featurebar
title="This site uses cookies to improve your experience."
description="By clicking, you agree to our Privacy Policy."
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
hide={acceptedCookies}
action={
<Button className="mx-5" onClick={() => setAcceptedCookies(true)}>

View File

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

View File

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

View File

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

View File

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

View File

@ -62,7 +62,7 @@ const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="h-full w-screen max-w-md">
<div className="h-full md:w-screen md:max-w-md">
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
{children}
</div>

View File

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