Improvements

- Renamed Checkout to proper Cart name - Fixed issues with fade animation and z-index due to stacking context - Small improvement of the nav items spacing / naming
fleps · Apr 15, 2024 · 4793f63 · 4793f63
1 parent 673350e
commit 4793f63
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 31 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -10,7 +10,7 @@ const Navigation = lazy(() => import('./routes/navigation/navigation.component')
 const Home = lazy(() => import('./routes/home/home.component'));
 const Login = lazy(() => import('./routes/login/login.component'));
 const Shop = lazy(() => import('./routes/shop/shop.component'));
-const CheckoutComponent = lazy(() => import('./routes/checkout/checkout.component'));
+const CartComponent = lazy(() => import('./routes/cart/cart.component'));
 
 const App = () => {
   const location = useLocation();
@@ -39,7 +39,7 @@ const App = () => {
           <Route index element={<Home />} />
           <Route path='shop/*' element={<Shop />} />
           <Route path='login' element={<Login />} />
-          <Route path='checkout' element={<CheckoutComponent />} />
+          <Route path='cart' element={<CartComponent />} />
         </Route>
       </Routes>
     </Suspense>

diff --git a/src/components/cart/cart-icon.styles.scss b/src/components/cart/cart-icon.styles.scss
@@ -7,6 +7,7 @@
   justify-content: center;
   cursor: pointer;
   user-select: none;
+  margin-left: 5px;
 
   .shopping-icon {
     width: 24px;

diff --git a/src/components/cart/minicart.component.jsx b/src/components/cart/minicart.component.jsx
@@ -31,7 +31,7 @@ const Minicart = memo(() => {
     <div
       data-testid='minicart'
       className={`minicart-container ${
-        (openMinicart && location.pathname !== '/checkout') && 'to-show'
+        (openMinicart && location.pathname !== '/cart') && 'to-show'
       }`}
     >
       <div className='minicart-content'>
@@ -49,7 +49,7 @@ const Minicart = memo(() => {
               <div className='minicart-total medium-barlow-cond'>
                 Total: <span>$ {bagTotalPrice.toFixed(2)}</span>
               </div>
-              <Link className='button-container' to={'/checkout'}>Checkout</Link>
+                <Link className='button-container' to={'/cart'}>Go to Cart</Link>
             </>
           )
         }

diff --git a/src/components/footer/footer.styles.scss b/src/components/footer/footer.styles.scss
@@ -13,7 +13,7 @@
   }
 
   @media only screen and (max-width: 1140px ) {
-    .checkout-container + & {
+    .cart-container + & {
       margin: auto 0 53px;
     }
   }

diff --git a/src/index.scss b/src/index.scss
@@ -33,15 +33,32 @@ body {
   margin-right: auto;
   padding: 0 20px 25px;
   width: 100%;
-  opacity: 0;
-  animation: 0.40s ease-out forwards fade-in;
+  /* opacity: 0;
+  animation: 0.40s ease-out forwards fade-in; */
 
   @media only screen and (min-width: 768px ) {
     padding: 0 20px 50px;
   }
 
   .navigation + & {
     padding-top: 95px;
+
+    &::after {
+      content: '';
+      display: block;
+      opacity: 1;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      max-width: 100vw;
+      max-height: 100vh;
+      background: #FFF;
+      pointer-events: none;
+      animation: 0.40s 0.15s ease-out forwards fade-out;
+      z-index: 9;
+    }
   }
 }
 
@@ -50,7 +67,17 @@ body {
     opacity: 0;
   }
   to {
-    opacity: 100;
+    opacity: 1;
+    z-index: -1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
   }
 }
 

diff --git a/src/routes/checkout/checkout.component.jsx → src/routes/cart/cart.component.jsx b/src/routes/checkout/checkout.component.jsx → src/routes/cart/cart.component.jsx
@@ -4,35 +4,41 @@ import { Link } from 'react-router-dom';
 import { addItemToCart, removeOrDecreaseItem } from '../../store/minicart.reducer';
 import { selectBagTotalPrice, selectCartItems } from '../../store/minicart.selector';
 
-import './checkout.styles.scss';
+import './cart.styles.scss';
 
-const CheckoutComponent = () => {
+const CartComponent = () => {
   const dispatch = useDispatch();
   const cartItems = useSelector(selectCartItems);
   const bagTotalPrice = useSelector(selectBagTotalPrice);
 
-  const handleAddToCart = (product) => dispatch(addItemToCart(product));
+  const handleAddToCart = (product) => {
+    if (product.quantity < 10) {
+      dispatch(addItemToCart(product));
+    }
+  };
   const handleRemoveOrDecrease = (product, directRemove = false) => dispatch(removeOrDecreaseItem({ product, directRemove }));
 
   return (
-    <div className={`container checkout-container ${!cartItems.length && 'empty-container'}`}>
-      <h1>Checkout</h1>
+    <div className={`container cart-container ${!cartItems.length && 'empty-container'}`}>
       {
         cartItems.length > 0 && (
-          <div className='total'>
-            <span>Total:</span> $ {bagTotalPrice.toFixed(2)}
-          </div>
+          <>
+            <h1>Cart</h1>
+            <div className='total'>
+              <span>Total:</span> $ {bagTotalPrice.toFixed(2)}
+            </div>
+          </>
         )
       }
       {
         !cartItems.length ? (
-          <div className='empty-checkout'>
-            <h2>Your Checkout is empty</h2>
+          <div>
+            <h2>Your Cart is empty</h2>
             <Link className='button-container' to={'/shop'}>Go Shopping</Link>
           </div>
         ) : (
           <>
-            <div className='checkout-header semibold-barlow-cond'>
+            <div className='cart-header semibold-barlow-cond'>
               <div className='header-block'>Product</div>
               <div className='header-block'></div>
               <div className='header-block text-center'>Quantity</div>
@@ -42,7 +48,7 @@ const CheckoutComponent = () => {
             {
               cartItems.map(item => {
                 return (
-                  <div key={item.id} className='checkout-item-container'>
+                  <div key={item.id} className='cart-item-container'>
                     <div className='image-container'>
                       <img src={item.imageUrl} alt='' />
                     </div>
@@ -80,4 +86,4 @@ const CheckoutComponent = () => {
   );
 }
 
-export default CheckoutComponent;
+export default CartComponent;
diff --git a/src/routes/checkout/checkout.styles.scss → src/routes/cart/cart.styles.scss b/src/routes/checkout/checkout.styles.scss → src/routes/cart/cart.styles.scss
@@ -1,23 +1,21 @@
-.checkout-container.container {
+.cart-container.container {
   max-width: 800px;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   position: relative;
 
   &.empty-container {
+    flex: 1;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
   }
 
   h1 {
     margin: 0;
   }
 
-  .empty-checkout {
-    min-height: 40vh;
-  }
-
   .total {
     margin-left: auto;
     font-size: 36px;
@@ -49,7 +47,7 @@
     }
   }
 
-  .checkout-header {
+  .cart-header {
     width: 100%;
     padding: 10px 0;
     display: flex;
@@ -69,7 +67,7 @@
   }
 }
 
-.checkout-item-container {
+.cart-item-container {
   width: 100%;
   display: flex;
   min-height: 100px;
@@ -97,6 +95,8 @@
 
   .name {
     font-size: 25px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   button {
@@ -125,7 +125,7 @@
     .value {
       width: 18px;
       text-align: center;
-      margin: 0 10px;
+      margin: 0 2px;
     }
   }
 

diff --git a/src/routes/navigation/navigation.component.jsx b/src/routes/navigation/navigation.component.jsx
@@ -19,7 +19,7 @@ const Navigation = () => {
             <img src={Logo} alt='' className=''/>
           </Link>
           <div className='nav-links-container'>
-            <Link className='nav-link' to={'/shop'}>Shop</Link>
+            <Link className='nav-link' to={'/shop'}>Shop All</Link>
             {
               currentUser === 'logged-out' && <Link className='nav-link' to={'/login'}>Login</Link>
             }

diff --git a/src/routes/navigation/navigation.styles.scss b/src/routes/navigation/navigation.styles.scss
@@ -33,7 +33,8 @@
     justify-content: flex-end;
 
     .nav-link {
-      padding: 10px 15px;
+      padding: 10px 10px;
+      margin-right: 5px;
       cursor: pointer;
     }
   }