diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css index b02c4043f..27e4c5b19 100644 --- a/components/ui/Grid/Grid.module.css +++ b/components/ui/Grid/Grid.module.css @@ -1,7 +1,5 @@ .root { @apply grid grid-cols-1 gap-0; - --row-height: calc(100vh - 88px); - min-height: var(--row-height); @screen lg { @apply grid-cols-3 grid-rows-2; diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css index be53edffa..e5ecb16ef 100644 --- a/components/ui/Marquee/Marquee.module.css +++ b/components/ui/Marquee/Marquee.module.css @@ -1,16 +1,16 @@ .root { - @apply w-full relative; - height: 360px; - min-width: 100%; + @apply w-full min-w-full relative flex flex-row items-center overflow-hidden py-0; + max-height: 320px; } -.container { - @apply flex flex-row items-center; +.root > div { + max-height: 320px; + padding: 0; + margin: 0; } -.container > * { - @apply relative flex-1 px-16 py-4 h-full; - min-height: 360px; +.root > div > * > *:nth-child(2) * { + max-height: 100%; } .primary { diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx index 70a05bc01..ce5ec2338 100644 --- a/components/ui/Marquee/Marquee.tsx +++ b/components/ui/Marquee/Marquee.tsx @@ -1,7 +1,7 @@ import cn from 'classnames' import s from './Marquee.module.css' import { FC, ReactNode, Component, Children } from 'react' -import Ticker from 'react-ticker' +import { default as FastMarquee } from 'react-fast-marquee' interface MarqueeProps { className?: string @@ -24,21 +24,15 @@ const Marquee: FC = ({ ) return ( -
- - {() => ( -
- {Children.map(children, (child) => ({ - ...child, - props: { - ...child.props, - className: cn(child.props.className, `${variant}`), - }, - }))} -
- )} -
-
+ + {Children.map(children, (child) => ({ + ...child, + props: { + ...child.props, + className: cn(child.props.className, `${variant}`), + }, + }))} + ) } diff --git a/package.json b/package.json index 735ff8074..8337bb817 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,8 @@ "postcss-nesting": "^8.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-fast-marquee": "^1.1.3", "react-merge-refs": "^1.1.0", - "react-ticker": "^1.2.2", "react-use-measure": "^2.0.4", "shopify-buy": "^2.11.0", "swell-js": "^4.0.0-next.0", diff --git a/yarn.lock b/yarn.lock index e065a3292..87571cf2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5668,6 +5668,11 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-fast-marquee@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.1.3.tgz#8f1f397c64258bdee0e915147d503828ab74d695" + integrity sha512-DIfrpWMgIHEoEPWKYzs5dnV5ZSMuu0+4ddRG4qB6Ee2zDi5LuPAGc1gnOceG8j8tvnuSrdkaqYYQwLZ61VzU5w== + react-is@16.13.1, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -5683,11 +5688,6 @@ react-refresh@0.8.3: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== -react-ticker@^1.2.2: - version "1.2.2" - resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24" - integrity sha512-PXUujoPJvajxwOfosuuujlrBUrjgGp4FB4haWFOI25ujhMppW4SuLkiOdQ9AylrWN3yTHWdk2kbQWe3n9SjFGA== - react-use-measure@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.4.tgz#cb675b36eaeaf3681b94d5f5e08b2a1e081fedc9"