4
0
forked from crowetic/commerce

New Container

This commit is contained in:
Belen Curcio 2020-10-22 18:13:45 -03:00
parent 5fabcd4789
commit 400e40358b
11 changed files with 34 additions and 22 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -7,7 +7,7 @@
} }
.productDisplay { .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-right: -2rem;
margin-left: -2rem; margin-left: -2rem;
min-height: 400px; min-height: 400px;
@ -34,7 +34,7 @@
} }
.nameBox { .nameBox {
@apply absolute top-6 left-0 z-10; @apply absolute top-6 left-10 z-10;
& .name { & .name {
@apply px-6 py-2 bg-primary text-primary font-bold; @apply px-6 py-2 bg-primary text-primary font-bold;
@ -49,7 +49,7 @@
@screen md { @screen md {
& .name, & .name,
& .price { & .price {
@apply bg-violet text-white; @apply bg-violet-light text-white;
} }
} }
} }
@ -76,13 +76,8 @@
} }
@screen lg { @screen lg {
height: 150%; height: 100%;
margin-top: -10%; margin-top: -8%;
}
@screen xl {
height: 170%;
margin-top: -19%;
} }
} }

View File

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

View File

@ -8,7 +8,7 @@ interface Props {
} }
const Container: FC<Props> = ({ children, className, el = 'div' }) => { 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< let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement HTMLDivElement

View File

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

View File

@ -72,7 +72,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
leaveFrom="translate-x-0" leaveFrom="translate-x-0"
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-xl">
<div className="h-full flex flex-col text-base bg-accents-1 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>

View File

Before

Width:  |  Height:  |  Size: 762 B

After

Width:  |  Height:  |  Size: 762 B

View File

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