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: {