Merge pull request #1133 from edenia/fix/improvements-non-compliant-r…

…ewards-1129 Fix/improvements non compliant rewards 1129
edenia · Jan 25, 2023 · 1ffa545 · 1ffa545
2 parents 36cb23f + 12c53e2
commit 1ffa545
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -86,8 +86,12 @@ const RewardsDistributionStats = ({
                 </>
               )}
             </Typography>
-            <div className={`${classes.textMargin} ${classes.spaceBetween}`}>
-              <Typography variant="subtitle1" component="p">
+            <div className={`${classes.spaceBetween} ${classes.textBlock}`}>
+              <Typography
+                className={classes.textMargin}
+                variant="subtitle1"
+                component="p"
+              >
                 {!nodes?.length > 0 && (
                   <Skeleton variant="text" width="100%" animation="wave" />
                 )}
@@ -135,23 +139,34 @@ const RewardsDistributionStats = ({
                   <span>{summary?.producersWithoutProperBpJson.quantity}</span>
                 )}
             </Typography>
+            <Typography
+              variant="subtitle2"
+              component="p"
+              className={`${classes.textMargin} ${classes.marginPaidText}`}
+            >
+              {t('paidProducersText')}
+            </Typography>
             <Typography
               variant="subtitle1"
               component="p"
               className={classes.textMargin}
             >
-              <TokenToUSD
-                amount={summary?.producersWithoutProperBpJson.rewards}
-                tokenPrice={setting?.token_price}
-              />{' '}
-              {t('paidProducersText')}
+              {!nodes.length > 0 && (
+                <Skeleton variant="text" width="100%" animation="wave" />
+              )}
+              {nodes.length > 0 && (
+                <TokenToUSD
+                  amount={summary?.producersWithoutProperBpJson.rewards}
+                  tokenPrice={setting?.token_price}
+                />
+              )}
             </Typography>
           </CardContent>
         </Card>
       </div>
       <div className={classes.cardHeader}>
         <Card className={`${classes.cardContent} ${classes.cardShadow}`}>
-          <CardContent className={classes.cards}>
+          <CardContent className={`${classes.cards} ${classes.exchangeCard}`}>
             <div className={classes.center}>
               <Typography
                 variant="subtitle1"
@@ -174,25 +189,29 @@ const RewardsDistributionStats = ({
                 <span className={classes.itemLabel}>{t('highestRewards')}</span>
               </Typography>
             </div>
-            <Typography
-              variant="subtitle1"
-              component="p"
-              className={`${classes.textMargin} ${classes.center}`}
-            >
-              <span className={classes.exchangeRateLabel}>
-                {`${t('exchangeRate')}: `}{' '}
-              </span>
-              {setting?.token_price ? (
-                <span>
-                  {`1 ${eosConfig.tokenSymbol} = $${formatWithThousandSeparator(
-                    setting.token_price,
-                    4,
-                  )}`}
+            <div className={classes.textBlock}>
+              <Typography
+                variant="subtitle1"
+                component="p"
+                className={`${classes.textMargin} ${classes.center}`}
+              >
+                <span className={classes.exchangeRateLabel}>
+                  {`${t('exchangeRate')}: `}{' '}
                 </span>
-              ) : (
-                <span>N/A</span>
-              )}
-            </Typography>
+                {setting?.token_price ? (
+                  <span>
+                    {`1 ${
+                      eosConfig.tokenSymbol
+                    } = $${formatWithThousandSeparator(
+                      setting.token_price,
+                      4,
+                    )}`}
+                  </span>
+                ) : (
+                  <span>N/A</span>
+                )}
+              </Typography>
+            </div>
           </CardContent>
         </Card>
       </div>

diff --git a/webapp/src/routes/RewardsDistribution/TokenToUSD.js b/webapp/src/routes/RewardsDistribution/TokenToUSD.js
@@ -8,7 +8,7 @@ const TokenToUSD = ({ amount, tokenPrice }) => {
     <span>
       {`${formatWithThousandSeparator(amount, 2)} ${eosConfig.tokenSymbol}`}
       {tokenPrice &&
-        `/ $${formatWithThousandSeparator(amount * tokenPrice, 2)} USD`}
+        ` / $${formatWithThousandSeparator(amount * tokenPrice, 2)} USD`}
     </span>
   )
 }

diff --git 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',
     },
@@ -99,8 +102,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 +130,27 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
     height: '24px',
   },
   textMargin: {
-    margin: `${theme.spacing(4, 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',
+    },
+  },
+  marginPaidText: {
+    padding: theme.spacing(2, 0),
   },
   notLocated: {
     display: 'flex',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
-    paddingBottom: theme.spacing(1),
     '& .MuiTypography-h6': {
-      width: 'calc(100% - 130px)',
+      width: 'calc(100% - 125px)',
+      paddingBottom: theme.spacing(2),
     },
   },
 })