From 12327d1a75d19562e61cbe183794825dd3ed7ed1 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Tue, 8 Dec 2020 10:27:15 -0300 Subject: [PATCH 1/8] Hover State --- .gitignore | 5 ++++- components/product/ProductCard/ProductCard.module.css | 11 ++++------- components/product/ProductCard/ProductCard.tsx | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index b5232955b..640afa9c9 100644 --- a/.gitignore +++ b/.gitignore @@ -31,4 +31,7 @@ yarn-error.log* .env.production.local # vercel -.vercel \ No newline at end of file +.vercel + +# dev +framework diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 039643abb..57a23512d 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -9,8 +9,8 @@ transform: scale(0.98); } - & .product-image { - transform: scale(1.05); + & .productImage { + transform: scale(1.2725); } & .productTitle > span, @@ -44,10 +44,6 @@ } } - & .product-image { - @apply transform transition-transform duration-500; - } - &:nth-child(6n + 1) .squareBg { @apply bg-violet; } @@ -135,7 +131,8 @@ } } -.image { +.productImage { + @apply transform transition-transform duration-500; object-fit: cover; transform: scale(1.2); } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 3cd288c7c..0a1a712d1 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -82,7 +82,7 @@ const ProductCard: FC = ({ quality="85" src={src} alt={p.name} - className={s.image} + className={s.productImage} width={imgWidth} sizes={imgSizes} height={imgHeight} From 57627df590b272aa997e0c64f585489bd8bdfb00 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Tue, 8 Dec 2020 10:29:45 -0300 Subject: [PATCH 2/8] Hover State --- components/product/ProductCard/ProductCard.module.css | 4 +--- tailwind.config.js | 3 +++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 57a23512d..0dc51d4f3 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -132,7 +132,5 @@ } .productImage { - @apply transform transition-transform duration-500; - object-fit: cover; - transform: scale(1.2); + @apply transform transition-transform duration-500 object-cover scale-120; } diff --git a/tailwind.config.js b/tailwind.config.js index 62c598137..4a9e6549a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -51,6 +51,9 @@ module.exports = { }, lineHeight: { 'extra-loose': '2.2' + }, + scale: { + '120': '1.2', } }, }, From 4d4e4f667ee2ee7837a4a8630e8428b1dc0e9027 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Tue, 8 Dec 2020 10:31:37 -0300 Subject: [PATCH 3/8] Hover State --- components/product/ProductCard/ProductCard.module.css | 2 +- components/product/ProductCard/ProductCard.tsx | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 0dc51d4f3..1484cfaa4 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -10,7 +10,7 @@ } & .productImage { - transform: scale(1.2725); + transform: scale(1.2625); } & .productTitle > span, diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 0a1a712d1..449647c74 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -1,12 +1,13 @@ -import type { FC } from 'react' import cn from 'classnames' import Link from 'next/link' -import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products' -import usePrice from '@bigcommerce/storefront-data-hooks/use-price' import Image from 'next/image' +import type { FC } from 'react' import s from './ProductCard.module.css' import WishlistButton from '@components/wishlist/WishlistButton' +import usePrice from '@bigcommerce/storefront-data-hooks/use-price' +import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products' + interface Props { className?: string product: ProductNode From 60368e885855e08b941e3d8639494b907cf580a5 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Tue, 8 Dec 2020 10:43:44 -0300 Subject: [PATCH 4/8] Changes --- components/common/Layout/Layout.tsx | 7 ++++--- components/ui/Button/Button.tsx | 5 +++-- lib/hooks/useAcceptCookies.ts | 6 ++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx index 158f63068..14c07860a 100644 --- a/components/common/Layout/Layout.tsx +++ b/components/common/Layout/Layout.tsx @@ -6,11 +6,12 @@ import React, { FC } from 'react' import { useUI } from '@components/ui/context' import { Navbar, Footer } from '@components/common' import { useAcceptCookies } from '@lib/hooks/useAcceptCookies' -import { CommerceProvider } from '@bigcommerce/storefront-data-hooks' import { Sidebar, Button, Modal, LoadingDots } from '@components/ui' -import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages' import { CartSidebarView } from '@components/cart' +import { CommerceProvider } from '@bigcommerce/storefront-data-hooks' +import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages' + const Loading = () => (
@@ -76,7 +77,7 @@ const Layout: FC = ({ children, pageProps }) => { title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy." hide={acceptedCookies} action={ - } diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx index e7f3d89c1..ca5db36a6 100644 --- a/components/ui/Button/Button.tsx +++ b/components/ui/Button/Button.tsx @@ -27,12 +27,12 @@ const Button: React.FC = forwardRef((props, buttonRef) => { variant = 'flat', children, active, - onClick, width, - Component = 'button', loading = false, disabled = false, style = {}, + Component = 'button', + ...rest } = props const ref = useRef(null) @@ -57,6 +57,7 @@ const Button: React.FC = forwardRef((props, buttonRef) => { width, ...style, }} + {...rest} > {children} {loading && ( diff --git a/lib/hooks/useAcceptCookies.ts b/lib/hooks/useAcceptCookies.ts index 2ba130abc..7f33adf47 100644 --- a/lib/hooks/useAcceptCookies.ts +++ b/lib/hooks/useAcceptCookies.ts @@ -1,5 +1,5 @@ -import { useEffect, useState } from 'react' import Cookies from 'js-cookie' +import { useEffect, useState } from 'react' const COOKIE_NAME = 'accept_cookies' @@ -14,9 +14,7 @@ export const useAcceptCookies = () => { const acceptCookies = () => { setAcceptedCookies(true) - Cookies.set(COOKIE_NAME, 'accepted', { - expires: 365, - }) + Cookies.set(COOKIE_NAME, 'accepted', { expires: 365 }) } return { From b67b87c4fe7d3a2e5e34d5c2e150d65ee24fa461 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Tue, 8 Dec 2020 11:10:34 -0300 Subject: [PATCH 5/8] Fixing clickOutside --- components/common/UserNav/DropdownMenu.tsx | 12 +++++++++--- lib/click-outside/click-outside.tsx | 17 +++++------------ public/vercel.svg | 14 +++++++------- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/components/common/UserNav/DropdownMenu.tsx b/components/common/UserNav/DropdownMenu.tsx index fb3ddc7de..0c47158db 100644 --- a/components/common/UserNav/DropdownMenu.tsx +++ b/components/common/UserNav/DropdownMenu.tsx @@ -8,6 +8,7 @@ import { Avatar } from '@components/common' import { Moon, Sun } from '@components/icons' import { useUI } from '@components/ui/context' import ClickOutside from '@lib/click-outside' + import { disableBodyScroll, enableBodyScroll, @@ -15,6 +16,7 @@ import { } from 'body-scroll-lock' import useLogout from '@bigcommerce/storefront-data-hooks/use-logout' + interface DropdownMenuProps { open?: boolean } @@ -75,7 +77,10 @@ const DropdownMenu: FC = ({ open = false }) => { className={cn(s.link, { [s.active]: pathname === href, })} - onClick={closeSidebarIfPresent} + onClick={() => { + setDisplay(false) + closeSidebarIfPresent() + }} > {name} @@ -86,9 +91,10 @@ const DropdownMenu: FC = ({ open = false }) => {
  • + onClick={() => { theme === 'dark' ? setTheme('light') : setTheme('dark') - } + setDisplay(false) + }} >
    Theme: {theme}{' '} diff --git a/lib/click-outside/click-outside.tsx b/lib/click-outside/click-outside.tsx index d3bba953c..268fc13d9 100644 --- a/lib/click-outside/click-outside.tsx +++ b/lib/click-outside/click-outside.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useEffect, Ref, MouseEvent } from 'react' +import React, { useRef, useEffect, MouseEvent } from 'react' import hasParent from './has-parent' interface ClickOutsideProps { @@ -7,18 +7,12 @@ interface ClickOutsideProps { children: any } -const ClickOutside = forwardRef( - ( - { active = true, onClick, children }: ClickOutsideProps, - ref: Ref | null | any = {} - ) => { - const innerRef = ref?.current +const ClickOutside = ({ active = true, onClick, children }: ClickOutsideProps) => { + const innerRef = useRef() const handleClick = (event: any) => { - if (!hasParent(event.target, innerRef)) { + if (!hasParent(event.target, innerRef?.current)) { if (typeof onClick === 'function') { - event.preventDefault() - event.stopImmediatePropagation() onClick(event) } } @@ -38,8 +32,7 @@ const ClickOutside = forwardRef( } }) - return React.cloneElement(children, { ref }) + return React.cloneElement(children, { ref: innerRef }) } -) export default ClickOutside diff --git a/public/vercel.svg b/public/vercel.svg index 5f387a32d..c0a8ee464 100644 --- a/public/vercel.svg +++ b/public/vercel.svg @@ -1,9 +1,9 @@ - - - - - - - + + + + + + + From 70030882d4429ab390aea7f42393b18445e8f4f2 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Tue, 8 Dec 2020 11:14:48 -0300 Subject: [PATCH 6/8] Logo Changes --- components/common/Footer/Footer.tsx | 12 ++++-------- components/icons/Vercel.tsx | 16 ++++++++++++++++ components/icons/index.ts | 1 + 3 files changed, 21 insertions(+), 8 deletions(-) create mode 100644 components/icons/Vercel.tsx diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx index 55ed5289d..c32b1268f 100644 --- a/components/common/Footer/Footer.tsx +++ b/components/common/Footer/Footer.tsx @@ -4,7 +4,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages' import getSlug from '@lib/get-slug' -import { Github } from '@components/icons' +import { Github, Vercel } from '@components/icons' import { Logo, Container } from '@components/ui' import { I18nWidget } from '@components/common' import s from './Footer.module.css' @@ -99,14 +99,10 @@ const Footer: FC = ({ className, pages }) => {
    © 2020 ACME, Inc. All rights reserved.
    -     diff --git a/components/icons/Vercel.tsx b/components/icons/Vercel.tsx new file mode 100644 index 000000000..8e8f6457d --- /dev/null +++ b/components/icons/Vercel.tsx @@ -0,0 +1,16 @@ +const Vercel = ({ ...props }) => { + return ( + + + + + + + + + + + ) +} + +export default Vercel diff --git a/components/icons/index.ts b/components/icons/index.ts index e72660e83..6e57ab0e8 100644 --- a/components/icons/index.ts +++ b/components/icons/index.ts @@ -13,3 +13,4 @@ export { default as DoubleChevron } from './DoubleChevron' export { default as RightArrow } from './RightArrow' export { default as Info } from './Info' export { default as ChevronUp } from './ChevronUp' +export { default as Vercel } from './Vercel' From 5699e2b166ca08b0c2603b31fe13e320d2fb5ce5 Mon Sep 17 00:00:00 2001 From: Bel Curcio Date: Tue, 8 Dec 2020 11:16:44 -0300 Subject: [PATCH 7/8] Logo Changes --- components/common/I18nWidget/I18nWidget.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/common/I18nWidget/I18nWidget.tsx b/components/common/I18nWidget/I18nWidget.tsx index 92b40322d..995e1faee 100644 --- a/components/common/I18nWidget/I18nWidget.tsx +++ b/components/common/I18nWidget/I18nWidget.tsx @@ -1,6 +1,6 @@ import cn from 'classnames' import Link from 'next/link' -import { useRef, FC, useState } from 'react' +import { FC, useState } from 'react' import { useRouter } from 'next/router' import s from './I18nWidget.module.css' import { Cross, ChevronUp } from '@components/icons' @@ -41,10 +41,9 @@ const I18nWidget: FC = () => { const options = locales?.filter((val) => val !== locale) const currentLocale = locale || defaultLocale - const ref = useRef(null) return ( - setDisplay(false)} ref={ref}> + setDisplay(false)} >