diff --git a/src/v2/components/Accounts/index.jsx b/src/v2/components/Accounts/index.jsx index d66b1dec..2e6725c4 100644 --- a/src/v2/components/Accounts/index.jsx +++ b/src/v2/components/Accounts/index.jsx @@ -7,7 +7,8 @@ import SectionHeader from 'v2/components/UI/SectionHeader'; import AccountsTimelineStore from 'v2/stores/accounts/timeline'; import formatNum from 'v2/utils/formatNum'; import CTypography from 'v2/components/UI/CTypography'; -import {Link, Match} from 'react-router-dom'; +import {Match} from 'react-router-dom'; +import TableNav from 'v2/components/UI/TableNav'; import Table from './Table'; import useStyles from './styles'; @@ -20,14 +21,6 @@ const AccountsPage = ({match}: {match: Match}) => { AccountsTimelineStore.init({start: match.params.start}); } - const nav = ( -
- STYLE_ME : - {prev && prev page}: - {next && next page}: -
- ); - return ( @@ -36,9 +29,15 @@ const AccountsPage = ({match}: {match: Match}) => { {formatNum(accountCount)} - {nav} + - {nav} + ); }; diff --git a/src/v2/components/Blocks/Table/styles.js b/src/v2/components/Blocks/Table/styles.js index 4129f8e8..ef184724 100644 --- a/src/v2/components/Blocks/Table/styles.js +++ b/src/v2/components/Blocks/Table/styles.js @@ -2,7 +2,6 @@ import {makeStyles} from '@material-ui/core'; export default makeStyles(theme => ({ root: { - marginTop: 19, [theme.breakpoints.down('sm')]: { padding: 0, paddingBottom: 27, diff --git a/src/v2/components/Blocks/index.jsx b/src/v2/components/Blocks/index.jsx index d5083bc2..f8ab5923 100644 --- a/src/v2/components/Blocks/index.jsx +++ b/src/v2/components/Blocks/index.jsx @@ -1,16 +1,15 @@ // @flow import {Container} from '@material-ui/core'; -import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; -import NavigateNextIcon from '@material-ui/icons/NavigateNext'; import React from 'react'; import {observer} from 'mobx-react-lite'; import HelpLink from 'v2/components/HelpLink'; import SectionHeader from 'v2/components/UI/SectionHeader'; import BlocksTimelineStore from 'v2/stores/blocks/timeline'; -import {Link, Match} from 'react-router-dom'; +import {Match} from 'react-router-dom'; import formatNum from 'v2/utils/formatNum'; import CTypography from 'v2/components/UI/CTypography'; +import TableNav from 'v2/components//UI/TableNav'; import Table from './Table'; import useStyles from './styles'; @@ -22,21 +21,6 @@ const BlocksPage = ({match}: {match: Match}) => { BlocksTimelineStore.init({start: match.params.start}); } - const nav = ( -
- {prev && ( - - - - )} - {next && ( - - - - )} -
- ); - return ( @@ -45,9 +29,15 @@ const BlocksPage = ({match}: {match: Match}) => { {formatNum(blockCount)} - {nav} +
- {nav} + ); }; diff --git a/src/v2/components/Blocks/styles.js b/src/v2/components/Blocks/styles.js index 611c52ce..8a63f377 100644 --- a/src/v2/components/Blocks/styles.js +++ b/src/v2/components/Blocks/styles.js @@ -8,14 +8,11 @@ export default makeStyles(theme => ({ }, nav: { display: 'flex', + justifyContent: 'flex-end', marginTop: 10, '& a': { display: 'flex', - alignItems: 'center', - justifyContent: 'center', - background: getColor('white')(theme), - color: getColor('dark')(theme), - marginRight: 1, + color: getColor('white')(theme), }, }, })); diff --git a/src/v2/components/Programs/index.jsx b/src/v2/components/Programs/index.jsx index 6deee47c..536d9438 100644 --- a/src/v2/components/Programs/index.jsx +++ b/src/v2/components/Programs/index.jsx @@ -7,9 +7,11 @@ import SectionHeader from 'v2/components/UI/SectionHeader'; import ProgramsTimelineStore from 'v2/stores/programs/timeline'; import formatNum from 'v2/utils/formatNum'; import CTypography from 'v2/components/UI/CTypography'; +import TableNav from 'v2/components/UI/TableNav'; +import {Match} from 'react-router-dom'; + import Table from './Table'; import useStyles from './styles'; -import {Link, Match} from 'react-router-dom'; const ProgramsPage = ({match}: {match: Match}) => { const classes = useStyles(); @@ -19,14 +21,6 @@ const ProgramsPage = ({match}: {match: Match}) => { ProgramsTimelineStore.init({start: match.params.start}); } - const nav = ( -
- STYLE_ME : - {prev && prev page}: - {next && next page}: -
- ); - return ( @@ -35,9 +29,15 @@ const ProgramsPage = ({match}: {match: Match}) => { {formatNum(programCount)} - {nav} +
- {nav} + ); }; diff --git a/src/v2/components/Transactions/index.jsx b/src/v2/components/Transactions/index.jsx index 147fa70a..92aecd09 100644 --- a/src/v2/components/Transactions/index.jsx +++ b/src/v2/components/Transactions/index.jsx @@ -1,15 +1,14 @@ // @flow import {Container} from '@material-ui/core'; import React from 'react'; -import {Link, Match} from 'react-router-dom'; -import NavigateNextIcon from '@material-ui/icons/NavigateNext'; -import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; +import {Match} from 'react-router-dom'; import {observer} from 'mobx-react-lite'; import HelpLink from 'v2/components/HelpLink'; import SectionHeader from 'v2/components/UI/SectionHeader'; import TransactionsTimelineStore from 'v2/stores/transactions/timeline'; import CTypography from 'v2/components/UI/CTypography'; -import formatNum from '../../utils/formatNum'; +import formatNum from 'v2/utils/formatNum'; +import TableNav from 'v2/components/UI/TableNav'; import Table from './Table'; import useStyles from './styles'; @@ -28,21 +27,6 @@ const TransactionsPage = ({match}: {match: Match}) => { TransactionsTimelineStore.init({start: match.params.start}); } - const nav = ( -
- {prev && ( - - - - )} - {next && ( - - - - )} -
- ); - return ( @@ -51,9 +35,15 @@ const TransactionsPage = ({match}: {match: Match}) => { {formatNum(transactionCount)} - {nav} +
- {nav} + ); }; diff --git a/src/v2/components/UI/TableNav/index.jsx b/src/v2/components/UI/TableNav/index.jsx new file mode 100644 index 00000000..f84dd584 --- /dev/null +++ b/src/v2/components/UI/TableNav/index.jsx @@ -0,0 +1,31 @@ +import {IconButton} from '@material-ui/core'; +import ChevronLeft from '@material-ui/icons/ChevronLeft'; +import ChevronRight from '@material-ui/icons/ChevronRight'; +import React from 'react'; +import {Link} from 'react-router-dom'; + +import useStyles from './styles'; + +const TableNav = ({prev, next}) => { + const classes = useStyles(); + return ( +
+ {prev && ( + + + + + + )} + {next && ( + + + + + + )} +
+ ); +}; + +export default TableNav; diff --git a/src/v2/components/UI/TableNav/styles.js b/src/v2/components/UI/TableNav/styles.js new file mode 100644 index 00000000..dd4bbee5 --- /dev/null +++ b/src/v2/components/UI/TableNav/styles.js @@ -0,0 +1,14 @@ +import {makeStyles} from '@material-ui/core'; +import getColor from 'v2/utils/getColor'; + +export default makeStyles(theme => ({ + root: { + display: 'flex', + justifyContent: 'flex-end', + marginTop: 10, + '& a': { + display: 'flex', + color: getColor('white')(theme), + }, + }, +})); diff --git a/src/v2/components/Validators/Table/styles.js b/src/v2/components/Validators/Table/styles.js index 11be821e..0f816ec2 100644 --- a/src/v2/components/Validators/Table/styles.js +++ b/src/v2/components/Validators/Table/styles.js @@ -39,7 +39,7 @@ export default makeStyles(theme => ({ [theme.breakpoints.down('sm')]: { padding: '10px 18px 0', marginBottom: 10, - borderBottom: 'none' + borderBottom: 'none', }, }, link: {