Fix Select dropdown styles

CodeForAfrica · Dec 4, 2024 · 855de64 · 855de64
1 parent 5600686
commit 855de64
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js b/apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js
@@ -7,7 +7,7 @@ function CategoryHeader({ title, description, icon, ...props }) {
     return null;
   }
   return (
-    <div>
+    <Box>
       <Typography
         {...props}
         variant="h3"
@@ -48,7 +48,7 @@ function CategoryHeader({ title, description, icon, ...props }) {
           {description}
         </Typography>
       )}
-    </div>
+    </Box>
   );
 }
 

diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js
@@ -113,13 +113,10 @@ function ChartFilter({
               }}
               MenuProps={{
                 "& .MuiMenu-paper": {
-                  height: theme.typography.pxToRem(310),
+                  maxHeight: theme.typography.pxToRem(310),
                   boxShadow: "none",
-                },
-                "& .MuiMenu-list": {
-                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
-                    10,
-                  )} ${theme.typography.pxToRem(15)} !important`,
+                  borderRadius: 0,
+                  marginTop: theme.typography.pxToRem(5),
                 },
               }}
             />

diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js
@@ -120,11 +120,6 @@ function PinAndCompare({
             height: theme.typography.pxToRem(310),
             boxShadow: "none",
           },
-          "& .MuiMenu-list": {
-            padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
-              10,
-            )} ${theme.typography.pxToRem(15)} !important`,
-          },
         }}
       />
     </Grid>

diff --git a/apps/climatemappedafrica/src/components/Select/index.js b/apps/climatemappedafrica/src/components/Select/index.js
@@ -109,6 +109,18 @@ function Input({
                 borderRadius: "0",
               },
             },
+            "& .MuiMenu-list": {
+              paddingTop: 0,
+              paddingBottom: 0,
+              "& li": {
+                fontWeight: 400,
+                paddingTop: typography.pxToRem(12),
+                paddingBottom: typography.pxToRem(12),
+              },
+              "& li.Mui-selected": {
+                fontWeight: "bold",
+              },
+            },
             ...MenuProps,
           }),
           anchorOrigin: {
@@ -130,7 +142,7 @@ function Input({
           background: palette.background.paper,
           color: "#959696",
           borderStyle: "none",
-          borderRadius: 2,
+          borderRadius: typography.pxToRem(2),
           paddingBottom: typography.pxToRem(15),
           paddingTop: typography.pxToRem(15),
           fontSize: `${typography.caption.fontSize} !important`,