From 0670518598c5a9cb0912904c7cea951adb6bd475 Mon Sep 17 00:00:00 2001
From: Dipanita45 <132455672+Dipanita45@users.noreply.github.com>
Date: Sat, 9 Nov 2024 18:26:02 +0530
Subject: [PATCH] Made the mosification

---
 client/src/Animations.css                  |   2 +-
 client/src/Pages/Cart.css                  | 141 ++++++++++++++++++---
 client/src/components/Card/ProductCard.css |   1 +
 3 files changed, 128 insertions(+), 16 deletions(-)

diff --git a/client/src/Animations.css b/client/src/Animations.css
index 98371895..c8468e50 100644
--- a/client/src/Animations.css
+++ b/client/src/Animations.css
@@ -45,7 +45,7 @@
   @keyframes slideBottom {
     0% {
       transform: translateY(100px);
-      opacity: 0;
+      opacity: 0.03;
     }
     100% {
       transform: translateY(0);
diff --git a/client/src/Pages/Cart.css b/client/src/Pages/Cart.css
index b030513d..0a612260 100644
--- a/client/src/Pages/Cart.css
+++ b/client/src/Pages/Cart.css
@@ -1,18 +1,129 @@
 
 .cart-container {
-    max-width: 800px;
-    margin: 20px auto;
-    padding: 20px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 20px;
+  background: linear-gradient(to bottom right, #f9f9f9, #eaeaea);
+  border: 1px solid #ddd;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.cart-container:hover {
+  transition: .3s ease;
+  font-family: 'Times New Roman', Times, serif;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
+}
+
+.cart-header {
+  font-size: 28px;
+  margin-bottom: 15px;
+  font-weight: bold;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  color: #333;
+}
+
+.retry-button {
+  background-color: #002147;
+  color: #fff;
+  border: none;
+  padding: 10px 30px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-top: 10px;
+  border-radius: 6px;
+  text-align: center;
+  border: 2px solid #002147;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.retry-button:hover {
+  color: #002147;
+  background-color: #F4F4F4;
+  font-weight: 500;
+  transform: scale(1.05);
+}
+
+.cart-table th,
+.cart-table td {
+  border: 1px solid #ddd;
+  padding: 15px;
+  text-align: center;
+  transition: background-color 0.3s;
+}
+
+.cart-table th {
+  font-weight: bold;
+  background-color: #dde8f9;
+  color: #333;
+}
+
+.cart-table tbody tr:hover {
+  background-color: #f1f1f1; /* Highlight on hover */
+}
+
+.quantity-button,
+.remove-button,
+.remove-btn {
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.quantity-button:hover,
+.remove-button:hover,
+.remove-btn:hover {
+  transform: scale(1.05);
+}
+
+.cart-summary {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'Arial', sans-serif;
+}
+
+.cart-total {
+  font-size: 20px;
+  font-weight: bold;
+  color: #28a745;
+}
+
+.checkout-button {
+  background-color: #28a745;
+  color: #fff;
+  border: none;
+  padding: 12px 25px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 400ms ease, transform 200ms ease;
+}
+
+.checkout-button:hover {
+  background-color: #20612e;
+  transform: scale(1.05);
+}
+
+.suggested-products h2 {
+  font-size: 22px;
+  color: #555;
+}
+
+.suggested-products li {
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: #444;
+}
+
+@media (max-width: 600px) {
+  .cart-table th,
+  .cart-table td {
+      font-size: 14px;
   }
+}
   
-  .cart-header {
-    font-size: 24px;
-    margin-bottom: 10px;
-    font-weight: bold;
-   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  .cart-header:focus{
+    font-weight: 600;
   }
   
   
@@ -58,7 +169,7 @@
   }
   
   .quantity-button {
-    background-color: #007bff;
+    background-color: #0c81ff;
     color: #fff;
     border: none;
     padding: 5px 10px;
@@ -69,7 +180,7 @@
   }
   
   .remove-button {
-    background-color: #dc3545;
+    background-color: #df2235;
     color: #fff;
     border: none;
     padding: 5px 10px;
@@ -102,7 +213,7 @@
 }
 
 .checkout-button:hover {
-    background-color: #218838;
+    background-color: #20612e;
     transform: scale(1.05);
 }
 
@@ -178,7 +289,7 @@
   
  
   .remove-btn:hover {
-    background-color: #C62E2E;
+    background-color: #721818;
     transform: scale(1.05);
 }
 
diff --git a/client/src/components/Card/ProductCard.css b/client/src/components/Card/ProductCard.css
index 690585fd..cfd2fa6c 100644
--- a/client/src/components/Card/ProductCard.css
+++ b/client/src/components/Card/ProductCard.css
@@ -12,6 +12,7 @@
     border: none;
     border-radius: 50%;
     margin: 0.8rem 1.1rem 0 0;
+    transition: all;
 }
 
 .added-to-wishlist-btn:hover