chore(webapp): remove unneeded styles and add rank to undiscoverable …

…table
edenia · Oct 31, 2023 · 0d6675e · 0d6675e
1 parent 3d5dd67
commit 0d6675e
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 44 deletions.
diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js
@@ -30,7 +30,12 @@ const NonCompliantCard = ({ producer, tokenPrice }) => {
   return (
     <>
       <TableCell align="center">
-        <Typography variant="body1">{producer.owner}</Typography>
+        <Typography variant="h2" component="p">{`${producer.rank}`}</Typography>
+      </TableCell>
+      <TableCell align="center">
+        <Typography variant="h6" component="h2">
+          {producer.owner}
+        </Typography>
       </TableCell>
       <TableCell align="center">
         {isValidUrl(producer.url) ? (
@@ -49,7 +54,7 @@ const NonCompliantCard = ({ producer, tokenPrice }) => {
         )}
       </TableCell>
       <TableCell align="center">
-        {isValidUrl(producer.bp_json_url) && (
+        {isValidUrl(producer.url) && (
           <VisitSite title={t('openLink')} url={producer.bp_json_url} />
         )}
       </TableCell>

diff --git a/webapp/src/components/NonCompliantCard/styles.js b/webapp/src/components/NonCompliantCard/styles.js
@@ -1,8 +1,9 @@
 export default (theme) => ({
   websiteContainer: {
     display: 'flex',
+    gap: theme.spacing(4),
     flexWrap: 'nowrap',
-    justifyContent: 'space-between',
+    justifyContent: 'space-around',
     minWidth: '80px',
   },
 })
diff --git a/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js b/webapp/src/components/ProducersTable/UndiscoverableBPsTable.js
@@ -20,7 +20,16 @@ const useStyles = makeStyles(styles)
 const UndiscoverableBPsTable = ({ producers, tokenPrice }) => {
   const classes = useStyles()
   const { t } = useTranslation('producerCardComponent')
-  const columnsNames = ['producerName','website','bpJson','votes','lastClaimTime','dailyRewards','yearlyRewards']
+  const columnsNames = [
+    'rank',
+    'producerName',
+    'website',
+    'bpJson',
+    'votes',
+    'lastClaimTime',
+    'dailyRewards',
+    'yearlyRewards',
+  ]
 
   return (
     <TableContainer>

diff --git a/webapp/src/routes/NonCompliantBPs/RewardsStats.js b/webapp/src/routes/NonCompliantBPs/RewardsStats.js
@@ -17,7 +17,7 @@ const RewardsStats = ({ stats }) => {
   const { t } = useTranslation('rewardsDistributionRoute')
 
   return (
-    <>
+    <div className={classes.statsContainer}>
       <SimpleDataCard title={t('paidProducers')}>
         <div className={`${classes.statsText} ${classes.verticallyCenter}`}>
           <Typography variant="h6" component="p">
@@ -62,7 +62,7 @@ const RewardsStats = ({ stats }) => {
           </Typography>
         </div>
       </SimpleDataCard>
-    </>
+    </div>
   )
 }
 

diff --git a/webapp/src/routes/NonCompliantBPs/index.js b/webapp/src/routes/NonCompliantBPs/index.js
@@ -1,20 +1,15 @@
 /* eslint camelcase: 0 */
 import React, { memo } from 'react'
-import { makeStyles } from '@mui/styles'
 import Card from '@mui/material/Card'
 import LinearProgress from '@mui/material/LinearProgress'
 
 import useNonCompliantState from '../../hooks/customHooks/useNonCompliantState'
 import NoResults from '../../components/NoResults'
 import UndiscoverableBPsTable from '../../components/ProducersTable/UndiscoverableBPsTable'
 
-import styles from './styles'
 import RewardsStats from './RewardsStats'
 
-const useStyles = makeStyles(styles)
-
 const NonCompliantBPs = () => {
-  const classes = useStyles()
   const [{ items, stats, loading }] = useNonCompliantState()
 
   return (
@@ -25,9 +20,7 @@ const NonCompliantBPs = () => {
         <>
           {!!items?.length && stats ? (
             <>
-              <div className={classes.statsContainer}>
-                <RewardsStats stats={stats} />
-              </div>
+              <RewardsStats stats={stats} />
               <Card>
                  <UndiscoverableBPsTable producers={items} tokenPrice={stats.tokenPrice}/>
               </Card>

diff --git a/webapp/src/routes/NonCompliantBPs/styles.js b/webapp/src/routes/NonCompliantBPs/styles.js
@@ -27,34 +27,4 @@ export default (theme) => ({
       minHeight: '55px',
     }
   },
-  bpsContainer: {
-    display: 'grid',
-    gap: theme.spacing(4, 6),
-    gridTemplateColumns:
-      'repeat(auto-fit, minmax( min( calc( 50% - 100px ), 600px ), auto))',
-    margin: '0 24px',
-    [theme.breakpoints.down('lg')]: {
-      margin: '0',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(500px, auto))',
-    },
-    [theme.breakpoints.down('sm')]: {
-      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, auto))',
-    },
-  },
-  card: {
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    minHeight: '125px',
-    '& .MuiTypography-h6': {
-      display: 'flex',
-    },
-    [theme.breakpoints.down('md')]: {
-      justifyContent: 'center',
-    },
-    [theme.breakpoints.down('sm')]: {
-      flex: 'auto',
-      flexDirection: 'column',
-      padding: theme.spacing(3),
-    },
-  },
 })