diff --git a/webapp/package.json b/webapp/package.json index eae068f2..341d3e3c 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -24,10 +24,10 @@ "not op_mini all" ], "dependencies": { - "@eoscostarica/ual-reactjs-renderer": "^0.3.1", "@apollo/react-hooks": "^4.0.0", "@date-io/core": "^2.10.6", - "@eoscostarica/eoscr-components": "^3.1.2", + "@eoscostarica/eoscr-components": "^3.1.3", + "@eoscostarica/ual-reactjs-renderer": "^0.3.1", "@material-ui/core": "^4.9.10", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.55", @@ -44,6 +44,7 @@ "apollo-link-ws": "^1.0.20", "apollo-utilities": "^1.3.4", "axios": "^0.19.2", + "clsx": "^1.1.1", "d3-force": "^2.1.1", "d3-geo": "^1.12.1", "d3-geo-projection": "^2.9.0", diff --git a/webapp/src/components/Footer.js b/webapp/src/components/Footer.js deleted file mode 100644 index da9ddcbc..00000000 --- a/webapp/src/components/Footer.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import { - Grid, - List, - ListItemText, - ListItem as MuiListItem -} from '@material-ui/core' - -import { generalConfig } from '../config' - -const Wrapper = styled.div` - padding: ${(props) => props.theme.spacing(1) / 4}px - ${(props) => props.theme.spacing(4)}px; - background: ${(props) => props.theme.palette.common.white}; - position: relative; -` - -const ListItem = styled(MuiListItem)` - display: inline-block; - width: auto; - padding-left: ${(props) => props.theme.spacing(2)}px; - padding-right: ${(props) => props.theme.spacing(2)}px; - - &, - &:hover, - &:active { - color: #000; - } -` - -function Footer() { - return ( - - - - {generalConfig.footerLinks.map((link, index) => ( - - - {link.text} - - } - /> - - ))} - - - - ) -} - -export default Footer diff --git a/webapp/src/components/Footer/index.js b/webapp/src/components/Footer/index.js new file mode 100644 index 00000000..82ca890f --- /dev/null +++ b/webapp/src/components/Footer/index.js @@ -0,0 +1,35 @@ +import React from 'react' +import { makeStyles } from '@material-ui/styles' +import { Grid, List, ListItemText, ListItem, Box } from '@material-ui/core' + +import { generalConfig } from '../../config' + +import styles from './styles' + +const useStyles = makeStyles(styles) + +const Footer = () => { + const classes = useStyles() + + return ( + + + + {generalConfig.footerLinks.map((link, index) => ( + + + {link.text} + + } + /> + + ))} + + + + ) +} + +export default Footer diff --git a/webapp/src/components/Footer/styles.js b/webapp/src/components/Footer/styles.js new file mode 100644 index 00000000..be0be635 --- /dev/null +++ b/webapp/src/components/Footer/styles.js @@ -0,0 +1,23 @@ +export default (theme) => ({ + wrapper: { + padding: `${theme.spacing(1) / 4}px ${theme.spacing(4)}px`, + background: theme.palette.common.white, + position: 'relative' + }, + listItem: { + display: 'inline-block', + width: 'auto', + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + '&, &:hover, &:active': { + color: theme.palette.common.black + }, + '& a': { + color: theme.sidebar.footer.color, + lineHeight: '20px', + textAlign: 'center', + letterSpacing: '0.1px', + textDecoration: 'none' + } + } +}) diff --git a/webapp/src/components/Sidebar/eosLogo.js b/webapp/src/components/Sidebar/eosLogo.js new file mode 100644 index 00000000..2baf81f6 --- /dev/null +++ b/webapp/src/components/Sidebar/eosLogo.js @@ -0,0 +1,25 @@ +import React from 'react' + +const EosLogo = () => ( + + + + + + + + + +) + +export default EosLogo diff --git a/webapp/src/components/Sidebar.js b/webapp/src/components/Sidebar/index.js similarity index 56% rename from webapp/src/components/Sidebar.js rename to webapp/src/components/Sidebar/index.js index 187e3bbf..d078ef38 100644 --- a/webapp/src/components/Sidebar.js +++ b/webapp/src/components/Sidebar/index.js @@ -1,5 +1,6 @@ -import React, { useState } from 'react' +import React, { useState, forwardRef } from 'react' import PropTypes from 'prop-types' +import clsx from 'clsx' import { ExpandLess, ExpandMore } from '@material-ui/icons' import { Box, @@ -13,29 +14,40 @@ import { Typography } from '@material-ui/core' import styled from 'styled-components' +import { makeStyles } from '@material-ui/styles' import { rgba, darken } from 'polished' import { NavLink as RouterNavLink, withRouter } from 'react-router-dom' import { useTranslation } from 'react-i18next' import PerfectScrollbar from 'react-perfect-scrollbar' import 'react-perfect-scrollbar/dist/css/styles.css' -import routes from '../routes' +import routes from '../../routes' -const NavLink = React.forwardRef((props, ref) => ( - -)) +import EosLogo from './eosLogo' +import styles from './styles' -const ExternalLink = React.forwardRef(({ to, children, className }, ref) => ( - - {children} - -)) +const useStyles = makeStyles((theme) => styles(theme, rgba)) + +const NavLink = forwardRef(function NavLink(props, ref) { + return +}) + +const ExternalLink = forwardRef(function ExternalLink( + { to, children, className }, + ref +) { + return ( + + {children} + + ) +}) ExternalLink.propTypes = { to: PropTypes.string, @@ -43,51 +55,6 @@ ExternalLink.propTypes = { className: PropTypes.string } -const Drawer = styled(MuiDrawer)` - border-right: 0; - - > div { - border-right: 0; - } -` - -const Scrollbar = styled(PerfectScrollbar)` - background-color: ${(props) => props.theme.sidebar.background}; -` - -const List = styled(MuiList)` - background-color: ${(props) => props.theme.sidebar.background}; -` - -const ListItem = styled(MuiListItem)` - padding: 0; - display: flex; - flex-direction: column; - align-items: start; - justify-content: center; -` - -const Brand = styled(Box)` - font-size: ${(props) => props.theme.typography.h5.fontSize}; - font-weight: ${(props) => props.theme.typography.fontWeightMedium}; - color: ${(props) => props.theme.sidebar.header.color}; - background-color: ${(props) => props.theme.sidebar.header.background}; - font-family: ${(props) => props.theme.typography.fontFamily}; - min-height: 56px; - padding-left: ${(props) => props.theme.spacing(6)}px; - padding-right: ${(props) => props.theme.spacing(6)}px; - cursor: default; - padding-bottom: 16px; - - ${(props) => props.theme.breakpoints.up('sm')} { - min-height: 64px; - } - - &:hover { - background-color: ${(props) => props.theme.sidebar.header.background}; - } -` - const DashboardIcon = () => ( EOS Costa Rica - Open Source Projects ( /> ) -const BrandIcon = styled(DashboardIcon)` - margin-right: ${(props) => props.theme.spacing(2)}px; - color: ${(props) => props.theme.sidebar.header.brand.color}; -` - -const Category = styled(ListItem)` +const Category = styled(MuiListItem)` padding-top: ${(props) => props.theme.spacing(3)}px; padding-bottom: ${(props) => props.theme.spacing(3)}px; padding-left: ${(props) => props.theme.spacing(6)}px; @@ -129,25 +91,7 @@ const Category = styled(ListItem)` } ` -const CategoryText = styled(ListItemText)` - margin: 0; - span { - color: ${(props) => props.theme.sidebar.color}; - font-size: ${(props) => props.theme.typography.body1.fontSize}px; - font-weight: ${(props) => props.theme.sidebar.category.fontWeight}; - padding: 0 ${(props) => props.theme.spacing(4)}px; - } -` - -const CategoryIconLess = styled(ExpandLess)` - color: ${(props) => rgba(props.theme.sidebar.color, 0.5)}; -` - -const CategoryIconMore = styled(ExpandMore)` - color: ${(props) => rgba(props.theme.sidebar.color, 0.5)}; -` - -const Link = styled(ListItem)` +const Link = styled(MuiListItem)` padding-left: ${(props) => props.theme.spacing(15)}px; padding-top: ${(props) => props.theme.spacing(2)}px; padding-bottom: ${(props) => props.theme.spacing(2)}px; @@ -170,69 +114,6 @@ const Link = styled(ListItem)` } ` -const LinkText = styled(ListItemText)` - color: ${(props) => props.theme.sidebar.color}; - span { - font-size: ${(props) => props.theme.typography.body1.fontSize}px; - } - margin-top: 0; - margin-bottom: 0; -` - -const LinkBadge = styled(Chip)` - font-size: 11px; - font-weight: ${(props) => props.theme.typography.fontWeightBold}; - height: 20px; - position: absolute; - right: 12px; - top: 8px; - background-color: ${(props) => props.theme.palette.secondary.main}; - - span.MuiChip-label, - span.MuiChip-label:hover { - cursor: pointer; - color: ${(props) => props.theme.sidebar.badge.color}; - padding-left: ${(props) => props.theme.spacing(2)}px; - padding-right: ${(props) => props.theme.spacing(2)}px; - } -` - -const CategoryBadge = styled(LinkBadge)` - top: 12px; -` - -const SidebarSection = styled(Typography)` - color: ${(props) => props.theme.sidebar.color}; - padding: ${(props) => props.theme.spacing(4)}px - ${(props) => props.theme.spacing(6)}px - ${(props) => props.theme.spacing(1)}px; - opacity: 0.9; - display: block; - font-weight: 600; -` - -const SidebarFooter = styled.div` - background-color: ${(props) => - props.theme.sidebar.footer.background} !important; - padding: ${(props) => props.theme.spacing(2.75)}px - ${(props) => props.theme.spacing(4)}px; - min-height: 61px; - display: flex; - justify-content: center; - align-items: center; -` - -const SidebarFooterText = styled(Typography)` - color: ${(props) => props.theme.sidebar.footer.color}; -` - -const SidebarFooterSubText = styled(Typography)` - color: ${(props) => props.theme.sidebar.footer.color}; - font-size: 0.725rem; - display: block; - padding: 1px; -` - const SidebarCategory = ({ name, icon, @@ -245,15 +126,22 @@ const SidebarCategory = ({ return ( {icon} - {name} + {name} {isCollapsable ? ( isOpen ? ( - + ) : ( - + ) ) : null} - {badge ? : ''} + {badge ? ( + + ) : ( + '' + )} ) } @@ -267,7 +155,7 @@ SidebarCategory.propTypes = { badge: PropTypes.string } -const SidebarLink = ({ name, icon, to, badge }) => ( +const SidebarLink = ({ name, icon, to, badge, classes }) => ( ( href={to} > {icon} - {name} - {badge ? : ''} + {name} + {badge ? : ''} ) @@ -287,11 +175,13 @@ SidebarLink.propTypes = { icon: PropTypes.node, name: PropTypes.string, to: PropTypes.string, - badge: PropTypes.string + badge: PropTypes.string, + classes: PropTypes.any } const Sidebar = ({ classes, staticContext, location, ...rest }) => { const { t } = useTranslation('routes') + const classesStyle = useStyles() const initOpenRoutes = () => { /* Open collapse element that matches current url */ const pathName = location.pathname @@ -330,18 +220,20 @@ const Sidebar = ({ classes, staticContext, location, ...rest }) => { } return ( - - - - - - + + + + + + {routes .filter(({ name }) => !!name) .map((category, index) => ( - + {category.header ? ( - {t(category.header)} + + {t(category.header)} + ) : null} {category.children ? ( @@ -353,6 +245,7 @@ const Sidebar = ({ classes, staticContext, location, ...rest }) => { onClick={() => toggle(index)} isCollapsable button + classes={classesStyle} /> { to={route.path} icon={route.icon} badge={route.badge} + classes={classesStyle} /> ))} @@ -387,17 +281,24 @@ const Sidebar = ({ classes, staticContext, location, ...rest }) => { icon={category.icon} exact badge={category.badge} + classes={classesStyle} /> )} - + ))} - - - + + + - - An open source project by{' '} + + An open source project by + + + { > EOS Costa Rica - - + + - - + + ) } diff --git a/webapp/src/components/Sidebar/styles.js b/webapp/src/components/Sidebar/styles.js new file mode 100644 index 00000000..fe930e37 --- /dev/null +++ b/webapp/src/components/Sidebar/styles.js @@ -0,0 +1,129 @@ +export default (theme, rgba) => ({ + drawer: { + borderRight: 0, + '& > div': { + borderRight: 0 + } + }, + scrollbar: { + backgroundColor: theme.sidebar.background + }, + list: { + backgroundColor: theme.sidebar.background + }, + listItem: { + padding: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'start', + justifyContent: 'center' + }, + brand: { + fontSize: theme.typography.h5.fontSize, + fontWeight: theme.typography.fontWeightMedium, + color: theme.sidebar.header.color, + backgroundColor: theme.sidebar.header.background, + fontFamily: theme.typography.fontFamily, + minHeight: 56, + paddingLeft: theme.spacing(6), + paddingRight: theme.spacing(6), + cursor: 'default', + paddingBottom: 16, + [theme.breakpoints.up('sm')]: { + minHeight: 64 + }, + '&:hover': { + backgroundColor: theme.sidebar.header.background + } + }, + brandIcon: { + marginRight: theme.spacing(2), + color: theme.sidebar.header.brand.color + }, + categoryText: { + margin: 0, + '& span': { + color: theme.sidebar.color, + fontSize: theme.typography.body1.fontSize, + fontWeight: theme.sidebar.category.fontWeight, + padding: theme.spacing(0, 4) + } + }, + categoryIconLess: { + color: rgba(theme.sidebar.color, 0.5) + }, + categoryIconMore: { + color: rgba(theme.sidebar.color, 0.5) + }, + linkText: { + color: theme.sidebar.color, + '& span': { + fontSize: theme.typography.body1.fontSize + }, + marginTop: 0, + marginBottom: 0 + }, + linkBadge: { + fontSize: 11, + fontWeight: theme.typography.fontWeightBold, + height: 20, + position: 'absolute', + right: 12, + top: 8, + backgroundColor: theme.palette.secondary.main, + + '& span.MuiChip-label, & span.MuiChip-label:hover': { + cursor: 'pointer', + color: theme.sidebar.badge.color, + paddingleft: theme.spacing(2), + paddingRight: theme.spacing(2) + } + }, + categoryBadge: { + top: 12 + }, + sidebarSection: { + color: theme.sidebar.color, + padding: theme.spacing(4, 6, 1), + opacity: 0.9, + display: 'block', + fontWeight: '600' + }, + sidebarFooter: { + backgroundColor: `${theme.sidebar.footer.background} !important`, + padding: theme.spacing(2.75, 4), + minHeight: 61, + display: 'flex', + justifyContent: 'center', + alignItems: 'center' + }, + sidebarFooterText: { + color: theme.sidebar.footer.color, + fontSize: 14, + lineHeight: '20px', + textAlign: 'center', + letterSpacing: '0.1px' + }, + sidebarFooterSubText: { + color: theme.sidebar.footer.color, + fontSize: '0.725rem', + display: 'block', + padding: 1 + }, + footerBoxLink: { + display: 'flex', + justifyContent: 'center', + '& a': { + color: theme.sidebar.footer.color, + fontSize: 14, + lineHeight: '20px', + textAlign: 'center', + letterSpacing: '0.1px', + textDecoration: 'none', + marginTop: 3 + }, + '& svg': { + marginRight: theme.spacing(1) + } + } +}) diff --git a/webapp/src/components/TransactionsLineChart.js b/webapp/src/components/TransactionsLineChart.js index bd312f7e..af829569 100644 --- a/webapp/src/components/TransactionsLineChart.js +++ b/webapp/src/components/TransactionsLineChart.js @@ -97,6 +97,7 @@ const TransactionsChart = ({ data }) => { stroke={theme.palette.primary.main} activeDot={{ r: 8 }} isAnimationActive={false} + strokeWidth={2} /> { name={t('transactionsPerBlock')} stroke={theme.palette.success.main} isAnimationActive={false} + strokeWidth={2} /> diff --git a/webapp/src/layouts/Dashboard.js b/webapp/src/layouts/Dashboard.js index 15b7ee0a..cefa9a60 100644 --- a/webapp/src/layouts/Dashboard.js +++ b/webapp/src/layouts/Dashboard.js @@ -1,10 +1,9 @@ import React, { useState } from 'react' import PropTypes from 'prop-types' -import styled, { createGlobalStyle } from 'styled-components' -import { spacing } from '@material-ui/system' +import { createGlobalStyle } from 'styled-components' +import { makeStyles } from '@material-ui/styles' import Hidden from '@material-ui/core/Hidden' import CssBaseline from '@material-ui/core/CssBaseline' -import MuiPaper from '@material-ui/core/Paper' import Box from '@material-ui/core/Box' import Typography from '@material-ui/core/Typography' import { isWidthUp } from '@material-ui/core/withWidth' @@ -17,7 +16,10 @@ import Footer from '../components/Footer' import PageTitle from '../components/PageTitle' import { eosConfig } from '../config' +import styles from './styles' + const drawerWidth = 260 +const useStyles = makeStyles((theme) => styles(theme, drawerWidth)) const GlobalStyle = createGlobalStyle` html, @@ -37,80 +39,9 @@ const GlobalStyle = createGlobalStyle` } ` -const Root = styled.div` - display: flex; - min-height: 100vh; -` - -const Drawer = styled.div` - ${(props) => props.theme.breakpoints.up('md')} { - width: ${drawerWidth}px; - flex-shrink: 0; - } -` - -const AppContent = styled.div` - flex: 1; - display: flex; - flex-direction: column; - max-width: 100%; - overflow: hidden; -` - -const Paper = styled(MuiPaper)(spacing) - -const MainContent = styled(Paper)` - flex: 1; - background: ${(props) => props.theme.body.background}; - - @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { - flex: none; - } - - .MuiPaper-root .MuiPaper-root { - box-shadow: none; - } -` - -const SubHeader = styled(Box)` - display: flex; - flex-direction: column-reverse; - margin-bottom: ${(props) => props.theme.spacing(4)}px; - padding-bottom: ${(props) => props.theme.spacing(4)}px; - border-bottom: 1px solid #e0e0e0; - width: 100%; - h3 { - margin-top: ${(props) => props.theme.spacing(4)}px; - } - ${(props) => props.theme.breakpoints.up('sm')} { - flex-direction: row; - justify-content: space-between; - align-items: center; - h3 { - margin-top: 0; - } - } -` - -const Network = styled(Box)` - display: flex; - justify-content: space-between; - align-items: center; - background-color: ${(props) => props.theme.palette.primary.main}; - img { - width: 56px; - height: 56px; - border-radius: 100%; - background-color: ${(props) => props.theme.palette.primary.contrastText}; - } - border-radius: 8px 16px 16px 8px; - padding-left: 24px; - min-width: 220px; - color: ${(props) => props.theme.palette.primary.contrastText}; -` - const Dashboard = ({ children, width, ual }) => { const [mobileOpen, setMobileOpen] = useState(false) + const classes = useStyles() const { t } = useTranslation('routes') const location = useLocation() @@ -119,11 +50,11 @@ const Dashboard = ({ children, width, ual }) => { } return ( - + title`)} /> - + { - - + +
- - + + {t(`${location.pathname}>heading`)} - + {eosConfig.networkLabel} - network logo - - + + network logo + + + {children} - +