From c2788c256b5df1b7296232143b0e5b22c998c7ce Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 21 Oct 2020 11:23:42 -0300 Subject: [PATCH 1/5] Reordering --- .../ProductCard/ProductCard.module.css | 19 +++++++++++++------ .../product/ProductCard/ProductCard.tsx | 12 +++++++----- components/ui/Grid/Grid.module.css | 3 ++- 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 7846da50e..b7fd0aa35 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -65,23 +65,30 @@ @apply transform absolute inset-0 z-0 bg-secondary; } -.squareBg.gray { - @apply bg-gray-300 !important; +.simple { + & .squareBg { + @apply bg-gray-300 !important; + } } .productTitle { - line-height: 40px; - width: 18vw; + @apply pt-4 leading-8; + box-sizing: border-box; + width: 17vw; + margin-top: -1.2rem; & span { - @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold; + @apply inline p-4 bg-primary text-primary font-bold; + font-size: inherit; + line-height: inherit; + letter-spacing: 0.4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } } .productPrice { - @apply px-3 py-1 pb-2 bg-primary text-base font-semibold inline-block text-sm leading-6; + @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6; } .wishlistButton { diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index cae070fbd..dc04715c2 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -31,19 +31,21 @@ const ProductCard: FC = ({ className, product: p, variant }) => { return ( - +
-
+
-
-

+

+

{p.name} -

+

${p.prices?.price.value}
diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css index a61c42b80..15f775f9b 100644 --- a/components/ui/Grid/Grid.module.css +++ b/components/ui/Grid/Grid.module.css @@ -20,9 +20,10 @@ } .layoutNormal { - @apply gap-6; + @apply gap-3; & > * { + font-size: 1.5rem; min-height: 325px; } } From f530f7d59747f1d88781de639a5bb5a6d6124722 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 21 Oct 2020 11:36:38 -0300 Subject: [PATCH 2/5] Changes to the headings --- .../ProductCard/ProductCard.module.css | 20 ++++++++++++++----- components/ui/Container/Container.tsx | 2 +- components/ui/Grid/Grid.module.css | 1 - pages/search.tsx | 3 ++- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index b7fd0aa35..d0ea6d80c 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -69,19 +69,28 @@ & .squareBg { @apply bg-gray-300 !important; } + + & .productTitle { + width: 18vw; + margin-top: -7px; + font-size: 1rem; + } + + & .productPrice { + @apply text-sm; + } } .productTitle { @apply pt-4 leading-8; - box-sizing: border-box; - width: 17vw; - margin-top: -1.2rem; + width: 400px; + font-size: 2rem; + letter-spacing: 0.4px; & span { @apply inline p-4 bg-primary text-primary font-bold; font-size: inherit; - line-height: inherit; - letter-spacing: 0.4px; + letter-spacing: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; } @@ -89,6 +98,7 @@ .productPrice { @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6; + letter-spacing: 0.4px; } .wishlistButton { diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx index fa3c725f0..b8e07ee07 100644 --- a/components/ui/Container/Container.tsx +++ b/components/ui/Container/Container.tsx @@ -8,7 +8,7 @@ interface Props { } const Container: FC = ({ children, className, el = 'div' }) => { - const rootClassName = cn('mx-auto max-w-7xl px-6 md:px-12', className) + const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className) let Component: React.ComponentType * { - font-size: 1.5rem; min-height: 325px; } } diff --git a/pages/search.tsx b/pages/search.tsx index be2b28ee2..15f1b1ba0 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -59,7 +59,7 @@ export default function Search({ return ( -
+ -
+
From 9d8db18c3883d354ca90c41671d01d62119b02be Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 21 Oct 2020 11:57:22 -0300 Subject: [PATCH 4/5] UI tweaks --- components/product/ProductView/ProductView.module.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index e86769c44..99346db11 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -37,7 +37,9 @@ @apply absolute top-6 left-0 z-50; & .name { - @apply px-6 py-2 bg-primary text-primary font-bold text-3xl; + @apply px-6 py-2 bg-primary text-primary font-bold; + font-size: 2rem; + letter-spacing: 0.4px; } & .price { From 1b800807629f457d30115545eb6ce171d0a3eccc Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 21 Oct 2020 12:17:26 -0300 Subject: [PATCH 5/5] Added dropdown --- components/core/UserNav/UserNav.module.css | 9 +++++++ components/core/UserNav/UserNav.tsx | 28 ++++++++++++++++++++-- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index 21b149f80..d6a8e296e 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -15,3 +15,12 @@ @apply mr-0; } } + +.dropdownMenu { + @apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1; + max-width: 160px; + + & .link { + @apply 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; + } +} diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 812c2a413..e005f625a 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react' +import { FC, useState } from 'react' import cn from 'classnames' import useCart from '@lib/bigcommerce/cart/use-cart' import { Avatar } from '@components/core' @@ -17,6 +17,7 @@ const countItems = (count: number, items: any[]) => const UserNav: FC = ({ className }) => { const { data } = useCart() + const [displayDropdown, setDisplayDropdown] = useState(false) const { openSidebar, closeSidebar, displaySidebar } = useUI() const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) @@ -39,10 +40,33 @@ const UserNav: FC = ({ className }) => { -
  • +
  • { + setDisplayDropdown((i) => !i) + }} + >
    • + + {displayDropdown && ( +
    +
    + +
    +
    + )} ) }