Merge pull request #1369 from edenia/dev

Production Release

webapp/src/components/NoResults/index.js

@@ -1,4 +1,4 @@
-import React  from 'react'
+import React from 'react'
 import { makeStyles } from '@mui/styles'
 import { useTranslation } from 'react-i18next'
 import Card from '@mui/material/Card'
@@ -8,15 +8,21 @@ import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const NoResults = () => {
+const NoResults = ({ translationScope }) => {
   const classes = useStyles()
-  const { t } = useTranslation('noResultsComponent')
+  const { t } = useTranslation(translationScope)
 
   return (
     <Card className={classes.root}>
-      <Typography variant="h4" component="p">{t('noResultsFound')}</Typography>
+      <Typography variant="h4" component="p">
+        {t('noResultsFound')}
+      </Typography>
     </Card>
   )
 }
 
+NoResults.defaultProps = {
+  translationScope: 'noResultsComponent',
+}
+
 export default NoResults

webapp/src/context/theme.context.js

@@ -8,9 +8,9 @@ import themes from '../theme'
 const ThemeStateContext = React.createContext({ toggleColorMode: () => {} })
 
 export const ThemeStateProvider = ({ children }) => {
-  const userRequest = useMediaQuery('(prefers-color-scheme: dark)')
+  const userRequestLightMode = useMediaQuery('(prefers-color-scheme: light)') && false
   const preference = localStorage.getItem('prefersDarkMode')
-  const prefersDarkMode = preference ? Boolean(JSON.parse(preference)) : userRequest
+  const prefersDarkMode = preference ? Boolean(JSON.parse(preference)) : !userRequestLightMode
 
   const [mode, setMode] = React.useState(prefersDarkMode ? 'dark' : 'light')
 

webapp/src/language/en.json

@@ -429,6 +429,9 @@
     "executeTransaction": "Execute Transaction",
     "owner": "Owner"
   },
+  "undiscoverableBPsRoute": {
+    "noResultsFound": "Well Done! All Block Producers are Operating Transparently."
+  },
   "blockDistributionRoute": {
     "title": "Blocks generated by producer",
     "blocksProduced": "Blocks Produced",

webapp/src/language/es.json

@@ -437,6 +437,9 @@
     "scheduledBlocks": "Bloques progamados",
     "availability": "Disponibilidad"
   },
+  "undiscoverableBPsRoute": {
+    "noResultsFound": "Bien Hecho! Todos los Productores de Bloques están Operando de Manera Transparente."
+  },
   "endpointsListRoute": {
     "title": "Endpoints disponibles por",
     "updatedAt": "Actualizado por última vez",

webapp/src/routes/About/index.js

@@ -1,30 +1,38 @@
 import React from 'react'
-import Typography from '@mui/material/Typography'
+import { useTheme } from '@mui/material/styles'
 import { makeStyles } from '@mui/styles'
 import { useTranslation } from 'react-i18next'
 import Card from '@mui/material/Card'
 import Link from '@mui/material/Link'
+import Typography from '@mui/material/Typography'
 
 import { eosConfig } from '../../config'
+import aboutDarkImg from '../../assets/about-dark.webp'
+import aboutLightImg from '../../assets/about-light.webp'
 
-import Logo from './Logo'
 import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
 const About = () => {
   const classes = useStyles()
+  const theme = useTheme()
   const { t } = useTranslation('aboutRoute')
   const networkNameLabel = (
     eosConfig.networkName !== 'lacchain' ? eosConfig.networkLabel : 'EOS'
   )
     .replace(' Mainnet', '')
     .replace(' Testnet', '')
-
+ 
   return (
     <Card className={classes.mainText}>
-      <div className={classes.logoContainer}>
-        <Logo className={classes.logo} />
+      <div className={classes.imageContainer}>
+        <img
+          src={theme.palette.mode === 'light' ? aboutLightImg : aboutDarkImg}
+          alt={
+            'All the networks on Antelope Tools with the Edenia logo in the middle'
+          }
+        />
       </div>
       <div className={classes.boxInfo}>
         <Typography variant="body2" paragraph>

webapp/src/routes/About/styles.js

@@ -13,17 +13,27 @@ export default (theme) => ({
       marginBottom: theme.spacing(4),
     },
   },
-  logoContainer: {
-    [theme.breakpoints.down('md')]: {
-      order: 1,
+  imageContainer: {
+    '& > img': {
+      float: 'right',
+      aspectRatio: '683 / 389',
+      [theme.breakpoints.down('xl')]: {
+        width: '550px',
+      },
+      [theme.breakpoints.down('lg')]: {
+        width: '500px',
+      },
+      [theme.breakpoints.down('md')]: {
+        width: '50%',
+      },
+      [theme.breakpoints.down('sm')]: {
+        width: '80%',
+      },
     },
-  },
-  logo: {
-    width: 569,
-    height: 498,
-    float: 'right',
     [theme.breakpoints.down('md')]: {
-      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      padding: theme.spacing(4, 0, 4, 0),
     },
   },
   mainText: {

webapp/src/routes/BPJson/index.js

@@ -4,19 +4,24 @@ import Alert from '@mui/material/Alert'
 import Card from '@mui/material/Card'
 import Typography from '@mui/material/Typography'
 import { BPJsonGenerator } from '@eoscostarica/eoscr-components'
+import { makeStyles } from '@mui/styles'
 
 import { eosConfig } from '../../config'
 
+import styles from './styles'
 import useBPJsonState from './useBPJsonState'
 
+const useStyles = makeStyles(styles)
+
 const BPJson = () => {
+  const classes = useStyles()
   const [
     { loading, inconsistencyMessage, initData, producer, error, ual },
     { t, handleOnSubmit },
   ] = useBPJsonState()
 
   return (
-    <Card>
+    <Card className={classes.generatorContainer}>
       {loading && (
         <>
           <Typography variant="h5" align="center">

webapp/src/routes/BPJson/styles.js

@@ -1 +1,19 @@
-export default (theme) => ({})
+export default (theme) => ({
+  generatorContainer: {
+    '& .pretty-json-container': {
+      '& span': {
+        color: `${theme.palette.text.primary} !important`,
+        '& svg': {
+          color: `${theme.palette.primary.main} !important`,
+        },
+      },
+      '& .node-ellipsis': {
+        color: `${theme.palette.primary.main} !important`,
+      },
+    },
+    '& section > div': {
+      color: theme.palette.text.primary,
+      backgroundColor: theme.palette.background.default,
+    },
+  },
+})

webapp/src/routes/NonCompliantBPs/index.js

@@ -40,7 +40,7 @@ const NonCompliantBPs = () => {
               </div>
             </>
           ) : (
-            <NoResults />
+            <NoResults translationScope={'undiscoverableBPsRoute'}/>
           )}
         </>
       )}

webapp/src/routes/ProducerProfile/GeneralInformation.js

@@ -53,7 +53,7 @@ const GeneralInformation = ({ producer }) => {
                 )})`}
                 <VisitSite
                   title={t('openLink')}
-                  url={`${generalConfig.eosRateLink}block-producers/${producer?.eosRate.bp}`}
+                  url={`${generalConfig.eosRateLink}/block-producers/${producer?.eosRate.bp}`}
                 />
               </Typography>
             </span>