Merge pull request #836 from CodeForAfrica/fix/hurumap_select_component

@PesaYetu Fix Select component styles
CodeForAfrica · Aug 14, 2024 · 01430cd · 01430cd
2 parents 19dc343 + 8721f44
commit 01430cd
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 26 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: {

diff --git a/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js b/apps/pesayetu/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/pesayetu/src/components/HURUmap/PinAndCompare/index.js b/apps/pesayetu/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.select,
+          filled: classes.filled,
+          paper: classes.selectPaper,
+        }}
       />
     </Box>
   );

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),
@@ -19,12 +19,18 @@ const useStyles = makeStyles(({ typography, palette }) => ({
       backgroundColor: palette.grey.light,
     },
   },
-  locationSelect: {
-    paddingTop: typography.pxToRem(10),
-    paddingBottom: typography.pxToRem(10),
+  select: {
+    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),
+    maxHeight: typography.pxToRem(310),
   },
 }));
 

diff --git a/apps/pesayetu/src/components/Select/useStyles.js b/apps/pesayetu/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: {