Merge pull request #117 from vercel/fix

Fixes

.gitignore

@@ -31,4 +31,7 @@ yarn-error.log*
 .env.production.local
 
 # vercel
-.vercel
+.vercel
+
+# dev
+framework

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 = () => (
   <div className="w-80 h-80 flex items-center text-center justify-center p-3">
     <LoadingDots />
@@ -76,7 +77,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}
           action={
-            <Button className="mx-5" onClick={onAcceptCookies}>
+            <Button className="mx-5" onClick={() => onAcceptCookies()}>
               Accept cookies
             </Button>
           }

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;
 }

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<Props> = ({
                 quality="85"
                 src={src}
                 alt={p.name}
-                className={s.image}
+                className={s.productImage}
                 width={imgWidth}
                 sizes={imgSizes}
                 height={imgHeight}

components/ui/Button/Button.tsx

@@ -27,12 +27,12 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     variant = 'flat',
     children,
     active,
-    onClick,
     width,
-    Component = 'button',
     loading = false,
     disabled = false,
     style = {},
+    Component = 'button',
+    ...rest
   } = props
   const ref = useRef<typeof Component>(null)
 
@@ -57,6 +57,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
         width,
         ...style,
       }}
+      {...rest}
     >
       {children}
       {loading && (

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 {

tailwind.config.js

@@ -51,6 +51,9 @@ module.exports = {
       },
       lineHeight: {
         'extra-loose': '2.2'
+      },
+      scale: {
+        '120': '1.2',
       }
     },
   },