From 8721f44ce2165f154da5c5ee3bab2b2f8cc718c3 Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Wed, 14 Aug 2024 13:35:15 +0300
Subject: [PATCH] fix: Apply fix on Select component for ClimateMappedAfrica

---
 .../components/HURUmap/ChartFilter/useStyles.js    | 10 ++++++----
 .../src/components/HURUmap/PinAndCompare/index.js  |  6 +++++-
 .../components/HURUmap/PinAndCompare/useStyles.js  | 14 ++++++++++----
 .../src/components/Select/useStyles.js             |  4 +---
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/useStyles.js
index 6a3e18487..1a6c85531 100644
--- 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
index a6cecb4a7..32bb0f29f 100644
--- 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
index 578e8dce0..ec69a427c 100644
--- 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
index 6df433db0..3872af0c0 100644
--- 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: {