Update quantity buttons and their focus style

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>
     );

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;

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;
-}

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%;
-}

src/styles/layouts/_index.scss

@@ -1,5 +1,4 @@
 @forward 'cart';
-@forward 'flex';
 @forward 'footer';
 @forward 'header';
 @forward 'item-page';

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;