changes to the layout

components/product/ProductView/ProductView.module.css

@@ -1,7 +1,7 @@
-.root {
-  @apply flex flex-row h-screen py-12 px-6;
-}
-
 .button {
   min-width: 300px;
 }
+
+.squareBg {
+  @apply absolute inset-24 z-0 bg-violet;
+}

components/product/ProductView/ProductView.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import { FC, useState } from 'react'
 import s from './ProductView.module.css'
-import { Button } from '@components/ui'
+import { Button, Container } from '@components/ui'
 import { Swatch } from '@components/product'
 import { Colors } from '@components/ui/types'
 import type { Product } from '@lib/bigcommerce/api/operations/get-product'
@@ -43,76 +43,76 @@ const ProductView: FC<Props> = ({ product, className }) => {
   const activeColor = choices.color
 
   return (
-    <div className={cn(s.root, className)}>
-      <div className="absolute">
-        <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
-          {product.name}
-        </h1>
-        <div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
-          {product.prices?.price.value}
-          {` `}
-          {product.prices?.price.currencyCode}
-        </div>
-      </div>
-      <div className="flex-1 h-48 p-24 relative min-h-screen overflow-hidden">
-        <div className="absolute z-10 inset-0 flex items-center justify-center">
-          <img
-            className="w-full object-cover"
-            src={product.images.edges?.[0]?.node.urlXL}
-          />
-        </div>
-        <div className=" absolute inset-24 z-0 bg-violet"></div>
-      </div>
-      <div className="flex-1 flex flex-col">
-        <section className="pb-4">
-          <h2 className="uppercase font-medium">Color</h2>
-          <div className="flex flex-row py-4">
-            {COLORS.map((color) => (
-              <Swatch
-                key={color}
-                color={color}
-                active={color === activeColor}
-                onClick={() =>
-                  setChoices((choices) => {
-                    return { ...choices, color }
-                  })
-                }
-              />
-            ))}
+    <Container>
+      <div className="relative flex flex-row items-start overflow-hidden">
+        <div className="absolute top-0 left-0 z-50">
+          <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
+            {product.name}
+          </h1>
+          <div className="px-6 py-2 pb-4 bg-violet text-white font-bold inline-block traking">
+            {product.prices?.price.value}
+            {` `}
+            {product.prices?.price.currencyCode}
           </div>
-        </section>
-        <section className="pb-4">
-          <h2 className="uppercase font-medium">Size</h2>
-          <div className="flex flex-row py-4">
-            {SIZES.map((size) => {
-              return (
+        </div>
+        <div className="flex-1 p-24 relative fit overflow-hidden box-border">
+          <div className="absolute z-10 inset-0 flex items-center justify-center">
+            <img
+              className="w-full object-cover"
+              src={product.images.edges?.[0]?.node.urlXL}
+            />
+          </div>
+          <div className={s.squareBg}></div>
+        </div>
+        <div className="flex-1 flex flex-col">
+          <section className="pt-24">
+            <h2 className="uppercase font-medium">Color</h2>
+            <div className="flex flex-row py-4">
+              {COLORS.map((color) => (
                 <Swatch
-                  size={size.toUpperCase()}
-                  key={`size-${size}`}
-                  active={size === activeSize}
+                  key={color}
+                  color={color}
+                  active={color === activeColor}
                   onClick={() =>
                     setChoices((choices) => {
-                      return { ...choices, size }
+                      return { ...choices, color }
                     })
                   }
                 />
-              )
-            })}
-          </div>
-        </section>
-        <section className="pb-12">
-          <div
-            className="break-words"
-            dangerouslySetInnerHTML={{ __html: product.description }}
-          />
-        </section>
-        <section className="pb-4">
-          <Button type="button" className={s.button} onClick={addToCart}>
-            Add to Cart
-          </Button>
-        </section>
+              ))}
+            </div>
+          </section>
+          <section className="pb-4">
+            <h2 className="uppercase font-medium">Size</h2>
+            <div className="flex flex-row py-4">
+              {SIZES.map((size) => {
+                return (
+                  <Swatch
+                    size={size.toUpperCase()}
+                    key={`size-${size}`}
+                    active={size === activeSize}
+                    onClick={() =>
+                      setChoices((choices) => ({ ...choices, size }))
+                    }
+                  />
+                )
+              })}
+            </div>
+          </section>
+          <section className="pb-12">
+            <div
+              className="break-words"
+              dangerouslySetInnerHTML={{ __html: product.description }}
+            />
+          </section>
+          <section className="pb-4">
+            <Button type="button" className={s.button} onClick={addToCart}>
+              Add to Cart
+            </Button>
+          </section>
+        </div>
       </div>
-    </div>
+    </Container>
   )
 }
 

components/product/Swatch/Swatch.module.css

@@ -1,13 +1,15 @@
 .root {
-  @apply h-12 w-12 bg-white text-primary rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none;
+  @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;
 }
 
 .active.size {
-  @apply border-black;
+  @apply border-secondary border-2;
 }
 
 .root:hover {
-  @apply transform scale-110;
+  @apply transform scale-110 bg-primary-accent;
 }
 
 .colorViolet {
@@ -22,8 +24,6 @@
   @apply bg-black !important;
 }
 
-.colorWhite,
-.size {
-  @apply bg-white !important;
-  @apply border border-gray-200;
+.colorWhite {
+  @apply bg-white text-black !important;
 }

components/product/Swatch/Swatch.tsx

@@ -27,8 +27,6 @@ const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
     className
   )
 
-  // TODO: technically this is a radio
-
   return (
     <Button className={rootClassName} {...props}>
       {color && active && (
@@ -47,4 +45,3 @@ const Swatch: FC<Props> = ({ className, size, color, active, ...props }) => {
 }
 
 export default Swatch
-