From 6d0cef25ca18f479d6a1cbe82436b9de9c2b09d7 Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Mon, 23 Jan 2023 17:05:20 -0600 Subject: [PATCH 1/2] fix(webapp): improve spacing and display the correct amount of columns in the non-compliant BPs section --- webapp/src/language/en.json | 2 +- webapp/src/language/es.json | 2 +- webapp/src/routes/NonCompliantBPs/styles.js | 6 ++--- .../RewardsDistributionStats.js | 23 ++++++++++++++----- .../routes/RewardsDistribution/TokenToUSD.js | 2 +- .../src/routes/RewardsDistribution/styles.js | 15 ++++++++++-- 6 files changed, 36 insertions(+), 14 deletions(-) diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json index e1f653d1..8cbe2a79 100644 --- a/webapp/src/language/en.json +++ b/webapp/src/language/en.json @@ -157,7 +157,7 @@ "rewards": "Rewards", "rewardsPercentage": "Percentage of rewards", "viewList": "View full list", - "paidProducersText": "in daily rewards" + "paidProducersText": "Daily Rewards" }, "nodesRoute": {}, "nodesDistributionRoute": {}, diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json index ad2ba477..05c8429f 100644 --- a/webapp/src/language/es.json +++ b/webapp/src/language/es.json @@ -163,7 +163,7 @@ "rewards": "Recompensas", "rewardsPercentage": "Porcentaje de recompensas", "viewList": "Ver lista completa", - "paidProducersText": "en recompensas diarias" + "paidProducersText": "Recompensas Diarias" }, "nodesRoute": {}, "nodesDistributionRoute": {}, diff --git a/webapp/src/routes/NonCompliantBPs/styles.js b/webapp/src/routes/NonCompliantBPs/styles.js index 3366b5d3..149212f3 100644 --- a/webapp/src/routes/NonCompliantBPs/styles.js +++ b/webapp/src/routes/NonCompliantBPs/styles.js @@ -37,15 +37,15 @@ export default (theme) => ({ bpsContainer: { display: 'grid', gap: theme.spacing(4, 6), - gridTemplateColumns: 'repeat(auto-fit, minmax(800px, auto))', + gridTemplateColumns: + 'repeat(auto-fit, minmax( min( calc( 50% - 100px ), 600px ), auto))', margin: '0 40px', [theme.breakpoints.down('lg')]: { margin: '0', gridTemplateColumns: 'repeat(auto-fit, minmax(500px, auto))', }, [theme.breakpoints.down('sm')]: { - display: 'flex', - flexWrap: 'wrap', + gridTemplateColumns: 'repeat(auto-fit, minmax(200px, auto))', }, }, card: { diff --git a/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js b/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js index f180e184..f28115b6 100644 --- a/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js +++ b/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js @@ -136,22 +136,33 @@ const RewardsDistributionStats = ({ )} - {' '} {t('paidProducersText')} + + {!nodes.length > 0 && ( + + )} + {nodes.length > 0 && ( + + )} +
- +
{ {`${formatWithThousandSeparator(amount, 2)} ${eosConfig.tokenSymbol}`} {tokenPrice && - `/ $${formatWithThousandSeparator(amount * tokenPrice, 2)} USD`} + ` / $${formatWithThousandSeparator(amount * tokenPrice, 2)} USD`} ) } diff --git a/webapp/src/routes/RewardsDistribution/styles.js b/webapp/src/routes/RewardsDistribution/styles.js index ad3b5a75..593101e2 100644 --- a/webapp/src/routes/RewardsDistribution/styles.js +++ b/webapp/src/routes/RewardsDistribution/styles.js @@ -99,8 +99,14 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({ paddingBottom: theme.spacing(4), }, }, + exchangeCard: { + justifyContent: 'space-around', + }, totalDailyCard: { justifyContent: 'flex-start', + '& .MuiTypography-h3': { + paddingBottom: theme.spacing(2), + }, }, shadow: { '& .MuiPaper-root': { @@ -121,16 +127,21 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({ height: '24px', }, textMargin: { - margin: `${theme.spacing(4, 0, 0)} !important`, + margin: `${theme.spacing(3, 0, 0)} !important`, + lineHeight: '1 !important', + fontWeight: 'normal !important', wordBreak: 'break-word', }, + noMargin: { + margin: '0 !important', + }, notLocated: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', paddingBottom: theme.spacing(1), '& .MuiTypography-h6': { - width: 'calc(100% - 130px)', + width: 'calc(100% - 125px)', }, }, }) From 12c53e2a7c490bd4400468344bd09fe20bedfdde Mon Sep 17 00:00:00 2001 From: Torresmorah Date: Tue, 24 Jan 2023 17:17:23 -0600 Subject: [PATCH 2/2] fix(webapp): adjust responsive design for rewards distribution page --- .../RewardsDistributionStats.js | 52 +++++++++++-------- .../src/routes/RewardsDistribution/styles.js | 19 +++++-- 2 files changed, 44 insertions(+), 27 deletions(-) diff --git a/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js b/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js index f28115b6..ff1d63bd 100644 --- a/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js +++ b/webapp/src/routes/RewardsDistribution/RewardsDistributionStats.js @@ -86,8 +86,12 @@ const RewardsDistributionStats = ({ )} -
- +
+ {!nodes?.length > 0 && ( )} @@ -138,14 +142,14 @@ const RewardsDistributionStats = ({ {t('paidProducersText')} {!nodes.length > 0 && ( @@ -185,25 +189,29 @@ const RewardsDistributionStats = ({ {t('highestRewards')}
- - - {`${t('exchangeRate')}: `}{' '} - - {setting?.token_price ? ( - - {`1 ${eosConfig.tokenSymbol} = $${formatWithThousandSeparator( - setting.token_price, - 4, - )}`} +
+ + + {`${t('exchangeRate')}: `}{' '} - ) : ( - N/A - )} - + {setting?.token_price ? ( + + {`1 ${ + eosConfig.tokenSymbol + } = $${formatWithThousandSeparator( + setting.token_price, + 4, + )}`} + + ) : ( + N/A + )} + +
diff --git a/webapp/src/routes/RewardsDistribution/styles.js b/webapp/src/routes/RewardsDistribution/styles.js index 593101e2..6e626f83 100644 --- a/webapp/src/routes/RewardsDistribution/styles.js +++ b/webapp/src/routes/RewardsDistribution/styles.js @@ -8,6 +8,9 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({ display: 'flex', justifyContent: 'center', }, + textBlock: { + marginTop: `${theme.spacing(4)} !important`, + }, popoverItem: { fontWeight: 'bold', }, @@ -75,7 +78,7 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({ [theme.breakpoints.down('lg')]: { gridTemplateColumns: 'repeat(2, 1fr)', }, - [theme.breakpoints.down('md')]: { + [theme.breakpoints.down('sm')]: { display: 'flex', flexDirection: 'column', }, @@ -127,21 +130,27 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({ height: '24px', }, textMargin: { - margin: `${theme.spacing(3, 0, 0)} !important`, lineHeight: '1 !important', fontWeight: 'normal !important', wordBreak: 'break-word', + flexWrap: 'wrap', + [theme.breakpoints.down('xl')]: { + fontSize: '14px !important', + }, + [theme.breakpoints.down('lg')]: { + fontSize: '16px !important', + }, }, - noMargin: { - margin: '0 !important', + marginPaidText: { + padding: theme.spacing(2, 0), }, notLocated: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', - paddingBottom: theme.spacing(1), '& .MuiTypography-h6': { width: 'calc(100% - 125px)', + paddingBottom: theme.spacing(2), }, }, })