fix: Apply fix on Select component for ClimateMappedAfrica

CodeForAfrica · Aug 14, 2024 · 8721f44 · 8721f44
1 parent d382bc4
commit 8721f44
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js
@@ -20,14 +20,16 @@ const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({
   },
   select: {
     width: typography.pxToRem(165),
+    height: typography.pxToRem(40),
+    paddingLeft: 0,
     [breakpoints.up("lg")]: {
-      width: typography.pxToRem(185),
+      width: typography.pxToRem(200),
     },
   },
   filled: {
-    padding: `${typography.pxToRem(10)} 0 ${typography.pxToRem(
-      10,
-    )} ${typography.pxToRem(15)} !important`,
+    padding: `${typography.pxToRem(10)} ${typography.pxToRem(
+      40,
+    )} ${typography.pxToRem(10)} ${typography.pxToRem(20)} !important`,
   },
   selectPaper: {
     maxHeight: typography.pxToRem(310),

diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/index.js
@@ -89,7 +89,11 @@ function PinAndCompare({
         options={options}
         placeholder={placeholder}
         selected={selected}
-        classes={{ select: classes.locationSelect, paper: classes.selectPaper }}
+        classes={{
+          select: classes.locationSelect,
+          paper: classes.selectPaper,
+          filled: classes.filled,
+        }}
       />
     </Box>
   );

diff --git a/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/PinAndCompare/useStyles.js
@@ -7,8 +7,8 @@ const useStyles = makeStyles(({ typography, palette }) => ({
     borderBottom: `solid 1px ${palette.divider}`,
   },
   pinButton: {
-    maxHeight: typography.pxToRem(44),
-    maxWidth: typography.pxToRem(44),
+    maxHeight: typography.pxToRem(40),
+    maxWidth: typography.pxToRem(40),
     overflow: "hidden",
     padding: 0,
     marginRight: typography.pxToRem(14),
@@ -20,8 +20,14 @@ const useStyles = makeStyles(({ typography, palette }) => ({
     },
   },
   locationSelect: {
-    paddingTop: typography.pxToRem(10),
-    paddingBottom: typography.pxToRem(10),
+    width: typography.pxToRem(205),
+    height: typography.pxToRem(40),
+    paddingLeft: 0,
+  },
+  filled: {
+    padding: `${typography.pxToRem(10)} 0 ${typography.pxToRem(
+      10,
+    )} ${typography.pxToRem(15)} !important`,
   },
   selectPaper: {
     height: typography.pxToRem(310),

diff --git a/apps/climatemappedafrica/src/components/Select/useStyles.js b/apps/climatemappedafrica/src/components/Select/useStyles.js
@@ -10,12 +10,10 @@ const useStyles = makeStyles(({ typography, palette, breakpoints }) => ({
     },
   },
   select: {
-    height: "100%",
     width: typography.pxToRem(135),
     background: palette.background.paper,
     borderStyle: "none",
     borderRadius: 2,
-    paddingLeft: typography.pxToRem(24),
     paddingBottom: typography.pxToRem(15),
     paddingTop: typography.pxToRem(15),
     fontSize: typography.caption.fontSize,
@@ -28,7 +26,7 @@ const useStyles = makeStyles(({ typography, palette, breakpoints }) => ({
       display: "none",
     },
     [breakpoints.up("lg")]: {
-      width: typography.pxToRem(165),
+      width: typography.pxToRem(185),
     },
   },
   paper: {