updated css for ManageAds.jsx

1 files changed, 51 insertions, 12 deletions

diff --git a/panel/src/pages/ManageAds.css b/panel/src/pages/ManageAds.css
index f6d805e..2887b15 100644
--- a/panel/src/pages/ManageAds.css
+++ b/panel/src/pages/ManageAds.css
@@ -1,9 +1,20 @@
+:root {
+  --primary-color: #4caf50;
+  --secondary-color: #ffffff;
+  --background-color: #f4f7fc;
+  --text-color: #333;
+  --text-light-color: #666;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --border-radius: 10px;
+}
+
 .manage-ads {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: #f4f7fc;
+  background-color: var(--background-color);
   min-height: 100vh;
+  padding: 20px;
 }
 
 .manage-ads-container {
@@ -11,9 +22,9 @@
   max-width: 1200px;
   margin-top: 20px;
   padding: 20px;
-  background-color: white;
-  border-radius: 10px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  background-color: var(--secondary-color);
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 20px var(--shadow-color);
 }
 
 .manage-ads-header {
@@ -23,7 +34,7 @@
 
 .manage-ads-header h4 {
   font-size: 28px;
-  color: #333;
+  color: var(--text-color);
 }
 
 .manage-ads-list {
@@ -37,20 +48,26 @@
   align-items: center;
   padding: 15px;
   margin-bottom: 15px;
-  background-color: #f9fafc;
-  border-radius: 10px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  background-color: var(--secondary-color);
+  border-radius: var(--border-radius);
+  box-shadow: 0 2px 10px var(--shadow-color);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.ad-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 20px var(--shadow-color);
 }
 
 .ad-item h6 {
   font-size: 18px;
-  color: #333;
+  color: var(--text-color);
   margin: 0;
 }
 
 .ad-item p {
   font-size: 14px;
-  color: #666;
+  color: var(--text-light-color);
   margin: 0;
 }
 
@@ -58,7 +75,7 @@
 .ad-item video {
   width: 100px;
   height: auto;
-  border-radius: 10px;
+  border-radius: var(--border-radius);
   margin-right: 15px;
 }
 
@@ -75,7 +92,7 @@
 }
 
 .ad-item-actions button svg {
-  fill: #333;
+  fill: var(--text-color);
 }
 
 .add-ad-button {
@@ -94,3 +111,25 @@
 .add-ad-dialog button {
   margin-top: 20px;
 }
+
+@media (max-width: 768px) {
+  .manage-ads-container {
+    padding: 10px;
+  }
+
+  .ad-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .ad-item img,
+  .ad-item video {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .ad-item-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}