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/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/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 039643abb..1484cfaa4 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.2625); } & .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,6 @@ } } -.image { - object-fit: cover; - transform: scale(1.2); +.productImage { + @apply transform transition-transform duration-500 object-cover scale-120; } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 3cd288c7c..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 @@ -82,7 +83,7 @@ const ProductCard: FC = ({ quality="85" src={src} alt={p.name} - className={s.image} + className={s.productImage} width={imgWidth} sizes={imgSizes} height={imgHeight} 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 { 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', } }, },