changes to the layout

assets/global.css

@@ -3,15 +3,27 @@
 :root {
   --bg-primary: white;
   --bg-secondary: black;
+  --bg-primary-accent: rgba(0, 0, 0, 0.075);
+
   --text-primary: black;
-  --text-secondary: #252f3f;
+  --text-secondary: white;
+
+  --text-default: #252f3f;
 }
 
 [data-theme='dark'] {
   --bg-primary: black;
   --bg-secondary: white;
+  --bg-primary-accent: rgba(255, 255, 255, 0.075);
+
   --text-primary: white;
-  --text-secondary: white;
+  --text-secondary: black;
+
+  --text-default: white;
+}
+
+.fit {
+  min-height: calc(100vh - 200px);
 }
 
 *,

components/core/Footer/Footer.tsx

@@ -15,6 +15,10 @@ const Footer: FC<Props> = ({ className }) => {
   )
   return (
     <div className="bg-black text-white">
+      <hr
+        className="hidden md:block mt-4 border-gray-700"
+        style={{ flexBasis: '100%', height: 0 }}
+      />
       <footer className={rootClassName}>
         <Link href="/">
           <a className="flex flex-initial items-center md:items-start font-bold md:mr-24">
@@ -54,11 +58,6 @@ const Footer: FC<Props> = ({ className }) => {
         <small className="text-base">
           &copy; 2020 ACME, Inc. All rights reserved.
         </small>
-
-        <hr
-          className="hidden md:block mt-4 border-gray-700"
-          style={{ flexBasis: '100%', height: 0 }}
-        />
       </footer>
     </div>
   )

components/core/Layout/Layout.tsx

@@ -24,7 +24,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
       <Container>
         <Navbar />
       </Container>
-      <main className="h-screen">{children}</main>
+      <main className="fit">{children}</main>
       <Footer />
       <Sidebar show={displaySidebar} close={closeSidebar}>
         <CartSidebarView />

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
-

components/ui/Button/Button.module.css

@@ -1,5 +1,7 @@
 .root {
-  @apply cursor-pointer inline-flex px-10 rounded-sm leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center focus:outline-none;
+  @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6
+  bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
+  text-center justify-center uppercase py-4 uppercase text-center focus:outline-none;
 }
 
 .root:hover {

pages/index.tsx

@@ -49,7 +49,7 @@ export default function Home({
               All Categories
             </li>
             {categories.map((cat) => (
-              <li key={cat.path} className="py-1 text-secondary">
+              <li key={cat.path} className="py-1 text-default">
                 <a href="#">{cat.name}</a>
               </li>
             ))}
@@ -59,7 +59,7 @@ export default function Home({
               All Designers
             </li>
             {brands.flatMap(({ node }) => (
-              <li key={node.path} className="py-1 text-secondary">
+              <li key={node.path} className="py-1 text-default">
                 <a href="#">{node.name}</a>
               </li>
             ))}

pages/wishlist.tsx

@@ -13,14 +13,41 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
   }
 }
 
-export default function Home({}: InferGetStaticPropsType<
-  typeof getStaticProps
->) {
+export default function Home({
+  categories,
+  brands,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <Container>
       <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
         My Wishlist
       </h2>
+      <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
+        <div className="col-span-2">
+          <ul className="mb-10">
+            <li className="py-1 text-primary font-bold tracking-wide">
+              All Categories
+            </li>
+            {categories.map((cat) => (
+              <li key={cat.path} className="py-1 text-secondary">
+                <a href="#">{cat.name}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="col-span-8">Items.</div>
+        <div className="col-span-2">
+          <ul>
+            <li className="py-1 text-primary font-bold tracking-wide">
+              Relevance
+            </li>
+            <li className="py-1 text-secondary">Latest arrivals</li>
+            <li className="py-1 text-secondary">Trending</li>
+            <li className="py-1 text-secondary">Price: Low to high</li>
+            <li className="py-1 text-secondary">Price: High to low</li>
+          </ul>
+        </div>
+      </div>
     </Container>
   )
 }

tailwind.config.js

@@ -10,6 +10,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      backgroundOpacity: {
+        075: '0.75',
+      },
       colors: {
         'accent-1': '#FAFAFA',
         'accent-2': '#F1F3F5',
@@ -22,6 +25,7 @@ module.exports = {
         red: '#DA3C3C',
         primary: 'var(--bg-primary)',
         secondary: 'var(--bg-secondary)',
+        'primary-accent': 'var(--bg-primary-accent)',
       },
       textColor: {
         base: 'var(--text-primary)',