diff --git a/src/v2/components/Blocks/Table/index.jsx b/src/v2/components/Blocks/Table/index.jsx index 9f7727f2..7cad5e3a 100644 --- a/src/v2/components/Blocks/Table/index.jsx +++ b/src/v2/components/Blocks/Table/index.jsx @@ -17,6 +17,7 @@ import {map} from 'lodash/fp'; import Avatar from 'v2/components/UI/Avatar'; import type {TableHeadProps} from 'v2/@types/table'; import formatDistanceToNow from 'date-fns/formatDistanceToNow'; + import HelpLink from '../../HelpLink'; import useStyles from './styles'; @@ -40,17 +41,19 @@ const tHeads: TableHeadProps[] = [ name: 'transactions', text: '', term: '', + width: 190, }, { name: 'confidence', text: '', term: '', + width: 165, }, { name: 'leader', text: '', term: '', - width: 200, + width: 240, }, ]; @@ -74,7 +77,7 @@ const BlocksTable = ({ - {block.id} +
{block.id}
{block.slot} @@ -82,8 +85,10 @@ const BlocksTable = ({ TODO TODO - - {block.leader} + + +
{block.leader}
+
); diff --git a/src/v2/components/Blocks/Table/styles.js b/src/v2/components/Blocks/Table/styles.js index 598f05b7..b92e784a 100644 --- a/src/v2/components/Blocks/Table/styles.js +++ b/src/v2/components/Blocks/Table/styles.js @@ -78,6 +78,11 @@ export default makeStyles(theme => ({ [theme.breakpoints.down('xs')]: { width: '50%', }, + '& div:last-child': { + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', + }, }, }, }, @@ -101,6 +106,9 @@ export default makeStyles(theme => ({ color: getColor('main')(theme), '& div': { marginLeft: 5, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', }, }, })); diff --git a/src/v2/components/Blocks/index.jsx b/src/v2/components/Blocks/index.jsx index 34e260de..4d9e2842 100644 --- a/src/v2/components/Blocks/index.jsx +++ b/src/v2/components/Blocks/index.jsx @@ -1,13 +1,16 @@ // @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 Table from './Table'; import useStyles from './styles'; -import {Link, Match} from 'react-router-dom'; const BlocksPage = ({match}: {match: Match}) => { const classes = useStyles(); @@ -18,9 +21,17 @@ const BlocksPage = ({match}: {match: Match}) => { } const nav = ( -
- STYLE_ME :{prev && prev page} - :{next && next page}: +
+ {prev && ( + + + + )} + {next && ( + + + + )}
); diff --git a/src/v2/components/Blocks/styles.js b/src/v2/components/Blocks/styles.js index 97c09060..73771378 100644 --- a/src/v2/components/Blocks/styles.js +++ b/src/v2/components/Blocks/styles.js @@ -1,8 +1,21 @@ import {makeStyles} from '@material-ui/core'; +import getColor from 'v2/utils/getColor'; -export default makeStyles(() => ({ +export default makeStyles(theme => ({ total: { marginRight: 'auto', marginLeft: 100, }, + nav: { + display: 'flex', + marginTop: 10, + '& a': { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + background: getColor('white')(theme), + color: getColor('dark')(theme), + marginRight: 1, + }, + }, }));