From 1ae797299c35a367277741c28c3e2c9a86c8e27e Mon Sep 17 00:00:00 2001
From: thatblindgeye <thatblindgeye@gmail.com>
Date: Fri, 23 Jul 2021 18:51:59 -0400
Subject: [PATCH] Style Shop page

---
 src/App.js                                    | 71 ++++++++++---------
 src/components/Accessibility/Accessibility.js |  4 +-
 src/components/Cards/ItemCard.js              | 46 ++++++++----
 src/components/Cards/ItemICardmage.js         | 19 +++++
 src/components/Footer/Footer.js               | 12 ++--
 src/components/Navbar/HeaderNavbar.js         | 29 ++++----
 src/components/Pages/Shop.js                  |  2 +-
 src/inventory.json                            | 68 +++++++++++-------
 src/styles/base/_base.scss                    |  8 ++-
 src/styles/base/_typography.scss              | 26 ++++---
 src/styles/components/_header.scss            |  4 ++
 src/styles/components/_index.scss             |  1 +
 src/styles/components/_item-preview.scss      | 30 ++++++++
 src/styles/components/_links.scss             | 22 ++++--
 src/styles/layouts/_header.scss               | 29 ++++----
 src/styles/layouts/_index.scss                |  1 +
 src/styles/layouts/_shop.scss                 | 21 ++++++
 src/styles/themes/_dark.scss                  |  2 +
 src/styles/themes/_light.scss                 |  2 +
 19 files changed, 277 insertions(+), 120 deletions(-)
 create mode 100644 src/components/Cards/ItemICardmage.js
 create mode 100644 src/styles/components/_item-preview.scss
 create mode 100644 src/styles/layouts/_shop.scss

diff --git a/src/App.js b/src/App.js
index dddd5f6..f6f17f3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { CartDataContextProvider } from './context/CartDataContext';
 import Accessibility from './components/Accessibility/Accessibility';
 import HeaderNavbar from './components/Navbar/HeaderNavbar';
@@ -6,42 +6,47 @@ import Router from './components/Router/Router';
 import Footer from './components/Footer/Footer';
 
 export default function App() {
-  const [theme, setTheme] = useState('dark');
+    const [theme, setTheme] = useState('dark');
+    const topOfPage = useRef(null);
 
-  // Initialize theme from local storage or set theme in local storage
-  // when App mounts
-  useEffect(() => {
-    let savedTheme = localStorage.getItem('theme');
+    // Initialize theme from local storage or set theme in local storage
+    // when App mounts
+    useEffect(() => {
+        let savedTheme = localStorage.getItem('theme');
 
-    if (!localStorage.getItem('theme')) {
-      savedTheme = 'dark';
-      localStorage.setItem('theme', savedTheme);
-    }
-    setTheme(savedTheme);
-  }, []);
+        if (!localStorage.getItem('theme')) {
+            savedTheme = 'dark';
+            localStorage.setItem('theme', savedTheme);
+        }
+        setTheme(savedTheme);
+    }, []);
 
-  useEffect(() => {
-    document.documentElement.className = theme;
-  }, [theme]);
+    useEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
 
-  const handleThemeToggle = (e) => {
-    if (e.type === 'click' || e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      const newTheme = theme === 'dark' ? 'light' : 'dark';
+    const handleThemeToggle = (e) => {
+        if (e.type === 'click' || e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            const newTheme = theme === 'dark' ? 'light' : 'dark';
 
-      setTheme(newTheme);
-      localStorage.setItem('theme', newTheme);
-    }
-  };
+            setTheme(newTheme);
+            localStorage.setItem('theme', newTheme);
+        }
+    };
 
-  return (
-    <CartDataContextProvider>
-      <header>
-        <Accessibility siteTheme={theme} toggleEvent={handleThemeToggle} />
-        <HeaderNavbar />
-      </header>
-      <Router />
-      <Footer siteTheme={theme} />
-    </CartDataContextProvider>
-  );
+    return (
+        <CartDataContextProvider>
+            <header>
+                <Accessibility
+                    siteTheme={theme}
+                    toggleEvent={handleThemeToggle}
+                    topRef={topOfPage}
+                />
+                <HeaderNavbar />
+            </header>
+            <Router />
+            <Footer siteTheme={theme} topRef={topOfPage} />
+        </CartDataContextProvider>
+    );
 }
diff --git a/src/components/Accessibility/Accessibility.js b/src/components/Accessibility/Accessibility.js
index 0f2aa4d..7570785 100644
--- a/src/components/Accessibility/Accessibility.js
+++ b/src/components/Accessibility/Accessibility.js
@@ -2,12 +2,12 @@ import React from 'react';
 import { ReactComponent as LightThemeIcon } from '../../assets/images/icons/light_theme.svg';
 import { ReactComponent as DarkThemeIcon } from '../../assets/images/icons/dark_theme.svg';
 
-export default function Accessibility({ siteTheme, toggleEvent }) {
+export default function Accessibility({ siteTheme, toggleEvent, topRef }) {
     const iconClasses = 'theme-icon';
 
     return (
         <div className='accessibility-container'>
-            <a href='#main' className='skip-link'>
+            <a href='#main' className='skip-link' ref={topRef}>
                 Skip to Content
             </a>
             <div
diff --git a/src/components/Cards/ItemCard.js b/src/components/Cards/ItemCard.js
index 9a06bfd..318bd56 100644
--- a/src/components/Cards/ItemCard.js
+++ b/src/components/Cards/ItemCard.js
@@ -1,28 +1,48 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import ItemICardmage from './ItemICardmage';
 
-const StockWarning = ({ children }) => {
-    return <div id='stock-warning'>{children}</div>;
+const StockWarning = ({ stock, id }) => {
+    return (
+        <div id={`stock-warning-${id}`} className='item-stock-warning'>
+            {stock === 0
+                ? 'Sold Out'
+                : stock < 20
+                ? `Only ${stock} left`
+                : null}
+        </div>
+    );
 };
 
 export default function ItemCard({ item }) {
-    const { id, name, stock } = item;
+    const { id, name, image, price, stock } = item;
     return (
-        <div>
-            <h2>
+        <div className='item-card'>
+            <div className='primary-preview-container'>
+                <Link
+                    to={`/shop/${id}`}
+                    className='preview-image-link'
+                    aria-hidden='true'
+                    tabIndex='-1'
+                >
+                    <ItemICardmage image={image} />
+                </Link>
+            </div>
+            <div className='secondary-preview-container'>
                 <Link
                     to={`/shop/${id}`}
-                    className='link'
-                    aria-describedby={stock < 10 ? 'stock-warning' : null}
+                    className='item-link'
+                    aria-describedby={`price-${id} ${
+                        stock < 10 ? `stock-warning-${id}` : null
+                    }`}
                 >
                     {name}
                 </Link>
-            </h2>
-            {!stock ? (
-                <StockWarning>Sold Out</StockWarning>
-            ) : stock < 10 ? (
-                <StockWarning>Only {stock} left!</StockWarning>
-            ) : null}
+                <div id={`price-${id}`} className='item-price'>
+                    ${price}
+                </div>
+                {stock < 10 ? <StockWarning stock={stock} id={id} /> : null}
+            </div>
         </div>
     );
 }
diff --git a/src/components/Cards/ItemICardmage.js b/src/components/Cards/ItemICardmage.js
new file mode 100644
index 0000000..462b5be
--- /dev/null
+++ b/src/components/Cards/ItemICardmage.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+function ImageUnavailable() {
+    return (
+        <div className='image-unavailable elevation-04dp'>
+            Image
+            <br />
+            Unavailable
+        </div>
+    );
+}
+
+export default function ItemImage({ image }) {
+    return (
+        <div className='preview-image'>
+            {image ? <img src={image} alt='' /> : <ImageUnavailable />}
+        </div>
+    );
+}
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 05b9dbb..0810d20 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -2,17 +2,21 @@ import React from 'react';
 import githubDark from '../../assets/images/logos/GitHub-White-Mark-32px.png';
 import githubLight from '../../assets/images/logos/GitHub-Black-Mark-32px.png';
 
-export default function Footer({ siteTheme }) {
+export default function Footer({ siteTheme, topRef }) {
     const githubLogo = siteTheme === 'light' ? githubLight : githubDark;
 
-    const handleClick = () => {
-        window.scrollTo(0, 0);
+    const handleScrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+        });
+
+        topRef.current.focus();
     };
 
     return (
         <footer>
             <div className='upper-footer-nav'>
-                <button className='button-text' onClick={handleClick}>
+                <button className='button-text' onClick={handleScrollToTop}>
                     Back to Top
                 </button>
             </div>
diff --git a/src/components/Navbar/HeaderNavbar.js b/src/components/Navbar/HeaderNavbar.js
index 927c5ec..1eea1aa 100644
--- a/src/components/Navbar/HeaderNavbar.js
+++ b/src/components/Navbar/HeaderNavbar.js
@@ -14,18 +14,23 @@ export default function HeaderNavbar() {
             <Link to='/' className='logo-link'>
                 Enbious
             </Link>
-            <Link to='/shop' className='nav-link shop-link'>
-                Shop
-            </Link>
-
-            <Link
-                to='/cart'
-                className='nav-link cart-link'
-                aria-label='Shopping cart'
-            >
-                <CartIcon className='cart-icon' />
-                <span className='current-cart-amount'>{totalCartItems}</span>
-            </Link>
+            <div className='header-nav-right'>
+                <Link to='/shop' className='nav-link shop-link'>
+                    Shop
+                </Link>
+                <div className='cart-button-container'>
+                    <Link
+                        to='/cart'
+                        className='nav-link cart-link'
+                        aria-label='Shopping cart'
+                    >
+                        <CartIcon className='cart-icon' />
+                        <span className='current-cart-amount'>
+                            {totalCartItems}
+                        </span>
+                    </Link>
+                </div>
+            </div>
         </nav>
     );
 }
diff --git a/src/components/Pages/Shop.js b/src/components/Pages/Shop.js
index 773028f..9d90d0a 100644
--- a/src/components/Pages/Shop.js
+++ b/src/components/Pages/Shop.js
@@ -15,7 +15,7 @@ export default function Shop() {
     }, []);
 
     return (
-        <div>
+        <div className='items-container'>
             {items.map((item) => (
                 <ItemCard key={item.id} item={item} />
             ))}
diff --git a/src/inventory.json b/src/inventory.json
index 7270f18..9d5382f 100644
--- a/src/inventory.json
+++ b/src/inventory.json
@@ -1,28 +1,44 @@
 {
-  "clothing": [
-    {
-      "id": 0,
-      "name": "T-Shirt",
-      "description": "Short sleeve.",
-      "image": null,
-      "price": 19.99,
-      "stock": 7
-    },
-    {
-      "id": 1,
-      "name": "Sweater",
-      "description": "Comfy.",
-      "image": null,
-      "price": 19.99,
-      "stock": 2
-    },
-    {
-      "id": 2,
-      "name": "Pants",
-      "description": "Denim.",
-      "image": null,
-      "price": 19.99,
-      "stock": 100
-    }
-  ]
+    "clothing": [
+        {
+            "id": 0,
+            "name": "T-Shirt",
+            "description": "Short sleeve.",
+            "image": null,
+            "price": 19.99,
+            "stock": 7
+        },
+        {
+            "id": 1,
+            "name": "Sweater",
+            "description": "Comfy.",
+            "image": null,
+            "price": 19.99,
+            "stock": 0
+        },
+        {
+            "id": 2,
+            "name": "Pants",
+            "description": "Denim.",
+            "image": null,
+            "price": 19.99,
+            "stock": 100
+        },
+        {
+            "id": 3,
+            "name": "Shoes",
+            "description": "For walking.",
+            "image": null,
+            "price": 19.99,
+            "stock": 100
+        },
+        {
+            "id": 4,
+            "name": "Socks",
+            "description": "Well that socks.",
+            "image": null,
+            "price": 19.99,
+            "stock": 100
+        }
+    ]
 }
diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss
index 5ea0ad4..6e36c66 100644
--- a/src/styles/base/_base.scss
+++ b/src/styles/base/_base.scss
@@ -17,10 +17,10 @@ body {
 
 main {
     min-height: 100vh;
-    padding: 25px;
+    padding: 50px 25px;
 
     @include breakpoint-at-least(large) {
-        padding: 25px 10vw;
+        padding: 50px 10vw;
     }
 }
 
@@ -43,6 +43,10 @@ h6 {
     margin: 0;
 }
 
+a {
+    text-decoration: none;
+}
+
 %clickable {
     &:hover {
         cursor: pointer;
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 2799a4a..c58cb27 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -6,17 +6,11 @@ body {
 
 .logo-link {
     font-family: $brand-fonts;
-    font-size: 3rem;
-
-    @include breakpoint-at-least(medium) {
-        font-size: 5rem;
-    }
+    font-size: clamp(1rem, 10vw, 5rem);
 }
 
 .nav-link {
-    @include breakpoint-at-least(medium) {
-        font-size: 1.5rem;
-    }
+    font-size: clamp(1rem, 2vw, 1.5rem);
 }
 
 .image-card-text {
@@ -28,3 +22,19 @@ body {
         font-size: 4rem;
     }
 }
+
+.image-unavailable {
+    font-size: clamp(0.75rem, 5vw, 1.125rem);
+    text-align: center;
+}
+
+.item-link {
+    @include breakpoint-at-least(x-large) {
+        font-size: 1.5rem;
+    }
+}
+
+.item-stock-warning {
+    color: var(--color-text-item-warning);
+    font-size: 0.9rem;
+}
diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss
index d7770e2..7560edf 100644
--- a/src/styles/components/_header.scss
+++ b/src/styles/components/_header.scss
@@ -16,6 +16,10 @@ header {
     width: var(--base-size);
 
     @include breakpoint-at-least(medium) {
+        --base-size: 1.5rem;
+    }
+
+    @include breakpoint-at-least(large) {
         --base-size: 2rem;
     }
 }
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index 0e9446f..adefbe0 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -2,5 +2,6 @@
 @forward 'footer';
 @forward 'header';
 @forward 'home-images';
+@forward 'item-preview';
 @forward 'links';
 @forward 'theme-toggle';
diff --git a/src/styles/components/_item-preview.scss b/src/styles/components/_item-preview.scss
new file mode 100644
index 0000000..81cff16
--- /dev/null
+++ b/src/styles/components/_item-preview.scss
@@ -0,0 +1,30 @@
+@use '../abstracts/' as *;
+
+.primary-preview-container {
+    height: min(100vw, 175px);
+    margin-bottom: 10px;
+    width: min(100vw, 175px);
+
+    @include breakpoint-at-least(large) {
+        height: 200px;
+        width: 200px;
+    }
+
+    @include breakpoint-at-least(x-large) {
+        height: 250px;
+        width: 250px;
+    }
+}
+
+.preview-image {
+    height: 100%;
+}
+
+.image-unavailable {
+    background-color: white;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
diff --git a/src/styles/components/_links.scss b/src/styles/components/_links.scss
index c603742..08c03cd 100644
--- a/src/styles/components/_links.scss
+++ b/src/styles/components/_links.scss
@@ -71,22 +71,30 @@
 
 .shop-link,
 .cart-link {
+    display: flex;
     padding: 10px;
     transition: background-color linear 200ms;
+    width: max-content;
 
     &:hover {
         background-color: var(--color-bg-nav-hover);
     }
 }
 
-.shop-link {
-    justify-self: end;
-    max-width: max-content;
-}
-
 .cart-link {
     display: flex;
     align-items: center;
-    // flex-direction: column;
-    max-width: max-content;
+}
+
+.item-link {
+    color: var(--color-text-primary);
+
+    &:focus {
+        outline: 1px dotted var(--color-border-primary);
+        outline-offset: 2px;
+    }
+
+    &:hover {
+        color: var(--color-link-hover);
+    }
 }
diff --git a/src/styles/layouts/_header.scss b/src/styles/layouts/_header.scss
index 529e118..c792a09 100644
--- a/src/styles/layouts/_header.scss
+++ b/src/styles/layouts/_header.scss
@@ -4,22 +4,27 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-
-    @include breakpoint-at-least(medium) {
-        justify-content: flex-start;
-    }
 }
 
 .header-nav {
-    display: grid;
-    align-items: center;
-    column-gap: 5px;
-    grid-template-columns: 1fr 20% 25%;
-    grid-template-rows: 1fr;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
     margin-top: 20px;
+}
+
+.header-nav-right {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: clamp(150px, 25vw, 250px);
+    width: 50%;
+}
+
+.cart-button-container {
+    width: 50%;
 
-    @include breakpoint-at-least(500px) {
-        column-gap: 20px;
-        grid-template-columns: 1fr 5rem 6rem;
+    @include breakpoint-at-least(large) {
+        width: 60%;
     }
 }
diff --git a/src/styles/layouts/_index.scss b/src/styles/layouts/_index.scss
index 8f62689..b6cd453 100644
--- a/src/styles/layouts/_index.scss
+++ b/src/styles/layouts/_index.scss
@@ -1,3 +1,4 @@
 @forward 'flex';
 @forward 'footer';
 @forward 'header';
+@forward 'shop';
diff --git a/src/styles/layouts/_shop.scss b/src/styles/layouts/_shop.scss
new file mode 100644
index 0000000..f9387a9
--- /dev/null
+++ b/src/styles/layouts/_shop.scss
@@ -0,0 +1,21 @@
+@use '../abstracts/' as *;
+
+.items-container {
+    display: grid;
+    gap: 50px 20px;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    justify-items: center;
+
+    @include breakpoint-at-least(small) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include breakpoint-at-least(medium) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    @include breakpoint-at-least(100em) {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss
index 9df8fca..7a70f26 100644
--- a/src/styles/themes/_dark.scss
+++ b/src/styles/themes/_dark.scss
@@ -23,6 +23,7 @@ $dark: (
     color-button-text: color($neutral, 75),
     color-button-text-border: color($neutral, 50, 0.4),
     color-link-border: color($neutral, 50, 0.6),
+    color-link-hover: color($purple, 200),
     color-link-unvisited: rgb(153, 153, 255),
     color-link-visited: rgb(204, 128, 255),
     color-message-error: rgb(223, 154, 167),
@@ -31,6 +32,7 @@ $dark: (
     color-message-warning: rgb(255, 245, 157),
     color-outline-focus-primary: color($neutral, 50, 0.6),
     color-text-inverted: color($neutral, 850),
+    color-text-item-warning: rgb(224, 129, 146),
     color-text-logo: color($yellow, 200),
     color-text-msg-error: color($neutral, 900),
     color-text-msg-info: color($neutral, 900),
diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss
index 3d5bf81..f7ba136 100644
--- a/src/styles/themes/_light.scss
+++ b/src/styles/themes/_light.scss
@@ -23,6 +23,7 @@ $light: (
     color-button-text: color($neutral, 850),
     color-button-text-border: color($neutral, 900, 0.6),
     color-link-border: color($neutral, 900, 0.6),
+    color-link-hover: color($yellow, 900),
     color-link-unvisited: rgb(20, 20, 255),
     color-link-visited: rgb(116, 0, 194),
     color-message-error: rgb(128, 0, 0),
@@ -31,6 +32,7 @@ $light: (
     color-message-warning: rgb(255, 236, 61),
     color-outline-focus-primary: color($neutral, 900, 0.6),
     color-text-inverted: color($neutral, 75),
+    color-text-item-warning: rgb(200, 0, 0),
     color-text-logo: color($purple, 800),
     color-text-msg-error: color($neutral, 50),
     color-text-msg-info: color($neutral, 900),