diff --git a/assets/global.css b/assets/base.css similarity index 93% rename from assets/global.css rename to assets/base.css index bbe9e2ac4..9334525f0 100644 --- a/assets/global.css +++ b/assets/base.css @@ -1,5 +1,3 @@ -@import './font.css'; - :root { --primary: white; --primary-2: #f1f3f5; @@ -16,14 +14,17 @@ --hover-1: rgba(0, 0, 0, 0.15); --hover-2: rgba(0, 0, 0, 0.25); - --cyan: #50e3c2; + --cyan: #22b8cf; --green: #37b679; --red: #da3c3c; - --pink: #ff0080; + --pink: #e64980; --purple: #f81ce5; - --violet: #7928ca; + --blue: #0070f3; + --violet-light: #7048e8; + --violet: #5f3dc4; + --accents-0: #f8f9fa; --accents-1: #f1f3f5; --accents-2: #e9ecef; @@ -62,10 +63,6 @@ --accents-9: #f8f9fa; } -.fit { - min-height: calc(100vh - 88px - 41px); -} - *, *:before, *:after { diff --git a/assets/components.css b/assets/components.css new file mode 100644 index 000000000..eab469589 --- /dev/null +++ b/assets/components.css @@ -0,0 +1,3 @@ +.fit { + min-height: calc(100vh - 88px - 41px); +} diff --git a/assets/main.css b/assets/main.css new file mode 100644 index 000000000..e18f81fbf --- /dev/null +++ b/assets/main.css @@ -0,0 +1,8 @@ +@import 'tailwindcss/base'; +@import './font.css'; +@import './base.css'; + +@import 'tailwindcss/components'; +@import './components.css'; + +@import 'tailwindcss/utilities'; diff --git a/assets/tailwind.css b/assets/tailwind.css deleted file mode 100644 index 605a9cef0..000000000 --- a/assets/tailwind.css +++ /dev/null @@ -1,2 +0,0 @@ -@tailwind base; -@tailwind components; diff --git a/assets/utils.css b/assets/utils.css deleted file mode 100644 index 65dd5f63a..000000000 --- a/assets/utils.css +++ /dev/null @@ -1 +0,0 @@ -@tailwind utilities; diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx index 3e9281763..3797f8073 100644 --- a/components/core/Avatar/Avatar.tsx +++ b/components/core/Avatar/Avatar.tsx @@ -12,7 +12,7 @@ const Avatar: FC = ({}) => { return (
= ({ hide, }) => { const rootClassName = cn( - 'transition-all transform duration-150 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', + 'transition-transform transform duration-500 text-center ease-out p-6 bg-primary text-base text-sm md:flex md:text-left flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', { 'translate-y-full': hide }, className ) return (
- {title} - - {description} + {title} + + {description} + {action && action}
) diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 4aa8288d7..e98cf1bda 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -3,8 +3,8 @@ import cn from 'classnames' import Link from 'next/link' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import getSlug from '@utils/get-slug' -import { Logo } from '@components/ui' -import s from './Footer.module.css' +import { Logo, Container } from '@components/ui' +import { Github, DoubleChevron } from '@components/icon' interface Props { className?: string @@ -15,53 +15,100 @@ interface Props { const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy'] const Footer: FC = ({ className, pages }) => { - const rootClassName = cn( - 'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto', - className - ) + const rootClassName = cn(className) const { sitePages, legalPages } = getPages(pages) return ( -
- -
+ ) } diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 2fac3764c..74c5a4069 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -55,12 +55,12 @@ const Layout: FC = ({ children, pageProps }) => { setAcceptedCookies(true)}> Accept cookies } - className={cn({ ['translate-y-full']: acceptedCookies })} />
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index c2af8e726..e5214e8a1 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -1,7 +1,6 @@ import s from './Navbar.module.css' import { FC } from 'react' import Link from 'next/link' -import { useTheme } from 'next-themes' import { Logo } from '@components/ui' import { Searchbar, UserNav } from '@components/core' interface Props { diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css index ee30070d2..ad0903df5 100644 --- a/components/core/UserNav/DropdownMenu.module.css +++ b/components/core/UserNav/DropdownMenu.module.css @@ -1,26 +1,13 @@ .dropdownMenu { - @apply fixed top-0 right-0 z-20 w-full h-full; + @apply fixed right-0 mt-7 origin-top-right outline-none bg-primary z-40 w-full h-full; @screen lg { - @apply absolute right-0 w-screen; - max-width: 200px; - } - - & .dropdownMenuContainer { - @apply flex-col py-6 bg-primary h-full justify-around; - - @screen lg { - @apply border border-accents-1 shadow-lg py-2 h-auto; - } + @apply absolute border border-accents-1 shadow-lg w-56 h-auto; } & .link { - @apply flex space-x-2 cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center; + @apply flex cursor-pointer px-6 py-3 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center; text-transform: capitalize; - - & .icons svg { - @apply w-6 h-6; - } } &.off { diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx index e510bdd29..61f8d4ca2 100644 --- a/components/core/UserNav/DropdownMenu.tsx +++ b/components/core/UserNav/DropdownMenu.tsx @@ -1,74 +1,75 @@ -import { useTheme } from 'next-themes' -import s from './DropdownMenu.module.css' import { FC } from 'react' -import { FocusScope } from '@react-aria/focus' -import { - useOverlay, - DismissButton, - usePreventScroll, -} from '@react-aria/overlays' import Link from 'next/link' +import { useTheme } from 'next-themes' import cn from 'classnames' +import s from './DropdownMenu.module.css' import { Moon, Sun } from '@components/icon' +import { Menu, Transition } from '@headlessui/react' +import { usePreventScroll } from '@react-aria/overlays' interface DropdownMenuProps { onClose: () => void - innerRef: React.MutableRefObject + open: boolean } const DropdownMenu: FC = ({ onClose, children, - innerRef, + open = false, ...props }) => { const { theme, setTheme } = useTheme() - let { overlayProps } = useOverlay( - { - isDismissable: true, - onClose: onClose, - isOpen: true, - }, - innerRef - ) + usePreventScroll({ + isDisabled: !open, + }) - usePreventScroll() return ( - -
- {/* Needed placeholder for User Interation*/} -
- -
- - -
- + )} + + + ) } diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index 74f1cfa8a..be7ea346c 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -12,14 +12,14 @@ .item { @apply mr-6 cursor-pointer relative transition ease-in-out duration-150 text-base flex items-center; &:hover { - @apply text-accents-8 transition ease-in-out duration-100 transform scale-110; - } - - &.heart:hover svg { - fill: var(--accents-9); + @apply text-accents-8 transition scale-110 duration-100; } &:last-child { @apply mr-0; } + + &:focus { + outline: none; + } } diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 738793cf5..70e2377f3 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -2,12 +2,11 @@ import Link from 'next/link' import cn from 'classnames' import s from './UserNav.module.css' import { FC, useRef } from 'react' - import { Avatar } from '@components/core' import { Heart, Bag } from '@components/icon' import { useUI } from '@components/ui/context' import DropdownMenu from './DropdownMenu' - +import { Menu } from '@headlessui/react' import useCart from '@lib/bigcommerce/cart/use-cart' interface Props { @@ -48,22 +47,24 @@ const UserNav: FC = ({ className, children, ...props }) => { )} -
  • +
    • -
  • (displayDropdown ? closeDropdown() : openDropdown())} - > - +
  • + + {({ open }) => ( + <> + + + + + + )} +
    • - - {displayDropdown && ( - - )} ) } diff --git a/components/icon/DoubleChevron.tsx b/components/icon/DoubleChevron.tsx new file mode 100644 index 000000000..00ed94a60 --- /dev/null +++ b/components/icon/DoubleChevron.tsx @@ -0,0 +1,22 @@ +const DoubleChevron = ({ ...props }) => { + return ( + + + + ) +} + +export default DoubleChevron diff --git a/components/icon/Github.tsx b/components/icon/Github.tsx new file mode 100644 index 000000000..b8cc0c558 --- /dev/null +++ b/components/icon/Github.tsx @@ -0,0 +1,20 @@ +const Sun = ({ ...props }) => { + return ( + + + + ) +} + +export default Sun diff --git a/components/icon/Moon.tsx b/components/icon/Moon.tsx index db94ac7bd..bc848700f 100644 --- a/components/icon/Moon.tsx +++ b/components/icon/Moon.tsx @@ -10,6 +10,7 @@ const Moon = ({ ...props }) => { stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision" + {...props} > diff --git a/components/icon/Sun.tsx b/components/icon/Sun.tsx index 7457650b0..949ac1cd1 100644 --- a/components/icon/Sun.tsx +++ b/components/icon/Sun.tsx @@ -10,6 +10,7 @@ const Sun = ({ ...props }) => { stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision" + {...props} > diff --git a/components/icon/index.ts b/components/icon/index.ts index 929003d6f..e76cfa493 100644 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -8,3 +8,5 @@ export { default as Minus } from './Minus' 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' diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index f72af2116..9246c2f7c 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -2,8 +2,12 @@ @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer; &:hover { - & .squareBg { - @apply scale-75; + & .squareBg:before { + transform: scale(0.98); + } + + & .product-image { + transform: scale(1.05); } & .productTitle > span, @@ -37,6 +41,10 @@ } } + & .product-image { + @apply transform transition-transform duration-500; + } + &:nth-child(6n + 1) .squareBg { @apply bg-violet; } @@ -58,16 +66,23 @@ .productTitle > span, .productPrice, .wishlistButton { - @apply transition ease-in-out duration-150; + @apply transition ease-in-out duration-500; } .squareBg { - @apply transform absolute inset-0 z-0 bg-secondary; + @apply transform absolute inset-0 z-0; + background-color: #212529; +} + +.squareBg:before { + @apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block; + content: ''; + 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.1' x1='9.41421' y1='8' x2='21' y2='19.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 8)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 38)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='38' x2='27' y2='26.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .simple { & .squareBg { - @apply bg-gray-300 !important; + @apply bg-accents-0 !important; } & .productTitle { @@ -102,5 +117,5 @@ } .wishlistButton { - @apply w-10 h-10 flex items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer; + @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer; } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index dc04715c2..b621ba5d2 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -36,7 +36,7 @@ const ProductCard: FC = ({ className, product: p, variant }) => { >
    diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index f47933868..4f102a61c 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -7,7 +7,7 @@ } .productDisplay { - @apply relative flex px-0 pb-0 relative box-border col-span-7; + @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet; margin-right: -2rem; margin-left: -2rem; min-height: 400px; @@ -17,7 +17,7 @@ } @screen lg { - @apply mx-0; + @apply mx-0 col-span-7; min-height: 100%; height: 100%; } @@ -49,9 +49,10 @@ } .sidebar { - @apply flex flex-col col-span-5; + @apply flex flex-col col-span-1; @screen lg { + @apply col-span-5; padding-top: 5rem; } } diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 91747cd92..a582981dc 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -1,14 +1,14 @@ +import cn from 'classnames' import { NextSeo } from 'next-seo' +import s from './ProductView.module.css' import { FC, useState, useEffect } from 'react' -import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' import { useUI } from '@components/ui/context' import { Button, Container } from '@components/ui' import { Swatch, ProductSlider } from '@components/product' import useAddItem from '@lib/bigcommerce/cart/use-add-item' -import { getProductOptions } from '../helpers' -import s from './ProductView.module.css' import { isDesktop } from '@lib/browser' -import cn from 'classnames' +import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' +import { getProductOptions } from '../helpers' interface Props { className?: string children?: any @@ -66,7 +66,6 @@ const ProductView: FC = ({ product, className }) => { />
    -

    {product.name}

    @@ -130,7 +129,7 @@ const ProductView: FC = ({ product, className }) => { ))}
    + Don't have an account? {` `} diff --git a/public/flag-us.png b/public/flag-us.png new file mode 100644 index 000000000..763f34fbf Binary files /dev/null and b/public/flag-us.png differ diff --git a/public/vercel.png b/public/vercel.png new file mode 100644 index 000000000..659ca11d0 Binary files /dev/null and b/public/vercel.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 2f842de51..b1d46ff6b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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', }, @@ -28,6 +31,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)', diff --git a/yarn.lock b/yarn.lock index d07b3dac1..012c0859c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6444,6 +6444,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== +pify@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" + integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= + pkg-dir@^4.1.0, pkg-dir@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3" @@ -6618,6 +6623,15 @@ postcss-image-set-function@^3.0.1: postcss "^7.0.2" postcss-values-parser "^2.0.0" +postcss-import@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-13.0.0.tgz#d6960cd9e3de5464743b04dd8cd9d870662f8b8c" + integrity sha512-LPUbm3ytpYopwQQjqgUH4S3EM/Gb9QsaSPP/5vnoi+oKVy3/mIk2sc0Paqw7RL57GpScm9MdIMUypw2znWiBpg== + dependencies: + postcss-value-parser "^4.0.0" + read-cache "^1.0.0" + resolve "^1.1.7" + postcss-initial@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.2.tgz#f018563694b3c16ae8eaabe3c585ac6319637b2d" @@ -6832,7 +6846,7 @@ postcss-value-parser@^3.3.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== -postcss-value-parser@^4.1.0: +postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== @@ -7144,6 +7158,13 @@ react@^16.14.0: object-assign "^4.1.1" prop-types "^15.6.2" +read-cache@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" + integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q= + dependencies: + pify "^2.3.0" + read-pkg-up@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507" @@ -7424,7 +7445,7 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo= -resolve@^1.10.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.8.1: +resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.8.1: version "1.18.1" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130" integrity sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA== @@ -8022,7 +8043,7 @@ symbol-observable@^1.0.4, symbol-observable@^1.1.0: resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== -tailwindcss@^1.8.10: +tailwindcss@^1.9: version "1.9.5" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.9.5.tgz#3339b790a68bc1f09a8efd8eb94cb05aed5235c2" integrity sha512-Je5t1fAfyW333YTpSxF+8uJwbnrkpyBskDtZYgSMMKQbNp6QUhEKJ4g/JIevZjD2Zidz9VxLraEUq/yWOx6nQg==