chore(webapp): adjust margins in rewards distribution

edenia · Jan 18, 2023 · 4984f70 · 4984f70
1 parent 066a7fe
commit 4984f70
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js b/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js
@@ -35,7 +35,7 @@ const RewardsDistributionStats = ({
   return (
     <div className={classes.divMargin}>
       <div className={classes.cardHeader}>
-        <Card className={classes.cardShadow}>
+        <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
           <CardContent className={classes.cards}>
             <Typography variant="h6">{t('dailyRewards')}</Typography>
             <Typography variant="h3">
@@ -68,7 +68,7 @@ const RewardsDistributionStats = ({
         </Card>
       </div>
       <div className={classes.cardHeader}>
-        <Card className={classes.cardShadow}>
+        <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
           <CardContent className={classes.cards}>
             <Typography variant="h6">{t('topCountryDailyRwards')}</Typography>
             <Typography variant="h3">
@@ -103,7 +103,7 @@ const RewardsDistributionStats = ({
         </Card>
       </div>
       <div className={classes.cardHeader}>
-        <Card className={classes.cardShadow}>
+        <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
           <CardContent className={classes.cards}>
             <Typography variant="h6">{t('paidProducers')}</Typography>
             <Typography variant="h3">
@@ -140,7 +140,7 @@ const RewardsDistributionStats = ({
         </Card>
       </div>
       <div className={classes.cardHeader}>
-        <Card className={classes.cardShadow}>
+        <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
           <CardContent className={classes.cards}>
             <div className={classes.center}>
               <Typography

diff --git a/webapp/src/routes/RewardsDistribution/styles.js b/webapp/src/routes/RewardsDistribution/styles.js
@@ -67,22 +67,28 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
     boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
   },
   divMargin: {
-    display: 'flex',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 1fr)',
     margin: theme.spacing(8, 0),
     gap: theme.spacing(6),
-    flexWrap: 'wrap',
+    [theme.breakpoints.down('lg')]: {
+      gridTemplateColumns: 'repeat(2, 1fr)',
+    },
     [theme.breakpoints.down('md')]: {
-      display: 'block',
+      display: 'flex',
+      flexDirection: 'column',
     },
   },
   cardHeader: {
-    flexGrow: '1',
-    [theme.breakpoints.down('md')]: {
-      marginBottom: '10px',
+    width: '100%',
+  },
+  cardContent: {
+    height: '100%',
+    '& .MuiCardContent-root:last-child': {
+      paddingBottom: theme.spacing(4),
     },
   },
   cards: {
-    height: '156px',
     '& .MuiTypography-h6': {
       display: 'flex',
       paddingBottom: theme.spacing(4),
@@ -105,7 +111,7 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
     height: '24px',
   },
   textMargin: {
-    margin: `${theme.spacing(4, 0)} !important`,
-    wordBreak: 'break-word'
+    margin: `${theme.spacing(4, 0, 0)} !important`,
+    wordBreak: 'break-word',
   },
 })