From f0a09f877a8f93064e3a094140584c019efcb8d1 Mon Sep 17 00:00:00 2001
From: thatblindgeye <thatblindgeye@gmail.com>
Date: Sat, 24 Jul 2021 16:04:00 -0400
Subject: [PATCH] Update quantity buttons and their focus style

---
 src/assets/images/icons/decrement.svg      |  1 +
 src/assets/images/icons/increment.svg      |  1 +
 src/components/Inputs/Quantity.js          | 10 +++--
 src/styles/base/_typography.scss           | 30 ++++++++++---
 src/styles/components/_button.scss         | 49 ++++++++++++----------
 src/styles/components/_quantity-input.scss | 10 +----
 src/styles/layouts/_flex.scss              | 25 -----------
 src/styles/layouts/_index.scss             |  1 -
 src/styles/layouts/_item-page.scss         |  2 +-
 9 files changed, 64 insertions(+), 65 deletions(-)
 create mode 100644 src/assets/images/icons/decrement.svg
 create mode 100644 src/assets/images/icons/increment.svg
 delete mode 100644 src/styles/layouts/_flex.scss

diff --git a/src/assets/images/icons/decrement.svg b/src/assets/images/icons/decrement.svg
new file mode 100644
index 0000000..53523b9
--- /dev/null
+++ b/src/assets/images/icons/decrement.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/increment.svg b/src/assets/images/icons/increment.svg
new file mode 100644
index 0000000..e2040be
--- /dev/null
+++ b/src/assets/images/icons/increment.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
\ No newline at end of file
diff --git a/src/components/Inputs/Quantity.js b/src/components/Inputs/Quantity.js
index 59ab20e..9b0faa4 100644
--- a/src/components/Inputs/Quantity.js
+++ b/src/components/Inputs/Quantity.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { ReactComponent as IncrementIcon } from '../../assets/images/icons/increment.svg';
+import { ReactComponent as DecrementIcon } from '../../assets/images/icons/decrement.svg';
 
 export default function Quantity({
     changeEvent,
@@ -11,12 +13,12 @@ export default function Quantity({
     return (
         <div className='inputs-container'>
             <button
-                className='qty-decrement-button qty-button'
+                className='qty-decrement-button qty-button button-quantity'
                 onClick={decrementEvent}
                 disabled={quantity === 1 || !stock}
                 aria-label='decrease quantity'
             >
-                -
+                <DecrementIcon className='button-icon' />
             </button>
             <input
                 id={`quantity-${itemId}`}
@@ -29,12 +31,12 @@ export default function Quantity({
                 disabled={!stock}
             />
             <button
-                className='qty-increment-button qty-button'
+                className='qty-increment-button qty-button button-quantity'
                 onClick={incrementEvent}
                 disabled={quantity === stock || !stock}
                 aria-label='increase quantity'
             >
-                +
+                <IncrementIcon className='button-icon' />
             </button>
         </div>
     );
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 0548bc7..ff752f8 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -4,13 +4,24 @@ body {
     font-family: $base-fonts;
 }
 
-.logo-link {
-    font-family: $brand-fonts;
-    font-size: clamp(1rem, 10vw, 5rem);
+.button-contained {
+    color: var(--color-text-contained-button);
 }
 
-.nav-link {
-    font-size: clamp(1rem, 2vw, 1.5rem);
+.button-delete {
+    color: var(--color-button-delete);
+}
+
+.button-outline {
+    color: var(--color-text-primary);
+}
+
+.button-text {
+    color: var(--color-button-text);
+}
+
+.cart-item-name {
+    font-size: 1.125rem;
 }
 
 .image-card-text {
@@ -34,6 +45,15 @@ body {
     font-size: 0.9rem;
 }
 
+.logo-link {
+    font-family: $brand-fonts;
+    font-size: clamp(1rem, 10vw, 5rem);
+}
+
+.nav-link {
+    font-size: clamp(1rem, 2vw, 1.5rem);
+}
+
 .quantity-input {
     font-size: 1.5rem;
     text-align: center;
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
index c88c377..60f15e4 100644
--- a/src/styles/components/_button.scss
+++ b/src/styles/components/_button.scss
@@ -1,20 +1,17 @@
 @use '../abstracts/mixins' as *;
 
 .button {
-    --base-size: 1.25rem;
-
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.75rem 1rem;
 }
 
 .button-contained {
     @extend .button;
     background-color: var(--color-button-contained);
     border: 2px solid transparent;
-    color: var(--color-text-contained-button);
+    padding: 0.75rem 1rem;
 
     &:hover,
     &:focus {
@@ -26,11 +23,29 @@
     }
 }
 
+.button-delete {
+    @extend .button;
+    background-color: transparent;
+    border: 1px solid transparent;
+    transition: border 200ms linear;
+
+    &:focus,
+    &:hover {
+        border: 1px solid var(--color-button-delete-border);
+    }
+}
+
+.button-icon {
+    --base-size: 1.25rem;
+
+    height: var(--base-size);
+    width: var(--base-size);
+}
+
 .button-outline {
     @extend .button;
     background-color: transparent;
     border: 1px solid var(--color-button-outline);
-    color: var(--color-text-primary);
     transition: transform 200ms linear, border 200ms linear;
 
     &:hover,
@@ -43,35 +58,27 @@
     }
 }
 
-.button-text {
+.button-quantity {
     @extend .button;
     background-color: transparent;
     border: 1px solid transparent;
-    color: var(--color-button-text);
-    text-transform: uppercase;
-    transition: border 200ms linear;
+    padding: 8px 4px;
+    width: 25%;
 
-    &:hover,
     &:focus {
         border: 1px solid var(--color-button-text-border);
     }
 }
 
-.button-delete {
+.button-text {
     @extend .button;
     background-color: transparent;
     border: 1px solid transparent;
-    color: var(--color-button-delete);
+    padding: 0.75rem 0.5rem;
     transition: border 200ms linear;
 
-    &:focus,
-    &:hover {
-        border: 1px solid var(--color-button-delete-border);
+    &:hover,
+    &:focus {
+        border: 1px solid var(--color-button-text-border);
     }
 }
-
-.button-icon {
-    height: var(--base-size);
-    width: var(--base-size);
-    margin-right: 10px;
-}
diff --git a/src/styles/components/_quantity-input.scss b/src/styles/components/_quantity-input.scss
index 581a335..7396d47 100644
--- a/src/styles/components/_quantity-input.scss
+++ b/src/styles/components/_quantity-input.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 150px;
+    width: min(100%, 200px);
 }
 
 .quantity-label {
@@ -17,12 +17,6 @@
 }
 
 .quantity-input {
-    // margin: 0 10px;
+    margin: 0 10px;
     width: 50%;
 }
-
-.qty-button {
-    background-color: transparent;
-    border: none;
-    width: 25%;
-}
diff --git a/src/styles/layouts/_flex.scss b/src/styles/layouts/_flex.scss
deleted file mode 100644
index 167df78..0000000
--- a/src/styles/layouts/_flex.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use '../abstracts/mixins' as *;
-
-.flex {
-    display: flex;
-
-    &--column {
-        @extend .flex;
-        flex-direction: column;
-    }
-
-    &--column-reverse {
-        @extend .flex;
-        flex-direction: column-reverse;
-    }
-
-    &--row {
-        @extend .flex;
-        flex-direction: row;
-    }
-
-    &--row-reverse {
-        @extend .flex;
-        flex-direction: row-reverse;
-    }
-}
diff --git a/src/styles/layouts/_index.scss b/src/styles/layouts/_index.scss
index 527558e..07dc68d 100644
--- a/src/styles/layouts/_index.scss
+++ b/src/styles/layouts/_index.scss
@@ -1,5 +1,4 @@
 @forward 'cart';
-@forward 'flex';
 @forward 'footer';
 @forward 'header';
 @forward 'item-page';
diff --git a/src/styles/layouts/_item-page.scss b/src/styles/layouts/_item-page.scss
index c6f74c7..dd37bb8 100644
--- a/src/styles/layouts/_item-page.scss
+++ b/src/styles/layouts/_item-page.scss
@@ -44,7 +44,7 @@
     gap: 20px 0;
     grid-area: add-cart;
     margin: 50px auto 0;
-    width: max-content;
+    width: 100%;
 
     @include breakpoint-at-least(x-large) {
         margin: 0;