Update app.py

app.py

@@ -174,7 +174,7 @@ modal_and_cart_js = """
         updateCartDisplay();
         closeModal();
     }
-    function updateCartDisplay() {
+   function updateCartDisplay() {
         let totalBill = 0;
         let cartHTML = "<div class='cart-container'>";
         cart.forEach((item, index) => {
@@ -191,7 +191,7 @@ modal_and_cart_js = """
                                 <input type='number' id='extra-quantity-${index}-${i}' value='${extraQuantity}' min='1' style='width: 50px;' onchange='updateExtraQuantity(${index}, ${i}, this.value)'>
                             </div>
                             <span>Total: $${extraTotal.toFixed(2)}</span>
-                            <input type='checkbox' id='extra-remove-${index}-${i}' onclick='removeExtra(${index}, ${i})'> Remove
+                            <button style='background-color: red; color: white; border: none; padding: 5px 10px; cursor: pointer;' onclick='removeExtra(${index}, ${i})'>Remove</button>
                         </div>`;
             }).join('');
             cartHTML += `<div class='cart-item'>
@@ -202,15 +202,16 @@ modal_and_cart_js = """
                                 <input type='number' id='item-quantity-${index}' value='${item.quantity}' min='1' style='width: 50px;' onchange='updateItemQuantity(${index}, this.value)'>
                             </div>
                             <span>Total: $${(item.price * item.quantity).toFixed(2)}</span>
-                            <input type='checkbox' id='item-remove-${index}' onclick='removeItem(${index})'> Remove
-                        </div>
+                            <button style='background-color: red; color: white; border: none; padding: 5px 10px; cursor: pointer;' onclick='removeItem(${index})'>Remove</button>
+                         </div>
                         ${extras}
                         <div class='cart-item'><strong>Instructions:</strong> ${item.instructions || "None"}</div>`;
-        });
-        cartHTML += `</div><p class='cart-total'>Total Bill: $${totalBill.toFixed(2)}</p>`;
-        cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; width: 100%; cursor: pointer;' onclick='submitCart()'>Submit</button>`;
-        document.getElementById('floating-cart').innerHTML = cartHTML;
-    }
+    });
+    cartHTML += `</div><p class='cart-total'>Total Bill: $${totalBill.toFixed(2)}</p>`;
+    cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px; border-radius: 5px; width: 100%; cursor: pointer;' onclick='submitCart()'>Submit</button>`;
+    document.getElementById('floating-cart').innerHTML = cartHTML;
+}
+
     function updateItemQuantity(index, newQuantity) {
         const quantity = parseInt(newQuantity) || 1;
         cart[index].quantity = quantity;