Skip to content

Commit

Permalink
(webapp): remove unused box components (#965)
Browse files Browse the repository at this point in the history
hanakoori01 authored Jul 28, 2022
1 parent 2b8c985 commit db31101
Showing 32 changed files with 374 additions and 364 deletions.
37 changes: 18 additions & 19 deletions webapp/src/components/Card/index.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@ import { useTheme } from '@mui/material/styles'
import { useTranslation } from 'react-i18next'
import useMediaQuery from '@mui/material/useMediaQuery'
import Card from '@mui/material/Card'
import Box from '@mui/material/Box'
import CardHeader from '@mui/material/CardHeader'
import Typography from '@mui/material/Typography'
import CardActions from '@mui/material/CardActions'
@@ -97,31 +96,31 @@ const CardData = ({
</Avatar>
}
title={
<Box className={classes.warningBox}>
<Box className={classes.boxTitle}>
<div className={classes.warningBox}>
<div className={classes.boxTitle}>
<Typography className={classes.noWrap} variant='h6'>
{title || owner}
</Typography>
</Box>
</Box>
</div>
</div>
}
subheader={
<Box className={classes.warningBox}>
<div className={classes.warningBox}>
<Typography className={classes.subTitleHeader}>
{owner}
</Typography>
<Box className={classes.moreWrapper}>
<div className={classes.moreWrapper}>
<Typography style={{ margin: 'auto' }} variant='subtitle2'>
{t('view')}
</Typography>
<KeyboardArrowRightIcon />
</Box>
</Box>
</div>
</div>
}
/>
</Link>
<Box className={classes.radar}>
<Box className={classes.blockIcons}>
<div className={classes.radar}>
<div className={classes.blockIcons}>
{!title && (
<TooltipWrapper
open={open}
@@ -131,8 +130,8 @@ const CardData = ({
classes={classes}
/>
)}
</Box>
<Box className={classes.chartWrapper}>
</div>
<div className={classes.chartWrapper}>
<PolarChart
data={[
{
@@ -149,11 +148,11 @@ const CardData = ({
}
]}
/>
</Box>
</div>
{showOptions && (
<Grid container justifyContent='center'>
<Grid item md={4} xs={4}>
<Box className={classes.boxValueRates}>
<div className={classes.boxValueRates}>
<Typography
variant='subtitle2'
className={clsx(classes.avgText, classes.marginRightElem)}
@@ -163,10 +162,10 @@ const CardData = ({
<Typography className={classes.avgValue} variant='body2'>
{rate || 0}
</Typography>
</Box>
</div>
</Grid>
<Grid item md={4} xs={5}>
<Box className={classes.boxValueRates}>
<div className={classes.boxValueRates}>
<Typography
variant='subtitle2'
className={clsx(classes.avgText, classes.marginRightElem)}
@@ -176,11 +175,11 @@ const CardData = ({
<Typography className={classes.avgValue} variant='body2'>
{average}
</Typography>
</Box>
</div>
</Grid>
</Grid>
)}
</Box>
</div>
<CardActions className={classes.actions}>
{useRateButton && (
<>
28 changes: 14 additions & 14 deletions webapp/src/components/CommentCard/index.js
Original file line number Diff line number Diff line change
@@ -151,8 +151,8 @@ const CommentCard = ({ producer = {} }) => {
return (
<Grid pt={6} container justifyContent='center' md={12}>
<Grid className={classes.sectionContent} item md={12} xs={12}>
<Box className={classes.cardContainer}>
<Box display='flex' justifyContent='end' alignItems='center'>
<div className={classes.cardContainer}>
<div className={classes.container}>
<Typography flex={1} mt='28px' mb='44px' variant='h6'>
{t('userComments')} ({comments.length})
</Typography>
@@ -191,11 +191,11 @@ const CommentCard = ({ producer = {} }) => {
</MenuItem>
))}
</Menu>
</Box>
<Box pl={2}>
</div>
<div className={classes.commentContainer}>
{comments.map((comment, index) => (
<Box pt='12px' pb='12px' key={index}>
<Box display='flex'>
<div className={classes.divComment} key={index}>
<div className={classes.divUser}>
<Typography variant='body2' display='flex' flex={1} mb={2}>
{comment.user}
</Typography>
@@ -208,14 +208,14 @@ const CommentCard = ({ producer = {} }) => {
>
<Moment fromNow>{comment.created_at}</Moment>
</Typography>
</Box>
</div>
<Typography>{comment.content}</Typography>
<Grid container>
<Grid item md={8} className={classes.center}>
<Box pt={1} display={isMobile ? 'block' : 'flex'}>
{Object.entries(comment.user_ratings[0].ratings).map(
(param, index) => (
<Box key={index}>
<div key={index}>
<Box
width={isMobile ? '90px' : 'auto'}
display='inline-block'
@@ -231,13 +231,13 @@ const CommentCard = ({ producer = {} }) => {
<Typography variant='body4' mr={2}>
{param[1]}
</Typography>
</Box>
</div>
)
)}
</Box>
</Grid>
<Grid item md={4} className={classes.box}>
<Box pt={1}>
<div className={classes.divLikes}>
<Typography
variant='body3'
textTransform='uppercase'
@@ -264,13 +264,13 @@ const CommentCard = ({ producer = {} }) => {
<ThumbDownIcon className={classes.thumb} />
</IconButton>
</Typography>
</Box>
</div>
</Grid>
</Grid>
</Box>
</div>
))}
</Box>
</Box>
</div>
</div>
</Grid>
<Snackbar
anchorOrigin={{
21 changes: 20 additions & 1 deletion webapp/src/components/CommentCard/styles.js
Original file line number Diff line number Diff line change
@@ -5,6 +5,24 @@ export default theme => ({
cardContainer: {
width: '95%'
},
container: {
display: 'flex !important',
justifyContent: 'end !important',
alignItems: 'center !important'
},
commentContainer: {
paddingLeft: 20
},
divComment: {
paddingTop: '12px',
paddingBottom: '12px'
},
divUser: {
display: 'flex'
},
divLikes: {
paddingTop: '20px'
},
box: {
display: 'flex',
alignItems: 'center',
@@ -26,7 +44,8 @@ export default theme => ({
},
btnFilter: {
color: 'inherit !important',
borderRadius: '2px !important'
borderRadius: '2px !important',
content: ''
},
center: {
margin: 'auto !important',
76 changes: 38 additions & 38 deletions webapp/src/components/CompareTool/CompareGraphView.js
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ import LockOpenIcon from '@mui/icons-material/LockOpenOutlined'
import LockIcon from '@mui/icons-material/LockOutlined'
import Button from '@mui/material/Button'
import Tooltip from '@mui/material/Tooltip'
import Box from '@mui/material/Box'
import { useTranslation } from 'react-i18next'
import Switch from '@mui/material/Switch'
import CloseIcon from '@mui/icons-material/Close'
@@ -29,7 +28,7 @@ const CompareBodyList = ({ isProxy, selectedData, classes, removeBP }) => {
const producers = _get(proxy, 'voter_info.producers', [])

return (
<Box className={classes.containerList}>
<div className={classes.containerList}>
{producers.map(producer => (
<ProducerChipAvatar
data={producer}
@@ -41,12 +40,12 @@ const CompareBodyList = ({ isProxy, selectedData, classes, removeBP }) => {
defaultName='P'
/>
))}
</Box>
</div>
)
}

return (
<Box className={classes.containerList}>
<div className={classes.containerList}>
{selectedData.map(data => (
<ProducerChipAvatar
data={data}
@@ -57,7 +56,7 @@ const CompareBodyList = ({ isProxy, selectedData, classes, removeBP }) => {
defaultName='BP'
/>
))}
</Box>
</div>
)
}

@@ -114,10 +113,9 @@ const CompareGraphView = ({
const classes = useStyles()

return (
<Box className={classes.compareGraphView}>
<Box className={classes.headerVotingCompare}>
<Box />
<Box className={classes.modalHeader}>
<div className={classes.compareGraphView}>
<div className={classes.headerVotingCompare}>
<div className={classes.modalHeader}>
<Typography variant='h6' className={classes.marginRightElem}>
{selected.length > 0
? `${t('voteToolTitle')} (${selected.length} ${t('chosen')})`
@@ -126,22 +124,22 @@ const CompareGraphView = ({
<Typography variant='body1' style={{ display: 'flex' }}>
{t('voteToolDescription')}
</Typography>
</Box>
<Box className={classes.boxCloseIcon}>
</div>
<div className={classes.boxCloseIcon}>
<CloseIcon style={{ cursor: 'pointer' }} onClick={handleOnClose} />
</Box>
</Box>
<Box className={classes.wrapperDesktop}>
<Box className={classes.bodyModalView}>
<Box className={classes.chartWrapper}>
</div>
</div>
<div className={classes.wrapperDesktop}>
<div className={classes.bodyModalView}>
<div className={classes.chartWrapper}>
<PolarChart data={selected.map(bp => bp?.data).filter(bp => bp)} />
</Box>
</div>
{isProxy && selected.length > 0 && (
<Box className={classes.proxyVote}>
<div className={classes.proxyVote}>
<Typography style={{ fontSize: '20px', fontWeight: 500 }}>
{selected[0].name}
</Typography>
<Box style={{ margin: '10px 0 10px 0' }}>
<div className={classes.divbtnRateProxies}>
<Button
disabled={!userInfo.isUser}
aria-label='Add to comparison'
@@ -151,12 +149,12 @@ const CompareGraphView = ({
>
{t('voteToolToggle')}
</Button>
</Box>
</Box>
</div>
</div>
)}
{!isProxy && (
<Box className={classes.switchBox}>
<Box className={classes.centerBox}>
<div className={classes.switchBox}>
<div className={classes.centerBox}>
<FormControlLabel
control={
<Switch
@@ -170,11 +168,11 @@ const CompareGraphView = ({
}
label={t('compareToolCollapsedSwitch')}
/>
</Box>
</Box>
</div>
</div>
)}

<Box className={classes.compareBodyListMobile}>
<div className={classes.compareBodyListMobile}>
{selected.length > 0 ? (
<CompareBodyList
isProxy={isProxy}
@@ -183,14 +181,14 @@ const CompareGraphView = ({
removeBP={removeBP}
/>
) : (
<Box className={clsx(classes.centerBox, classes.noBPSelected)}>
<div className={clsx(classes.centerBox, classes.noBPSelected)}>
<Typography variant='subtitle2'>{t('noSelectedBP')}</Typography>
</Box>
</div>
)}
</Box>
</Box>
</div>
</div>

<Box className={classes.compareBodyListDesktop}>
<div className={classes.compareBodyListDesktop}>
{selected.length > 0 ? (
<CompareBodyList
isProxy={isProxy}
@@ -199,14 +197,16 @@ const CompareGraphView = ({
removeBP={removeBP}
/>
) : (
<Box className={classes.centerBox} style={{ marginTop: '20%' }}>
<div
className={clsx(classes.centerBox, classes.marginNoBpSelected)}
>
<Typography variant='h6'>{t('noSelectedBP')}</Typography>
</Box>
</div>
)}
</Box>
</Box>
</div>
</div>
{!isProxy && (
<Box className={classes.buttonsBox}>
<div className={classes.buttonsBox}>
<Button
className={classes.btnClear}
aria-label='Clear selection'
@@ -224,9 +224,9 @@ const CompareGraphView = ({
>
{t('voteToolToggle')}
</Button>
</Box>
</div>
)}
</Box>
</div>
)
}

31 changes: 15 additions & 16 deletions webapp/src/components/CompareTool/CompareSliderView.js
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import CloseIcon from '@mui/icons-material/Close'
import { useTranslation } from 'react-i18next'
import PropTypes from 'prop-types'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import _get from 'lodash.get'
import clsx from 'clsx'

@@ -25,20 +24,20 @@ const CompareSliderView = ({
const classes = useStyles()

return (
<Box className={clsx(classes.compareSliderView, className)}>
<Box className={classes.headerVotingCompare}>
<Box />
<Box className={classes.modalHeader}>
<div className={clsx(classes.compareSliderView, className)}>
<div className={classes.headerVotingCompare}>
<div />
<div className={classes.modalHeader}>
<Typography variant='h6' className={classes.marginRightElem}>
{isProxy ? optionalLabel : t('compareToolTitle')}
</Typography>
</Box>
<Box className={classes.boxCloseIcon}>
</div>
<div className={classes.boxCloseIcon}>
<CloseIcon style={{ cursor: 'pointer' }} onClick={handleOnClose} />
</Box>
</Box>
</div>
</div>

<Box className={classes.slider}>
<div className={classes.slider}>
{selected.map((bp, index) => {
if (!bp) return null

@@ -47,21 +46,21 @@ const CompareSliderView = ({
: _get(bp, 'bpjson.producer_account_name')

return (
<Box
<div
key={`slider-card-${name}-${index}`}
className={classes.sliderCard}
>
<Box className={classes.chartWrapperSliderView}>
<div className={classes.chartWrapperSliderView}>
<PolarChart data={bp.data ? [{ ...bp.data }] : []} />
</Box>
</div>
<Typography variant='subtitle1' className={classes.bpName}>
{name}
</Typography>
</Box>
</div>
)
})}
</Box>
</Box>
</div>
</div>
)
}

21 changes: 10 additions & 11 deletions webapp/src/components/CompareTool/index.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
import Button from '@mui/material/Button'
import Box from '@mui/material/Box'
import FormControlLabel from '@mui/material/FormControlLabel'
import _get from 'lodash.get'
import Switch from '@mui/material/Switch'
@@ -64,19 +63,19 @@ const CompareTool = ({
: selectedData

return (
<Box className={[classes.root, className].join(' ')}>
<div className={[classes.root, className].join(' ')}>
<CompareSliderView
removeBP={removeBP}
selected={data}
isProxy={isProxy}
optionalLabel={optionalLabel}
/>
</Box>
</div>
)
}

return (
<Box className={clsx([classes.root, className].join(' '))}>
<div className={clsx([classes.root, className].join(' '))}>
{isCollapsedView ? (
<CompareGraphView
removeBP={removeBP}
@@ -90,8 +89,8 @@ const CompareTool = ({
setIsCollapsedView={setIsCollapsedView}
/>
) : (
<Box className={classes.boxSliderView}>
<Box className={classes.sliderBody}>
<div className={classes.boxSliderView}>
<div className={classes.sliderBody}>
<CompareSliderView
removeBP={removeBP}
selected={selectedData}
@@ -109,8 +108,8 @@ const CompareTool = ({
}
label={t('compareToolCollapsedSwitch')}
/>
</Box>
<Box className={classes.btnBox}>
</div>
<div className={classes.btnBox}>
<FormControlLabel
className={classes.hiddenMobile}
control={
@@ -140,8 +139,8 @@ const CompareTool = ({
>
{t('voteToolToggle')}
</Button>
</Box>
</Box>
</div>
</div>
)}
<Snackbar
anchorOrigin={{
@@ -166,7 +165,7 @@ const CompareTool = ({
{t('success')}
</Alert>
</Snackbar>
</Box>
</div>
)
}

6 changes: 6 additions & 0 deletions webapp/src/components/CompareTool/styles.js
Original file line number Diff line number Diff line change
@@ -254,6 +254,9 @@ export default theme => ({
}
}
},
divbtnRateProxies: {
margin: '10px 0 10px 0'
},
reliefGrid: {
[theme.breakpoints.up('md')]: {
border: '1px solid #f8f8f8',
@@ -279,6 +282,9 @@ export default theme => ({
padding: theme.spacing(4, 4, 0, 3),
textAlign: 'center'
},
marginNoBpSelected: {
margin: '20%'
},
bodyModalView: {
width: '100%',
height: '100%',
5 changes: 2 additions & 3 deletions webapp/src/components/FilterBanner/index.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import FilterListIcon from '@mui/icons-material/FilterList'
import Box from '@mui/material/Box'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'

@@ -38,7 +37,7 @@ const FilterBanner = ({ title, page, onFilterChange, hideFilter }) => {
}

return (
<Box className={classes.filterBanner}>
<div className={classes.filterBanner}>
<Typography className={classes.pageTitle}>{title}</Typography>
<Button
id='filter-button'
@@ -66,7 +65,7 @@ const FilterBanner = ({ title, page, onFilterChange, hideFilter }) => {
</MenuItem>
))}
</Menu>
</Box>
</div>
)
}

31 changes: 15 additions & 16 deletions webapp/src/components/Footer/index.js
Original file line number Diff line number Diff line change
@@ -12,7 +12,6 @@ import FacebookRoundedIcon from '@mui/icons-material/FacebookRounded'
import InstagramIcon from '@mui/icons-material/Instagram'
import TwitterIcon from '@mui/icons-material/Twitter'
import GitHubIcon from '@mui/icons-material/GitHub'
import Box from '@mui/material/Box'

import { mainConfig } from '../../config'

@@ -28,10 +27,10 @@ const Footer = () => {

if (history?.location?.pathname === '/')
return (
<Box className={classes.root}>
<div className={classes.root}>
<Toolbar className={classes.boxToolbar}>
<Box className={classes.footerHome}>
<Box className={classes.linksBox}>
<div className={classes.footerHome}>
<div className={classes.linksBox}>
<Link className={classes.linkHome} href='/'>
{t('home')}
</Link>
@@ -58,15 +57,15 @@ const Footer = () => {
>
{t('networkMonitor')}
</Link>
</Box>
<Box className={classes.socialBox}>
</div>
<div className={classes.socialBox}>
<Typography className={classes.socialText}>
{t('legend')}
</Typography>
<Typography className={classes.socialText}>
{t('legend2')}
</Typography>
<Box className={classes.socialIconBox}>
<div className={classes.socialIconBox}>
<IconButton
href='https://www.facebook.com/costaricaeos'
target='_blank'
@@ -102,10 +101,10 @@ const Footer = () => {
>
<TelegramIcon htmlColor='#fff' />
</IconButton>
</Box>
</Box>
</Box>
<Box className={classes.footerText}>
</div>
</div>
</div>
<div className={classes.footerText}>
<Typography className={classes.centerFooterText}>
{t('madeBy')}{' '}
<Link
@@ -119,13 +118,13 @@ const Footer = () => {
<Typography className={classes.centerFooterText}>
{`${t('eosRate')} ${currentYear}`}
</Typography>
</Box>
</div>
</Toolbar>
</Box>
</div>
)

return (
<Box className={classes.root}>
<div className={classes.root}>
<Toolbar>
<a
href='https://eoscostarica.io'
@@ -138,7 +137,7 @@ const Footer = () => {
className={classes.eoscostaricaLogo}
/>
</a>
<Box className={classes.grow} />
<div className={classes.grow} />
<Typography
variant='overline'
className={classes.legend}
@@ -157,7 +156,7 @@ const Footer = () => {
<TelegramIcon htmlColor='#fff' />
</IconButton>
</Toolbar>
</Box>
</div>
)
}

45 changes: 22 additions & 23 deletions webapp/src/components/Header/index.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
import { useHistory, Link } from 'react-router-dom'
import AppBar from '@mui/material/AppBar'
import IconButton from '@mui/material/IconButton'
import Box from '@mui/material/Box'
import CircularProgress from '@mui/material/CircularProgress'
import Typography from '@mui/material/Typography'
import SearchIcon from '@mui/icons-material/Search'
@@ -186,44 +185,44 @@ const Header = memo(({ onDrawerToggle, showMenubar }) => {
return (
<AppBar className={classes.appBarHome} position='sticky'>
<Toolbar className={classes.toolbar}>
<Box className={classes.boxLogoHome}>
<div className={classes.boxLogoHome}>
<IconButton aria-label='Open drawer' onClick={onDrawerToggle}>
<MenuIcon />
</IconButton>
<Typography>Menu</Typography>
</Box>
<Box className={clsx(classes.homeSvgs, classes.desktopSection)}>
<Box className={classes.useInfoBox}>
</div>
<div className={clsx(classes.homeSvgs, classes.desktopSection)}>
<div className={classes.useInfoBox}>
<UserInformationByType user={state.user} />
</Box>
</div>
<LanguageSelector />
<AuthButton
loading={state.loadingLogin}
user={state.user}
onLogin={handleLogin}
onSignOut={handleSignOut}
/>
</Box>
<Box className={clsx(classes.homeSvgs, classes.mobileSection)}>
<Box className={classes.infoBox}>
</div>
<div className={clsx(classes.homeSvgs, classes.mobileSection)}>
<div className={classes.infoBox}>
<UserInformationByType user={state.user} />
</Box>
</div>
<LanguageSelector />
<AuthButton
loading={state.loadingLogin}
user={state.user}
onLogin={handleLogin}
onSignOut={handleSignOut}
/>
</Box>
</div>
</Toolbar>
</AppBar>
)

return (
<AppBar className={classes.appBar} position='sticky'>
<Toolbar className={classes.toolbar}>
<Box className={classes.boxLogo}>
<div className={classes.boxLogo}>
<IconButton aria-label='Open drawer' onClick={onDrawerToggle}>
<MenuIcon />
</IconButton>
@@ -238,41 +237,41 @@ const Header = memo(({ onDrawerToggle, showMenubar }) => {
className={classes.logoStyle}
/>
</Link>
</Box>
<Box className={classes.boxSearch}>
</div>
<div className={classes.boxSearch}>
<InputAutocomplete />
</Box>
<Box className={classes.desktopSection}>
<Box className={classes.useInfoBox}>
</div>
<div className={classes.desktopSection}>
<div className={classes.useInfoBox}>
<UserInformationByType user={state.user} />
</Box>
</div>
<LanguageSelector />
<AuthButton
loading={state.loadingLogin}
user={state.user}
onLogin={handleLogin}
onSignOut={handleSignOut}
/>
</Box>
<Box className={classes.mobileSection}>
</div>
<div className={classes.mobileSection}>
<IconButton
className={classes.mobileSearch}
disabled={isSearchOpen}
onClick={handleOpenSearch}
>
<SearchIcon />
</IconButton>
<Box className={classes.infoBox}>
<div className={classes.infoBox}>
<UserInformationByType user={state.user} />
</Box>
</div>
<LanguageSelector />
<AuthButton
loading={state.loadingLogin}
user={state.user}
onLogin={handleLogin}
onSignOut={handleSignOut}
/>
</Box>
</div>
</Toolbar>
<MobileSearch onClose={handleCloseSearch} isOpen={isSearchOpen} />
</AppBar>
5 changes: 2 additions & 3 deletions webapp/src/components/InputAutocomplete/index.js
Original file line number Diff line number Diff line change
@@ -10,7 +10,6 @@ import SearchIcon from '@mui/icons-material/Search'
import TextField from '@mui/material/TextField'
import InputAdornment from '@mui/material/InputAdornment'
import Paper from '@mui/material/Paper'
import Box from '@mui/material/Box'
import _get from 'lodash.get'
import MenuItem from '@mui/material/MenuItem'

@@ -122,7 +121,7 @@ const InputAutocomplete = ({ ...props }) => {
}

return (
<Box className={classes.root}>
<div className={classes.root}>
<Autosuggest
renderInputComponent={renderInputComponent}
suggestions={suggestions}
@@ -149,7 +148,7 @@ const InputAutocomplete = ({ ...props }) => {
</Paper>
)}
/>
</Box>
</div>
)
}

5 changes: 2 additions & 3 deletions webapp/src/components/Loader/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react'
import { makeStyles } from '@mui/styles'
import CircularProgress from '@mui/material/CircularProgress'
import Box from '@mui/material/Box'

import styles from './styles'

@@ -11,9 +10,9 @@ const Loader = () => {
const classes = useStyles()

return (
<Box className={classes.root}>
<div className={classes.root}>
<CircularProgress m={2} color='secondary' />
</Box>
</div>
)
}

5 changes: 2 additions & 3 deletions webapp/src/components/PolarChart/index.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
import PropTypes from 'prop-types'
import { useTranslation } from 'react-i18next'
import { makeStyles } from '@mui/styles'
import Box from '@mui/material/Box'
import HighchartsReact from 'highcharts-react-official'
import Highcharts from 'highcharts'
import HighchartsMore from 'highcharts/highcharts-more'
@@ -21,7 +20,7 @@ const PolarChart = ({ data = [], showLegend = false }) => {
const [options] = useState(polarCharConfig.options)

return (
<Box className={classes.highchartsFigure}>
<div className={classes.highchartsFigure}>
<HighchartsReact
highcharts={Highcharts}
options={{
@@ -42,7 +41,7 @@ const PolarChart = ({ data = [], showLegend = false }) => {
}
}}
/>
</Box>
</div>
)
}

9 changes: 4 additions & 5 deletions webapp/src/components/Sidebar/index.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@ import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { NavLink as RouterNavLink } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import Box from '@mui/material/Box'
import Drawer from '@mui/material/Drawer'
import Divider from '@mui/material/Divider'
import List from '@mui/material/List'
@@ -56,7 +55,7 @@ const ListItem = ({ name, path, icon, isUserLogged, badge }) => {
if (name === 'myAccount' && !isUserLogged) return <></>

return (
<Box className={classes.listItem}>
<div className={classes.listItem}>
<MuiListItem
button
component={path.includes('http') ? ExternalLink : NavLink}
@@ -75,7 +74,7 @@ const ListItem = ({ name, path, icon, isUserLogged, badge }) => {
<ListItemText className={classes.versionStyle} primary={badge} />
)}
</MuiListItem>
</Box>
</div>
)
}

@@ -94,7 +93,7 @@ const Sidebar = ({ routes, ...props }) => {

return (
<Drawer {...props}>
<Box className={classes.brand}>
<div className={classes.brand}>
{state.user ? (
<AccountIcon className={classes.icon} />
) : (
@@ -106,7 +105,7 @@ const Sidebar = ({ routes, ...props }) => {
<Typography className={classes.userName}>
{state.user?.accountName || t('loginToStart')}
</Typography>
</Box>
</div>
<Divider />
<Scrollbar className={classes.scrollbar}>
<List component='nav' className={classes.navBox}>
5 changes: 2 additions & 3 deletions webapp/src/components/SkeletonCard/index.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import Skeleton from '@mui/material/Skeleton'
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Box from '@mui/material/Box'
import { makeStyles } from '@mui/styles'

import styles from './styles'
@@ -34,13 +33,13 @@ const SkeletonCard = () => {
}
subheader={<Skeleton animation='wave' height={10} width='40%' />}
/>
<Box className={classes.cardCenter}>
<div className={classes.cardCenter}>
<Skeleton
sx={{ width: 250, height: 250 }}
animation='wave'
variant='circular'
/>
</Box>
</div>
<CardContent className={classes.cardRatings}>
<React.Fragment>
<Skeleton
17 changes: 8 additions & 9 deletions webapp/src/layouts/Dashboard/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState, useEffect, useRef, useCallback } from 'react'
import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import { makeStyles } from '@mui/styles'

import Sidebar from '../../components/Sidebar'
@@ -48,25 +47,25 @@ const Dashboard = ({ children, routes }) => {
}, [])

return (
<Box className={classes.root}>
<Box>
<div className={classes.root}>
<div>
<Sidebar
PaperProps={{ style: { width: drawerWidth } }}
variant='temporary'
open={mobileOpen}
onClose={handleDrawerToggle}
routes={routes}
/>
</Box>
<Box className={classes.mainContent}>
</div>
<div className={classes.mainContent}>
<Header onDrawerToggle={handleDrawerToggle} showMenubar={scrollTop} />
<Box className={classes.childContent} id='childContent' ref={ref}>
<div className={classes.childContent} id='childContent' ref={ref}>
{children}
<Footer />
</Box>
</div>
<Message />
</Box>
</Box>
</div>
</div>
)
}

33 changes: 16 additions & 17 deletions webapp/src/routes/About/index.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@ import React, { memo } from 'react'
import Typography from '@mui/material/Typography'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
import Box from '@mui/material/Box'

import TitlePage from '../../components/PageTitle'

@@ -15,11 +14,11 @@ const About = () => {
const { t } = useTranslation('about')

return (
<Box>
<div>
<TitlePage title={t('tabTitle')} />
<Box>
<Box className={classes.firstContainer}>
<Box className={classes.wrapperContainers}>
<div>
<div className={classes.firstContainer}>
<div className={classes.wrapperContainers}>
<Typography variant='h5'>{t('title')}</Typography>
<Typography variant='h6'>{t('subtitle1')}</Typography>
<Typography variant='body2' align='justify' paragraph>
@@ -31,11 +30,11 @@ const About = () => {
<Typography variant='body2' align='justify' paragraph>
{t('body1.paragraph3')}
</Typography>
</Box>
</Box>
</div>
</div>

<Box className={classes.lastContainer}>
<Box className={classes.wrapperContainers}>
<div className={classes.lastContainer}>
<div className={classes.wrapperContainers}>
<Typography variant='h6'>{t('subtitle2')}</Typography>
<Typography variant='body2' align='justify' paragraph>
{t('body2.paragraph1')}
@@ -46,11 +45,11 @@ const About = () => {
<Typography variant='body2' align='justify' paragraph>
{t('body2.paragraph3')}
</Typography>
</Box>
</Box>
</div>
</div>

<Box className={classes.middleContainer}>
<Box className={classes.wrapperContainers}>
<div className={classes.middleContainer}>
<div className={classes.wrapperContainers}>
<Typography variant='h6'>{t('subtitle3')}</Typography>
<Typography variant='body2' align='justify' paragraph>
{t('body3.paragraph1')}
@@ -103,10 +102,10 @@ const About = () => {
src='/EOS-Rate-Infographic.jpg'
alt='EOS block producer ratings'
/>
</Box>
</Box>
</Box>
</Box>
</div>
</div>
</div>
</div>
)
}

37 changes: 18 additions & 19 deletions webapp/src/routes/Account/index.js
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { useMutation } from '@apollo/client'
import clsx from 'clsx'
import Button from '@mui/material/Button'
import Paper from '@mui/material/Paper'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import { makeStyles } from '@mui/styles'
import Avatar from '@mui/material/Avatar'
@@ -121,24 +120,24 @@ const Account = () => {
}

return (
<Box className={classes.container}>
<div className={classes.container}>
<TitlePage
title={`${t('title')} ${state.user ? state.user?.accountName : ''}`}
/>
<Paper className={classes.account}>
<Typography variant='h5' className={classes.title}>
{t('title')}
</Typography>
<Box className={classes.box}>
<Box>
<div className={classes.box}>
<div>
<Typography variant='subtitle1' className={classes.bold}>
{state.user
? `${state.user.accountName}: ${
state.user?.userData?.core_liquid_balance || 0
}`
: 'accountName: 0'}
</Typography>
<Box className={classes.rateList}>
<div className={classes.rateList}>
{(state.user ? state.user?.userData?.userRates || [] : []).map(
rate => {
const imageURL = _get(
@@ -164,7 +163,7 @@ const Account = () => {
aria-controls='panel1a-content'
id='panel1a-header'
>
<Box className={classes.boxWrapper}>
<div className={classes.boxWrapper}>
<Avatar
aria-label='account'
className={clsx({
@@ -182,7 +181,7 @@ const Account = () => {
? `${t('youRated')} ${BPName} - ${date}`
: `${t('youRated')} ${BPName}`}
</Typography>
</Box>
</div>
</AccordionSummary>
<AccordionDetails>
<Typography
@@ -192,14 +191,14 @@ const Account = () => {
{t('yourRating')}
</Typography>
{VOTE_INDICATORS.map(value => (
<Box key={value} className={classes.row}>
<div key={value} className={classes.row}>
<Typography>{t(value)}:</Typography>
<Typography>
{formatNumber(rate.ratings[value], 0)}
</Typography>
</Box>
</div>
))}
<Box style={{ marginTop: 20 }}>
<div className={classes.divLink}>
{rate.tx_data && (
<Link
rel='noopener'
@@ -210,24 +209,24 @@ const Account = () => {
{rate.tx_data?.transaction?.transactionId}
</Link>
)}
</Box>
<Box>
<Box className={classes.remove}>
</div>
<div>
<div className={classes.remove}>
<IconButton
onClick={() => onHandleDeleteUserRate(rate.bp)}
>
<CloseIcon />
<Typography>{t('unpublish')}</Typography>
</IconButton>
</Box>
</Box>
</div>
</div>
</AccordionDetails>
</Accordion>
)
}
)}
</Box>
</Box>
</div>
</div>
<Snackbar
open={showMessage}
autoHideDuration={4000}
@@ -277,9 +276,9 @@ const Account = () => {
>
{t('logout')}
</Button>
</Box>
</div>
</Paper>
</Box>
</div>
)
}

3 changes: 3 additions & 0 deletions webapp/src/routes/Account/styles.js
Original file line number Diff line number Diff line change
@@ -49,6 +49,9 @@ export default theme => ({
avatar: {
backgroundColor: theme.palette.surface.main
},
divLink: {
marginTop: 20
},
link: {
overflow: 'hidden',
textOverflow: 'ellipsis',
5 changes: 2 additions & 3 deletions webapp/src/routes/BlockProducers/BlockProducerProfile.js
Original file line number Diff line number Diff line change
@@ -13,7 +13,6 @@ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
import AccountCircle from '@mui/icons-material/AccountCircle'
import CloseIcon from '@mui/icons-material/Close'
import _get from 'lodash.get'
import Box from '@mui/material/Box'
import useMediaQuery from '@mui/material/useMediaQuery'
import IconButton from '@mui/material/IconButton'
import { Link as MLink } from '@mui/material'
@@ -232,7 +231,7 @@ const BlockProducerProfile = () => {
</Grid>
<Grid container className={classes.reliefGrid}>
<Grid item md={12} xs={12}>
<Box className={classes.pageTitle}>
<div className={classes.pageTitle}>
{blockProducerLogo ? (
<Avatar aria-label='Block Producer' className={classes.avatar}>
<img src={blockProducerLogo} alt='' width='100%' />
@@ -247,7 +246,7 @@ const BlockProducerProfile = () => {
t={t}
bpTitle={blockProducerTitle}
/>
</Box>
</div>
</Grid>
{!isMobile && (
<Grid
8 changes: 4 additions & 4 deletions webapp/src/routes/BlockProducers/BlockProducerRate.js
Original file line number Diff line number Diff line change
@@ -470,7 +470,7 @@ const BlockProducerRate = () => {
</Grid>
<Grid container className={classes.reliefGrid}>
<Grid item md={12} xs={12} style={{ marginBottom: 10 }}>
<Box style={{ display: 'flex' }}>
<div className={classes.divAvatar}>
{blockProducerLogo ? (
<Avatar aria-label='Block Producer' className={classes.avatar}>
<img src={blockProducerLogo} alt='' width='100%' />
@@ -482,7 +482,7 @@ const BlockProducerRate = () => {
{_get(state.blockProducer, 'bpjson.org.candidate_name') ||
_get(state.blockProducer, 'system.owner', t('noBlockProducer'))}
</Typography>
</Box>
</div>
</Grid>
<Grid container direction='row' style={{ marginTop: 10 }}>
<Grid item xs={12} className={classes.infoGridStyle} md={6}>
@@ -601,7 +601,7 @@ const BlockProducerRate = () => {
autoComplete='off'
className={classes.commentContainer}
>
<Box>
<div>
<Typography className={classes.commentTitle} variant='h6'>
Add Comments
</Typography>
@@ -624,7 +624,7 @@ const BlockProducerRate = () => {
)
}}
/>
</Box>
</div>
</Box>
</Grid>
</Grid>
69 changes: 34 additions & 35 deletions webapp/src/routes/BlockProducers/GeneralInformationProfile.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@ import countries from 'i18n-iso-countries'
import Grid from '@mui/material/Grid'
import _get from 'lodash.get'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'

import formatNumber from '../../utils/format-number'

@@ -44,18 +43,18 @@ const SocialNetworks = ({ classes, producer }) => {
<Typography variant='h6' className={classes.title}>
{t('social')}
</Typography>
<Box className={classes.marginLeftBox}>
<div className={classes.marginLeftBox}>
{github && (
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
GitHub:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -73,15 +72,15 @@ const SocialNetworks = ({ classes, producer }) => {
)}
{twitter && (
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
Twitter:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -99,15 +98,15 @@ const SocialNetworks = ({ classes, producer }) => {
)}
{linkedin && (
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
LinkedIn:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -125,15 +124,15 @@ const SocialNetworks = ({ classes, producer }) => {
)}
{telegram && (
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
Telegram:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -151,15 +150,15 @@ const SocialNetworks = ({ classes, producer }) => {
)}
{instagram && (
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
Instagram:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -175,7 +174,7 @@ const SocialNetworks = ({ classes, producer }) => {
</Typography>
</Grid>
)}
</Box>
</div>
</Grid>
)
}
@@ -191,18 +190,18 @@ const AdditionalResources = ({ classes, producer }) => {
<Typography variant='h6' className={classes.title}>
{t('additionalResource')}
</Typography>
<Box className={classes.marginLeftBox}>
<div className={classes.marginLeftBox}>
{additionalResources && additionalResources.alohaEOS && (
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
Aloha EOS:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -220,15 +219,15 @@ const AdditionalResources = ({ classes, producer }) => {
)}
{additionalResources && additionalResources.eosNation && (
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
EOS Nation:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -247,15 +246,15 @@ const AdditionalResources = ({ classes, producer }) => {
)}
{edenInterview && (
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
YouTube:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -272,7 +271,7 @@ const AdditionalResources = ({ classes, producer }) => {
</Typography>
</Grid>
)}
</Box>
</div>
</Grid>
)
}
@@ -283,16 +282,16 @@ const WebsiteLegend = ({ classes, webInfo }) => {
const { t } = useTranslation('profile')

const content = webInfo ? (
<Box className={classes.category}>
<div className={classes.category}>
<Typography variant='h6' className={classes.title}>
{t('websiteInfo')}:
</Typography>
<Box className={classes.marginLeftBox}>
<div className={classes.marginLeftBox}>
<Typography mt='2%' variant='subtitle1'>
{webInfo.websiteText}
</Typography>
</Box>
</Box>
</div>
</div>
) : null

return (
@@ -319,17 +318,17 @@ const GeneralInformation = ({ classes, producer = {} }) => {
<Typography variant='h6' className={classes.title}>
{t('generalInformation')}
</Typography>
<Box className={classes.marginLeftBox}>
<div className={classes.marginLeftBox}>
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
{t('account')}:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -338,15 +337,15 @@ const GeneralInformation = ({ classes, producer = {} }) => {
</Typography>
</Grid>
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
{t('location')}:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -355,15 +354,15 @@ const GeneralInformation = ({ classes, producer = {} }) => {
</Typography>
</Grid>
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
{t('website')}:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
@@ -383,23 +382,23 @@ const GeneralInformation = ({ classes, producer = {} }) => {
</Typography>
</Grid>
<Grid container direction='row'>
<Box width='70px' mr={3}>
<div className={classes.subTitleBox}>
<Typography
fontWeight='bold'
variant='subtitle1'
className={classes.subTitle}
>
{t('votes')}:
</Typography>
</Box>
</div>
<Typography
variant='subtitle1'
className={clsx(classes.value, classes.subTitle)}
>
{formatNumber(parseFloat(totalVotes), 0)}
</Typography>
</Grid>
</Box>
</div>
</Grid>
</>
)
21 changes: 10 additions & 11 deletions webapp/src/routes/BlockProducers/SliderRatingSection.js
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import clsx from 'clsx'
import Grid from '@mui/material/Grid'
import Switch from '@mui/material/Switch'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import { makeStyles } from '@mui/styles'

import RateSlider from '../../components/RateSlider'
@@ -48,7 +47,7 @@ const SliderRatingSection = ({
<Typography paragraph>{t('communityTooltip')}</Typography>
</Grid>
<Grid item xs={12}>
<Box className={classes.sliderWrapper}>
<div className={classes.sliderWrapper}>
<RateSlider
disabled={!producer || !ratingState.communityEnabled}
onChange={handleStateChange('community')}
@@ -67,7 +66,7 @@ const SliderRatingSection = ({
<Typography variant='body2'>
{`${ratingState.communityEnabled ? t('enabled') : t('disabled')}`}
</Typography>
</Box>
</div>
</Grid>
<Grid item xs={12}>
<Typography
@@ -81,7 +80,7 @@ const SliderRatingSection = ({
<Typography paragraph> {t('developmentTooltip')} </Typography>
</Grid>
<Grid item xs={12}>
<Box className={classes.sliderWrapper}>
<div className={classes.sliderWrapper}>
<RateSlider
disabled={!producer || !ratingState.developmentEnabled}
onChange={handleStateChange('development')}
@@ -100,7 +99,7 @@ const SliderRatingSection = ({
<Typography variant='body2'>
{`${ratingState.developmentEnabled ? t('enabled') : t('disabled')}`}
</Typography>
</Box>
</div>
</Grid>
<Grid item xs={12}>
<Typography
@@ -114,7 +113,7 @@ const SliderRatingSection = ({
<Typography paragraph>{t('infrastructureTooltip')}</Typography>
</Grid>
<Grid item xs={12}>
<Box className={classes.sliderWrapper}>
<div className={classes.sliderWrapper}>
<RateSlider
disabled={!producer || !ratingState.infraEnabled}
onChange={handleStateChange('infrastructure')}
@@ -133,7 +132,7 @@ const SliderRatingSection = ({
<Typography variant='body2'>
{ratingState.infraEnabled ? t('enabled') : t('disabled')}
</Typography>
</Box>
</div>
</Grid>
<Grid item xs={12}>
<Typography
@@ -147,7 +146,7 @@ const SliderRatingSection = ({
<Typography paragraph>{t('transparencyTooltip')}</Typography>
</Grid>
<Grid item xs={12}>
<Box className={classes.sliderWrapper}>
<div className={classes.sliderWrapper}>
<RateSlider
disabled={!producer || !ratingState.transparencyEnabled}
onChange={handleStateChange('transparency')}
@@ -166,7 +165,7 @@ const SliderRatingSection = ({
<Typography variant='body2'>
{ratingState.transparencyEnabled ? t('enabled') : t('disabled')}
</Typography>
</Box>
</div>
</Grid>
<Grid item xs={12}>
<Typography
@@ -180,7 +179,7 @@ const SliderRatingSection = ({
<Typography paragraph>{t('trustinessTooltip')}</Typography>
</Grid>
<Grid item xs={12}>
<Box className={classes.sliderWrapper}>
<div className={classes.sliderWrapper}>
<RateSlider
disabled={!producer || !ratingState.trustinessEnabled}
onChange={handleStateChange('trustiness')}
@@ -199,7 +198,7 @@ const SliderRatingSection = ({
<Typography variant='body2'>
{ratingState.trustinessEnabled ? t('enabled') : t('disabled')}
</Typography>
</Box>
</div>
</Grid>
</Grid>
)
37 changes: 18 additions & 19 deletions webapp/src/routes/BlockProducers/index.js
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@ import React, { useEffect, useState, useRef } from 'react'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import Collapse from '@mui/material/Collapse'
@@ -172,7 +171,7 @@ const AllBps = () => {
}, [state.blockProducers])

return (
<Box className={classes.rootBP} ref={myRef}>
<div className={classes.rootBP} ref={myRef}>
<>
<TitlePage title={t('bpsTitle')} />
<Collapse
@@ -199,23 +198,23 @@ const AllBps = () => {
page='bp'
onFilterChange={handleOnFliterChange}
/>
<Box className={classes.wrapperGrid}>
<div className={classes.wrapperGrid}>
{state.loadingSkeleton ? (
<Box className={classes.gridRow}>
<Box className={classes.gridItem}>
<div className={classes.gridRow}>
<div className={classes.gridItem}>
<SkeletonCard />
</Box>
<Box className={classes.gridItem}>
</div>
<div className={classes.gridItem}>
<SkeletonCard />
</Box>
<Box className={classes.gridItem}>
</div>
<div className={classes.gridItem}>
<SkeletonCard />
</Box>
</Box>
</div>
</div>
) : (
<Box className={classes.gridRow}>
<div className={classes.gridRow}>
{(state.blockProducers.data || []).map(blockProducer => (
<Box
<div
className={classes.gridItem}
key={`${blockProducer.owner}-main-block-card`}
>
@@ -247,11 +246,11 @@ const AllBps = () => {
}
disable={state?.selectedProducers?.length > 29}
/>
</Box>
</div>
))}
</Box>
</div>
)}
</Box>
</div>
{state.selectedProducers.length > 0 && (
<Grid container justifyContent='flex-end'>
<Grid item md={12} className={classes.openBottomSheetContainer}>
@@ -281,7 +280,7 @@ const AllBps = () => {
handleOnClear={handleOnClear}
/>
</SelectedBpsBottomSheet>
<Box className={classes.loadMoreBtnBox}>
<div className={classes.loadMoreBtnBox}>
<Button
disabled={!hasMoreRows}
className={classes.loadMoreButton}
@@ -291,9 +290,9 @@ const AllBps = () => {
>
{t('loadMore')}
</Button>
</Box>
</div>
</>
</Box>
</div>
)
}

7 changes: 7 additions & 0 deletions webapp/src/routes/BlockProducers/styles.js
Original file line number Diff line number Diff line change
@@ -159,6 +159,10 @@ export default theme => ({
title: {
marginBottom: theme.spacing(1)
},
subTitleBox: {
width: '70px',
marginRight: 30
},
subTitle: {
fontWeight: 'bold',
fontSize: 14
@@ -174,6 +178,9 @@ export default theme => ({
color: '#fff',
textTransform: 'uppercase'
},
divAvatar: {
display: 'flex'
},
avatar: {
backgroundColor: theme.palette.surface.main
},
21 changes: 10 additions & 11 deletions webapp/src/routes/Help/index.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import Typography from '@mui/material/Typography'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
import Link from '@mui/material/Link'
import HttpIcon from '@mui/icons-material/Http'
import TelegramIcon from '@mui/icons-material/Telegram'
@@ -20,16 +19,16 @@ const Help = () => {
const { t } = useTranslation('help')

return (
<Box>
<div>
<TitlePage title={t('tabTitle')} />
<Box className={classes.wrapperContainers}>
<div className={classes.wrapperContainers}>
<Grid className={classes.firstContainer}>
<Typography variant='h5'>{t('title')}</Typography>
<Typography variant='body2' align='justify' paragraph>
{t('paragraph')}
</Typography>

<Box className={classes.boxLinks}>
<div className={classes.boxLinks}>
<GitHubIcon />
<Link
href='https://github.com/eoscostarica'
@@ -38,8 +37,8 @@ const Help = () => {
>
<Typography variant='body1'>{t('githubEOSCR')}</Typography>
</Link>
</Box>
<Box className={classes.boxLinks}>
</div>
<div className={classes.boxLinks}>
<TelegramIcon />
<Link
href='https://web.telegram.org/#/eoscr'
@@ -48,8 +47,8 @@ const Help = () => {
>
<Typography variant='body1'>{t('telegramChannel')}</Typography>
</Link>
</Box>
<Box className={classes.boxLinks}>
</div>
<div className={classes.boxLinks}>
<HttpIcon />
<Link
href='https://eoscostarica.io/'
@@ -58,10 +57,10 @@ const Help = () => {
>
<Typography variant='body1'>{t('websiteEOSCR')}</Typography>
</Link>
</Box>
</div>
</Grid>
</Box>
</Box>
</div>
</div>
)
}

5 changes: 2 additions & 3 deletions webapp/src/routes/Home/LogoSvg.js
65 changes: 32 additions & 33 deletions webapp/src/routes/Home/index.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
import { Tweet } from 'react-twitter-widgets'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Link from '@mui/material/Link'
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
@@ -35,12 +34,12 @@ const Home = () => {
}, [])

return (
<Box>
<div>
<TitlePage title={t('title')} />
<Box className={classes.mainCoverContainer}>
<div className={classes.mainCoverContainer}>
<LogoSvg />
<Box className={classes.headerBg}>
<Box className={classes.gradientBg}>
<div className={classes.headerBg}>
<div className={classes.gradientBg}>
<Typography className={classes.headerTitle}>
{t('knowBP')}
</Typography>
@@ -60,14 +59,14 @@ const Home = () => {
>
{t('startRating')}
</Button>
</Box>
</Box>
</Box>
<Box className={classes.videoBox}>
</div>
</div>
</div>
<div className={classes.videoBox}>
<Typography className={classes.videoTitle}>{t('tour')}</Typography>
<Box className={classes.video}>
<div className={classes.video}>
<Video src={t('videoUrl')} />
</Box>
</div>
<Link
variant='body2'
href='/about'
@@ -76,8 +75,8 @@ const Home = () => {
>
{t('learnMore')} <ArrowForwardIosIcon />
</Link>
</Box>
<Box className={classes.blockProducers}>
</div>
<div className={classes.blockProducers}>
<Typography className={classes.votes}>{t('mostVoted')}</Typography>
<Link
variant='body2'
@@ -86,11 +85,11 @@ const Home = () => {
>
{t('bpList')} <ArrowForwardIosIcon />
</Link>
</Box>
<Box className={classes.wrapperGrid}>
<Box className={classes.gridRow}>
</div>
<div className={classes.wrapperGrid}>
<div className={classes.gridRow}>
{(state.homeProducers.data || []).map((blockProducer, index) => (
<Box
<div
className={classes.gridItem}
key={`${blockProducer.owner}-main-block-card`}
id={`cardBox${index}`}
@@ -114,11 +113,11 @@ const Home = () => {
)
}
/>
</Box>
</div>
))}
</Box>
</Box>
<Box className={clsx(classes.blockProducers, classes.twitter)}>
</div>
</div>
<div className={clsx(classes.blockProducers, classes.twitter)}>
<Typography className={classes.votes}>{t('mention')}</Typography>
<Link
variant='body2'
@@ -128,21 +127,21 @@ const Home = () => {
>
{t('moreNews')} <ArrowForwardIosIcon />
</Link>
</Box>
<Box className={clsx(classes.wrapperGrid, classes.twitter)}>
<Box className={classes.gridRow}>
<Box className={classes.gridItem}>
</div>
<div className={clsx(classes.wrapperGrid, classes.twitter)}>
<div className={classes.gridRow}>
<div className={classes.gridItem}>
<Tweet tweetId='1460649455443759115' />
</Box>
<Box className={classes.gridItem} id='cardBox1'>
</div>
<div className={classes.gridItem} id='cardBox1'>
<Tweet tweetId='1451875419246968833' />
</Box>
<Box className={classes.gridItem} id='cardBox2'>
</div>
<div className={classes.gridItem} id='cardBox2'>
<Tweet tweetId='1457795829666697217' />
</Box>
</Box>
</Box>
</Box>
</div>
</div>
</div>
</div>
)
}

37 changes: 18 additions & 19 deletions webapp/src/routes/Proxies/GeneralInformationProfile.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
import clsx from 'clsx'
import { useTranslation } from 'react-i18next'
import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
import _get from 'lodash.get'
import Typography from '@mui/material/Typography'

@@ -23,7 +22,7 @@ const SocialNetworks = ({ classes, proxy }) => {
{t('social')}
</Typography>
{twitter && (
<Box className={classes.rowBox}>
<div className={classes.rowBox}>
<Typography variant='subtitle1' className={classes.subTitle}>
Twitter:
</Typography>
@@ -40,10 +39,10 @@ const SocialNetworks = ({ classes, proxy }) => {
{twitter}
</a>
</Typography>
</Box>
</div>
)}
{steemit && (
<Box className={classes.rowBox}>
<div className={classes.rowBox}>
<Typography variant='subtitle1' className={classes.subTitle}>
Steemit:
</Typography>
@@ -60,10 +59,10 @@ const SocialNetworks = ({ classes, proxy }) => {
{steemit}
</a>
</Typography>
</Box>
</div>
)}
{telegram && (
<Box className={classes.rowBox}>
<div className={classes.rowBox}>
<Typography variant='subtitle1' className={classes.subTitle}>
Telegram:
</Typography>
@@ -80,7 +79,7 @@ const SocialNetworks = ({ classes, proxy }) => {
{telegram}
</a>
</Typography>
</Box>
</div>
)}
</Grid>
)
@@ -100,7 +99,7 @@ const GeneralInformation = ({ classes, proxy = {} }) => {
<Typography variant='subtitle1' className={classes.title}>
{t('generalInformation')}
</Typography>
<Box className={classes.rowBox}>
<div className={classes.rowBox}>
<Typography variant='subtitle1' className={classes.subTitle}>
{t('account')}:
</Typography>
@@ -110,8 +109,8 @@ const GeneralInformation = ({ classes, proxy = {} }) => {
>
{_get(proxy, 'owner', '- -')}
</Typography>
</Box>
<Box className={classes.rowBox}>
</div>
<div className={classes.rowBox}>
<Typography variant='subtitle1' className={classes.subTitle}>
{t('website')}:
</Typography>
@@ -132,9 +131,9 @@ const GeneralInformation = ({ classes, proxy = {} }) => {
'- -'
)}
</Typography>
</Box>
</div>
{background && (
<Box>
<div>
<Typography variant='subtitle1' className={classes.longSubTitle}>
{t('background')}:
</Typography>
@@ -144,10 +143,10 @@ const GeneralInformation = ({ classes, proxy = {} }) => {
>
{background}
</Typography>
</Box>
</div>
)}
{philosophy && (
<Box>
<div>
<Typography variant='subtitle1' className={classes.longSubTitle}>
{t('philosophy')}:
</Typography>
@@ -157,14 +156,14 @@ const GeneralInformation = ({ classes, proxy = {} }) => {
>
{philosophy}
</Typography>
</Box>
</div>
)}
</Grid>
<Grid container direction='column' className={classes.category}>
<Typography variant='subtitle1' className={classes.title}>
{t('rankings')}
</Typography>
<Box className={classes.rowBox}>
<div className={classes.rowBox}>
<Typography variant='subtitle1' className={classes.subTitle}>
{t('proxyVotes')}:
</Typography>
@@ -174,8 +173,8 @@ const GeneralInformation = ({ classes, proxy = {} }) => {
>
{formatNumber(parseFloat(proxyVotes), 0)}
</Typography>
</Box>
<Box className={classes.rowBox}>
</div>
<div className={classes.rowBox}>
<Typography variant='subtitle1' className={classes.subTitle}>
{t('totalVotes')}:
</Typography>
@@ -185,7 +184,7 @@ const GeneralInformation = ({ classes, proxy = {} }) => {
>
{formatNumber(parseFloat(totalVotes), 0)}
</Typography>
</Box>
</div>
</Grid>
</>
)
13 changes: 6 additions & 7 deletions webapp/src/routes/Proxies/ProxyProfile.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@ import CircularProgress from '@mui/material/CircularProgress'
import Avatar from '@mui/material/Avatar'
import Button from '@mui/material/Button'
import Grid from '@mui/material/Grid'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import { makeStyles } from '@mui/styles'
import Snackbar from '@mui/material/Snackbar'
@@ -168,14 +167,14 @@ const ProxyProfile = () => {
</Grid>
<Grid container className={classes.reliefGrid}>
<Grid item md={12} className={classes.paddingHorinzontal}>
<Box className={classes.avatarTitle}>
<div className={classes.avatarTitle}>
<Avatar aria-label='Block Producer' className={classes.avatar}>
{proxyLogo ? <img src={proxyLogo} alt='' width='100%' /> : ''}
</Avatar>
<Typography variant='h6' className={classes.bpName}>
{proxyTitle}
</Typography>
</Box>
</div>
{proxySlogan && (
<Typography variant='subtitle1' className={classes.bpSlogan}>
<blockquote className={classes.slogan}>{proxySlogan}</blockquote>
@@ -210,7 +209,7 @@ const ProxyProfile = () => {
onClick={sendVoteProxy}
disabled={!state.proxy || ratingState.processing}
/>
<Box className={classes.wrapperBox}>
<div className={classes.wrapperBox}>
<Snackbar
open={showMessage}
autoHideDuration={4000}
@@ -241,17 +240,17 @@ const ProxyProfile = () => {
</Alert>
</Snackbar>
{ratingState.processing && (
<Box className={classes.votingTextProgress}>
<div className={classes.votingTextProgress}>
<CircularProgress color='secondary' size={20} />
<Typography
variant='subtitle1'
className={clsx(classes.subTitle, classes.bpName)}
>
{t('voting')} ...
</Typography>
</Box>
</div>
)}
</Box>
</div>
<SocialNetworks
classes={classes}
overrideClass={classes.showOnlySm}
21 changes: 10 additions & 11 deletions webapp/src/routes/Proxies/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import Button from '@mui/material/Button'
import Box from '@mui/material/Box'
import Collapse from '@mui/material/Collapse'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
@@ -135,7 +134,7 @@ const AllProxies = ({ ual = {} }) => {
}, [state.proxies])

return (
<Box className={classes.root}>
<div className={classes.root}>
<TitlePage title={t('proxiesTitle')} />
<Collapse
in={state.compareProxyToolVisible}
@@ -160,10 +159,10 @@ const AllProxies = ({ ual = {} }) => {
/>
</Collapse>
<FilterBanner title={t('proxies')} page='proxy' hideFilter />
<Box className={classes.wrapperGrid}>
<Box className={classes.gridRow}>
<div className={classes.wrapperGrid}>
<div className={classes.gridRow}>
{(state.proxies.data || []).map(proxy => (
<Box
<div
key={`${proxy.owner}-main-block-card`}
className={classes.gridItem}
>
@@ -178,10 +177,10 @@ const AllProxies = ({ ual = {} }) => {
pathLink='proxies'
showOptions={false}
/>
</Box>
</div>
))}
</Box>
</Box>
</div>
</div>
<SelectedBpsBottomSheet
open={state.compareProxyToolVisible}
classesStyle={classes.hiddenDesktop}
@@ -202,7 +201,7 @@ const AllProxies = ({ ual = {} }) => {
}}
/>
</SelectedBpsBottomSheet>
<Box className={classes.loadMoreBtnBox}>
<div className={classes.loadMoreBtnBox}>
<Button
disabled={!hasMoreRows}
className={classes.loadMoreButton}
@@ -212,8 +211,8 @@ const AllProxies = ({ ual = {} }) => {
>
{t('loadMore')}
</Button>
</Box>
</Box>
</div>
</div>
)
}

9 changes: 4 additions & 5 deletions webapp/src/routes/TermsOfUse/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react'
import Box from '@mui/material/Box'
import { makeStyles } from '@mui/styles'
import { useTranslation } from 'react-i18next'
import { RicardianContract } from '@eoscostarica/eoscr-components'
@@ -15,15 +14,15 @@ const TermsOfUse = () => {
const { t } = useTranslation('termsOfUse')

return (
<Box className={classes.root}>
<Box className={classes.wrapper}>
<div className={classes.root}>
<div className={classes.wrapper}>
<TitlePage title={t('tabTitle')} />
<RicardianContract
contractName={mainConfig.contract}
httpEndpoint='https://eos.edenia.cloud'
/>
</Box>
</Box>
</div>
</div>
)
}

0 comments on commit db31101

Please sign in to comment.