{t('footer1')}
- {
{t('footer2')}
-
+
@@ -71,14 +72,14 @@ const Footer = () => {
{t('bugRequest')}
-
+
}
/>
diff --git a/webapp/src/components/Footer/styles.js b/webapp/src/components/Footer/styles.js
index d6c2a12dc..870334514 100644
--- a/webapp/src/components/Footer/styles.js
+++ b/webapp/src/components/Footer/styles.js
@@ -4,9 +4,9 @@ export default (theme) => ({
flexBasis: 'auto',
flexWrap: 'wrap',
padding: `1px ${theme.spacing(1)}`,
- background: theme.palette.common.white,
+ background: theme.palette.background.default,
alignItems: 'center',
- boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
+ boxShadow: theme.palette.shadows.card,
justifyContent: 'space-between',
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
@@ -21,14 +21,11 @@ export default (theme) => ({
color: theme.palette.common.black,
},
'& a': {
- color: theme.sidebar.footer.color,
+ color: theme.palette.neutral.dark,
lineHeight: '20px',
textAlign: 'center',
letterSpacing: '0.1px',
textDecoration: 'none',
- [theme.breakpoints.down('md')]: {
- color: theme.palette.primary.main,
- },
},
[theme.breakpoints.down('md')]: {
textAlign: 'center !important',
@@ -37,7 +34,6 @@ export default (theme) => ({
},
},
sidebarFooter: {
- backgroundColor: `${theme.sidebar.footer.background} !important`,
padding: theme.spacing(2.75, 4),
minHeight: 61,
display: 'flex',
@@ -45,7 +41,6 @@ export default (theme) => ({
alignItems: 'center',
},
sidebarFooterText: {
- color: theme.sidebar.footer.color,
lineHeight: '20px',
textAlign: 'center',
letterSpacing: '0.1px',
@@ -53,7 +48,6 @@ export default (theme) => ({
justifyContent: 'center !important',
},
sidebarFooterSubText: {
- color: theme.sidebar.footer.color,
fontSize: '0.725rem',
display: 'block',
padding: 1,
@@ -62,7 +56,6 @@ export default (theme) => ({
display: 'flex',
justifyContent: 'flex-end',
'& a': {
- color: theme.sidebar.footer.color,
fontSize: 14,
lineHeight: '20px',
textAlign: 'center',
@@ -99,14 +92,14 @@ export default (theme) => ({
height: '20px !important',
alignItems: 'center',
padding: '2px 6px',
- color: '#FFFF',
+ color: theme.palette.primary.contrastText,
justifyContent: 'center',
borderRadius: '10px',
textAlign: 'center',
backgroundColor: `${theme.palette.primary.main} !important`,
'& span.MuiChip-label, & span.MuiChip-label:hover': {
cursor: 'pointer',
- color: theme.sidebar.badge.color,
+ color: theme.palette.background.default,
paddingleft: theme.spacing(2),
paddingRight: theme.spacing(2),
},
diff --git a/webapp/src/components/GeoMap/CountryMap.js b/webapp/src/components/GeoMap/CountryMap.js
index 8c812fb89..89782bc31 100644
--- a/webapp/src/components/GeoMap/CountryMap.js
+++ b/webapp/src/components/GeoMap/CountryMap.js
@@ -1,6 +1,7 @@
import React, { useEffect, useRef, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { makeStyles } from '@mui/styles'
+import { useTheme } from '@mui/material/styles'
import PropTypes from 'prop-types'
import { countries } from '../../utils/countries'
@@ -13,6 +14,7 @@ const useStyles = makeStyles(styles)
const ClusterMap = ({ data, map, mapCode }) => {
const classes = useStyles()
+ const theme = useTheme()
const navigate = useNavigate()
const myRef = useRef()
@@ -21,12 +23,16 @@ const ClusterMap = ({ data, map, mapCode }) => {
const options = {
chart: {
map,
+ backgroundColor: theme.palette.background.default,
},
legend: {
enabled: false,
},
title: {
text: countries[mapCode].name,
+ style: {
+ color: theme.palette.text.primary,
+ }
},
mapNavigation: {
enableButtons: false,
@@ -76,8 +82,8 @@ const ClusterMap = ({ data, map, mapCode }) => {
series: [
{
name: 'NodeDistribution',
- borderColor: '#8F9DA4',
- nullColor: '#EEEEEE',
+ borderColor: theme.palette.neutral.main,
+ nullColor: theme.palette.neutral.light,
showInLegend: false,
},
{
@@ -86,6 +92,7 @@ const ClusterMap = ({ data, map, mapCode }) => {
enableMouseTracking: true,
colorKey: 'clusterPointsAmount',
name: 'Countries',
+ color: theme.palette.neutral.darker,
data: data || [],
},
],
@@ -93,7 +100,7 @@ const ClusterMap = ({ data, map, mapCode }) => {
new HighMapsWrapper['Map'](myRef.current, options)
},
- [navigate],
+ [navigate, theme.palette],
)
useEffect(() => {
diff --git a/webapp/src/components/GeoMap/MainMap.js b/webapp/src/components/GeoMap/MainMap.js
index 45508c1ac..eec80c167 100644
--- a/webapp/src/components/GeoMap/MainMap.js
+++ b/webapp/src/components/GeoMap/MainMap.js
@@ -20,6 +20,9 @@ const MainMap = ({ data, map, setMap }) => {
const setupMapData = useCallback(
(data = [], map) => {
const options = {
+ chart: {
+ backgroundColor: theme.palette.background.default,
+ },
title: {
text: '',
},
@@ -41,19 +44,26 @@ const MainMap = ({ data, map, setMap }) => {
},
tooltip: {
headerFormat: '{series.name}
', - backgroundColor: '#FFFFFF', - border: '1px solid rgba(0, 0, 0, 0.12)', - boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important', + borderRadius: 10, + borderWidth: 1, + borderColor: theme.palette.primary.main, + backgroundColor: theme.palette.background.default, + style: { + color: theme.palette.text.primary, + }, }, series: [ { - data, + data: data.map(item => ({ + ...item, + color: theme.palette.neutral.lighter, + })), mapData: map, joinBy: ['iso-a2', 'country'], name: t('numberOfNodes'), cursor: 'pointer', - borderColor: '#8F9DA4', - nullColor: '#EEEEEE', + borderColor: theme.palette.neutral.main, + nullColor: theme.palette.neutral.light, point: { events: { click: function (e) { diff --git a/webapp/src/components/GeoMap/index.js b/webapp/src/components/GeoMap/index.js index da51acb1b..5c54a8a2d 100644 --- a/webapp/src/components/GeoMap/index.js +++ b/webapp/src/components/GeoMap/index.js @@ -1,9 +1,11 @@ import React, { useEffect, useState, useCallback } from 'react' import { makeStyles } from '@mui/styles' +import { useTranslation } from 'react-i18next' import PropTypes from 'prop-types' import axios from 'axios' import clsx from 'clsx' import Button from '@mui/material/Button' +import Card from '@mui/material/Card' import ArrowBackIcon from '@mui/icons-material/ArrowBack' import { generalConfig } from '../../config' @@ -17,6 +19,7 @@ const useStyles = makeStyles(styles) const GeoMap = ({ data }) => { const classes = useStyles() + const { t } = useTranslation() const [mapOptions, setMapOptions] = useState() const [mapSelected, setMapSelected] = useState() const [mapGeoData, setMapGeoData] = useState() @@ -99,15 +102,17 @@ const GeoMap = ({ data }) => { }, [mapSelected, data]) return ( -
+
+
', - backgroundColor: '#FFFFFF', - border: '1px solid rgba(0, 0, 0, 0.12)', - boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important', + borderRadius: 10, + borderWidth: 1, + borderColor: theme.palette.primary.main, + backgroundColor: theme.palette.background.default, + style: { + color: theme.palette.text.primary, + }, }, series: [ { - data, + data: data.map(item => ({ + ...item, + color: theme.palette.neutral.lighter, + })), mapData: map, joinBy: ['iso-a2', 'country'], name: t('numberOfNodes'), cursor: 'pointer', - borderColor: '#8F9DA4', - nullColor: '#EEEEEE', + borderColor: theme.palette.neutral.main, + nullColor: theme.palette.neutral.light, point: { events: { click: function (e) { diff --git a/webapp/src/components/GeoMap/index.js b/webapp/src/components/GeoMap/index.js index da51acb1b..5c54a8a2d 100644 --- a/webapp/src/components/GeoMap/index.js +++ b/webapp/src/components/GeoMap/index.js @@ -1,9 +1,11 @@ import React, { useEffect, useState, useCallback } from 'react' import { makeStyles } from '@mui/styles' +import { useTranslation } from 'react-i18next' import PropTypes from 'prop-types' import axios from 'axios' import clsx from 'clsx' import Button from '@mui/material/Button' +import Card from '@mui/material/Card' import ArrowBackIcon from '@mui/icons-material/ArrowBack' import { generalConfig } from '../../config' @@ -17,6 +19,7 @@ const useStyles = makeStyles(styles) const GeoMap = ({ data }) => { const classes = useStyles() + const { t } = useTranslation() const [mapOptions, setMapOptions] = useState() const [mapSelected, setMapSelected] = useState() const [mapGeoData, setMapGeoData] = useState() @@ -99,15 +102,17 @@ const GeoMap = ({ data }) => { }, [mapSelected, data]) return ( -
+
}
onClick={handleGoBack}
- className={clsx(classes.goBackBtn, {
+ className={clsx({
[classes.goBackBtnHidden]: !mapSelected,
})}
+ color="primary"
+ variant="outlined"
>
- Go Back
+ {t('goBack')}
{mapSelected && mapGeoData ? (
{
setMap={setMapSelected}
/>
)}
-
+
)
}
diff --git a/webapp/src/components/GeoMap/styles.js b/webapp/src/components/GeoMap/styles.js
index d1c9410fc..5af6705f9 100644
--- a/webapp/src/components/GeoMap/styles.js
+++ b/webapp/src/components/GeoMap/styles.js
@@ -1,17 +1,14 @@
export default (theme) => ({
mapWrapper: {
- backgroundColor: theme.palette.common.white,
marginTop: theme.spacing(3),
},
goBackBtnHidden: {
display: 'none !important',
},
- goBackBtn: {
- display: 'flex',
- marginLeft: theme.spacing(1),
- },
divRef: {
height: '100vh',
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15)',
+ '& a': {
+ color: theme.palette.primary.main
+ }
},
})
diff --git a/webapp/src/components/Header/AntelopeLogo.js b/webapp/src/components/Header/AntelopeLogo.js
new file mode 100644
index 000000000..cbaaced08
--- /dev/null
+++ b/webapp/src/components/Header/AntelopeLogo.js
@@ -0,0 +1,45 @@
+import React from 'react'
+
+const AntelopeLogoSvg = () => (
+
+)
+
+export default AntelopeLogoSvg
diff --git a/webapp/src/components/Header/index.js b/webapp/src/components/Header/index.js
index 99f77cdb1..530384ee0 100644
--- a/webapp/src/components/Header/index.js
+++ b/webapp/src/components/Header/index.js
@@ -15,6 +15,9 @@ import { useTranslation } from 'react-i18next'
import moment from 'moment'
import 'moment/locale/es'
+import ToggleColorMode from 'components/ToggleColorMode'
+
+import AntelopeLogoSvg from './AntelopeLogo'
import styles from './styles'
const AuthButton = lazy(() => import('./AuthButton'))
@@ -35,14 +38,8 @@ const languages = [
const HeaderLogo = () => {
const classes = useStyles()
return (
-
-
+
+
+ ({
},
},
imgHeaderLogo: {
- width: '145px',
- marginTop: theme.spacing(2),
- [theme.breakpoints.down('sm')]: {
- width: '70%',
- marginLeft: theme.spacing(2.5),
- },
+ '& svg': {
+ height: '64px',
+ width: '145px',
+ marginTop: theme.spacing(2),
+ color: theme.palette.text.primary,
+ [theme.breakpoints.down('sm')]: {
+ width: '70%',
+ marginLeft: theme.spacing(2.5),
+ },
+ }
},
appBar: {
- backgroundColor: `${theme.palette.common.white} !important`,
- color: theme.header.color,
- boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
height: '100%',
},
iconButton: {
'& svg': {
width: 22,
height: 22,
- color: 'rgba(0, 0, 0, 0.54)',
+ color: theme.palette.neutral.darker,
},
},
userBox: {
@@ -42,7 +43,7 @@ export default (theme) => ({
alignItems: 'center',
gap: theme.spacing(2),
'& button': {
- color: '#757575',
+ color: theme.palette.neutral.dark,
},
[theme.breakpoints.down('sm')]: {
maxWidth: '250px',
@@ -105,7 +106,6 @@ export default (theme) => ({
},
},
loginBtn: {
- color: `${theme.palette.common.white} !important`,
cursor: 'pointer',
},
connectWalletBtn: {
@@ -118,8 +118,8 @@ export default (theme) => ({
alignItems: 'center',
textAlign: 'center',
padding: theme.spacing(2),
- border: `0 solid ${theme.palette.common.white}`,
- borderLeft: `0.8px solid ${theme.palette.common.white}`,
+ border: `0 solid ${theme.palette.primary.contrastText}`,
+ borderLeft: `0.8px solid ${theme.palette.primary.contrastText}`,
background: 'transparent',
[theme.breakpoints.down('sm')]: {
padding: theme.spacing(2, 1, 2, 1),
@@ -140,15 +140,14 @@ export default (theme) => ({
alignItems: 'center',
textAlign: 'center',
background: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
borderRadius: '10px',
transition: 'ease-in-out all 0.5s',
'&:hover': {
- boxShadow: `0px 0px 3px 3px ${theme.palette.primary.main}`,
+ boxShadow: theme.palette.shadows.authBox,
},
- },
- cardShadow: {
- '& .MuiPaper-root': {
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
+ '& button': {
+ color: theme.palette.primary.contrastText,
},
},
})
diff --git a/webapp/src/components/HealthCheck/styles.js b/webapp/src/components/HealthCheck/styles.js
index d4ca30e85..e9bb07da6 100644
--- a/webapp/src/components/HealthCheck/styles.js
+++ b/webapp/src/components/HealthCheck/styles.js
@@ -32,17 +32,14 @@ export default (theme) => ({
color: theme.palette.success.main,
},
timerOff: {
- color: 'orange',
+ color: theme.palette.warning.light,
},
yellowLight: {
- color: theme.palette.warning.main,
+ color: theme.palette.warning.dark,
},
redLight: {
color: theme.palette.error.main,
},
- test: {
- boxShadow: '10px 5px 5px red !important',
- },
loading: {
width: '18px !important',
height: '18px !important',
diff --git a/webapp/src/components/HighChartsWrapper/index.js b/webapp/src/components/HighChartsWrapper/index.js
new file mode 100644
index 000000000..77ab18c51
--- /dev/null
+++ b/webapp/src/components/HighChartsWrapper/index.js
@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from '@mui/styles'
+import { useTheme } from '@mui/material/styles'
+import Highcharts from 'highcharts'
+import HighchartsReact from 'highcharts-react-official'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const HighchartsWrapper = ({ options }) => {
+ const classes = useStyles()
+ const theme = useTheme()
+ const [colors, setColors] = useState(theme.palette.charts.colors)
+
+ useEffect(() => {
+ setColors(theme.palette.charts.colors)
+ }, [theme])
+
+ options.time = {
+ timezoneOffset: new Date().getTimezoneOffset(),
+ ...options?.time,
+ }
+
+ options.tooltip = {
+ ...options?.tooltip,
+ borderRadius: 10,
+ borderWidth: 1,
+ }
+
+ return (
+
- {t('noResultsFound')}
)
}
diff --git a/webapp/src/components/NoResults/styles.js b/webapp/src/components/NoResults/styles.js
index 1164aef3c..753f01413 100644
--- a/webapp/src/components/NoResults/styles.js
+++ b/webapp/src/components/NoResults/styles.js
@@ -1,11 +1,8 @@
export default (theme) => ({
root: {
- display: 'flex',
- flexDirection: 'column',
width: '100%',
+ display: 'flex',
+ justifyContent: 'center',
marginBottom: theme.spacing(2),
- padding: theme.spacing(2),
- alignItems: 'center',
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
},
})
diff --git a/webapp/src/components/NodeCard/EndpointsChips.js b/webapp/src/components/NodeCard/EndpointsChips.js
index afcfe0c62..00a2a7dc2 100644
--- a/webapp/src/components/NodeCard/EndpointsChips.js
+++ b/webapp/src/components/NodeCard/EndpointsChips.js
@@ -2,6 +2,7 @@ import React, { memo } from 'react'
import { useTranslation } from 'react-i18next'
import { makeStyles } from '@mui/styles'
import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
import moment from 'moment'
import ChipList from '../ChipList'
@@ -107,9 +108,9 @@ const EndpointsChips = ({ node }) => {
return (
<>
{type.toUpperCase()}:{' '}
-
+
{value || 'N/A'}
-
+
)
})}
diff --git a/webapp/src/components/NodeCard/NodesCard.js b/webapp/src/components/NodeCard/NodesCard.js
index 8c1d72cf4..630385c29 100644
--- a/webapp/src/components/NodeCard/NodesCard.js
+++ b/webapp/src/components/NodeCard/NodesCard.js
@@ -30,10 +30,8 @@ const NodesCard = ({ nodes, hideFeatures = false }) => {
return (
<>
- {t('healthStatus')}
-
-
+ {t('healthStatus')}
+ {title}
- {value}
+ {title}
+ {value}
)
}
diff --git a/webapp/src/components/NodeCard/styles.js b/webapp/src/components/NodeCard/styles.js
index 5ef48f3b0..bd4f47f14 100644
--- a/webapp/src/components/NodeCard/styles.js
+++ b/webapp/src/components/NodeCard/styles.js
@@ -18,7 +18,7 @@ export default (theme) => ({
'& .MuiCardContent-root:last-child': {
paddingBottom: theme.spacing(4),
},
- boxShadow: '2px 3px 4px 0px #0000002E',
+ boxShadow: theme.palette.shadows.nodeCard,
backgroundColor: theme.palette.background.light,
borderRadius: theme.spacing(3),
[theme.breakpoints.down('sm')]: {
diff --git a/webapp/src/components/NodesList/NodesRow.js b/webapp/src/components/NodesList/NodesRow.js
index 531775c76..0be5c3dd2 100644
--- a/webapp/src/components/NodesList/NodesRow.js
+++ b/webapp/src/components/NodesList/NodesRow.js
@@ -4,8 +4,9 @@ import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
-import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
import { eosConfig } from '../../config'
import { formatData } from '../../utils'
@@ -53,7 +54,7 @@ const NodesRow = ({ producer }) => {
if (!producerOrg || !Object.keys(producerOrg)?.length) return <>
return (
-
+
)
}
diff --git a/webapp/src/components/NodesList/index.js b/webapp/src/components/NodesList/index.js
index bc21611e4..8ab3d5e2b 100644
--- a/webapp/src/components/NodesList/index.js
+++ b/webapp/src/components/NodesList/index.js
@@ -4,6 +4,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
+import Card from '@mui/material/Card'
import Typography from '@mui/material/Typography'
import { eosConfig } from 'config'
@@ -19,8 +20,8 @@ const NodeList = ({ producers }) => {
const Header = () => {
return (
-
+
+ )
+}
+
+export default HighchartsWrapper
diff --git a/webapp/src/components/HighChartsWrapper/styles.js b/webapp/src/components/HighChartsWrapper/styles.js
new file mode 100644
index 000000000..2d06d02ce
--- /dev/null
+++ b/webapp/src/components/HighChartsWrapper/styles.js
@@ -0,0 +1,17 @@
+export default (theme) => ({
+ chart: {
+ '& .highcharts-background,.highcharts-tooltip-box': {
+ fill: theme.palette.background.default,
+ },
+ '& .highcharts-title,.highcharts-legend-item text,.highcharts-axis-title,.highcharts-axis-labels text,.highcharts-data-label text,.highcharts-tooltip text':
+ {
+ fill: `${theme.palette.text.primary} !important`,
+ },
+ '& .highcharts-legend-item-hidden text': {
+ fill: `${theme.palette.neutral.light} !important`,
+ },
+ '& .highcharts-yaxis-grid > .highcharts-grid-line, .highcharts-xaxis > .highcharts-axis-line': {
+ stroke: theme.palette.neutral.light
+ },
+ },
+})
diff --git a/webapp/src/components/Icons/Alert.js b/webapp/src/components/Icons/Alert.js
index 4ee024808..35ee277fe 100644
--- a/webapp/src/components/Icons/Alert.js
+++ b/webapp/src/components/Icons/Alert.js
@@ -10,16 +10,16 @@ const AlertSvg = () => (
>
-
)
}
diff --git a/webapp/src/components/NetworkSelector/styles.js b/webapp/src/components/NetworkSelector/styles.js
index dfdca46c5..ea3300823 100644
--- a/webapp/src/components/NetworkSelector/styles.js
+++ b/webapp/src/components/NetworkSelector/styles.js
@@ -7,7 +7,7 @@ export default (theme) => ({
width: 44,
height: 44,
borderRadius: 50,
- backgroundColor: theme.palette.primary.contrastText,
+ backgroundColor: theme.palette.common.white,
},
[theme.breakpoints.up('sm')]: {
marginTop: 0,
@@ -20,7 +20,7 @@ export default (theme) => ({
},
list: {
transition: 'max-height .6s ease-out',
- backgroundColor: theme.palette.primary.contrastText,
+ backgroundColor: theme.palette.background.default,
maxHeight: 0,
overflow: 'hidden',
margin: 0,
@@ -30,7 +30,6 @@ export default (theme) => ({
width: 310,
top: 48,
left: -55,
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15)',
'& .titles': {
display: 'flex',
'& .titlesBoxRight': {
@@ -39,8 +38,8 @@ export default (theme) => ({
alignItems: 'center',
width: '50%',
height: 50,
- borderLeft: '1px solid #EEEEEE',
- borderBottom: '1px solid #EEEEEE',
+ borderLeft: `1px solid ${theme.palette.neutral.lighter}`,
+ borderBottom: `1px solid ${theme.palette.neutral.lighter}`,
},
'& .titlesBoxLeft': {
paddingLeft: theme.spacing(2),
@@ -48,7 +47,7 @@ export default (theme) => ({
alignItems: 'center',
height: 50,
width: '50%',
- borderBottom: '1px solid #EEEEEE',
+ borderBottom: `1px solid ${theme.palette.neutral.lighter}`,
},
'& p': {
fontWeight: 'bold',
@@ -65,7 +64,7 @@ export default (theme) => ({
},
'& .listsBoxRight': {
width: '50%',
- borderLeft: '1px solid #EEEEEE',
+ borderLeft: `1px solid ${theme.palette.neutral.lighter}`,
},
'& .listsBoxLeft': {
width: '50%',
@@ -82,6 +81,7 @@ export default (theme) => ({
listActive: {
maxHeight: 1000,
opacity: 1,
+ boxShadow: theme.palette.shadows.card,
},
listItem: {
height: 50,
@@ -90,17 +90,17 @@ export default (theme) => ({
cursor: 'pointer',
listStyle: 'none',
paddingLeft: theme.spacing(2),
- background: theme.palette.primary.contrastText,
+ background: theme.palette.background.default,
'& a': {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
- color: theme.palette.common.black,
+ color: theme.palette.text.primary,
},
'&:hover': {
- background: '#f4f4f4',
+ background: theme.palette.neutral.lighter,
},
},
listItemActive: {
@@ -112,7 +112,6 @@ export default (theme) => ({
alignItems: 'center',
height: 50,
borderRadius: theme.spacing(2),
- color: theme.palette.common.black,
[theme.breakpoints.down('sm')]: {
margin: theme.spacing(6, 0, 4),
textAlign: 'center',
@@ -149,7 +148,6 @@ export default (theme) => ({
expandIcon: {
marginTop: theme.spacing(1),
marginRight: 0,
- color: theme.palette.text.hint,
},
jungleImg: {
width: '22px !important',
diff --git a/webapp/src/components/NoResults/index.js b/webapp/src/components/NoResults/index.js
index 9b9ea85c4..1a6def958 100644
--- a/webapp/src/components/NoResults/index.js
+++ b/webapp/src/components/NoResults/index.js
@@ -1,8 +1,8 @@
import React from 'react'
import { makeStyles } from '@mui/styles'
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
import { useTranslation } from 'react-i18next'
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
import styles from './styles'
@@ -14,7 +14,7 @@ const NoResults = () => {
return (
+
{
-
{eosConfig.producerColumns?.includes('rank') ? (
{t('rank')}
@@ -30,7 +31,7 @@ const NodeList = ({ producers }) => {
{t('producerName')}
{t('nodes')}
-
+
)
}
diff --git a/webapp/src/components/NonCompliantCard/index.js b/webapp/src/components/NonCompliantCard/index.js
index 48560f176..c156d637c 100644
--- a/webapp/src/components/NonCompliantCard/index.js
+++ b/webapp/src/components/NonCompliantCard/index.js
@@ -50,7 +50,7 @@ const NonCompliantCard = ({ producer, stats }) => {
state={{ owner: producer.owner, url: producer.url }}
to="/bpjson"
variant="contained"
- color="secondary"
+ color="primary"
mt={2}
>
{t('bpJsonGenerator')}
diff --git a/webapp/src/components/NonCompliantCard/styles.js b/webapp/src/components/NonCompliantCard/styles.js
index d62d66cb8..c44f680e9 100644
--- a/webapp/src/components/NonCompliantCard/styles.js
+++ b/webapp/src/components/NonCompliantCard/styles.js
@@ -24,7 +24,7 @@ export default (theme) => ({
alignItems: 'center',
alignSelf: 'center',
[theme.breakpoints.down('sm')]: {
- borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
+ borderBottom: `1px solid ${theme.palette.neutral.main}`,
paddingBottom: theme.spacing(4),
},
},
@@ -33,10 +33,6 @@ export default (theme) => ({
height: 'auto',
margin: '0px',
flexGrow: '1',
- '& a': {
- color: theme.palette.primary.main,
- textDecorationColor: theme.palette.primary.main,
- },
[theme.breakpoints.down('lg')]: {
width: '150px',
},
@@ -48,7 +44,7 @@ export default (theme) => ({
[theme.breakpoints.up('sm')]: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3),
- borderLeft: '1px solid rgba(0, 0, 0, 0.2)',
+ borderLeft: `1px solid ${theme.palette.neutral.main}`,
padding: theme.spacing(0, 3, 0),
},
[theme.breakpoints.down('sm')]: {
diff --git a/webapp/src/components/PauseButton/index.js b/webapp/src/components/PauseButton/index.js
index c379b5114..8b294912b 100644
--- a/webapp/src/components/PauseButton/index.js
+++ b/webapp/src/components/PauseButton/index.js
@@ -35,7 +35,7 @@ const PauseButton = ({ isPaused, handlePause, isEnabled }) => {
color={
!isEnabled
? theme.palette.action.disabled
- : theme.palette.common.black
+ : theme.palette.text.primary
}
/>
)}
diff --git a/webapp/src/components/ProducerName/styles.js b/webapp/src/components/ProducerName/styles.js
index cbe459ebd..c2095e2c0 100644
--- a/webapp/src/components/ProducerName/styles.js
+++ b/webapp/src/components/ProducerName/styles.js
@@ -5,7 +5,7 @@ export default (theme) => ({
'& img': {
borderRadius: '50%',
aspectRatio: '1 / 1',
- backgroundColor: '#FFF',
+ backgroundColor: theme.palette.common.white,
},
},
nameContainer: {
diff --git a/webapp/src/components/ProducersChart/index.js b/webapp/src/components/ProducersChart/index.js
index 55cad4a41..f07e44fd9 100644
--- a/webapp/src/components/ProducersChart/index.js
+++ b/webapp/src/components/ProducersChart/index.js
@@ -2,7 +2,9 @@
import React, { useState, useEffect, memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@mui/styles'
+import { Link as RouterLink } from 'react-router-dom'
import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'
import useMediaQuery from '@mui/material/useMediaQuery'
import { useTheme } from '@mui/material/styles'
@@ -65,9 +67,7 @@ const CustomBarLabel = memo(
outerRadius + spacing,
midAngle,
)
- const link = generalConfig.eosRateLink
- ? `${generalConfig.eosRateLink}/block-producers/${payload.owner}`
- : payload.url
+ const link = `${eosConfig.producersRoute}/${payload.owner}`
const getNameTextAnchor = (x, cx) => {
if (x + 30 >= cx && x < cx) {
@@ -79,38 +79,35 @@ const CustomBarLabel = memo(
}
}
+ const ProfileLink = ({ link, owner, Content }) => {
+ return (
+
+
+
{t('name')}:{' '}
@@ -236,6 +224,7 @@ CustomTooltip.propTypes = {
const ProducersChart = ({ producers, info }) => {
const [entries, setEntries] = useState([])
+ const classes = useStyles()
const theme = useTheme()
useEffect(() => {
@@ -243,7 +232,11 @@ const ProducersChart = ({ producers, info }) => {
}, [producers])
return (
-
+
{
key={`cell-${index}`}
fill={
entry.owner === info.head_block_producer
- ? theme.palette.primary.dark
+ ? theme.palette.primary.main
: theme.palette.primary.light
}
/>
diff --git a/webapp/src/components/ProducersChart/styles.js b/webapp/src/components/ProducersChart/styles.js
index 2290e7f12..833037e7c 100644
--- a/webapp/src/components/ProducersChart/styles.js
+++ b/webapp/src/components/ProducersChart/styles.js
@@ -1,12 +1,17 @@
export default (theme) => ({
- wrapper: {
+ tooltip: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(2),
borderRadius: theme.spacing(1),
- boxShadow:
- '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
+ boxShadow: theme.palette.shadows.card,
+ border: `1px solid ${theme.palette.primary.main}`,
},
description: {
fontWeight: 'normal',
},
+ chartContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ paddingBottom: theme.spacing(2),
+ }
})
diff --git a/webapp/src/components/ProducersTable/MainSocialLinks.js b/webapp/src/components/ProducersTable/MainSocialLinks.js
index 15e6c69f4..1fde1bd15 100644
--- a/webapp/src/components/ProducersTable/MainSocialLinks.js
+++ b/webapp/src/components/ProducersTable/MainSocialLinks.js
@@ -29,6 +29,8 @@ const MainSocialLinks = ({ social, name }) => {
links[item?.name] = item.url
})
+ if (!Object.keys(links).length) return <>
+
return (
{socialMediaNames.map((socialMedia, index) =>
diff --git a/webapp/src/components/ProducersTable/ProducerRow.js b/webapp/src/components/ProducersTable/ProducerRow.js
index 860370086..2a2cc9612 100644
--- a/webapp/src/components/ProducersTable/ProducerRow.js
+++ b/webapp/src/components/ProducersTable/ProducerRow.js
@@ -50,19 +50,23 @@ const ProducerRow = ({ producer, index }) => {
-
-
- {producerOrg?.media?.website}
-
-
-
-
+ {producerOrg?.media?.website}
+
+
+
+
{eosConfig.producerColumns?.includes('votes') && (
@@ -131,7 +135,7 @@ const ProducerRow = ({ producer, index }) => {
-
)
diff --git a/webapp/src/components/ProducersTable/index.js b/webapp/src/components/ProducersTable/index.js
index bb1ff822d..0cf19eb20 100644
--- a/webapp/src/components/ProducersTable/index.js
+++ b/webapp/src/components/ProducersTable/index.js
@@ -3,6 +3,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
@@ -20,8 +21,15 @@ const useStyles = makeStyles(styles)
const ProducersTable = ({ producers }) => {
const classes = useStyles()
+ const navigate = useNavigate()
const { t } = useTranslation('producerCardComponent')
+ const handleClickRow = producer => {
+ navigate(`/${eosConfig.producersRoute}/${producer?.owner}`, {
+ state: { producer },
+ })
+ }
+
return (
@@ -29,9 +37,7 @@ const ProducersTable = ({ producers }) => {
+
{
({
formControl: {
width: '100%',
},
- cardShadow: {
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
- },
})
diff --git a/webapp/src/routes/CPUBenchmark/index.js b/webapp/src/routes/CPUBenchmark/index.js
index 872322a17..fdcb4183a 100644
--- a/webapp/src/routes/CPUBenchmark/index.js
+++ b/webapp/src/routes/CPUBenchmark/index.js
@@ -3,8 +3,6 @@ import React, { useEffect, useState } from 'react'
import { useLazyQuery } from '@apollo/client'
import { useTranslation } from 'react-i18next'
import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
import LinearProgress from '@mui/material/LinearProgress'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
@@ -12,19 +10,15 @@ import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
-import InputLabel from '@mui/material/InputLabel'
-import MenuItem from '@mui/material/MenuItem'
-import FormControl from '@mui/material/FormControl'
-import Select from '@mui/material/Select'
import Button from '@mui/material/Button'
-import Highcharts from 'highcharts'
-import HighchartsReact from 'highcharts-react-official'
import { makeStyles } from '@mui/styles'
import styles from './styles'
import { formatWithThousandSeparator, rangeOptions } from '../../utils'
import { CPU_BENCHMARK } from '../../gql'
+import ChartHeader from '../../components/ChartHeader'
+import HighchartsWrapper from '../../components/HighChartsWrapper'
const useStyles = makeStyles(styles)
@@ -33,9 +27,6 @@ const options = {
type: 'spline',
zoomType: 'x'
},
- time: {
- timezoneOffset: new Date().getTimezoneOffset(),
- },
title: {
text: ' ',
},
@@ -180,75 +171,58 @@ const CPUBenchmark = () => {
}, [data])
return (
-
-
-
-
-
+
+
+ )}
)
}
diff --git a/webapp/src/routes/CPUBenchmark/styles.js b/webapp/src/routes/CPUBenchmark/styles.js
index d3cec29fe..408409580 100644
--- a/webapp/src/routes/CPUBenchmark/styles.js
+++ b/webapp/src/routes/CPUBenchmark/styles.js
@@ -1,17 +1,4 @@
export default (theme) => ({
- cardShadow: {
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
- },
- formControl: {
- display: 'flex',
- flexDirection: 'row-reverse',
- },
- textDiv: {
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- p: '{1} ',
- },
infoContainer: {
display: 'flex',
justifyContent: 'center',
diff --git a/webapp/src/routes/EVMDashboard/index.js b/webapp/src/routes/EVMDashboard/index.js
index 6e089ec43..1352461d8 100644
--- a/webapp/src/routes/EVMDashboard/index.js
+++ b/webapp/src/routes/EVMDashboard/index.js
@@ -1,5 +1,4 @@
import React from 'react'
-import { useTheme } from '@mui/material/styles'
import { useTranslation } from 'react-i18next'
import { makeStyles } from '@mui/styles'
@@ -16,7 +15,6 @@ const useStyles = makeStyles(styles)
const EVMDashboard = () => {
const classes = useStyles()
- const theme = useTheme()
const { t } = useTranslation('evmDashboardRoute')
const [
@@ -32,7 +30,7 @@ const EVMDashboard = () => {
isLive,
},
{ handleSelect, handlePause },
- ] = useEVMState(theme, t)
+ ] = useEVMState(t)
return (
<>
diff --git a/webapp/src/routes/EVMDashboard/useEVMstate.js b/webapp/src/routes/EVMDashboard/useEVMstate.js
index ce71da167..f048d9410 100644
--- a/webapp/src/routes/EVMDashboard/useEVMstate.js
+++ b/webapp/src/routes/EVMDashboard/useEVMstate.js
@@ -13,7 +13,7 @@ import ethApi from '../../utils/ethapi'
import { rangeOptions } from '../../utils'
import { evmConfig } from '../../config'
-const useEVMState = (theme, t) => {
+const useEVMState = t => {
const { data: stats, loading } = useSubscription(EVM_STATS_SUBSCRIPTION)
const { data: historicalStats, loading: historicalLoading } = useSubscription(
EVM_HISTORICAL_STATS_SUBSCRIPTION,
@@ -154,17 +154,15 @@ const useEVMState = (theme, t) => {
setTokenHistoryData([
{
name: t('incoming'),
- color: theme.palette.secondary.main,
data: incoming,
},
{
name: t('outgoing'),
- color: theme.palette.tertiary.main,
data: outgoing,
},
])
}
- }, [tokenData, t, theme])
+ }, [tokenData, t])
useEffect(() => {
if (transactionsData?.transactions) {
@@ -180,12 +178,11 @@ const useEVMState = (theme, t) => {
setTransactionsHistoryData([
{
name: t('transactions'),
- color: theme.palette.secondary.main,
data,
},
])
}
- }, [transactionsData, t, theme])
+ }, [transactionsData, t])
useEffect(() => {
const updateTPB = async blockNum => {
@@ -235,11 +232,10 @@ const useEVMState = (theme, t) => {
setTransactionsHistoryData([
{
name: t('transactions'),
- color: theme.palette.secondary.main,
data: blocksList,
},
])
- }, [blocksList, t, theme])
+ }, [blocksList, t])
return [
{
diff --git a/webapp/src/routes/EVMEndpointsList/index.js b/webapp/src/routes/EVMEndpointsList/index.js
index 42ce37a2c..bb3d6a9bd 100644
--- a/webapp/src/routes/EVMEndpointsList/index.js
+++ b/webapp/src/routes/EVMEndpointsList/index.js
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
import { makeStyles } from '@mui/styles'
import Button from '@mui/material/Button'
import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
@@ -33,77 +32,75 @@ const EVMEndpointsList = () => {
const { healthLights } = generalConfig
return (
-
-
-
+
+
-
- {t('title')}
-
-
-
- {t('timeFrame')}
-
-
-
-
- {loading &&
- {t('selectTo')}
-
- {t('zoomTo')}.
-
-
-
- {t('title')}
-
-
-
-
+
- }
- >
- {t('rerun')}
-
-
-
-
- {t('filterEndpoints')}
-
- {
- handleFilter(event.target?.checked)
- }}
- />
-
+
+
+ {t('title')}
+
+
+
+
-
-
+ }
+ >
+ {t('rerun')}
+
-
-
-
-
-
+
+
+
+ {t('filterEndpoints')}
+
+ {
+ handleFilter(event.target?.checked)
+ }}
+ />
-
+
+
+
+
+
+
)
}
diff --git a/webapp/src/routes/EVMEndpointsList/styles.js b/webapp/src/routes/EVMEndpointsList/styles.js
index b8a291f0b..5abb8d73c 100644
--- a/webapp/src/routes/EVMEndpointsList/styles.js
+++ b/webapp/src/routes/EVMEndpointsList/styles.js
@@ -1,7 +1,4 @@
export default (theme) => ({
- cardShadow: {
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
- },
healthContainer: {
display: 'flex',
width: '300px',
diff --git a/webapp/src/routes/EndpointsList/index.js b/webapp/src/routes/EndpointsList/index.js
index d2bcad2c8..ac3a3f3cf 100644
--- a/webapp/src/routes/EndpointsList/index.js
+++ b/webapp/src/routes/EndpointsList/index.js
@@ -3,7 +3,6 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import { makeStyles } from '@mui/styles'
import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import LinearProgress from '@mui/material/LinearProgress'
import InputLabel from '@mui/material/InputLabel'
@@ -35,86 +34,84 @@ const EndpointsList = () => {
] = useEndpointsState()
return (
-
-
-
- {t('title')} {t('producer')}
+
+
+
-
- {loading &&
+
+ {loading &&
-
-
-
- {t('byProducer')}
-
- {producersNames?.length && (
- producer.name)}
- value={selectedName}
- onChange={(_event, newValue) => {
- const producer = producersNames.find(
- producer => producer.name === newValue,
- )
+
+
+ {t('byProducer')}
+
+ {producersNames?.length && (
+ producer.name)}
+ value={selectedName}
+ onChange={(_event, newValue) => {
+ const producer = producersNames.find(
+ producer => producer.name === newValue,
+ )
- if (!producer) return
+ if (!producer) return
- setSelected(producer.id)
- }}
- inputValue={selectedName}
- onInputChange={(_event, newInputValue) => {
- setSelectedName(newInputValue)
- }}
- renderInput={params => (
-
+ setSelected(producer.id)
+ }}
+ inputValue={selectedName}
+ onInputChange={(_event, newInputValue) => {
+ setSelectedName(newInputValue)
+ }}
+ renderInput={params => (
+
)
diff --git a/webapp/src/routes/EndpointsStats/styles.js b/webapp/src/routes/EndpointsStats/styles.js
index d36ef0ed0..4ab912879 100644
--- a/webapp/src/routes/EndpointsStats/styles.js
+++ b/webapp/src/routes/EndpointsStats/styles.js
@@ -1,7 +1,4 @@
export default (theme) => ({
- cardShadow: {
- boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
- },
cardByProducer: {
marginTop: theme.spacing(8)
},
diff --git a/webapp/src/routes/Faucet/index.js b/webapp/src/routes/Faucet/index.js
index 9e90bf661..15b0a2dd1 100644
--- a/webapp/src/routes/Faucet/index.js
+++ b/webapp/src/routes/Faucet/index.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
import { useMutation } from '@apollo/client'
import { makeStyles } from '@mui/styles'
import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
import { Link } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import Typography from '@mui/material/Typography'
@@ -157,127 +156,121 @@ const Faucet = () => {
return (
+
+ {t('title')} {t('producer')}
+
+
+
+
+
+
+ {t('endpointsResponding')}
- {
+ handleFilter(event.target?.checked)
+ }}
+ />
-
-
- {t('itemsPerPage')}
-
-
+
+ {t('itemsPerPage')}
+
+
-
-
- {t('endpointsResponding')}
-
- {
- handleFilter(event.target?.checked)
- }}
- />
-
-
-
-
+
+
-
- {loading ? (
-
-
- )}
- {pagination.pages > 1 && (
-
-
- )}
-
- )}
-
+
+
+ {loading ? (
+
+
+ )}
+ {pagination.pages > 1 && (
+
+
+ )}
+
+ )}
)
}
diff --git a/webapp/src/routes/EndpointsList/styles.js b/webapp/src/routes/EndpointsList/styles.js
index 739ec412a..b705e6d8b 100644
--- a/webapp/src/routes/EndpointsList/styles.js
+++ b/webapp/src/routes/EndpointsList/styles.js
@@ -43,9 +43,6 @@ export default (theme) => ({
padding: theme.spacing(4),
justifyContent: 'center',
},
- cardShadow: {
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
- },
noShadow: {
'& .MuiPaper-root': {
boxShadow: 'none !important'
diff --git a/webapp/src/routes/EndpointsStats/index.js b/webapp/src/routes/EndpointsStats/index.js
index 910028724..9e963f2ee 100644
--- a/webapp/src/routes/EndpointsStats/index.js
+++ b/webapp/src/routes/EndpointsStats/index.js
@@ -4,14 +4,12 @@ import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
import Autocomplete from '@mui/material/Autocomplete'
import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Highcharts from 'highcharts'
-import HighchartsReact from 'highcharts-react-official'
import LinearProgress from '@mui/material/LinearProgress'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import useHealthCheckState from '../../hooks/customHooks/useHealthCheckHistoryState'
+import HighchartsWrapper from '../../components/HighChartsWrapper'
import styles from './styles'
import EndpointsTable from './EndpointStatsTable'
@@ -59,62 +57,57 @@ const EndpointsStats = () => {
return (
<>
-
-
-
-
- {t('createAccount')}
-
-
-
- {t('title')}
-
-
- {t('paragraph')}
-
-
- {t('subtitle3')}
-
- {eosConfig.networkName !== 'lacchain' ? (
- <>
-
- {t('body3.paragraph1Text1')}{' '}
-
- eosio
-
- {' '}{t('body3.eosioAccount')} {t('body3.paragraph1Text2')}{' '}
-
- {t('standard')}
- {'.'}
-
-
- ) : (
+
+
+ {t('title')}
+
+
+ {t('paragraph')}
+
+
+ {t('subtitle3')}
+
+ {eosConfig.networkName !== 'lacchain' ? (
+ <>
{t('body3.paragraph1Text1')}{' '}
-
+
eosio
-
- {' '}{t('body3.eosioAccount')} {t('body3.paragraph1Text2')}{' '}
-
- {t('standard')}
- {'.'}
+ {' '}
+ {t('body3.eosioAccount')} {t('body3.paragraph1Text2')}{' '}
+
+ {t('standard')}
+
+ {'.'}
- )}
-
- {t('title2')}
-
-
- {t('paragraph2')}
+
+ ) : (
+
+ {t('body3.paragraph1Text1')}{' '}
+
+ eosio
+ {' '}
+ {t('body3.eosioAccount')} {t('body3.paragraph1Text2')}{' '}
+
+ {t('standard')}
+
+ {'.'}
-
+
+
+ {t('bullet3Title')}
+ {t('bullet3')}
+
+
+
+ {t('title3')}
+
+
+ {t('paragraph3')}{' '}
+
+ {t('bpjsonGenerator')}
+
+ {'.'}
+
+
+ {t('title4')}
+
+
+ {t('paragraph4')}
+
+
)
}
diff --git a/webapp/src/routes/Help/styles.js b/webapp/src/routes/Help/styles.js
index aeba58fb2..8f6f99546 100644
--- a/webapp/src/routes/Help/styles.js
+++ b/webapp/src/routes/Help/styles.js
@@ -18,7 +18,4 @@ export default (theme) => ({
marginTop: 0,
},
},
- cardShadow: {
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
- },
})
diff --git a/webapp/src/routes/Home/BlockProducerInfo.js b/webapp/src/routes/Home/BlockProducerInfo.js
index 85b17ec95..7510fdbcd 100644
--- a/webapp/src/routes/Home/BlockProducerInfo.js
+++ b/webapp/src/routes/Home/BlockProducerInfo.js
@@ -9,7 +9,6 @@ import { useSharedState } from '../../context/state.context'
import { eosConfig } from '../../config'
const Card = lazy(() => import('@mui/material/Card'))
-const CardContent = lazy(() => import('@mui/material/CardContent'))
const Typography = lazy(() => import('@mui/material/Typography'))
const LinearProgress = lazy(() => import('@mui/material/LinearProgress'))
const ProducersChart = lazy(() => import('../../components/ProducersChart'))
@@ -110,18 +109,14 @@ const BlockProducerInfo = ({ t, classes }) => {
/>
-
+ {t('createAccount')}
+
)
}
diff --git a/webapp/src/routes/Faucet/styles.js b/webapp/src/routes/Faucet/styles.js
index 03c5538b7..d16caf9f4 100644
--- a/webapp/src/routes/Faucet/styles.js
+++ b/webapp/src/routes/Faucet/styles.js
@@ -10,7 +10,7 @@ export default (theme) => ({
width: '300px',
},
},
- test: {
+ container: {
display: 'flex',
justifyContent: 'center',
[theme.breakpoints.down('md')]: {
@@ -18,13 +18,9 @@ export default (theme) => ({
height: '100% !important',
},
marginBottom: theme.spacing(4),
+ gap: theme.spacing(4),
},
card: {
- padding: '10px',
height: '100%',
- '& .MuiPaper-root': {
- height: '100%',
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
- },
},
})
diff --git a/webapp/src/routes/Help/index.js b/webapp/src/routes/Help/index.js
index 268533904..ff77a1896 100644
--- a/webapp/src/routes/Help/index.js
+++ b/webapp/src/routes/Help/index.js
@@ -2,13 +2,12 @@ import React from 'react'
import Typography from '@mui/material/Typography'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
+import Card from '@mui/material/Card'
import Link from '@mui/material/Link'
import HttpIcon from '@mui/icons-material/Http'
import TelegramIcon from '@mui/icons-material/Telegram'
import GitHubIcon from '@mui/icons-material/GitHub'
import { Link as RouterLink } from 'react-router-dom'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
import { eosConfig } from '../../config'
@@ -21,131 +20,138 @@ const Help = () => {
const { t } = useTranslation('helpRoute')
return (
-
-
- setCreateAccountValues({
- ...createAccountValues,
- ...{ publicKey: e.target.value },
- })
- }
- helperText={t('keyFormat')}
- required
- />
-
- {!isUltraTestnet && (
-
-
- setCreateAccountValues({
- ...createAccountValues,
- ...{ accountName: e.target.value },
- })
- }
- error={!!createAccountValues.accountName && !isValidAccountName(createAccountValues.accountName)}
- helperText={t('accountFormat')}
- required
- />
-
- )}
-
-
- ) : (
- <>
- )
- }
- onClick={createAccount}
- >
- {t('createButton')}
-
-
+
+
-
+
+ setCreateAccountValues({
+ ...createAccountValues,
+ ...{ publicKey: e.target.value },
+ })
+ }
+ helperText={t('keyFormat')}
+ required
+ />
+
+ {!isUltraTestnet && (
+
+
+ setCreateAccountValues({
+ ...createAccountValues,
+ ...{ accountName: e.target.value },
+ })
+ }
+ error={!!createAccountValues.accountName && !isValidAccountName(createAccountValues.accountName)}
+ helperText={t('accountFormat')}
+ required
+ />
-
-
-
-
-
- {`${t('issueTokens')} (500 ${eosConfig.tokenSymbol})`}
-
+
+ {`${t('issueTokens')} (500 ${eosConfig.tokenSymbol})`}
+
+
-
+
- setAccount(e.target.value)}
- error={!!account && !isValidAccountName(account)}
- helperText={t('accountFormat')}
- required
- />
-
-
-
- ) : (
- <>
- )
- }
- onClick={transferTokens}
- >
- {t('getTokens')}
-
-
- {transferTokensTransaction && (
-
-
- {t('transferTokensTransaction')}
-
-
- {transferTokensTransaction.slice(0, 7)}
-
-
- )}
+ )}
+
+
+ ) : (
+ <>
+ )
+ }
+ onClick={createAccount}
+ >
+ {t('createButton')}
+
+
+
+
+ )}
+
+ setAccount(e.target.value)}
+ error={!!account && !isValidAccountName(account)}
+ helperText={t('accountFormat')}
+ required
+ />
+
+
+
+ ) : (
+ <>
+ )
+ }
+ onClick={transferTokens}
+ >
+ {t('getTokens')}
+
+
+ {transferTokensTransaction && (
+
+
+ {t('transferTokensTransaction')}
+
+
+ {transferTokensTransaction.slice(0, 7)}
+
-
-
- -
-
- {t('bullet1Title')} {t('bullet1')} -
- {t('bullet2Title')} {t('bullet2')} + )} +
- + {t('bullet1Title')} + {t('bullet1')} + +
-
+ {t('bullet2Title')}
+ {t('bullet2')}
- - {t('subBullet2Title')} {t('subBullet2')} - {t('subBullet2Title')} + {t('subBullet2')} + https://edenia.com - + {t('subBullet2b')} - https://edenia.com/chains.json - + {t('subBullet2c')} - https://edenia.com/bp.json - {'.'} + + {'.'}
- {t('bullet3Title')} {t('bullet3')} -
-
+
- {t('githubEOSCR')}
-
-
-
- {t('telegramChannel')}
-
-
-
- {t('websiteEOSCR')}
-
-
-
+ {t('githubEOSCR')}
+
+
+
+ {t('telegramChannel')}
+
+
+
+ {t('websiteEOSCR')}
+
+
-
+
+
+ {t('bpSchedule')}
+
+
+
({
graphicBox: {
- '& .MuiCard-root': {
- height: '100%',
- },
display: 'flex',
marginBottom: '10px',
gap: '10px',
@@ -10,9 +7,6 @@ export default (theme) => ({
display: 'block',
},
},
- cardShadow: {
- boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
- },
divMargin: {
display: 'flex',
marginBottom: '10px',
diff --git a/webapp/src/routes/Lacchain/LacchainManagmentStyle.js b/webapp/src/routes/Lacchain/LacchainManagmentStyle.js
index a46d22051..92a9c0e59 100644
--- a/webapp/src/routes/Lacchain/LacchainManagmentStyle.js
+++ b/webapp/src/routes/Lacchain/LacchainManagmentStyle.js
@@ -22,7 +22,7 @@ const Styles = makeStyles((theme) => ({
fontSize: 20,
},
tooltip: {
- backgroundColor: 'rgba(97, 97, 97, 0.92)',
+ backgroundColor: theme.palette.neutral.main,
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(1),
},
diff --git a/webapp/src/routes/Lacchain/LacchainNetwork.js b/webapp/src/routes/Lacchain/LacchainNetwork.js
index f83b51ca2..874f53b28 100644
--- a/webapp/src/routes/Lacchain/LacchainNetwork.js
+++ b/webapp/src/routes/Lacchain/LacchainNetwork.js
@@ -1,4 +1,5 @@
import React, { useCallback, useEffect } from 'react'
+import { useTheme } from '@mui/material/styles'
import zc from '@dvsl/zoomcharts'
import { makeStyles } from '@mui/styles'
import Card from '@mui/material/Card'
@@ -17,26 +18,23 @@ const useStyles = makeStyles(() => ({
const LacchainNodesNetwork = () => {
const classes = useStyles()
+ const theme = useTheme()
const initData = useCallback(async () => {
const nodeTypes = {
1: {
type: 'validator',
- color: '#34eba2',
image: '/node-types/validator.svg'
},
2: {
type: 'writer',
- color: '#c23044',
image: '/node-types/writer.svg'
},
3: {
type: 'boot',
- color: '#1836de',
image: '/node-types/boot.svg'
},
4: {
type: 'observer',
- color: '#e8df8b',
image: '/node-types/observer.svg'
}
}
@@ -102,16 +100,16 @@ const LacchainNodesNetwork = () => {
fillColor: 'transparent'
},
nodeHovered: {
- fillColor: '#e0e0e0',
+ fillColor: theme.palette.neutral.light,
radius: 60
},
nodeLabel: {
padding: 4,
backgroundStyle: {
- fillColor: '#e0e0e0'
+ fillColor: theme.palette.neutral.light
},
textStyle: {
- fillColor: 'black',
+ fillColor: theme.palette.text.primary,
font: '18px Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol'
}
},
@@ -120,7 +118,7 @@ const LacchainNodesNetwork = () => {
radius: 2
},
linkHovered: {
- fillColor: 'red',
+ fillColor: theme.palette.error.main,
radius: 4
},
nodeStyleFunction: (node) => {
@@ -135,7 +133,7 @@ const LacchainNodesNetwork = () => {
}
})
chart.clearHistory()
- }, [])
+ }, [theme.palette])
useEffect(() => {
initData()
diff --git a/webapp/src/routes/Lacchain/LacchainNodeConfig.js b/webapp/src/routes/Lacchain/LacchainNodeConfig.js
index 62d8acd08..665f5d847 100644
--- a/webapp/src/routes/Lacchain/LacchainNodeConfig.js
+++ b/webapp/src/routes/Lacchain/LacchainNodeConfig.js
@@ -3,7 +3,6 @@ import { makeStyles } from '@mui/styles'
import Autocomplete from '@mui/material/Autocomplete'
import TextField from '@mui/material/TextField'
import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
import Button from '@mui/material/Button'
import { eosConfig } from '../../config'
@@ -24,47 +23,43 @@ const LacchainNodeConfig = () => {
] = useLacchainNodeConfigState()
return (
-
-
-
-
-
+
+
+ )}
)
}
diff --git a/webapp/src/routes/MissedBlocks/styles.js b/webapp/src/routes/MissedBlocks/styles.js
deleted file mode 100644
index d553b8c81..000000000
--- a/webapp/src/routes/MissedBlocks/styles.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default (theme) => ({
- cardShadow: {
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
- },
- formControl: {
- display: 'flex',
- flexDirection: 'row-reverse',
- },
- textDiv: {
- display: "flex",
- justifyContent: "space-between",
- alignItems: "center",
- p: '{1} '
- }
-})
diff --git a/webapp/src/routes/Nodes/index.js b/webapp/src/routes/Nodes/index.js
index f06ebc751..616bc37fc 100644
--- a/webapp/src/routes/Nodes/index.js
+++ b/webapp/src/routes/Nodes/index.js
@@ -26,7 +26,7 @@ const Nodes = () => {
return (
<>
-
-
-
-
- {t('bpSchedule')}
-
-
-
-
-
+
-
-
- node.name)}
- value={nodeType || ''}
- onChange={handleOnChangeNodeType}
- renderInput={(params) => (
-
+ node.name)}
+ value={nodeType || ''}
+ onChange={handleOnChangeNodeType}
+ renderInput={(params) => (
+ node.name)}
- value={node || ''}
- onChange={handleOnChangeNode}
- renderInput={(params) => (
- node.name)}
+ value={node || ''}
+ onChange={handleOnChangeNode}
+ renderInput={(params) => (
+
-
-
+
+
)
}
diff --git a/webapp/src/routes/MissedBlocks/index.js b/webapp/src/routes/MissedBlocks/index.js
index 15d0068cb..0f03ee30f 100644
--- a/webapp/src/routes/MissedBlocks/index.js
+++ b/webapp/src/routes/MissedBlocks/index.js
@@ -3,8 +3,6 @@ import React, { useEffect, useState } from 'react'
import { useLazyQuery } from '@apollo/client'
import { useTranslation } from 'react-i18next'
import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import Typography from '@mui/material/Typography'
import LinearProgress from '@mui/material/LinearProgress'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
@@ -12,24 +10,13 @@ import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
-import InputLabel from '@mui/material/InputLabel'
-import MenuItem from '@mui/material/MenuItem'
-import FormControl from '@mui/material/FormControl'
-import Select from '@mui/material/Select'
-import Highcharts from 'highcharts'
-import HighchartsReact from 'highcharts-react-official'
-import { makeStyles } from '@mui/styles'
import { formatWithThousandSeparator, rangeOptions } from '../../utils'
import { MISSED_BLOCKS } from '../../gql'
-import styles from './styles'
-
-const useStyles = makeStyles(styles)
+import HighchartsWrapper from '../../components/HighChartsWrapper'
+import ChartHeader from 'components/ChartHeader'
const options = {
- time: {
- timezoneOffset: new Date().getTimezoneOffset(),
- },
title: {
text: ' ',
},
@@ -61,7 +48,6 @@ const BlockDistribution = () => {
const [series, setSeries] = useState([])
const [producers, setProducers] = useState([])
const [load, { loading, data }] = useLazyQuery(MISSED_BLOCKS)
- const classes = useStyles()
useEffect(() => {
load({
@@ -112,72 +98,55 @@ const BlockDistribution = () => {
}, [data])
return (
-
-
- {t('title')}
-
-
-
- {t('timeFrame')}
-
-
-
-
- {loading &&
+
({
display: 'flex',
justifyContent: 'center',
},
- cardShadow: {
- boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15)',
- },
searchWrapper: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(1),
diff --git a/webapp/src/routes/NodesDistribution/index.js b/webapp/src/routes/NodesDistribution/index.js
index 18dc392dc..f0e343c9e 100644
--- a/webapp/src/routes/NodesDistribution/index.js
+++ b/webapp/src/routes/NodesDistribution/index.js
@@ -1,7 +1,8 @@
/* eslint camelcase: 0 */
import React, { lazy } from 'react'
-import LinearProgress from '@mui/material/LinearProgress'
import { makeStyles } from '@mui/styles'
+import Card from '@mui/material/Card'
+import LinearProgress from '@mui/material/LinearProgress'
import useNodeDistributionState from '../../hooks/customHooks/useNodeDistributionState'
@@ -18,14 +19,14 @@ const Nodes = () => {
return (
<>
-
+
{loading &&
{data.map((url, index) => (
diff --git a/webapp/src/routes/ProducerProfile/index.js b/webapp/src/routes/ProducerProfile/index.js
index 4e0d0231c..5d9c1445b 100644
--- a/webapp/src/routes/ProducerProfile/index.js
+++ b/webapp/src/routes/ProducerProfile/index.js
@@ -3,6 +3,7 @@ import { useParams, Navigate, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { makeStyles } from '@mui/styles'
import CircularProgress from '@mui/material/CircularProgress'
+import Card from '@mui/material/Card'
import Typography from '@mui/material/Typography'
import { eosConfig } from '../../config'
@@ -46,10 +47,10 @@ const ProducerProfile = () => {
const WrapperContainer = ({ title, children }) => {
return (
-
{
handlePopoverOpen={handlePopoverOpen}
/>
{!loading && (
-
+
{
className={classes.geography}
key={geo.rsmKey}
geography={geo}
- stroke="#8F9DA4"
+ stroke={theme.palette.neutral.main}
+ strokeWidth={0.8}
fill={
nodeData && nodeData.rewards > 0
? colorScale(parseInt(nodeData.rewards))
- : '#EEEEEE'
+ : theme.palette.neutral.light
}
/>
)
diff --git a/webapp/src/routes/RewardsDistribution/styles.js b/webapp/src/routes/RewardsDistribution/styles.js
index 83a600f6e..12653386a 100644
--- a/webapp/src/routes/RewardsDistribution/styles.js
+++ b/webapp/src/routes/RewardsDistribution/styles.js
@@ -1,4 +1,4 @@
-export default (theme, lowestRewardsColor, highestRewardsColor) => ({
+export default (theme) => ({
spaceBetween: {
display: 'flex',
alignItems: 'center',
@@ -41,10 +41,10 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
display: 'inline-block',
},
lowestRewards: {
- backgroundColor: lowestRewardsColor,
+ backgroundColor: theme.palette.primary.light,
},
highestRewards: {
- backgroundColor: highestRewardsColor,
+ backgroundColor: theme.palette.primary.dark,
},
rewardsColorSchema: {
display: 'flex',
@@ -73,9 +73,6 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
boxPadding: {
padding: '10px',
},
- cardShadow: {
- boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
- },
divMargin: {
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
@@ -116,12 +113,6 @@ export default (theme, lowestRewardsColor, highestRewardsColor) => ({
paddingBottom: theme.spacing(2),
},
},
- shadow: {
- '& .MuiPaper-root': {
- boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
- padding: theme.spacing(1),
- },
- },
nonCompliantButton: {
height: '30px',
fontSize: '12px !important',
diff --git a/webapp/src/routes/RicardianContract/index.js b/webapp/src/routes/RicardianContract/index.js
index fb0ae7335..5863d4b3e 100644
--- a/webapp/src/routes/RicardianContract/index.js
+++ b/webapp/src/routes/RicardianContract/index.js
@@ -15,16 +15,14 @@ const RicardianContract = () => {
const { t } = useTranslation('ricardianContractRoute')
return (
-
-
+
)
}
diff --git a/webapp/src/routes/RicardianContract/styles.js b/webapp/src/routes/RicardianContract/styles.js
index 0c2bf0019..ec8bccb8e 100644
--- a/webapp/src/routes/RicardianContract/styles.js
+++ b/webapp/src/routes/RicardianContract/styles.js
@@ -1,6 +1,5 @@
export default (theme) => ({
root: {
- padding: theme.spacing(2),
'& svg': {
fontSize: '35px !important',
},
@@ -8,6 +7,9 @@ export default (theme) => ({
fontSize: '15px !important',
fontWeight: '600',
},
+ '& h6': {
+ color: theme.palette.neutral.dark
+ },
'& a': {
lineBreak: 'anywhere',
},
@@ -15,14 +17,10 @@ export default (theme) => ({
'& svg': {
fontSize: '45px !important',
},
-
'& h4': {
fontSize: '34px !important',
fontWeight: 'normal',
},
},
},
- cardShadow: {
- boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
- },
})
diff --git a/webapp/src/theme/components.js b/webapp/src/theme/components.js
index 2c2556eae..3eb9aa24b 100644
--- a/webapp/src/theme/components.js
+++ b/webapp/src/theme/components.js
@@ -2,12 +2,9 @@ const components = {
MuiCssBaseline: {
styleOverrides: theme =>
`
- .simple-card {
- background-color: ${theme.palette.background.main};
- box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);
- border-radius: 4px;
- padding: ${theme.spacing(4)};
- },
+ body {
+ background-color: ${theme.palette.background.light};
+ }
.MuiTypography-capSubtitle {
color: ${theme.palette.neutral.dark};
}
@@ -20,6 +17,28 @@ const components = {
},
},
},
+ MuiPaper: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ boxShadow: theme.palette.shadows.card,
+ backgroundImage: 'none',
+ }),
+ },
+ },
+ MuiCard: {
+ styleOverrides: {
+ root: {
+ padding: 16
+ },
+ },
+ },
+ MuiAppBar: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ backgroundColor: theme.palette.background.paper,
+ }),
+ },
+ },
MuiButton: {
styleOverrides: {
root: {
diff --git a/webapp/src/theme/index.js b/webapp/src/theme/index.js
index 2f0b2d2ed..2e94781ab 100644
--- a/webapp/src/theme/index.js
+++ b/webapp/src/theme/index.js
@@ -20,9 +20,6 @@ const theme = (variant) => {
},
{
name: variant.name,
- body: variant.body,
- header: variant.header,
- sidebar: variant.sidebar
}
)
}
diff --git a/webapp/src/theme/variants.js b/webapp/src/theme/variants.js
index 2ad4e38a7..dd50c3dcb 100644
--- a/webapp/src/theme/variants.js
+++ b/webapp/src/theme/variants.js
@@ -3,135 +3,229 @@ import { blue, green, grey } from '@mui/material/colors'
const lightVariant = {
name: 'Light',
palette: {
+ mode: 'light',
primary: {
main: blue[800],
contrastText: '#FFF',
},
secondary: {
- main: blue[600],
- contrastText: '#FFF',
- },
- tertiary: {
- main: '#00C853',
+ main: green.A700,
contrastText: '#FFF',
},
text: {
primary: '#000',
},
background: {
- main: '#FFF',
- light: '#F6F9FD',
+ light: '#F7F9FC',
+ default: '#FFF',
+ paper: '#FFF',
},
neutral: {
lighter: '#F0F3FA',
light: '#E0E0E0',
+ main: '#858585',
dark: '#4E4E4E',
- darker: '#3D3D3DDE'
- }
- },
- header: {
- color: grey[500],
- background: '#FFF',
- search: {
- color: grey[800],
+ darker: '#2E2E2E',
},
- indicator: {
- background: blue[600],
+ error: {
+ main: '#D32F2F',
+ light: '#EF5350',
+ dark: '#C62828',
+ contrastText: '#FFF',
},
- },
- sidebar: {
- color: grey[900],
- background: '#FFF',
- header: {
- color: blue[800],
- background: '#FFF',
- brand: {
- color: blue[800],
- },
- },
- footer: {
- color: '#424242',
- background: '#FFF',
- },
- category: {
- fontWeight: 'normal',
- },
- badge: {
- color: '#FFF',
+ warning: {
+ main: '#ED6C02',
+ light: '#FF9800',
+ dark: '#E65100',
+ contrastText: '#FFF',
+ },
+ info: {
+ main: '#0288D1',
+ light: '#03A9F4',
+ dark: '#01579B',
+ contrastText: '#FFF',
+ },
+ success: {
+ main: '#2E7D32',
+ light: '#4CAF50',
+ dark: '#1B5E20',
+ contrastText: '#FFF',
+ },
+ action: {
+ active: 'rgba(0, 0, 0, 0.54)',
+ hover: 'rgba(0, 0, 0, 0.04)',
+ hoverOpacity: '0.04',
+ selected: 'rgba(0, 0, 0, 0.08)',
+ selectedOpacity: '0.08',
+ disabled: 'rgba(0, 0, 0, 0.26)',
+ disabledBackground: 'rgba(0, 0, 0, 0.12)',
+ disabledOpacity: '0.38',
+ focus: 'rgba(0, 0, 0, 0.12)',
+ focusOpacity: '0.12',
+ activatedOpacity: '0.12',
+ },
+ shadows: {
+ card: '0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
+ nodeCard: '2px 3px 4px 0px #0000002E',
+ profileCard: '0px -2px 8px 0px #0000004D',
+ hover: `0px 0px 40px -30px ${blue[800]}bf inset`,
+ authBox: `0px 0px 3px 3px ${blue[800]}`,
+ },
+ sidebar: {
+ activeLink: '#E6ECF0',
+ },
+ charts: {
+ colors: [
+ '#1565c0',
+ '#00c853',
+ '#24CBE5',
+ '#664021',
+ '#434348',
+ '#6AF9C4',
+ '#DA1F07',
+ '#058DC7',
+ '#996404',
+ '#2C445B',
+ '#1F6E6D',
+ '#1214C2',
+ '#73283A',
+ '#487874',
+ '#C310C3',
+ '#FF9655',
+ '#1663B7',
+ '#C50943',
+ '#50B432',
+ '#484B87',
+ '#59511C',
+ '#DE1214',
+ '#DDDF00',
+ '#ED561B',
+ '#A45E12',
+ '#1909DA',
+ '#AC33E8',
+ '#AC3E3E',
+ '#952CC9',
+ '#0B09B8',
+ ],
},
- },
- body: {
- background: '#F7F9FC',
},
}
const darkVariant = {
name: 'Dark',
palette: {
+ mode: 'dark',
primary: {
- main: blue[700],
- contrastText: '#FFF',
+ main: '#1CCBFF',
+ light: '#0D4380',
+ contrastText: '#000',
},
secondary: {
- main: blue[600],
- contrastText: '#FFF',
- },
- tertiary: {
main: '#00C853',
- contrastText: '#FFF',
+ light: '#F3E5F5',
+ dark: '#AB47BC',
+ contrastText: 'rgba(0, 0, 0, 0.87)',
},
text: {
primary: '#FFF',
+ secondary: 'rgba(255, 255, 255, 0.7)',
+ disabled: 'rgba(255, 255, 255, 0.5)',
+ icon: 'rgba(255, 255, 255, 0.12)',
},
background: {
- main: '#1B2430',
- light: '#F6F9FD',
+ light: '#041426',
+ default: '#051B34',
+ paper: '#051B34',
},
neutral: {
- lighter: '#f0f3fa',
- light: '#E0E0E0',
- dark: '#4E4E4E',
- darker: '#3D3D3DDE'
- }
- },
- header: {
- color: grey[500],
- background: '#FFFFFF',
- search: {
- color: grey[800],
- },
- indicator: {
- background: blue[600],
+ lighter: '#0E4480',
+ light: '#FFFFFF33',
+ main: grey[300],
+ dark: grey[200],
+ darker: grey[100],
+ },
+ error: {
+ main: '#F44336',
+ light: '#E57373',
+ dark: '#D32F2F',
+ contrastText: '#FFF',
},
- },
- sidebar: {
- color: grey[200],
- background: '#1B2430',
- header: {
- color: grey[200],
- background: '#232f3e',
- brand: {
- color: blue[500],
- },
- },
- footer: {
- color: grey[200],
- background: '#232f3e',
- online: {
- background: green[500],
- },
- },
- category: {
- fontWeight: 400,
- },
- badge: {
- color: '#FFF',
- background: blue[500],
+ warning: {
+ main: '#FFA726',
+ light: '#FFB74D',
+ dark: '#F57C00',
+ contrastText: 'rgba(0, 0, 0, 0.87)',
+ },
+ info: {
+ main: '#29B6F6',
+ light: '#4FC3F7',
+ dark: '#0288D1',
+ contrastText: 'rgba(0, 0, 0, 0.87)',
+ },
+ success: {
+ main: '#66BB6A',
+ light: '#81C784',
+ dark: '#388E3C',
+ contrastText: 'rgba(0, 0, 0, 0.87)',
+ },
+ action: {
+ active: '#FFF',
+ hover: 'rgba(255, 255, 255, 0.08)',
+ hoverOpacity: '0.08',
+ selected: 'rgba(255, 255, 255, 0.16)',
+ selectedOpacity: '0.16',
+ disabled: 'rgba(255, 255, 255, 0.3)',
+ disabledBackground: 'rgba(255, 255, 255, 0.12)',
+ disabledOpacity: '0.38',
+ focus: 'rgba(255, 255, 255, 0.12)',
+ focusOpacity: '0.12',
+ activatedOpacity: '0.24',
+ },
+ shadows: {
+ card: '0px 0px 14px 0px #3540520D',
+ nodeCard: '2px 3px 4px 0px #FFFFFF0A',
+ profileCard: '0px 0px 8px 0px #FFFFFF4D',
+ hover: `0px 0px 40px -30px #1CCBFFBF inset`,
+ authBox: `0px 0px 3px 1px #1CCBFF`,
+ },
+ sidebar: {
+ activeLink: '#166CCD',
+ },
+ charts: {
+ colors: [
+ '#1CCBFF',
+ '#00C853',
+ '#7cb5ec',
+ '#BD7B44',
+ '#898993',
+ '#90ed7d',
+ '#FD6762',
+ '#058DC7',
+ '#f7a35c',
+ '#989CFC',
+ '#34A8A6',
+ '#42CECD',
+ '#FD7C97',
+ '#11FF86',
+ '#F016F0',
+ '#f45b5b',
+ '#228AFB',
+ '#FF2E19',
+ '#50B432',
+ '#7C81E1',
+ '#A7993C',
+ '#DE1214',
+ '#e4d354',
+ '#64E572',
+ '#ED561B',
+ '#28BBFF',
+ '#AC33E8',
+ '#06FFFD',
+ '#1093CC',
+ '#91e8e1',
+ ],
},
},
- body: {
- background: '#F7F9FC',
- },
}
const variants = [lightVariant, darkVariant]
-
+
{items.map((producer, index) => (
-
diff --git a/webapp/src/routes/NonCompliantBPs/styles.js b/webapp/src/routes/NonCompliantBPs/styles.js
index 1bd987509..5f6343dc2 100644
--- a/webapp/src/routes/NonCompliantBPs/styles.js
+++ b/webapp/src/routes/NonCompliantBPs/styles.js
@@ -1,7 +1,4 @@
export default (theme) => ({
- cardShadow: {
- boxShadow: '0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important',
- },
statsText: {
textAlign: 'center',
},
@@ -51,9 +48,6 @@ export default (theme) => ({
display: 'flex',
flexFlow: 'row nowrap',
minHeight: '125px',
- padding: theme.spacing(2),
- background: theme.palette.common.white,
- borderRadius: theme.spacing(1),
'& .MuiTypography-h6': {
display: 'flex',
},
diff --git a/webapp/src/routes/ProducerProfile/ProfileCard.js b/webapp/src/routes/ProducerProfile/ProfileCard.js
index b6dc18d00..7961a8383 100644
--- a/webapp/src/routes/ProducerProfile/ProfileCard.js
+++ b/webapp/src/routes/ProducerProfile/ProfileCard.js
@@ -28,9 +28,9 @@ const ProfileCard = ({ producer }) => {
-
+
{url}
-
+
))}
+
{title}
+
)
}
@@ -61,9 +62,9 @@ const ProducerProfile = () => {
metaDescription={metaDescription}
ldJson={ldJson}
/>
- {children}
-
+
-
+
-
-
+
+
{t('dailyRewards')}
@@ -61,12 +55,12 @@ const RewardsDistributionStats = ({ summary, setting, handlePopoverOpen }) => {
)}
-
+
-
-
+
+
{t('topCountryDailyRewards')}
@@ -102,12 +96,12 @@ const RewardsDistributionStats = ({ summary, setting, handlePopoverOpen }) => {
onClick={handlePopoverOpen(summary?.topCountryByRewards)}
/>
-
+
-
-
+
+
{t('paidProducers')}
{!!summary?.producersWithoutProperBpJson.quantity && (
@@ -156,12 +150,12 @@ const RewardsDistributionStats = ({ summary, setting, handlePopoverOpen }) => {
/>
)}
-
+
diff --git a/webapp/src/routes/RewardsDistribution/index.js b/webapp/src/routes/RewardsDistribution/index.js
index 149fd6bf1..b1c766bd8 100644
--- a/webapp/src/routes/RewardsDistribution/index.js
+++ b/webapp/src/routes/RewardsDistribution/index.js
@@ -1,6 +1,7 @@
/* eslint camelcase: 0 */
import React, { useState, useCallback } from 'react'
import { makeStyles } from '@mui/styles'
+import { useTheme } from '@mui/material/styles'
import { useTranslation } from 'react-i18next'
import Typography from '@mui/material/Typography'
import Link from '@mui/material/Link'
@@ -24,19 +25,16 @@ import RewardsDistributionStats from './RewardsDistributionStats'
import TokenToUSD from './TokenToUSD'
import useRewardsDistributionState from 'hooks/customHooks/useRewardsDistributionState'
-const lowestRewardsColor = '#B6EBF3'
-const highestRewardsColor = '#265F63'
const geoUrl =
'https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/v2/topojson-maps/world-110m.json'
-const useStyles = makeStyles((theme) =>
- styles(theme, lowestRewardsColor, highestRewardsColor),
-)
+const useStyles = makeStyles(styles)
const RewardsDistribution = () => {
const [anchorEl, setAnchorEl] = useState(null)
const [currentNode, setCurrentNode] = useState(null)
const classes = useStyles()
+ const theme = useTheme()
const { t } = useTranslation('rewardsDistributionRoute')
const open = Boolean(anchorEl)
const [{ loading, nodes, setting, summary }] = useRewardsDistributionState()
@@ -56,9 +54,9 @@ const RewardsDistribution = () => {
const colorScale = useCallback(
scaleLinear()
.domain([0, summary?.topCountryByRewards?.rewards - 1])
- .range([lowestRewardsColor, highestRewardsColor])
+ .range([theme.palette.primary.light, theme.palette.primary.dark])
.interpolate(interpolateHcl),
- [summary],
+ [summary, theme.palette.primary],
)
return (
@@ -67,7 +65,6 @@ const RewardsDistribution = () => {
aria-haspopup="true"
>
-
-
+
+
{
)}
-
+
-
+