diff --git a/assets/global.css b/assets/global.css index f3579ae09..507d3fd82 100644 --- a/assets/global.css +++ b/assets/global.css @@ -1,6 +1,4 @@ @import './font.css'; -@tailwind base; -@tailwind components; :root { /* Spacing variables */ @@ -190,5 +188,3 @@ body { a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - -@tailwind utilities; diff --git a/assets/tailwind.css b/assets/tailwind.css new file mode 100644 index 000000000..605a9cef0 --- /dev/null +++ b/assets/tailwind.css @@ -0,0 +1,2 @@ +@tailwind base; +@tailwind components; diff --git a/assets/utils.css b/assets/utils.css new file mode 100644 index 000000000..65dd5f63a --- /dev/null +++ b/assets/utils.css @@ -0,0 +1 @@ +@tailwind utilities; diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css index b6a8858b1..17715c7dc 100644 --- a/components/cart/CartItem/CartItem.module.css +++ b/components/cart/CartItem/CartItem.module.css @@ -1,6 +1,6 @@ .quantity { appearance: textfield; - @apply w-6 border-gray-300 border mx-3 rounded text-center text-sm; + @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm; } .quantity::-webkit-outer-spin-button, diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 4b4d0f01d..94fbff5c9 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -1,4 +1,4 @@ -import { Trash } from '@components/icon' +import { Trash, Plus, Minus } from '@components/icon' import { useCommerce } from '@lib/bigcommerce' import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' @@ -57,27 +57,29 @@ const CartItem = ({ }, [item.quantity]) return ( -
  • +
  • -
    +
    {item.name} -
    +
    -
    +
    {price}
    - {isEmpty ? ( -

    - Your cart is currently empty -

    - ) : ( -

    - My Cart -

    - )} {isEmpty ? ( -
    - +
    + + + +

    + Your cart is empty. +

    +
    + ) : error ? ( +
    + + + +

    + We couldn’t process the purchase. Please check your card information + and try again. +

    +
    + ) : success ? ( +
    + + + +

    + Thank you for your order. +

    ) : ( <> -
    -
      +
      +

      + My Cart +

      +
        {items.map((item) => ( {
      - +
      )} - +
    ) } diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css index 54d8108bf..75ee278ba 100644 --- a/components/core/Featurebar/Featurebar.module.css +++ b/components/core/Featurebar/Featurebar.module.css @@ -1,13 +1,5 @@ -.root { - @apply py-4 px-6 bg-black text-white flex flex-row justify-center items-center; -} - -.title { - @apply text-white font-medium; -} - .separator { - @apply mx-3 bg-white; + @apply mx-3 bg-gray-400; width: 1px; height: 20px; } @@ -15,7 +7,3 @@ .separator:before { content: ''; } - -.description { - @apply text-white font-medium; -} diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index 7fa882d8a..035d0858c 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -9,12 +9,15 @@ interface Props { } const Featurebar: FC = ({ title, description, className }) => { - const rootClassName = cn(s.root, className) + const rootClassName = cn( + 'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium', + className + ) return (
    - {title} + {title} - {description} + {description}
    ) } diff --git a/components/core/Footer/Footer.module.css b/components/core/Footer/Footer.module.css deleted file mode 100644 index 573fa35bc..000000000 --- a/components/core/Footer/Footer.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.root { - @apply p-0 bg-black text-white; -} - -.container { - @apply flex justify-between items-center flex-row px-4 py-5; -} diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 536dc3006..fe5d0b056 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -1,7 +1,7 @@ import cn from 'classnames' import { FC } from 'react' -import s from './Footer.module.css' -import { Container, Logo } from '@components/ui' +import { Logo } from '@components/ui' +import Link from 'next/link' interface Props { className?: string @@ -9,56 +9,58 @@ interface Props { } const Footer: FC = ({ className }) => { - const rootClassName = cn(s.root, className) + const rootClassName = cn( + 'flex flex-col p-6 md:py-12 md:flex-row flex-wrap max-w-screen-xl m-auto', + className + ) return ( - +
    + +
    ) } diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index 98efa3824..5209aaa8a 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -15,7 +15,7 @@ interface Props { const CoreLayout: FC = ({ className, children }) => { const rootClassName = cn(s.root, className) - const { displaySidebar } = useUI() + const { displaySidebar, closeSidebar } = useUI() return (
    @@ -28,7 +28,7 @@ const CoreLayout: FC = ({ className, children }) => {
    {children}
    - +
    diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index 2b1ff03a6..cc242559f 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/components/core/Navbar/Navbar.module.css @@ -1,10 +1,3 @@ -.root { -} - -.container { - @apply flex justify-between items-center flex-row px-6 h-20 relative; -} - .link { - @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer; + @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-100 cursor-pointer; } diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index 1447a9f38..740054cf0 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -10,25 +10,40 @@ interface Props { } const Navbar: FC = ({ className }) => { - const rootClassName = cn(s.root, className) + const rootClassName = className return (
    -
    - - - - - -
    -
    diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css index fdb4ef62c..8a26653b5 100644 --- a/components/core/Searchbar/Searchbar.module.css +++ b/components/core/Searchbar/Searchbar.module.css @@ -1,13 +1,5 @@ -.root { - @apply px-4 items-center hidden md:flex; -} - -.container { - @apply relative rounded-lg flex flex-row text-sm items-center bg-accent-1; -} - .input { - @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-accent-1 placeholder-accent-4; + @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4 pr-10; min-width: 300px; } diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx index ef2d78240..47aeed316 100644 --- a/components/core/Searchbar/Searchbar.tsx +++ b/components/core/Searchbar/Searchbar.tsx @@ -8,22 +8,22 @@ interface Props { } const Searchbar: FC = ({ className }) => { - const rootClassName = cn(s.root, className) return ( -
    -
    -
    - -
    - - - -
    -
    +
    + +
    + + +
    ) diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index e2a2a0873..6a3cd956f 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -6,7 +6,11 @@ } .item { - @apply mr-6 cursor-pointer relative; + @apply mr-6 cursor-pointer relative transition ease-in-out duration-100; + + &:hover { + @apply text-gray-500; + } &:last-child { @apply mr-0; diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 8e4949ba1..da2aed245 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -16,17 +16,20 @@ const countItems = (count: number, items: any[]) => items.reduce(countItem, count) const UserNav: FC = ({ className }) => { - const { openSidebar } = useUI() + const { openSidebar, closeSidebar, displaySidebar } = useUI() const { data } = useCart() const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) return (