updated css for ManageAds.jsx

2 files changed, 91 insertions, 43 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;
+  }
+}
diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx
index 9f6e28c..397315b 100644
--- a/panel/src/pages/ManageAds.jsx
+++ b/panel/src/pages/ManageAds.jsx
@@ -61,7 +61,9 @@ const ManageAds = () => {
 
   const handleDeleteAd = async (id) => {
     await deleteDoc(doc(db, 'ads', id));
-    setAds(ads.filter(ad => ad.id !== id));
+    const querySnapshot = await getDocs(collection(db, 'ads'));
+    const adsList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+    setAds(adsList);
   };
 
   const handleEditAd = (ad) => {
@@ -73,57 +75,64 @@ const ManageAds = () => {
   };
 
   return (
-    <>
+    <div className="manage-ads">
       <Navbar />
-      <Container className="manage-ads">
+      <Container className="manage-ads-container">
         <Typography variant="h4" className="manage-ads-header">Manage Ads</Typography>
-        <Button variant="contained" className="add-ad-button" onClick={() => setOpen(true)}>Add Ad</Button>
-        <Dialog open={open} onClose={() => setOpen(false)}>
-          <Box className="add-ad-dialog">
+        <Button variant="contained" color="primary" className="add-ad-button" onClick={() => setOpen(true)}>Add Ad</Button>
+        <Box className="manage-ads-list">
+          {ads.map(ad => (
+            <Box key={ad.id} className="ad-item">
+              {ad.fileURL && (ad.fileURL.includes('.mp4') ? (
+                <video src={ad.fileURL} controls className="ad-item-media" />
+              ) : (
+                <img src={ad.fileURL} alt={ad.name} className="ad-item-media" />
+              ))}
+              <Box>
+                <Typography variant="h6">{ad.name}</Typography>
+                <Typography>{ad.description}</Typography>
+              </Box>
+              <Box className="ad-item-actions">
+                <IconButton onClick={() => handleEditAd(ad)}>
+                  <EditIcon />
+                </IconButton>
+                <IconButton onClick={() => handleDeleteAd(ad.id)}>
+                  <DeleteIcon />
+                </IconButton>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <Dialog open={open} onClose={() => setOpen(false)} className="add-ad-dialog">
+          <Box p={2}>
+            <Typography variant="h6">{editAdId ? 'Edit Ad' : 'Add New Ad'}</Typography>
             <TextField
               label="Ad Name"
               value={adName}
               onChange={(e) => setAdName(e.target.value)}
               fullWidth
+              margin="normal"
             />
             <TextField
               label="Ad Description"
               value={adDescription}
               onChange={(e) => setAdDescription(e.target.value)}
               fullWidth
+              margin="normal"
+              multiline
+              rows={4}
             />
             <input
               type="file"
               onChange={(e) => setFile(e.target.files[0])}
             />
-            <Button onClick={handleAddAd}>Upload Ad</Button>
+            <Button variant="contained" color="primary" onClick={handleAddAd} fullWidth>
+              {editAdId ? 'Update Ad' : 'Add Ad'}
+            </Button>
           </Box>
         </Dialog>
-        <Box className="manage-ads-list">
-          {ads.map(ad => (
-            <Box key={ad.id} className="ad-item">
-              <Box className="ad-item-content">
-                <Typography variant="h6">{ad.name}</Typography>
-                <Typography variant="body1">{ad.description}</Typography>
-                {ad.fileURL && (
-                  ad.fileURL.includes('image') ?
-                  <img src={ad.fileURL} alt={ad.name} /> :
-                  <video src={ad.fileURL} controls />
-                )}
-              </Box>
-              <Box className="ad-item-actions">
-                <IconButton onClick={() => handleEditAd(ad)}>
-                  <EditIcon />
-                </IconButton>
-                <IconButton onClick={() => handleDeleteAd(ad.id)}>
-                  <DeleteIcon />
-                </IconButton>
-              </Box>
-            </Box>
-          ))}
-        </Box>
       </Container>
-    </>
+    </div>
   );
 };