fix: Improve Select Component Style in ChartFilter and PinAndCompare

CodeForAfrica · Aug 14, 2024 · d382bc4 · d382bc4
1 parent 00ef7ac
commit d382bc4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js b/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js
@@ -22,15 +22,14 @@ const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({
     width: typography.pxToRem(165),
     height: typography.pxToRem(40),
     paddingLeft: 0,
-    paddingRight: typography.pxToRem(40),
     [breakpoints.up("lg")]: {
       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/pesayetu/src/components/HURUmap/PinAndCompare/useStyles.js b/apps/pesayetu/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,10 +20,9 @@ const useStyles = makeStyles(({ typography, palette }) => ({
     },
   },
   select: {
-    width: typography.pxToRem(185),
+    width: typography.pxToRem(205),
     height: typography.pxToRem(40),
     paddingLeft: 0,
-    paddingRight: typography.pxToRem(40),
   },
   filled: {
     padding: `${typography.pxToRem(10)} 0 ${typography.pxToRem(