From 486d981fe075341d4a7bc54cf6a5197e1e5e8008 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Wed, 21 Oct 2020 11:14:01 -0300 Subject: [PATCH 01/32] remove layout code --- components/core/Layout/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index e6e45fb26..883ddd45b 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -33,12 +33,12 @@ const Layout: FC = ({ children, pageProps }) => { setAcceptedCookies(true)}> Accept cookies } - className={cn({ ['translate-y-full']: acceptedCookies })} /> From cd3a80a3816815102422633bb2035fab8f0210f4 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Wed, 21 Oct 2020 19:13:41 -0300 Subject: [PATCH 02/32] fix cookie mobile --- components/core/Featurebar/Featurebar.module.css | 9 --------- components/core/Featurebar/Featurebar.tsx | 10 +++++----- 2 files changed, 5 insertions(+), 14 deletions(-) delete mode 100644 components/core/Featurebar/Featurebar.module.css diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css deleted file mode 100644 index f8aa6ba4d..000000000 --- a/components/core/Featurebar/Featurebar.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.separator { - @apply mx-3 bg-secondary; - width: 1px; - height: 20px; -} - -.separator:before { - content: ''; -} diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index 0f77fece6..22d637113 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -1,6 +1,5 @@ import cn from 'classnames' import { FC } from 'react' -import s from './Featurebar.module.css' interface Props { className?: string @@ -18,15 +17,16 @@ const Featurebar: FC = ({ hide, }) => { const rootClassName = cn( - 'transition-transform transform duration-500 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}
) From c28b7589d3dfe1219fe3c50a5e6c360d7fdd802e Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Wed, 21 Oct 2020 19:32:22 -0300 Subject: [PATCH 03/32] add scaling animation --- components/product/ProductCard/ProductCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index dc04715c2..e64f79468 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -36,7 +36,7 @@ const ProductCard: FC = ({ className, product: p, variant }) => { >
From 8078c0b8326c401ef565a0de8049dc191c611ad4 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Wed, 21 Oct 2020 19:51:46 -0300 Subject: [PATCH 04/32] add different approach on hover animation --- .../ProductCard/ProductCard.module.css | 22 ++++++++++++++++++- .../product/ProductCard/ProductCard.tsx | 2 +- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index d0ea6d80c..a2edab7d0 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -35,6 +35,26 @@ &:nth-child(6n + 6) .wishlistButton { @apply bg-cyan text-white; } + + & .squareBg { + @apply bg-white; + } + + &:nth-child(6n + 1) .squareBg { + @apply bg-white; + } + + &:nth-child(6n + 5) .squareBg { + @apply bg-white; + } + + &:nth-child(6n + 3) .squareBg { + @apply bg-white; + } + + &:nth-child(6n + 6) .squareBg { + @apply bg-white; + } } &:nth-child(6n + 1) .squareBg { @@ -58,7 +78,7 @@ .productTitle > span, .productPrice, .wishlistButton { - @apply transition ease-in-out duration-300; + @apply transition ease-in-out duration-500; } .squareBg { diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index e64f79468..7c0a15573 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -36,7 +36,7 @@ const ProductCard: FC = ({ className, product: p, variant }) => { >
From cf3d5323c4a869765a4090f7fc0aa44231bc05b3 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Wed, 21 Oct 2020 19:58:36 -0300 Subject: [PATCH 05/32] replace colors --- assets/global.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/global.css b/assets/global.css index 4d3d23402..e147ef27a 100644 --- a/assets/global.css +++ b/assets/global.css @@ -14,12 +14,12 @@ --hover: rgba(0, 0, 0, 0.075); - --cyan: #50e3c2; + --cyan: #22b8cf; --green: #37b679; --red: #da3c3c; - --pink: #ff0080; + --pink: #e64980; --purple: #f81ce5; - --violet: #7928ca; + --violet: #5f3dc4; --blue: #0070f3; --accents-0: #f8f9fa; From 1eb8c48f2e41163f54ad09149ebce5d8174a208d Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Wed, 21 Oct 2020 20:14:44 -0300 Subject: [PATCH 06/32] move theme switcher --- components/core/Navbar/Navbar.tsx | 12 +++--------- components/core/UserNav/UserNav.module.css | 2 +- components/core/UserNav/UserNav.tsx | 15 ++++++++++++++- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index 39e22eb17..db3e8f1ae 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -1,16 +1,16 @@ 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, Toggle, UserNav } from '@components/core' +import { Searchbar, UserNav } from '@components/core' + interface Props { className?: string } const Navbar: FC = ({ className }) => { const rootClassName = className - const { theme, setTheme } = useTheme() + return (
@@ -38,12 +38,6 @@ const Navbar: FC = ({ className }) => {
- - theme === 'dark' ? setTheme('light') : setTheme('dark') - } - />
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index 530cea1ae..c187c9001 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -26,6 +26,6 @@ } & .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; + @apply px-6 py-3 flex items-center 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 b25ffee6c..49a355c93 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -1,10 +1,11 @@ import { FC, useState } from 'react' import cn from 'classnames' import useCart from '@lib/bigcommerce/cart/use-cart' -import { Avatar } from '@components/core' +import { Avatar, Toggle } from '@components/core' import { Heart, Bag } from '@components/icon' import { useUI } from '@components/ui/context' import s from './UserNav.module.css' +import { useTheme } from 'next-themes' import Link from 'next/link' interface Props { className?: string @@ -17,6 +18,7 @@ const countItems = (count: number, items: any[]) => const UserNav: FC = ({ className }) => { const { data } = useCart() + const { theme, setTheme } = useTheme() const [displayDropdown, setDisplayDropdown] = useState(false) const { openSidebar, closeSidebar, displaySidebar } = useUI() const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) @@ -59,6 +61,17 @@ const UserNav: FC = ({ className }) => { My Account + + + Theme + + + theme === 'dark' ? setTheme('light') : setTheme('dark') + } + /> + Logout From 8d1901241ee3e06493599cfd12aa40f64ea184b4 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Thu, 22 Oct 2020 11:20:29 -0300 Subject: [PATCH 07/32] add textured bg --- .../ProductCard/ProductCard.module.css | 28 ++++++++++++++++--- .../product/ProductCard/ProductCard.tsx | 2 +- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index a2edab7d0..442422eee 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -3,7 +3,27 @@ &:hover { & .squareBg { - @apply scale-75; + background-color: var(--violet); + background: radial-gradient( + circle, + transparent 20%, + var(--violet) 20%, + var(--violet) 80%, + transparent 80%, + transparent + ), + radial-gradient( + circle, + transparent 20%, + var(--violet) 20%, + var(--violet) 80%, + transparent 80%, + transparent + ) + 50px 50px, + linear-gradient(red 4px, transparent 4px) 0 -2px, + linear-gradient(90deg, red 4px, var(--violet) 4px) -2px 0; + background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px; } & .productTitle > span, @@ -36,7 +56,7 @@ @apply bg-cyan text-white; } - & .squareBg { + /* & .squareBg { @apply bg-white; } @@ -54,7 +74,7 @@ &:nth-child(6n + 6) .squareBg { @apply bg-white; - } + } */ } &:nth-child(6n + 1) .squareBg { @@ -122,5 +142,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 7c0a15573..90ba7b79a 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -36,7 +36,7 @@ const ProductCard: FC = ({ className, product: p, variant }) => { >
From ef406cfaf6f4bec300bb5d976d4cd9bb409d74d8 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Thu, 22 Oct 2020 11:53:35 -0300 Subject: [PATCH 08/32] add bg pattern --- .../ProductCard/ProductCard.module.css | 43 +------------------ .../product/ProductCard/ProductCard.tsx | 2 +- 2 files changed, 3 insertions(+), 42 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 442422eee..a531855fd 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -3,27 +3,7 @@ &:hover { & .squareBg { - background-color: var(--violet); - background: radial-gradient( - circle, - transparent 20%, - var(--violet) 20%, - var(--violet) 80%, - transparent 80%, - transparent - ), - radial-gradient( - circle, - transparent 20%, - var(--violet) 20%, - var(--violet) 80%, - transparent 80%, - transparent - ) - 50px 50px, - linear-gradient(red 4px, transparent 4px) 0 -2px, - linear-gradient(90deg, red 4px, var(--violet) 4px) -2px 0; - background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px; + transform: scale(1.05); } & .productTitle > span, @@ -55,26 +35,6 @@ &:nth-child(6n + 6) .wishlistButton { @apply bg-cyan text-white; } - - /* & .squareBg { - @apply bg-white; - } - - &:nth-child(6n + 1) .squareBg { - @apply bg-white; - } - - &:nth-child(6n + 5) .squareBg { - @apply bg-white; - } - - &:nth-child(6n + 3) .squareBg { - @apply bg-white; - } - - &:nth-child(6n + 6) .squareBg { - @apply bg-white; - } */ } &:nth-child(6n + 1) .squareBg { @@ -103,6 +63,7 @@ .squareBg { @apply transform absolute inset-0 z-0 bg-secondary; + background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.3' x1='9.41421' y1='7' x2='21' y2='18.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 7)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .simple { diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 90ba7b79a..39889130b 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -36,7 +36,7 @@ const ProductCard: FC = ({ className, product: p, variant }) => { >
From a0720a2ee91b23866a377ff48f40eed63f830cd4 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Thu, 22 Oct 2020 12:04:22 -0300 Subject: [PATCH 09/32] fix the scale --- components/product/ProductCard/ProductCard.module.css | 8 ++++++++ components/product/ProductCard/ProductCard.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index a531855fd..6606f748e 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -6,6 +6,10 @@ transform: scale(1.05); } + & .product-image { + @apply scale-90; + } + & .productTitle > span, & .productPrice, & .wishlistButton { @@ -37,6 +41,10 @@ } } + & .product-image { + @apply transform transition-transform duration-500; + } + &:nth-child(6n + 1) .squareBg { @apply bg-violet; } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 39889130b..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 }) => { >
From dd08b0946be7e6c6855cc1903f3a958e2a71b78d Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 22 Oct 2020 12:08:50 -0300 Subject: [PATCH 10/32] Changes --- .../core/UserNav/DropdownMenu.module.css | 10 +- components/core/UserNav/DropdownMenu.tsx | 92 ++++++++----------- components/core/UserNav/UserNav.module.css | 2 +- components/core/UserNav/UserNav.tsx | 32 +++++-- components/icon/Moon.tsx | 1 + components/icon/Sun.tsx | 1 + 6 files changed, 67 insertions(+), 71 deletions(-) diff --git a/components/core/UserNav/DropdownMenu.module.css b/components/core/UserNav/DropdownMenu.module.css index ee30070d2..884bab67b 100644 --- a/components/core/UserNav/DropdownMenu.module.css +++ b/components/core/UserNav/DropdownMenu.module.css @@ -1,9 +1,9 @@ .dropdownMenu { - @apply fixed top-0 right-0 z-20 w-full h-full; + @apply fixed pt-6 right-0 z-20 w-full h-full; @screen lg { @apply absolute right-0 w-screen; - max-width: 200px; + max-width: 185px; } & .dropdownMenuContainer { @@ -15,12 +15,8 @@ } & .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..c7e247501 100644 --- a/components/core/UserNav/DropdownMenu.tsx +++ b/components/core/UserNav/DropdownMenu.tsx @@ -1,74 +1,60 @@ -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 } from '@headlessui/react' interface DropdownMenuProps { onClose: () => void - innerRef: React.MutableRefObject } const DropdownMenu: FC = ({ onClose, children, - innerRef, + ...props }) => { const { theme, setTheme } = useTheme() - - let { overlayProps } = useOverlay( - { - isDismissable: true, - onClose: onClose, - isOpen: true, - }, - innerRef - ) - - usePreventScroll() return ( - - - + )} + + + ) } diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index 9753b23c3..96926796b 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/components/core/UserNav/UserNav.module.css @@ -13,7 +13,7 @@ @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center; &:hover { - @apply text-accents-8 transition ease-in-out duration-100 transform scale-110; + @apply text-accents-8; } &.heart:hover svg { diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 738793cf5..3d07f0b5a 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -7,7 +7,7 @@ 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 useCart from '@lib/bigcommerce/cart/use-cart' interface Props { @@ -52,18 +52,30 @@ const UserNav: FC = ({ className, children, ...props }) => { -
  • (displayDropdown ? closeDropdown() : openDropdown())} - > - +
  • + + {({ open }) => ( + <> + + + + + + + + )} +
  • - - {displayDropdown && ( - - )} ) } 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} > From b488afe519523ab039b01284567d140e9e9cb5d5 Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Thu, 22 Oct 2020 12:18:09 -0300 Subject: [PATCH 11/32] lower pattern opacity --- components/product/ProductCard/ProductCard.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 6606f748e..919dedbf0 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -71,7 +71,7 @@ .squareBg { @apply transform absolute inset-0 z-0 bg-secondary; - background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.3' x1='9.41421' y1='7' x2='21' y2='18.5858' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(-0.707107 0.707107 0.707107 0.707107 40 7)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='1' y1='-1' x2='17.3848' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 8 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.3' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='7' x2='21' y2='18.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 7)' 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 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .simple { From 9c28486170194ddf72c6bad35201537e0076257c Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Thu, 22 Oct 2020 12:22:25 -0300 Subject: [PATCH 12/32] fix padding on y axis --- components/product/ProductCard/ProductCard.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 919dedbf0..0129abdf1 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -71,7 +71,7 @@ .squareBg { @apply transform absolute inset-0 z-0 bg-secondary; - background-image: url("data:image/svg+xml,%3Csvg width='48' height='44' viewBox='0 0 48 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline opacity='0.1' x1='9.41421' y1='7' x2='21' y2='18.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 7)' 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 37)' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline opacity='0.1' x1='38.5858' y1='37' x2='27' y2='25.4142' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + 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 { From 7d4b11d2041aa09da2dbe73916ed8f385d8e5d68 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 22 Oct 2020 12:53:49 -0300 Subject: [PATCH 13/32] Changes --- .../core/UserNav/DropdownMenu.module.css | 13 ++---------- components/core/UserNav/DropdownMenu.tsx | 21 ++++++++++++++----- components/core/UserNav/UserNav.tsx | 15 ++----------- components/ui/Modal/Modal.tsx | 8 +------ 4 files changed, 21 insertions(+), 36 deletions(-) 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..e1cdac125 100644 --- a/components/core/UserNav/DropdownMenu.tsx +++ b/components/core/UserNav/DropdownMenu.tsx @@ -4,21 +4,32 @@ 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() return ( - + ) } diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 3d07f0b5a..2f0d4925d 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 { @@ -59,17 +58,7 @@ const UserNav: FC = ({ className, children, ...props }) => { - - - + )} diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx index c9a0bc0c3..97f750efd 100644 --- a/components/ui/Modal/Modal.tsx +++ b/components/ui/Modal/Modal.tsx @@ -2,13 +2,7 @@ import cn from 'classnames' import { FC, useRef } from 'react' import s from './Modal.module.css' import { useDialog } from '@react-aria/dialog' -import { - useOverlay, - usePreventScroll, - useModal, - OverlayProvider, - OverlayContainer, -} from '@react-aria/overlays' +import { useOverlay, usePreventScroll, useModal } from '@react-aria/overlays' import { FocusScope } from '@react-aria/focus' interface Props { From 7e73f00860c20552985b25fcc09d21dee5d379e1 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 22 Oct 2020 12:59:47 -0300 Subject: [PATCH 14/32] Changes Scroll --- components/core/Footer/Footer.tsx | 2 +- components/core/UserNav/DropdownMenu.tsx | 6 +++++- public/us-flag.png | Bin 0 -> 762 bytes 3 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 public/us-flag.png diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 55f855429..26f1b010c 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -24,7 +24,7 @@ const Footer: FC = ({ className, pages }) => {