fix(tx modal): redo header

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

@@ -6,6 +6,10 @@ import Transaction from './Transaction'
 import Payment from './Payment'
 import Invoice from './Invoice'
 
+import { MdClose } from 'react-icons/lib/md'
+
+import styles from './Modal.scss'
+
 const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker }) => {
   const MODAL_COMPONENTS = {
     TRANSACTION: Transaction,
@@ -43,6 +47,11 @@ const Modal = ({ modalType, modalProps, hideActivityModal, ticker, currentTicker
       parentSelector={() => document.body}
       style={customStyles}
     >
+      <div className={styles.closeContainer}>
+        <span onClick={() => hideActivityModal()}>
+          <MdClose />
+        </span>
+      </div>
       <SpecificModal {...modalProps} ticker={ticker} currentTicker={currentTicker} />
     </ReactModal>
   )

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

@@ -0,0 +1,13 @@
+@import '../../../../../variables.scss';
+
+.closeContainer {
+  background: $lightgrey;
+  text-align: right;
+  padding: 10px;
+
+  span {
+    color: $darkestgrey;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}

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

@@ -24,7 +24,6 @@ const Transaction = ({ transaction, ticker, currentTicker }) => (
           }
         </h2>
         <h1>
-          <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
           <span className={styles.value}>
             {
               ticker.currency === 'usd' ?
@@ -33,6 +32,7 @@ const Transaction = ({ transaction, ticker, currentTicker }) => (
                 btc.satoshisToBtc(transaction.amount)
             }
           </span>
+          <i>BTC</i>
         </h1>
       </div>
       <h3 onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${transaction.tx_hash}`)}>{transaction.tx_hash}</h3>

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

@@ -6,39 +6,25 @@
     background: $lightgrey;
 
     .title {
+      display: flex;
+      flex-direction: row;
+
       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;
 
-    svg {
-      width: 15px;
-      height: 20px;
-      vertical-align: top;
-    }
-
-    span svg[data-icon='ltc'] {
-      width: 30px;
-      height: 30px;
-      vertical-align: top;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
+    .value {
+      font-size: 24px;
     }
 
-    .value {
-      font-size: 45px;
+    i {
+      margin-left: 2px;
     }
   }
 
@@ -46,7 +32,6 @@
     font-size: 14px;
     text-align: center;
     color: $darkestgrey;
-    margin-top: 30px;
     cursor: pointer;
 
     &:hover {
@@ -56,14 +41,14 @@
 
   h2 {
     text-align: center;
+    margin-right: 10px;
     margin-bottom: 30px;
     text-transform: uppercase;
-    letter-spacing: 1.5px;
     font-size: 24px;
   }
 
   dl {
-    padding: 40px 40px 0px 40px;
+    padding: 40px 40px 40px 40px;
   }
 
   dt {
@@ -79,8 +64,8 @@
   dd {
     text-align: right;
     font-weight: 400;
-    padding: 29px 0;
+    padding: 30px 0 10px 0;
     margin-left: 0;
-    border-top: 1px solid $darkgrey;
+    border-bottom: 1px solid $darkgrey;
   }
-}
+}