fix(tx modal): restyle tx modal

app/routes/activity/components/components/Modal/Modal.js

@@ -23,7 +23,9 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
       right: '0',
       bottom: 'auto',
       width: '40%',
-      margin: '50px auto'
+      margin: '50px auto',
+      borderRadius: 'none',
+      padding: '0'
     }
   }
 

app/routes/activity/components/components/Modal/Transaction/Transaction.js

@@ -1,3 +1,4 @@
+import { shell } from 'electron'
 import React from 'react'
 import PropTypes from 'prop-types'
 
@@ -12,31 +13,42 @@ import styles from './Transaction.scss'
 
 const Transaction = ({ transaction, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <h2>
-      {
-        transaction.amount < 0 ?
-          'Sent'
-          :
-          'Received'
-      }
-    </h2>
-    <h3>{transaction.tx_hash}</h3>
-    <h1>
-      <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
-      <span className={styles.value}>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(transaction.amount)
-        }
-      </span>
-    </h1>
+    <header>
+      <div className={styles.title}>
+        <h2>
+          {
+            transaction.amount < 0 ?
+              'Sent'
+              :
+              'Received'
+          }
+        </h2>
+        <h1>
+          <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
+          <span className={styles.value}>
+            {
+              ticker.currency === 'usd' ?
+                btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
+                :
+                btc.satoshisToBtc(transaction.amount)
+            }
+          </span>
+        </h1>
+      </div>
+      <h3 onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${transaction.tx_hash}`)}>{transaction.tx_hash}</h3>
+    </header>
     <dl>
       <dt>Confirmations</dt>
       <dd>{transaction.num_confirmations}</dd>
       <dt>Fee</dt>
-      <dd>{transaction.total_fees}</dd>
+      <dd>
+        {
+        ticker.currency === 'usd' ?
+          btc.satoshisToUsd(transaction.total_fees)
+          :
+          btc.satoshisToBtc(transaction.total_fees)
+        }
+      </dd>
       <dt>Date</dt>
       <dd>
         <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>

app/routes/activity/components/components/Modal/Transaction/Transaction.scss

@@ -1,15 +1,29 @@
 @import '../../../../../../variables.scss';
 
 .container {
-  padding: 40px;
+  header {
+    padding: 5px 40px 20px 40px;
+    background: $lightgrey;
+
+    .title {
+      h2 {
+        width: 50%;
+        margin: 0 auto 10px auto;
+        padding: 5px 0;
+        text-transform: uppercase;
+        border-bottom: 1px solid $black;
+      }
+    }
+  }
 
   h1 {
+    margin-top: 10px;
     text-align: center;
     color: $main;
-    margin: 60px 30px 60px 0;
 
     svg {
-      font-size: 30px;
+      width: 15px;
+      height: 20px;
       vertical-align: top;
     }
 
@@ -24,15 +38,20 @@
     }
 
     .value {
-      font-size: 75px;
+      font-size: 45px;
     }
   }
 
   h3 {
     font-size: 14px;
     text-align: center;
-    color: $black;
-    font-weight: bold;
+    color: $darkestgrey;
+    margin-top: 30px;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   h2 {
@@ -43,6 +62,10 @@
     font-size: 24px;
   }
 
+  dl {
+    padding: 40px 40px 0px 40px;
+  }
+
   dt {
     text-align: left;
     float: left;
@@ -56,7 +79,7 @@
   dd {
     text-align: right;
     font-weight: 400;
-    padding: 19px 0;
+    padding: 29px 0;
     margin-left: 0;
     border-top: 1px solid $darkgrey;
   }