diff --git a/assets/global.css b/assets/base.css similarity index 95% rename from assets/global.css rename to assets/base.css index e147ef27a..af58c1b0f 100644 --- a/assets/global.css +++ b/assets/base.css @@ -1,5 +1,3 @@ -@import './font.css'; - :root { --primary: white; --primary-2: #f1f3f5; @@ -58,10 +56,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/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 55f855429..83bde14b0 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -3,7 +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 { Logo, Container } from '@components/ui' +import { Github } from '@components/icon' interface Props { className?: string @@ -14,53 +15,93 @@ 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/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css index 884bab67b..ad0903df5 100644 --- a/components/core/UserNav/DropdownMenu.module.css +++ b/components/core/UserNav/DropdownMenu.module.css @@ -1,17 +1,8 @@ .dropdownMenu { - @apply fixed pt-6 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: 185px; - } - - & .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 { diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx index c7e247501..61f8d4ca2 100644 --- a/components/core/UserNav/DropdownMenu.tsx +++ b/components/core/UserNav/DropdownMenu.tsx @@ -4,21 +4,36 @@ import { useTheme } from 'next-themes' import cn from 'classnames' import s from './DropdownMenu.module.css' import { Moon, Sun } from '@components/icon' -import { Menu } from '@headlessui/react' +import { Menu, Transition } from '@headlessui/react' +import { usePreventScroll } from '@react-aria/overlays' interface DropdownMenuProps { onClose: () => void + open: boolean } const DropdownMenu: FC = ({ onClose, children, - + open = false, ...props }) => { const { theme, setTheme } = useTheme() + + usePreventScroll({ + isDisabled: !open, + }) + return ( - + ) } diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 3d07f0b5a..bf5a5a4b2 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, Transition } from '@headlessui/react' +import { Menu } from '@headlessui/react' import useCart from '@lib/bigcommerce/cart/use-cart' interface Props { @@ -56,20 +55,10 @@ const UserNav: FC = ({ className, children, ...props }) => { {({ open }) => ( <> - + - - - + )} diff --git a/components/icon/DoubleChevron.tsx b/components/icon/DoubleChevron.tsx new file mode 100644 index 000000000..a26cb755e --- /dev/null +++ b/components/icon/DoubleChevron.tsx @@ -0,0 +1,22 @@ +const Sun = ({ ...props }) => { + return ( + + + + ) +} + +export default Sun 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/index.ts b/components/icon/index.ts index 929003d6f..399ae4f5b 100644 --- a/components/icon/index.ts +++ b/components/icon/index.ts @@ -8,3 +8,4 @@ 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' diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index c17ad9565..a1e5df481 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; 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%; } @@ -55,9 +55,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..16d333a0c 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 @@ -130,7 +130,7 @@ const ProductView: FC = ({ product, className }) => { ))}