Update MapDialog styles and enhance close button appearance

aelassas · Jan 4, 2025 · 581d21f · 581d21f
1 parent d89f505
commit 581d21f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/frontend/src/assets/css/map-dialog.css b/frontend/src/assets/css/map-dialog.css
@@ -1,12 +1,16 @@
-.map-dialog {
-  width: 90%;
-  height: 90%;
-}
-
 .map-dialog-content {
   margin: 0;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.close-icon {
+  color: #fff;
+  font-size: 20px !important;
+}
+
+.close-btn:hover > * {
+  color: #d1d1d1;
+}
diff --git a/frontend/src/components/MapDialog.tsx b/frontend/src/components/MapDialog.tsx
@@ -42,21 +42,29 @@ const MapDialog = ({
       sx={{
         '& .MuiDialog-container': {
           '& .MuiPaper-root': {
-            width: '90%',
-            height: '90%',
+            width: '95%',
+            height: '95%',
           },
+          '& .MuiDialogTitle-root': {
+            padding: 0,
+            backgroundColor: '#1a1a1a',
+          },
+          '& .MuiDialogContent-root': {
+            padding: 0,
+          }
         },
       }}
     >
       <DialogTitle>
         <Box display="flex" justifyContent="flex-end">
           <Box>
             <IconButton
+              className="close-btn"
               onClick={() => {
                 close()
               }}
             >
-              <CloseIcon />
+              <CloseIcon className="close-icon" />
             </IconButton>
           </Box>
         </Box>