From 5f3026bf69fc9eb7e9f80c98d1175975c299b02f Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Fri, 4 Oct 2019 08:48:24 -0700
Subject: [PATCH] fix: tx pagination styling

---
 .../Transactions/Detail/Application/index.jsx | 10 +++------
 .../Transactions/Detail/Application/styles.js | 17 --------------
 .../components/Transactions/Table/index.jsx   |  3 ++-
 src/v2/components/Transactions/index.jsx      | 22 ++++++++++++++-----
 src/v2/components/Transactions/styles.js      | 17 ++++++++++++--
 5 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/v2/components/Transactions/Detail/Application/index.jsx b/src/v2/components/Transactions/Detail/Application/index.jsx
index f67da55b..aa0c71bb 100644
--- a/src/v2/components/Transactions/Detail/Application/index.jsx
+++ b/src/v2/components/Transactions/Detail/Application/index.jsx
@@ -5,8 +5,8 @@ import {Grid} from '@material-ui/core';
 import Label from 'v2/components/UI/Label';
 import Avatar from 'v2/components/UI/Avatar';
 import TypeLabel from 'v2/components/UI/TypeLabel';
+
 import useStyles from './styles';
-import {Link} from 'react-router-dom';
 
 type TApplication = {
   id: string,
@@ -27,12 +27,8 @@ const Application = ({id, accounts}: TApplication) => {
       <Grid container spacing={5}>
         <Grid item md={5}>
           <Label text="Application id" hint="" />
-          <div className={classes.address}>
-            <Link to={`/applications/${id}`} className={classes.name}>
-              {id}
-            </Link>
-          </div>
-          <div>
+          <div className={classes.id}>
+            <div className={classes.address}>{id}</div>
             TODO:
             <TypeLabel type="other" label="other" />
             <TypeLabel type="consensus" label="consensus" />
diff --git a/src/v2/components/Transactions/Detail/Application/styles.js b/src/v2/components/Transactions/Detail/Application/styles.js
index 4877d935..499118f2 100644
--- a/src/v2/components/Transactions/Detail/Application/styles.js
+++ b/src/v2/components/Transactions/Detail/Application/styles.js
@@ -32,23 +32,6 @@ export default makeStyles(theme => ({
       alignItems: 'flex-start',
     },
   },
-  name: {
-    display: 'flex',
-    alignItems: 'center',
-    color: getColor('main')(theme),
-    textDecoration: 'none',
-    '& div': {
-      '&:first-child': {
-        marginRight: 15,
-      },
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-    [theme.breakpoints.down('sm')]: {
-      marginBottom: 22,
-    },
-  },
   address: {
     color: getColor('main')(theme),
     lineHeight: '29px',
diff --git a/src/v2/components/Transactions/Table/index.jsx b/src/v2/components/Transactions/Table/index.jsx
index 2ee3dc6f..384f4187 100644
--- a/src/v2/components/Transactions/Table/index.jsx
+++ b/src/v2/components/Transactions/Table/index.jsx
@@ -18,6 +18,7 @@ import HelpLink from 'v2/components/HelpLink';
 import TypeLabel from 'v2/components/UI/TypeLabel';
 import type {TableHeadProps} from 'v2/@types/table';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+
 import useStyles from './styles';
 
 const tHeads: TableHeadProps[] = [
@@ -102,7 +103,7 @@ const TransactionsTable = ({
 
   const renderCard = transaction => {
     return (
-      <div className={classes.card}>
+      <div className={classes.card} key={transaction.id}>
         <ul>
           <li>
             <div className={classes.cardTitle}>Hash</div>
diff --git a/src/v2/components/Transactions/index.jsx b/src/v2/components/Transactions/index.jsx
index a8a19620..17b06860 100644
--- a/src/v2/components/Transactions/index.jsx
+++ b/src/v2/components/Transactions/index.jsx
@@ -1,13 +1,16 @@
 // @flow
 import {Container} from '@material-ui/core';
 import React from 'react';
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 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 {Link, Match} from 'react-router-dom';
+
 import Table from './Table';
 import useStyles from './styles';
-import {Link, Match} from 'react-router-dom';
 
 const TransactionsPage = ({match}: {match: Match}) => {
   const classes = useStyles();
@@ -24,10 +27,17 @@ const TransactionsPage = ({match}: {match: Match}) => {
   }
 
   const nav = (
-    <div className={classes.totalTransactions}>
-      STYLE_ME :
-      {prev && <Link to={`/transactions/timeline/${prev}`}>prev page</Link>}:
-      {next && <Link to={`/transactions/timeline/${next}`}>next page</Link>}:
+    <div className={classes.nav}>
+      {prev && (
+        <Link to={`/transactions/timeline/${prev}`}>
+          <NavigateBeforeIcon />
+        </Link>
+      )}
+      {next && (
+        <Link to={`/transactions/timeline/${next}`}>
+          <NavigateNextIcon />
+        </Link>
+      )}
     </div>
   );
 
@@ -35,7 +45,7 @@ const TransactionsPage = ({match}: {match: Match}) => {
     <Container>
       <SectionHeader title="Transactions">
         <HelpLink text="" term="" />
-        <div className={classes.totalTransactions}>{transactionCount}</div>
+        <div className={classes.total}>{transactionCount}</div>
       </SectionHeader>
       {nav}
       <Table transactions={transactions} />
diff --git a/src/v2/components/Transactions/styles.js b/src/v2/components/Transactions/styles.js
index 0fe6c45e..146389ac 100644
--- a/src/v2/components/Transactions/styles.js
+++ b/src/v2/components/Transactions/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: 25,
   },
-});
+  nav: {
+    display: 'flex',
+    marginTop: 10,
+    '& a': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: getColor('white')(theme),
+      color: getColor('dark')(theme),
+      marginRight: 1,
+    },
+  },
+}));