Update templates/cart.html

templates/cart.html

@@ -47,18 +47,17 @@
 
 .cart-item-actions {
     display: flex;
-    flex-direction: column; /* Stack the delete icon and price vertically */
-    align-items: center; /* Center-align both the icon and the price */
-    justify-content: center; /* Vertically center the items in the container */
+    flex-direction: column; /* Stack the icon and price vertically */
+    align-items: center; /* Center-align the contents */
+    justify-content: center; /* Vertically center the items */
 }
 
-.remove-icon {
-    border: none;
-    background: none;
-    color: red; /* Keep the color red for the icon */
-    font-size: 1.2rem;
-    cursor: pointer;
-    margin-bottom: 10px; /* Add space between icon and price */
+.remove-btn {
+    border: none; /* Remove the border around the button */
+    background-color: transparent; /* Transparent background */
+    cursor: pointer; /* Change cursor to pointer */
+    font-size: 1.5rem; /* Adjust the size of the trash icon */
+    margin-bottom: 10px; /* Add space below the delete icon */
 }
 
 .text-primary {
@@ -68,6 +67,7 @@
 
 
 
+
         .image-wrapper {
             width: 80px;                    /* Width of the image container */
             height: 140px !important;                   /* Height of the image container */
@@ -395,11 +395,12 @@
                         </div>
                         <div class="cart-item-actions">
                             <div>
-                                <button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">
-                                    <!-- SVG Recycle Bin Icon -->
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-                                      <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM8 3C8 2.45 8.45 2 9 2H15C15.55 2 16 2.45 16 3V5H8V3Z" fill="none" stroke="black" stroke-width="2"/>
-                                    </svg>
+                                <!-- Link to Bootstrap Icons CSS -->
+                                <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+        
+                                <!-- Delete Button with Trash Icon -->
+                                <button type="button" class="btn btn-light text-dark remove-btn">
+                                    <i class="bi bi-trash"></i>
                                 </button>
                             </div>
                             <div class="text-primary" style="color: #000 !important;">