From c22789176da34b04d97cf4a16b1c3b801acc6293 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Wed, 21 Oct 2020 18:32:32 -0300 Subject: [PATCH 01/24] sticky nav, better dropdown exit --- components/core/Layout/Layout.tsx | 32 +++++++++++++-- components/core/UserNav/UserNav.tsx | 40 ++++++++++++++++--- .../ProductView/ProductView.module.css | 2 +- tailwind.config.js | 4 ++ 4 files changed, 67 insertions(+), 11 deletions(-) diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index e6e45fb26..f2deda1ee 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react' +import { FC, useEffect, useState } from 'react' import cn from 'classnames' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import { CommerceProvider } from '@lib/bigcommerce' @@ -18,13 +18,37 @@ interface Props { const Layout: FC = ({ children, pageProps }) => { const { displaySidebar, closeSidebar } = useUI() const [acceptedCookies, setAcceptedCookies] = useState(false) + const [hasScrolled, setHasScrolled] = useState(false) + + useEffect(() => { + const offset = 0 + function handleScroll() { + const { scrollTop } = document.documentElement + if (scrollTop > offset) setHasScrolled(true) + else setHasScrolled(false) + } + document.addEventListener('scroll', handleScroll) + + return () => { + document.removeEventListener('scroll', handleScroll) + } + }, []) return (
- - - +
+ + + +
{children}
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index b25ffee6c..772ff6c33 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react' +import { FC, useEffect, useState } from 'react' import cn from 'classnames' import useCart from '@lib/bigcommerce/cart/use-cart' import { Avatar } from '@components/core' @@ -21,6 +21,30 @@ const UserNav: FC = ({ className }) => { const { openSidebar, closeSidebar, displaySidebar } = useUI() const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) + useEffect(() => { + function handleClick(e: any) { + const isInside = e?.target?.closest(`#user-dropdown`) !== null + if (isInside) return + setDisplayDropdown(false) + document.removeEventListener('click', handleClick) + } + function handleKeyPress(e: KeyboardEvent) { + if (e.key === 'Escape') { + setDisplayDropdown(false) + document.removeEventListener('keydown', handleKeyPress) + } + } + + if (displayDropdown) { + document.addEventListener('click', handleClick) + document.addEventListener('keydown', handleKeyPress) + return () => { + document.removeEventListener('click', handleClick) + document.removeEventListener('keydown', handleKeyPress) + } + } + }, [displayDropdown]) + return (
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index f2deda1ee..2fac3764c 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -39,10 +39,8 @@ const Layout: FC = ({ children, pageProps }) => {
diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index c2dedc9be..5abeb32e0 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/components/core/Navbar/Navbar.module.css @@ -1,3 +1,3 @@ .link { - @apply group text-base inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-100 cursor-pointer; + @apply group inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-150 cursor-pointer; } diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx index a2fe85f18..25f6eb7a8 100644 --- a/components/core/Searchbar/Searchbar.tsx +++ b/components/core/Searchbar/Searchbar.tsx @@ -17,7 +17,7 @@ const Searchbar: FC = ({ className }) => { return (
diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx index d33d3c371..0f944a90b 100644 --- a/components/core/Toggle/Toggle.tsx +++ b/components/core/Toggle/Toggle.tsx @@ -9,7 +9,11 @@ interface Props { const Toggle: FC = ({ className, checked, onChange }) => { return ( - + span, .productPrice, .wishlistButton { - @apply transition ease-in-out duration-300; + @apply transition ease-in-out duration-150; } .squareBg { diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css index cd6bd4b83..ae37771ad 100644 --- a/components/product/Swatch/Swatch.module.css +++ b/components/product/Swatch/Swatch.module.css @@ -1,6 +1,6 @@ .root { @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex - items-center justify-center cursor-pointer transition duration-100 ease-in-out + items-center justify-center cursor-pointer transition duration-150 ease-in-out p-0 shadow-none border-gray-200 border box-border; & > span { @@ -13,7 +13,7 @@ } .color { - @apply text-black transition duration-100 ease-in-out; + @apply text-black transition duration-150 ease-in-out; &:hover { @apply text-black; diff --git a/pages/index.tsx b/pages/index.tsx index 4cad5bd6d..8cac0f133 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -63,7 +63,7 @@ export default function Home({ }, []) return ( -
+
{featured.slice(0, 3).map(({ node }) => ( @@ -96,7 +96,7 @@ export default function Home({
-
+
  • All Categories From 791c4c2fcc42baad4765b3df61dd5147b531bbca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 19:10:09 -0300 Subject: [PATCH 03/24] add keen slider and apply to product slider --- assets/global.css | 4 + .../ProductSlider/ProductSlider.module.css | 52 +++++++++--- .../product/ProductSlider/ProductSlider.tsx | 79 ++++++++++++------- .../ProductView/ProductView.module.css | 31 ++------ package.json | 1 + pages/_app.tsx | 1 + tailwind.config.js | 2 + yarn.lock | 5 ++ 8 files changed, 109 insertions(+), 66 deletions(-) diff --git a/assets/global.css b/assets/global.css index 4d3d23402..bbe9e2ac4 100644 --- a/assets/global.css +++ b/assets/global.css @@ -13,6 +13,8 @@ --text-secondary: white; --hover: rgba(0, 0, 0, 0.075); + --hover-1: rgba(0, 0, 0, 0.15); + --hover-2: rgba(0, 0, 0, 0.25); --cyan: #50e3c2; --green: #37b679; @@ -40,6 +42,8 @@ --secondary: white; --secondary-2: #f1f3f5; --hover: rgba(255, 255, 255, 0.075); + --hover-1: rgba(255, 255, 255, 0.15); + --hover-2: rgba(255, 255, 255, 0.25); --selection: var(--purple); --text-base: white; diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index 5f076af16..a294a5f5c 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/components/product/ProductSlider/ProductSlider.module.css @@ -1,22 +1,48 @@ .root { - @apply relative w-full h-full; + @apply relative w-full h-full relative; overflow-y: hidden; +} - & > div { - overflow: visible !important; +.leftControl, +.rightControl { + @apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2; +} + +.leftControl { + @apply left-6; +} + +.rightControl { + @apply right-6 rotate-180 transform; +} + +.control { + @apply opacity-0 transition-all duration-150; +} + +.root:hover .control { + @apply opacity-100; +} + +.positionIndicatorsContainer { + @apply hidden; + @screen sm { + @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform; } } -.rootPanel { - @apply absolute flex flex-row inset-0 z-20 m-20; +.positionIndicator { + @apply bg-hover-1 hover:bg-hover-2 transition-colors w-3 h-3 rounded-full mx-2 focus:outline-none; } -.leftPanel { - @apply flex-1; - cursor: url('/cursor-left.png'), auto; -} - -.rightPanel { - @apply flex-1; - cursor: url('/cursor-right.png'), auto; +.positionIndicatorActive { + @apply bg-white hover:bg-white; } +/* sx={{ + width: '10px', + height: '10px', + bg: currentSlide === idx ? 'primary' : 'gray', + borderRadius: 'full', + mx: 2, + '&:focus': { outline: 'none' }, +}} */ diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx index 77610e8c1..9f36961af 100644 --- a/components/product/ProductSlider/ProductSlider.tsx +++ b/components/product/ProductSlider/ProductSlider.tsx @@ -1,36 +1,61 @@ -import React, { FC, useState } from 'react' -import SwipeableViews from 'react-swipeable-views' +import { ArrowLeft } from '@components/icon' +import { useKeenSlider } from 'keen-slider/react' +import React, { Children, FC, isValidElement, useState } from 'react' +import cn from 'classnames' + import s from './ProductSlider.module.css' -interface Props { - children?: any -} -const ProductSlider: FC = ({ children }) => { - const [idx, setIdx] = useState(0) - const count = React.Children.count(children) - - const goBack = () => { - idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1) - } - - const goNext = () => { - idx + 1 === count ? setIdx(0) : setIdx(idx + 1) - } +const ProductSlider: FC = ({ children }) => { + const [currentSlide, setCurrentSlide] = useState(0) + const [ref, slider] = useKeenSlider({ + slideChanged(s) { + setCurrentSlide(s.details().relativeSlide) + }, + loop: true, + }) return (
    - - {children} - -
    -
    -
    + + +
    + {Children.map(children, (child) => { + // Add the keen-slider__slide className to children + if (isValidElement(child)) { + return { + ...child, + props: { + ...child.props, + className: `${ + child.props.className ? `${child.props.className} ` : '' + }keen-slider__slide`, + }, + } + } + return child + })}
    + {slider && ( +
    + {[...Array(slider.details().size).keys()].map((idx) => { + return ( +
    + )}
    ) } diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index c17ad9565..f47933868 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -2,7 +2,7 @@ @apply relative grid items-start gap-8 grid-cols-1; @screen lg { - @apply grid-cols-12 pt-10; + @apply grid-cols-12; } } @@ -24,17 +24,11 @@ } .squareBg { - @apply absolute inset-0 bg-violet z-0; - max-height: 250px; - - @screen md { - @apply inset-20; - max-height: 500px; - } + @apply absolute inset-0 bg-violet z-0 h-full; } .nameBox { - @apply absolute top-6 left-0 z-10; + @apply absolute top-6 left-6 z-20; & .name { @apply px-6 py-2 bg-primary text-primary font-bold; @@ -49,7 +43,7 @@ @screen md { & .name, & .price { - @apply bg-violet text-white; + @apply bg-hover-1 text-white; } } } @@ -67,22 +61,7 @@ } .img { - @apply w-full h-full object-cover; - - @screen md { - height: 100%; - margin-top: -2.75rem; - } - - @screen lg { - height: 150%; - margin-top: -10%; - } - - @screen xl { - height: 170%; - margin-top: -19%; - } + @apply w-full h-auto max-h-full object-cover; } .button { diff --git a/package.json b/package.json index 9365500a3..da708321c 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "classnames": "^2.2.6", "cookie": "^0.4.1", "js-cookie": "^2.2.1", + "keen-slider": "^5.2.4", "lodash.debounce": "^4.0.8", "lodash.random": "^3.2.0", "next": "^9.5.6-canary.9", diff --git a/pages/_app.tsx b/pages/_app.tsx index f6c1ffcd8..2f80a4258 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import '@assets/global.css' import '@assets/tailwind.css' import '@assets/utils.css' +import 'keen-slider/keen-slider.min.css' // To be removed import 'animate.css' diff --git a/tailwind.config.js b/tailwind.config.js index adff9a7f6..2f842de51 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,6 +15,8 @@ module.exports = { secondary: 'var(--secondary)', 'secondary-2': 'var(--secondary-2)', hover: 'var(--hover)', + 'hover-1': 'var(--hover-1)', + 'hover-2': 'var(--hover-2)', 'accents-0': 'var(--accents-0)', 'accents-1': 'var(--accents-1)', 'accents-2': 'var(--accents-2)', diff --git a/yarn.lock b/yarn.lock index 023467d2b..d07b3dac1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5399,6 +5399,11 @@ jws@^3.2.2: jwa "^1.4.1" safe-buffer "^5.0.1" +keen-slider@^5.2.4: + version "5.2.4" + resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8" + integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ== + keycode@^2.1.7: version "2.2.0" resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04" From 644034ae62b2a3caa4173aa96a8c050979188fc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 19:14:11 -0300 Subject: [PATCH 04/24] improve transition duration --- components/core/Layout/Layout.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/core/Layout/Layout.module.css b/components/core/Layout/Layout.module.css index 54fc80eb8..bb90675a6 100644 --- a/components/core/Layout/Layout.module.css +++ b/components/core/Layout/Layout.module.css @@ -1,4 +1,4 @@ .root { - @apply h-full bg-primary mx-auto; + @apply h-full bg-primary mx-auto transition-colors duration-150; max-width: 2460px; } From 5c3fb33bcfa06b283d3f5a8052ea03f43eba9b74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 19:25:30 -0300 Subject: [PATCH 05/24] resolve conflict --- assets/components.css | 2 +- pages/_app.tsx | 8 +------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/assets/components.css b/assets/components.css index eab469589..ebebcc238 100644 --- a/assets/components.css +++ b/assets/components.css @@ -1,3 +1,3 @@ .fit { - min-height: calc(100vh - 88px - 41px); + min-height: calc(100vh - 88px); } diff --git a/pages/_app.tsx b/pages/_app.tsx index b03d17cb3..a814e9a65 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,11 +1,5 @@ -<<<<<<< HEAD -import '@assets/global.css' -import '@assets/tailwind.css' -import '@assets/utils.css' -import 'keen-slider/keen-slider.min.css' -======= import '@assets/main.css' ->>>>>>> master +import 'keen-slider/keen-slider.min.css' // To be removed import 'animate.css' From 47036d78a9be74939300a272b2c2dd782107b3fa Mon Sep 17 00:00:00 2001 From: Franco Arza Date: Thu, 22 Oct 2020 19:39:19 -0300 Subject: [PATCH 06/24] deploy --- 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 b621ba5d2..8f8cf4be8 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -15,7 +15,7 @@ interface Props { const ProductCard: FC = ({ className, product: p, variant }) => { if (variant === 'slim') { return ( -
    +
    Date: Thu, 22 Oct 2020 19:39:33 -0300 Subject: [PATCH 07/24] redeploy --- 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 8f8cf4be8..b621ba5d2 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -15,7 +15,7 @@ interface Props { const ProductCard: FC = ({ className, product: p, variant }) => { if (variant === 'slim') { return ( -
    +
    Date: Thu, 22 Oct 2020 20:08:47 -0300 Subject: [PATCH 08/24] cover full screen and center --- components/product/ProductSlider/ProductSlider.module.css | 6 +++--- components/product/ProductSlider/ProductSlider.tsx | 6 +++--- components/product/ProductView/ProductView.module.css | 5 ++--- components/product/ProductView/ProductView.tsx | 8 +------- components/ui/Container/Container.tsx | 5 +++-- 5 files changed, 12 insertions(+), 18 deletions(-) diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index a294a5f5c..e5e6b4fa7 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/components/product/ProductSlider/ProductSlider.module.css @@ -5,7 +5,7 @@ .leftControl, .rightControl { - @apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2; + @apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2; } .leftControl { @@ -13,11 +13,11 @@ } .rightControl { - @apply right-6 rotate-180 transform; + @apply right-6; } .control { - @apply opacity-0 transition-all duration-150; + @apply opacity-0 transition duration-150; } .root:hover .control { diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx index 9f36961af..11d8f5f4f 100644 --- a/components/product/ProductSlider/ProductSlider.tsx +++ b/components/product/ProductSlider/ProductSlider.tsx @@ -1,6 +1,6 @@ -import { ArrowLeft } from '@components/icon' import { useKeenSlider } from 'keen-slider/react' import React, { Children, FC, isValidElement, useState } from 'react' +import { HiChevronLeft, HiChevronRight } from 'react-icons/hi' import cn from 'classnames' import s from './ProductSlider.module.css' @@ -17,10 +17,10 @@ const ProductSlider: FC = ({ children }) => { return (
    {Children.map(children, (child) => { diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index 4f102a61c..b66c7bba1 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -17,7 +17,7 @@ } @screen lg { - @apply mx-0 col-span-7; + @apply mx-0 col-span-6; min-height: 100%; height: 100%; } @@ -52,8 +52,7 @@ @apply flex flex-col col-span-1; @screen lg { - @apply col-span-5; - padding-top: 5rem; + @apply col-span-5 pl-12 pt-20; } } diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index a582981dc..fc3c5acac 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -46,7 +46,7 @@ const ProductView: FC = ({ product, className }) => { } return ( - + = ({ product, className }) => { ))}
    - - {!validMedia && ( -
    - -
    - )}
    diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx index 582c781b3..f037d8486 100644 --- a/components/ui/Container/Container.tsx +++ b/components/ui/Container/Container.tsx @@ -5,10 +5,11 @@ interface Props { className?: string children?: any el?: HTMLElement + clean?: boolean } -const Container: FC = ({ children, className, el = 'div' }) => { - const rootClassName = cn('mx-auto max-w-8xl px-12', className) +const Container: FC = ({ children, className, el = 'div', clean }) => { + const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean }) let Component: React.ComponentType Date: Thu, 22 Oct 2020 20:13:59 -0300 Subject: [PATCH 09/24] remove unused css file --- components/core/Footer/Footer.module.css | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 components/core/Footer/Footer.module.css diff --git a/components/core/Footer/Footer.module.css b/components/core/Footer/Footer.module.css deleted file mode 100644 index 45a2596cb..000000000 --- a/components/core/Footer/Footer.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.copyright { - font-size: 16px; -} From 9f49176f9dcabf72609ae12ede4a4dac711013ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 20:33:03 -0300 Subject: [PATCH 10/24] fix mobile --- components/product/ProductView/ProductView.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index b66c7bba1..ef934c222 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -1,5 +1,5 @@ .root { - @apply relative grid items-start gap-8 grid-cols-1; + @apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden; @screen lg { @apply grid-cols-12; @@ -49,7 +49,7 @@ } .sidebar { - @apply flex flex-col col-span-1; + @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full; @screen lg { @apply col-span-5 pl-12 pt-20; From 898acdd391c26adaa9a1a7cf95b2d4f72ae826c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 20:46:48 -0300 Subject: [PATCH 11/24] add whishlist heart --- components/product/ProductView/ProductView.module.css | 4 ++++ components/product/ProductView/ProductView.tsx | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index ef934c222..82838da67 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -68,3 +68,7 @@ min-width: 300px; text-align: center; } + +.wishlistButton { + @apply absolute right-12 text-white w-10 h-10 flex items-center justify-center bg-violet font-semibold leading-6 cursor-pointer; +} diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index fc3c5acac..7e725f290 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -9,6 +9,8 @@ import useAddItem from '@lib/bigcommerce/cart/use-add-item' import { isDesktop } from '@lib/browser' import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' import { getProductOptions } from '../helpers' +import { Heart } from '@components/icon' + interface Props { className?: string children?: any @@ -137,6 +139,9 @@ const ProductView: FC = ({ product, className }) => {
    +
    + +
    ) From 52dba3d01f02a25829ebee597258cf03fda4933a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 20:47:23 -0300 Subject: [PATCH 12/24] add todo comment --- components/product/ProductView/ProductView.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 7e725f290..ddbfc0260 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -139,6 +139,8 @@ const ProductView: FC = ({ product, className }) => {
    + + {/* TODO make it work */}
    From fc40be8dcb06f8f2e3fdf54286d05db660a21986 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 20:55:31 -0300 Subject: [PATCH 13/24] fix heart on mobile --- components/product/ProductView/ProductView.module.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index 82838da67..d37af51ff 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -40,7 +40,7 @@ @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide; } - @screen md { + @screen lg { & .name, & .price { @apply bg-hover-1 text-white; @@ -70,5 +70,9 @@ } .wishlistButton { - @apply absolute right-12 text-white w-10 h-10 flex items-center justify-center bg-violet font-semibold leading-6 cursor-pointer; + @apply absolute z-30 top-6 right-12 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer; + + @screen lg { + @apply right-12 text-white bg-violet; + } } From 48ed8a58ef2efe3086420ea6ef3e7049c6897025 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 20:59:55 -0300 Subject: [PATCH 14/24] heart to the right --- components/product/ProductView/ProductView.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index d37af51ff..80c103b24 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -70,7 +70,7 @@ } .wishlistButton { - @apply absolute z-30 top-6 right-12 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer; + @apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer; @screen lg { @apply right-12 text-white bg-violet; From b525de41814850ed4bdaccaf1294b64ceda2ac0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Thu, 22 Oct 2020 21:14:56 -0300 Subject: [PATCH 15/24] normalize durations --- components/core/Footer/Footer.tsx | 12 ++++++------ components/core/Toggle/Toggle.tsx | 6 +++--- components/core/UserNav/DropdownMenu.tsx | 2 +- components/core/UserNav/UserNav.module.css | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index e98cf1bda..ed5bd469b 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -21,7 +21,7 @@ const Footer: FC = ({ className, pages }) => { return (