Add "Show transaction page" button to transaction detail

LiskHQ · Feb 8, 2018 · bb301a9 · bb301a9
1 parent bd3cc19
commit bb301a9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/components/transactions/transactionDetailView.js b/src/components/transactions/transactionDetailView.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import { Link } from 'react-router-dom';
+
+import { Button } from './../toolbox/buttons/button';
 import { TimeFromTimestamp, DateFromTimestamp } from './../timestamp/index';
 import CopyToClipboard from '../copyToClipboard';
 import AccountVisual from '../accountVisual';
@@ -96,6 +98,14 @@ class TransactionsDetailView extends React.Component {
             </div>
           </div>
         </div>
+        <footer>
+          {this.props.prevStep ?
+            <Link to={`${routes.transaction.long}/${this.props.value.id}`}>
+              <Button className={styles.button} >
+                {this.props.t('Show transaction page')}
+              </Button>
+            </Link> : null }
+        </footer>
       </div>
     );
   }

diff --git a/src/components/transactions/transactions.css b/src/components/transactions/transactions.css
@@ -82,6 +82,8 @@
 }
 
 .transactions {
+  height: var(--main-box-height);
+
   & .activity {
     display: flex;
     flex-direction: column;
@@ -163,13 +165,25 @@
 .details {
   line-height: var(--list-line-height);
   color: var(--details-font-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100%;
+
+  & footer {
+    padding-bottom: 92px;
+  }
 
   & .copy {
     color: var(--color-primary-standard);
   }
 
   & .row {
     padding-bottom: 48px;
+
+    &:last-child {
+      padding-bottom: 0px;
+    }
   }
 
   & .column {
@@ -186,7 +200,6 @@
 
   & header {
     padding-left: 0px;
-    margin-bottom: 80px;
 
     & h3 {
       font-family: var(--content-font);
@@ -324,7 +337,7 @@
   }
 
   .details {
-    padding: 0px 0px 20px var(--grid-padding-XL);
+    padding: 0px 0px 0px var(--grid-padding-XL);
 
     & .label {
       font-size: var(--details-label-font-size-XL);
@@ -382,7 +395,7 @@
   }
 
   .details {
-    padding: 0px 0px 20px var(--grid-padding-L);
+    padding: 0px 0px 0px var(--grid-padding-L);
 
     & .label {
       font-size: var(--details-label-font-size-L);