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,6 +91,8 @@ const Cart = () => {
   };
 
   return (
+    <>
+      <Container>
       <div className="cart-container">
       <div className="poster-grid">
         {selectedPosters.length === 0 ? (
@@ -107,7 +110,8 @@ const Cart = () => {
             </Button>
           </Box>
         ) : (
-          selectedPosters.map((poster) => (
+          <>
+            {selectedPosters.map((poster) => (
               <div
                 key={`${poster.movieId}-${poster.posterId}`}
                 className="poster-card"
@@ -129,7 +133,11 @@ const Cart = () => {
                   </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;
-      top: 0;
-      width: 100%;
-      margin-top: 1rem;
-      border-radius: 8px;
-      padding: 1rem;
+      flex: 0;
+      align-self: center;
+      .download-button,
+      .clear-button {
+        padding: 0.85rem;
+        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;
-      gap: 0.6rem;
+      grid-template-columns: repeat(2, 140px);
 
       .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;
     }
   }
 }