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, + }} /> ); 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: {