Merge branch 'master' into arzafran/tweak-banner

components/core/Searchbar/Searchbar.module.css

@@ -1,5 +1,5 @@
 .input {
-  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg  placeholder-accents-4 pr-10;
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out placeholder-accents-5 pr-10;
   min-width: 300px;
 }
 

components/core/Searchbar/Searchbar.tsx

@@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
   return (
     <div
       className={cn(
-        'relative rounded-lg text-sm bg-accents-1 text-base w-full border border-accents-2',
+        'relative text-sm bg-accents-1 text-base w-full',
         className
       )}
     >

components/core/UserNav/UserNav.module.css

@@ -2,12 +2,11 @@
 }
 
 .list {
-  @apply flex flex-row items-center;
+  @apply flex flex-row items-center h-full;
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base;
-
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
   &:hover {
     @apply text-accents-8;
   }

components/icon/ArrowLeft.tsx

@@ -10,15 +10,15 @@ const ArrowLeft = ({ ...props }) => {
     >
       <path
         d="M19 12H5"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 19L5 12L12 5"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/icon/Check.tsx

@@ -10,9 +10,9 @@ const Check = ({ ...props }) => {
     >
       <path
         d="M20 6L9 17L4 12"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/icon/Minus.tsx

@@ -4,9 +4,9 @@ const Minus = ({ ...props }) => {
       <path
         d="M5 12H19"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/icon/Plus.tsx

@@ -4,16 +4,16 @@ const Plus = ({ ...props }) => {
       <path
         d="M12 5V19"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M5 12H19"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   )

components/product/ProductCard/ProductCard.module.css

@@ -55,7 +55,7 @@
 }
 
 .squareBg,
-.productTitle,
+.productTitle > span,
 .productPrice,
 .wishlistButton {
   @apply transition ease-in-out duration-300;
@@ -65,9 +65,13 @@
   @apply transform absolute inset-0 z-0 bg-secondary;
 }
 
+.squareBg.gray {
+  @apply bg-gray-300 !important;
+}
+
 .productTitle {
-  line-height: 51px;
-  width: 200px;
+  line-height: 40px;
+  width: 18vw;
 
   & span {
     @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;

components/product/ProductCard/ProductCard.tsx

@@ -8,7 +8,7 @@ interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
   node: ProductData
-  variant?: 'slim'
+  variant?: 'slim' | 'simple'
 }
 
 interface ProductData {
@@ -23,7 +23,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
     return (
       <div className="relative overflow-hidden box-border">
         <img
-          className="object-scale-down h-24"
+          className="object-scale-down h-48"
           src={p.images.edges[0].node.urlSmall}
         />
         <div className="absolute inset-0 flex items-center justify-end mr-8">
@@ -44,12 +44,12 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
             src={p.images.edges[0].node.urlXL}
           />
         </div>
-        <div className={s.squareBg} />
+        <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
           <div className="">
-            <div className={s.productTitle}>
+            <p className={s.productTitle}>
               <span>{p.name}</span>
-            </div>
+            </p>
             <span className={s.productPrice}>${p.prices.price.value}</span>
           </div>
           <div className={s.wishlistButton}>

components/product/ProductView/ProductView.tsx

@@ -1,7 +1,6 @@
 import { NextSeo } from 'next-seo'
 import { FC, useState } from 'react'
 import s from './ProductView.module.css'
-import { Colors } from '@components/ui/types'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
@@ -15,19 +14,12 @@ interface Props {
   product: Product
 }
 
-interface Choices {
-  size?: string | null
-  color?: string | null
-}
-
 const ProductView: FC<Props> = ({ product, className }) => {
-  const options = getProductOptions(product)
-  // console.log(options)
-
   const addItem = useAddItem()
   const { openSidebar } = useUI()
+  const options = getProductOptions(product)
 
-  const [choices, setChoices] = useState<Choices>({
+  const [choices, setChoices] = useState<Record<string, any>>({
     size: null,
     color: null,
   })
@@ -48,9 +40,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
     }
   }
 
-  const activeSize = choices.size
-  const activeColor = choices.color
-
   return (
     <Container>
       <NextSeo
@@ -88,6 +77,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
               {/** TODO: Change with Image Component */}
               {product.images.edges?.map((image, i) => (
                 <img
+                  key={image?.node.urlSmall}
                   className="w-full object-cover"
                   src={image?.node.urlXL}
                   loading={i === 0 ? 'eager' : 'lazy'}
@@ -104,25 +94,28 @@ const ProductView: FC<Props> = ({ product, className }) => {
         <div className="flex-1 flex flex-col pt-24">
           <section>
             {options?.map((opt: any) => (
-              <div className="pb-4">
+              <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
                   {opt.values.map((v: any) => {
+                    const active = choices[opt.displayName]
+
                     return (
                       <Swatch
                         key={v.entityId}
-                        active={v.label === activeColor}
+                        active={v.label === active}
                         variant={opt.displayName}
                         color={v.hexColors ? v.hexColors[0] : ''}
                         label={v.label}
-                        onClick={() =>
+                        onClick={() => {
                           setChoices((choices) => {
+                            console.log(choices)
                             return {
                               ...choices,
                               [opt.displayName]: v.label,
                             }
                           })
-                        }
+                        }}
                       />
                     )
                   })}

components/product/Swatch/Swatch.module.css

@@ -1,11 +1,11 @@
 .root {
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
-  items-center justify-center cursor-pointer transition duration-75 ease-in-out
-  p-0 shadow-none border-gray-200 border box-border;
+  items-center justify-center cursor-pointer transition duration-100 ease-in-out
+  p-0 shadow-none border-gray-200 border box-border text-black;
 }
 
 .active.size {
-  @apply border-accents-2 border-2;
+  @apply border-accents-9 border-2;
 }
 
 .root:hover {

components/product/Swatch/Swatch.tsx

@@ -1,10 +1,9 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Swatch.module.css'
-import { Colors } from '@components/ui/types'
 import { Check } from '@components/icon'
 import Button, { ButtonProps } from '@components/ui/Button'
-
+import { isDark } from '@lib/colors'
 interface Props {
   active?: boolean
   children?: any
@@ -24,7 +23,8 @@ const Swatch: FC<Props & ButtonProps> = ({
 }) => {
   variant = variant?.toLowerCase()
   label = label?.toLowerCase()
-  // console.log(variant)
+  const isDarkBg = isDark(color)
+
   const rootClassName = cn(
     s.root,
     {
@@ -38,12 +38,12 @@ const Swatch: FC<Props & ButtonProps> = ({
     <Button
       className={rootClassName}
       style={color ? { backgroundColor: color } : {}}
+      {...props}
     >
       {variant === 'color' && active && (
         <span
           className={cn('absolute', {
-            'text-white': label !== 'white',
-            'text-black': label === 'white',
+            'text-white': isDarkBg,
           })}
         >
           <Check />

components/ui/Button/Button.module.css

@@ -20,3 +20,7 @@
 .loading {
   @apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
 }
+
+.slim {
+  @apply py-2 transform-none normal-case;
+}

components/ui/Button/Button.tsx

@@ -13,7 +13,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'filled' | 'outlined' | 'flat' | 'none'
+  variant?: 'flat' | 'slim'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const {
     className,
-    variant = 'filled',
+    variant = 'flat',
     children,
     active,
     onClick,
@@ -50,6 +50,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const rootClassName = cn(
     s.root,
     {
+      [s.slim]: variant === 'slim',
       [s.loading]: loading,
     },
     className
@@ -57,16 +58,16 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
 
   return (
     <Component
-      className={rootClassName}
       aria-pressed={active}
       data-variant={variant}
       ref={mergeRefs([ref, buttonRef])}
       {...buttonProps}
+      data-active={isPressed ? '' : undefined}
+      className={rootClassName}
       style={{
         width,
         ...style,
       }}
-      data-active={isPressed ? '' : undefined}
     >
       {children}
       {loading && (

components/ui/Logo/Logo.tsx

@@ -1,12 +1,14 @@
-const Logo = () => (
+const Logo = ({ className = '', ...props }) => (
   <svg
     width="32"
     height="32"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
   >
-    <rect width="32" height="32" rx="16" fill="var(--secondary)" />
+    <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"

components/ui/Marquee/Marquee.module.css

@@ -8,7 +8,7 @@
 
   & > * {
     @apply flex-1 px-16 py-4;
-    width: 400px;
+    width: 430px;
   }
 }
 

components/ui/Modal/Modal.module.css

@@ -0,0 +1,8 @@
+.root {
+  @apply fixed bg-black flex items-center inset-0 z-50 justify-center;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+  @apply bg-white p-12;
+}

components/ui/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+import cn from 'classnames'
+import { FC, useRef } from 'react'
+import s from './Modal.module.css'
+import { useDialog } from '@react-aria/dialog'
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal,
+  OverlayProvider,
+  OverlayContainer,
+} from '@react-aria/overlays'
+import { FocusScope } from '@react-aria/focus'
+
+interface Props {
+  className?: string
+  children?: any
+  show?: boolean
+  close: () => void
+}
+
+const Modal: FC<Props> = ({
+  className,
+  children,
+  show = true,
+  close,
+  ...props
+}) => {
+  const rootClassName = cn(s.root, className)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  usePreventScroll()
+  let { modalProps } = useModal()
+  let { overlayProps } = useOverlay(props, ref)
+  let { dialogProps } = useDialog(props, ref)
+
+  return (
+    <div className={rootClassName}>
+      <FocusScope contain restoreFocus autoFocus>
+        <div
+          {...overlayProps}
+          {...dialogProps}
+          {...modalProps}
+          ref={ref}
+          className={s.modal}
+        >
+          {children}
+        </div>
+      </FocusScope>
+    </div>
+  )
+}
+
+export default Modal

components/ui/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from './Modal'

components/ui/index.ts

@@ -7,3 +7,4 @@ export { default as Marquee } from './Marquee'
 export { default as Container } from './Container'
 export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
+export { default as Modal } from './Modal'