cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Merge branch 'master' of https://github.com/okbel/e-comm-example

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-22 16:28:34 -05:00
commit 2eebfcbf3b
14 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/base.css
View File

@ -17,9 +17,12 @@
--red: #da3c3c;
--pink: #e64980;
--purple: #f81ce5;
--violet: #5f3dc4;
--blue: #0070f3;
--violet-light: #7048e8;
--violet: #5f3dc4;
--accents-0: #f8f9fa;
--accents-1: #f1f3f5;
--accents-2: #e9ecef;

17
components/core/Footer/Footer.tsx
View File

@ -4,7 +4,7 @@ import Link from 'next/link'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import getSlug from '@utils/get-slug'
import { Logo, Container } from '@components/ui'
import { Github } from '@components/icon'
import { Github, DoubleChevron } from '@components/icon'
interface Props {
className?: string
@ -21,7 +21,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">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary">
<div className="col-span-1 lg:col-span-2">
<Link href="/">
<a className="flex flex-initial items-center font-bold md:mr-24">
@ -79,14 +79,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
))}
</ul>
</div>
<div className="col-span-1 lg:col-span-6 flex lg:justify-end text-white">
<div>
<div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
<div className="flex space-x-6 items-center h-10">
<Github />
<div className="h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center">
<img className="" src="/flag-us.png" />
<span>English</span>
<span className="">
<DoubleChevron />
</span>
</div>
</div>
</div>
</div>
<div className="py-12 flex flex-col md:flex-row justify-between items-center space-y-4">
<div className="text-white">
<div>
<span>&copy; 2020 ACME, Inc. All rights reserved.</span>
</div>
<div className="flex items-center text-accents-4">

4
components/icon/DoubleChevron.tsx
View File

@ -1,4 +1,4 @@
const Sun = ({ ...props }) => {
const DoubleChevron = ({ ...props }) => {
return (
<svg
width="24"
@ -19,4 +19,4 @@ const Sun = ({ ...props }) => {
)
}
export default Sun
export default DoubleChevron

1
components/icon/index.ts
View File

@ -9,3 +9,4 @@ export { default as Check } from './Check'
export { default as Sun } from './Sun'
export { default as Moon } from './Moon'
export { default as Github } from './Github'
export { default as DoubleChevron } from './DoubleChevron'

15
components/product/ProductView/ProductView.module.css
View File

@ -7,7 +7,7 @@
}
.productDisplay {
@apply relative flex px-0 pb-0 relative box-border col-span-1;
@apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
margin-right: -2rem;
margin-left: -2rem;
min-height: 400px;
@ -34,7 +34,7 @@
}
.nameBox {
@apply absolute top-6 left-0 z-10;
@apply absolute top-6 left-10 z-10;
& .name {
@apply px-6 py-2 bg-primary text-primary font-bold;
@ -49,7 +49,7 @@
@screen md {
& .name,
& .price {
@apply bg-violet text-white;
@apply bg-violet-light text-white;
}
}
}
@ -76,13 +76,8 @@
}
@screen lg {
height: 150%;
margin-top: -10%;
}
@screen xl {
height: 170%;
margin-top: -19%;
height: 100%;
margin-top: -8%;
}
}

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

@ -66,7 +66,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
/>
<div className={cn(s.root, 'fit')}>
<div className={cn(s.productDisplay, 'fit')}>
<div className={s.squareBg}></div>
<div className={s.nameBox}>
<h1 className={s.name}>{product.name}</h1>
<div className={s.price}>

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

@ -8,7 +8,7 @@ interface Props {
}
const Container: FC<Props> = ({ children, className, el = 'div' }) => {
const rootClassName = cn('mx-auto max-w-7xl px-6', className)
const rootClassName = cn('mx-auto max-w-8xl px-12', className)
let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement

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

@ -1,8 +1,8 @@
.root {
@apply fixed bg-black flex items-center inset-0 z-50 justify-center;
@apply fixed bg-primary text-primary flex items-center inset-0 z-50 justify-center;
background-color: rgba(0, 0, 0, 0.35);
}
.modal {
@apply bg-white p-12;
@apply bg-primary p-12 border border-accents-2;
}

5
components/ui/Modal/Modal.tsx
View File

@ -21,11 +21,14 @@ const Modal: FC<Props> = ({
}) => {
const rootClassName = cn(s.root, className)
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
usePreventScroll()
let { modalProps } = useModal()
let { overlayProps } = useOverlay(props, ref)
let { dialogProps } = useDialog(props, ref)
usePreventScroll({
isDisabled: !show,
})
return (
<div className={rootClassName}>
<FocusScope contain restoreFocus autoFocus>

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

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

2
pages/index.tsx
View File

@ -70,7 +70,7 @@ export default function Home({
))}
</Grid>
<Marquee variant="secondary">
{bestSelling.slice(0, 3).map(({ node }) => (
{bestSelling.slice(3, 6).map(({ node }) => (
<ProductCard key={node.path} product={node} variant="slim" />
))}
</Marquee>

6
pages/login.tsx
View File

@ -28,20 +28,20 @@ export default function Login() {
<div className="pb-20">
<Modal close={() => {}}>
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
<div className="flex justify-center pb-12">
<div className="flex justify-center pb-12 ">
<Logo width="64px" height="64px" />
</div>
<div className="flex flex-col space-y-3">
<div className="border border-accents-3 text-accents-6">
<input
placeholder="Email"
className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
/>
</div>
<div className="border border-accents-3 text-accents-6">
<input
placeholder="Password"
className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
className="bg-primary focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
/>
</div>
<Button variant="slim" onClick={handleSignup}>

0
public/us-flag.png → public/flag-us.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 762 B

After

Width:  |  Height:  |  Size: 762 B

4
tailwind.config.js
View File

@ -6,6 +6,9 @@ module.exports = {
purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
maxWidth: {
'8xl': '1920px',
},
backgroundOpacity: {
075: '0.75',
},
@ -26,6 +29,7 @@ module.exports = {
'accents-8': 'var(--accents-8)',
'accents-9': 'var(--accents-9)',
violet: 'var(--violet)',
'violet-light': 'var(--violet-light)',
pink: 'var(--pink)',
cyan: 'var(--cyan)',
blue: 'var(--blue)',