From 917980ca49e2e34530049c025b6b31a0b2679ced Mon Sep 17 00:00:00 2001 From: Michael Hudson Nkotagu Date: Fri, 9 Aug 2024 18:18:05 +0300 Subject: [PATCH 1/5] fix: Improve ChartFilter style for PesaYetu --- .../pesayetu/src/components/HURUmap/ChartFilter/useStyles.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js b/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js index 6a3e18487..a5ba9ec97 100644 --- a/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js +++ b/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js @@ -20,8 +20,11 @@ const useStyles = makeStyles(({ breakpoints, typography, palette }) => ({ }, select: { width: typography.pxToRem(165), + height: typography.pxToRem(40), + paddingLeft: 0, + paddingRight: typography.pxToRem(40), [breakpoints.up("lg")]: { - width: typography.pxToRem(185), + width: typography.pxToRem(200), }, }, filled: { From 5212c7242cbaee0214298fbb2b9bb74c73b28fdc Mon Sep 17 00:00:00 2001 From: Michael Hudson Nkotagu Date: Tue, 13 Aug 2024 09:52:52 +0300 Subject: [PATCH 2/5] fix: Improve rendering style of Pin and Compare Components --- .../src/components/HURUmap/PinAndCompare/index.js | 6 +++++- .../components/HURUmap/PinAndCompare/useStyles.js | 15 +++++++++++---- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/apps/pesayetu/src/components/HURUmap/PinAndCompare/index.js b/apps/pesayetu/src/components/HURUmap/PinAndCompare/index.js index f229c9811..601e2f9ae 100644 --- 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, + }} /> ); diff --git a/apps/pesayetu/src/components/HURUmap/PinAndCompare/useStyles.js b/apps/pesayetu/src/components/HURUmap/PinAndCompare/useStyles.js index 578e8dce0..08fba203b 100644 --- a/apps/pesayetu/src/components/HURUmap/PinAndCompare/useStyles.js +++ b/apps/pesayetu/src/components/HURUmap/PinAndCompare/useStyles.js @@ -19,12 +19,19 @@ const useStyles = makeStyles(({ typography, palette }) => ({ backgroundColor: palette.grey.light, }, }, - locationSelect: { - paddingTop: typography.pxToRem(10), - paddingBottom: typography.pxToRem(10), + select: { + width: typography.pxToRem(185), + height: typography.pxToRem(40), + paddingLeft: 0, + paddingRight: typography.pxToRem(40), + }, + filled: { + padding: `${typography.pxToRem(10)} 0 ${typography.pxToRem( + 10, + )} ${typography.pxToRem(15)} !important`, }, selectPaper: { - height: typography.pxToRem(310), + maxHeight: typography.pxToRem(310), }, })); From 00ef7acc00387cbb07c5ee855bf5382d2a7a7f9e Mon Sep 17 00:00:00 2001 From: Michael Hudson Nkotagu Date: Wed, 14 Aug 2024 10:00:02 +0300 Subject: [PATCH 3/5] fix: Set proper default styles for Select component --- apps/pesayetu/src/components/Select/useStyles.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/pesayetu/src/components/Select/useStyles.js b/apps/pesayetu/src/components/Select/useStyles.js index 6df433db0..3872af0c0 100644 --- 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: { From d382bc4be0884b5aaa4ce76b535ae4016d02ecee Mon Sep 17 00:00:00 2001 From: Michael Hudson Nkotagu Date: Wed, 14 Aug 2024 10:01:16 +0300 Subject: [PATCH 4/5] fix: Improve Select Component Style in ChartFilter and PinAndCompare --- .../src/components/HURUmap/ChartFilter/useStyles.js | 7 +++---- .../src/components/HURUmap/PinAndCompare/useStyles.js | 7 +++---- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js b/apps/pesayetu/src/components/HURUmap/ChartFilter/useStyles.js index a5ba9ec97..1a6c85531 100644 --- 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 index 08fba203b..f093a4553 100644 --- 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( From 8721f44ce2165f154da5c5ee3bab2b2f8cc718c3 Mon Sep 17 00:00:00 2001 From: Michael Hudson Nkotagu Date: Wed, 14 Aug 2024 13:35:15 +0300 Subject: [PATCH 5/5] 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, + }} /> ); 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: {