fix: style blocks pagination

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,16 +77,18 @@ const BlocksTable = ({
       <TableRow hover key={block.id}>
         <TableCell align="center">
           <Link to={`/blocks/${block.id}`} className={classes.name}>
-            {block.id}
+            <div>{block.id}</div>
           </Link>
         </TableCell>
         <TableCell>{block.slot}</TableCell>
         <TableCell title={block.timestamp}>{asTime(block.timestamp)}</TableCell>
         <TableCell>TODO</TableCell>
         <TableCell>TODO</TableCell>
         <TableCell>
-          <Avatar avatarUrl="" />
-          {block.leader}
+          <Link to={`/validators/${block.leader}`} className={classes.name}>
+            <Avatar avatarUrl="" />
+            <div>{block.leader}</div>
+          </Link>
         </TableCell>
       </TableRow>
     );

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',
     },
   },
 }));

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 = (
-    <div className={classes.total}>
-      STYLE_ME :{prev && <Link to={`/blocks/timeline/${prev}`}>prev page</Link>}
-      :{next && <Link to={`/blocks/timeline/${next}`}>next page</Link>}:
+    <div className={classes.nav}>
+      {prev && (
+        <Link to={`/blocks/timeline/${prev}`}>
+          <NavigateBeforeIcon />
+        </Link>
+      )}
+      {next && (
+        <Link to={`/blocks/timeline/${next}`}>
+          <NavigateNextIcon />
+        </Link>
+      )}
     </div>
   );
 

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,
+    },
+  },
 }));