improve cart arrangement

src/components/Cart.js

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { removeAllPosters, removePoster } from "../services/action";
 import DeleteIcon from "@material-ui/icons/Delete";
 import {
+  Container,
   Box,
   Typography,
   Button,
@@ -90,7 +91,9 @@ const Cart = () => {
   };
 
   return (
-    <div className="cart-container">
+    <>
+      <Container>
+      <div className="cart-container">
       <div className="poster-grid">
         {selectedPosters.length === 0 ? (
           <Box className="empty-cart-container">
@@ -107,29 +110,34 @@ const Cart = () => {
             </Button>
           </Box>
         ) : (
-          selectedPosters.map((poster) => (
+          <>
-            <div
+            {selectedPosters.map((poster) => (
-              key={`${poster.movieId}-${poster.posterId}`}
+              <div
-              className="poster-card"
+                key={`${poster.movieId}-${poster.posterId}`}
-            >
+                className="poster-card"
-              <img
+              >
-                src={`https://image.tmdb.org/t/p/original${poster.posterId}`}
+                <img
-                alt="Movie poster"
+                  src={`https://image.tmdb.org/t/p/original${poster.posterId}`}
-                className="poster-image"
+                  alt="Movie poster"
-              />
+                  className="poster-image"
-              <div className="delete-overlay">
+                />
-                <button
+                <div className="delete-overlay">
-                  className="delete-button"
+                  <button
-                  onClick={() =>
+                    className="delete-button"
-                    handleRemovePoster(poster.movieId, poster.posterId)
+                    onClick={() =>
-                  }
+                      handleRemovePoster(poster.movieId, poster.posterId)
-                  aria-label="Supprimer ce poster"
+                    }
-                >
+                    aria-label="Supprimer ce poster"
-                  <DeleteIcon />
+                  >
-                </button>
+                    <DeleteIcon />
+                  </button>
+                </div>
               </div>
+            ))}
+            <div className="poster-card add-new" onClick={() => navigate("/")}>
+              <span className="add-symbol">+</span>
             </div>
-          ))
+          </>
         )}
       </div>
 
@@ -188,6 +196,8 @@ const Cart = () => {
         </DialogActions>
       </Dialog>
     </div>
+      </Container>
+    </>
   );
 };
 

src/styles/scss/_cart.scss

@@ -10,7 +10,8 @@
   .poster-grid {
     flex: 1 1 auto;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    justify-content: center;
     gap: 1rem;
     padding-right: 1rem;
     overflow: visible;
@@ -65,6 +66,33 @@
       }
     }
 
+    .poster-card.add-new {
+      aspect-ratio: 2/3;
+      border-radius: 8px;
+      border: 2px dashed #7f8c8d;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background-color .2s ease, border-color .2s ease;
+    }
+    
+    .poster-card.add-new:hover {
+      background-color: rgba(255,255,255,0.05);
+      border-color: #1caff2;
+    }
+    
+    .add-new .add-symbol {
+      font-size: 3rem;
+      font-weight: bold;
+      color: #7f8c8d;
+      transition: transform .2s ease;
+    }
+    
+    .poster-card.add-new:hover .add-symbol {
+      transform: scale(1.1);
+    }
+
     // État vide simple
     .empty-cart-container {
       grid-column: 1 / -1;
@@ -186,7 +214,7 @@
     gap: 1rem;
 
     .poster-grid {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(2, 140px); 
       max-height: calc(100vh - 3rem);
 
       .poster-card {
@@ -209,7 +237,7 @@
     padding: 1rem;
 
     .poster-grid {
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(4, 120px);
       gap: 0.75rem;
       padding-right: 0;
       max-height: none;
@@ -225,12 +253,13 @@
     }
 
     .action-panel {
-      position: relative;
+      flex: 0;
-      top: 0;
+      align-self: center;
-      width: 100%;
+      .download-button,
-      margin-top: 1rem;
+      .clear-button {
-      border-radius: 8px;
+        padding: 0.85rem;
-      padding: 1rem;
+        font-size: 0.95rem;
+      }
     }
   }
 }
@@ -238,16 +267,17 @@
 /* Mobile */
 @media (max-width: 480px) {
   .cart-container {
+    display: flex;
     padding: 0.75rem;
     gap: 0.75rem;
+    align-items: center;
 
     .poster-grid {
-      grid-template-columns: 1fr;
+      grid-template-columns: repeat(2, 140px);
-      gap: 0.6rem;
 
       .poster-card {
         aspect-ratio: 2/3;
-        min-height: 260px;
+        min-height: 150px;
         border-radius: 6px;
 
         .poster-image {
@@ -278,19 +308,9 @@
     }
 
     .action-panel {
+      flex: 0;
+      align-self: center;
       width: 100%;
-      padding: 0.9rem;
-      border-radius: 6px;
-
-      h2 {
-        font-size: 1.05rem;
-        margin-bottom: 1rem;
-      }
-
-      .format-select {
-        padding: 0.5rem;
-      }
-
       .download-button,
       .clear-button {
         padding: 0.85rem;

src/styles/scss/_posterSelector.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Variables
 $primary-color: #00a346;
 $secondary-color: #667788;
@@ -187,7 +189,7 @@ $hover-color: rgba(102, 119, 136, 0.2);
     transition: background-color 0.3s ease;
 
     &:hover {
-      background-color: darken($primary-color, 10%) !important;
+      background-color: color.scale($primary-color, $lightness: 10%) !important;
     }
   }
 }