diff --git a/webapp/src/assets/about-dark.webp b/webapp/src/assets/about-dark.webp new file mode 100755 index 000000000..1a1ba3daf Binary files /dev/null and b/webapp/src/assets/about-dark.webp differ diff --git a/webapp/src/assets/about-light.webp b/webapp/src/assets/about-light.webp new file mode 100755 index 000000000..07b8727e4 Binary files /dev/null and b/webapp/src/assets/about-light.webp differ diff --git a/webapp/src/components/NoResults/index.js b/webapp/src/components/NoResults/index.js index 1a6def958..03a9f0ed6 100644 --- a/webapp/src/components/NoResults/index.js +++ b/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 ( - {t('noResultsFound')} + + {t('noResultsFound')} + ) } +NoResults.defaultProps = { + translationScope: 'noResultsComponent', +} + export default NoResults diff --git a/webapp/src/context/theme.context.js b/webapp/src/context/theme.context.js index 8c6a5b615..7d2900751 100644 --- a/webapp/src/context/theme.context.js +++ b/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') diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json index e9f7b23f4..e05dff783 100644 --- a/webapp/src/language/en.json +++ b/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", diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json index 8dfa0a7e3..df2e2d029 100644 --- a/webapp/src/language/es.json +++ b/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", diff --git a/webapp/src/routes/About/Logo.js b/webapp/src/routes/About/Logo.js deleted file mode 100644 index 19f0cd5ae..000000000 --- a/webapp/src/routes/About/Logo.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' - -const Logo = (props) => ( - - - - - - - - - -) - -export default Logo diff --git a/webapp/src/routes/About/index.js b/webapp/src/routes/About/index.js index 96a269755..9c33b45c3 100644 --- a/webapp/src/routes/About/index.js +++ b/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 ( -
- +
+ {
diff --git a/webapp/src/routes/About/styles.js b/webapp/src/routes/About/styles.js index 01e510d9b..575cd9a69 100644 --- a/webapp/src/routes/About/styles.js +++ b/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: { diff --git a/webapp/src/routes/BPJson/index.js b/webapp/src/routes/BPJson/index.js index 3718d67b2..ae724f661 100644 --- a/webapp/src/routes/BPJson/index.js +++ b/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 ( - + {loading && ( <> diff --git a/webapp/src/routes/BPJson/styles.js b/webapp/src/routes/BPJson/styles.js index ff6466532..d1bb24dae 100644 --- a/webapp/src/routes/BPJson/styles.js +++ b/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, + }, + }, +}) diff --git a/webapp/src/routes/NonCompliantBPs/index.js b/webapp/src/routes/NonCompliantBPs/index.js index c012bd235..72711967c 100644 --- a/webapp/src/routes/NonCompliantBPs/index.js +++ b/webapp/src/routes/NonCompliantBPs/index.js @@ -40,7 +40,7 @@ const NonCompliantBPs = () => {
) : ( - + )} )} diff --git a/webapp/src/routes/ProducerProfile/GeneralInformation.js b/webapp/src/routes/ProducerProfile/GeneralInformation.js index 41b74719e..d85b6c157 100644 --- a/webapp/src/routes/ProducerProfile/GeneralInformation.js +++ b/webapp/src/routes/ProducerProfile/GeneralInformation.js @@ -53,7 +53,7 @@ const GeneralInformation = ({ producer }) => { )})`}