diff --git a/assets/global.css b/assets/base.css similarity index 95% rename from assets/global.css rename to assets/base.css index 4d3d23402..9cfd1cf0b 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 26f1b010c..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.tsx b/components/core/UserNav/DropdownMenu.tsx index 13e2adfc4..61f8d4ca2 100644 --- a/components/core/UserNav/DropdownMenu.tsx +++ b/components/core/UserNav/DropdownMenu.tsx @@ -26,7 +26,7 @@ const DropdownMenu: FC = ({ return ( = ({ 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 }) => { ))}