Update templates/cart.html (#6)

- Update templates/cart.html (e1f36236d143d56790dfd49f25ab1b2473300c77)


Co-authored-by: Surendra <[email protected]>

templates/cart.html

@@ -42,13 +42,19 @@
     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 */
+    font-size: 1.2rem; /* Slightly decrease the size of the trash icon */
     margin-bottom: 10px; /* Add space below the delete icon */
     transition: color 0.3s ease; /* Smooth transition for icon color */
     position: relative; /* Make it relative for movement */
-    top: -40px; /* Move the button 10px upwards */
+    top: -35px; /* Move the button 10px upwards */
     left: 50px; /* Move the button 30px to the right */
 }
+
+.remove-btn i {
+    color: red; /* Make the trash icon red */
+}
+
+
 /* Hover effect */
 .remove-btn:hover {
     color: black; /* Change the icon color to black on hover */
@@ -62,33 +68,35 @@
 .text-primary {
     color: #000 !important; /* Ensure the price is black */
     text-align: right; /* Center-align the price */
+    font-weight: bold; /* Make the price text bold */
     white-space: nowrap; /* Prevent price text from wrapping */
 }
-/* Default for larger screens like desktops */
+/* For the image container */
 .image-wrapper {
     width: 80px;                     /* Width of the image container */
-    height: 140px !important;         /* Height of the image container */
-    display: flex;                   /* Flex container for the image */
-    align-items: flex-start;         /* Align the image at the top */
-    justify-content: center;         /* Center image horizontally if it has space */
+    height: 80px !important;          /* Set the height of the container to match the image */
+    display: flex;                    /* Flex container for the image */
+    align-items: center;              /* Center image vertically */
+    justify-content: center;          /* Center image horizontally */
 }
 
-/* Responsive for mobile devices */
+/* For the image */
 .cart-item img {
-            width: 70px;
-            height: 70px;
-            object-fit: cover;
-            border-radius: 5px;
-            border: 1px solid #ffcc80; /* Light orange border around images */
-        }
+    width: 70px;                      /* Set the width to 70px */
+    height: 70px;                     /* Set the height to 70px */
+    object-fit: cover;                /* Ensure the image covers the container without stretching */
+    border-radius: 5px;               /* Optional: rounded corners */
+    border: 1px solid #ffcc80;        /* Light orange border around images */
+    margin: 0;                         /* Ensure no extra space around the image */
+}
 
-       
+        
         .cart-item img:hover {
             transform: scale(1.05);
         }
         .cart-item-title {
             font-size: 1.1rem;
-            font-weight: 400;
+            font-weight: bold; /* Make the title text bold */
         }
         
         .checkout-button {
@@ -259,7 +267,7 @@
     background-color: #0FAA39;
     color: #fff;
     padding: 12px;
-    border-radius: 15px;
+    border-radius: 8px;
     border: none;
     height: 44px;
     width: 100%;