fix(design): redesign activities based on brandons screenshot

app/routes/activity/components/Activity.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
 import { FaChain, FaBolt } from 'react-icons/lib/fa'
-import Payments from './components/Payments'
-import Invoices from './components/Invoices'
 
 import Invoice from './components/Invoice'
 import Payment from './components/Payment'

app/routes/activity/components/Activity.scss

@@ -47,6 +47,7 @@
 			color: $darkestgrey;
 			font-size: 14px;
 			font-weight: 400;
+			max-width: 964px;
 		}
 	}
 }

app/routes/activity/components/components/Activity.scss

@@ -16,107 +16,116 @@
   position: relative;
 }
 
-.label {
+.clock {
   display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
+  justify-content: center;
   align-items: center;
-  margin-right: 20px;
-  width: 65px;
-
-  h3 {
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 10px;
-    font-weight: 500;
-    margin-top: 10px;
-  }
-}
-
-.icon {
-  display: block;
-  flex: none;
-  position: relative;
-  width: 36px;
-  height: 36px;
-  border: 1px solid $darkestgrey;
-  border-radius: 50%;
+  position: absolute;
+  top: 0;
+  left: -100px;
+  width: 100px;
+  height: 77px;
 
   svg {
-    color: $main;
-    font-size: 16px;
-    vertical-align: middle;
-    display: flex;
-    top: 0;
-    left: 50%;
-    height: 100%;
-    margin: 0 auto;
+    font-size: 18px;
   }
 }
 
-.data {
+.date {
   display: flex;
-  flex-direction: row;
-  flex: 6 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-right: 50px;
 
-  .title {
-    flex: 8 0;
-  }
-}
+  time {
+    text-transform: uppercase;
 
-.subtitle, .date {
-  text-align: center;
-}
+    &:nth-child(1) {
+      display: flex;
+      align-items: center;
+      height: 38px;
+      font-size: 18px;
+      margin-bottom: 5px;
+    }
 
-.date {
-  padding-left: 20px;
-  flex: 1 0;
+    &:nth-child(2) {
+      font-size: 12px;
+    }
+   }
 }
 
-.amount {
-  flex: 1 0;
-  padding-left: 20px;
+.data {
+  display: flex;
+  flex-direction: column;
+  flex: 6;
+  justify-content: space-evenly;
 
-  &.negative {
-    font-weight: 200;
+  .title {
+    margin-bottom: 5px;
   }
 
-  &.positive {
-    color: $main;
-    font-weight: 500;
+  .icon, h3, span {
+    vertical-align: middle;
   }
 
-  section {
+  h3, span {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  .icon {
     display: inline-block;
-    vertical-align: top;
-    text-align: right;
-    font-size: 0;
-    margin: 0;
-    padding: 0;
-
-    &:nth-child(1) {
-      width: 20%;
+    flex: none;
+    position: relative;
+    width: 36px;
+    height: 36px;
+    border: 1px solid $darkestgrey;
+    border-radius: 50%;
+    margin-right: 15px;
+
+    svg {
+      color: $main;
+      font-size: 16px;
+      vertical-align: middle;
+      display: flex;
+      top: 0;
+      left: 50%;
+      height: 100%;
+      margin: 0 auto;
     }
+  }
 
-    &:nth-child(2) {
-      width: 80%;
+  h3 {
+    display: inline-block;
+
+    &:after {
+      content: " ";
+      display: inline-block;
+      width: 3px;
     }
   }
 
-  svg {
-    font-size: 20px;
+  span {
+    text-transform: uppercase;
   }
+}
 
-  span {
-    display: block;
+.amount {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  text-align: right;
+  font-size: 16px;
 
-    &:nth-child(1) {
-      font-size: 14px;
-    }
+  &.positive span:nth-child(1) {
+    font-weight: bold;
+    color: $main;
+  }
 
+  span {
     &:nth-child(2) {
-      font-size: 10px;
+      font-size: 12px;
     }
   }
 }
-

app/routes/activity/components/components/Invoice/Invoice.js

@@ -2,62 +2,65 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Moment from 'react-moment'
 import 'moment-timezone'
-import { FaBolt } from 'react-icons/lib/fa'
+import { FaBolt, FaClockO } from 'react-icons/lib/fa'
 import { btc } from '../../../../../utils'
 import CurrencyIcon from '../../../../../components/CurrencyIcon'
 import styles from '../Activity.scss'
 
 const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
   <div className={styles.container} onClick={() => showActivityModal('INVOICE', { invoice })}>
-    <div className={styles.label}>
-      <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
-        <FaBolt />
-      </i>
-      <h3>
-        {
-          invoice.settled ?
-            'Received'
-            :
-            'Requested'
-        }
-      </h3>
+    {
+      !invoice.settled ?
+        <div className={styles.clock}>
+          <i className='hint--top' data-hint='Request has not been paid'>
+            <FaClockO />
+          </i>
+        </div>
+        :
+        null
+    }
+    <div className={styles.date}>
+      <Moment format='D'>
+        {invoice.creation_date * 1000}
+      </Moment>
+      <Moment format='MMMM'>
+        {invoice.creation_date * 1000}
+      </Moment>
     </div>
     <div className={styles.data}>
       <div className={styles.title}>
+        <i className={`${styles.icon} hint--top`} data-hint='Lightning Network request'>
+          <FaBolt />
+        </i>
+        <h3>
+          { invoice.settled ? 'Received' : 'Requested' }
+        </h3>
+        <span>
+          {ticker.currency}
+        </span>
+      </div>
+      <div className={styles.subtitle}>
         {invoice.r_hash.toString('hex')}
       </div>
     </div>
-    <div className={styles.date}>
-      <Moment format='MMM Do'>
-        {invoice.creation_date * 1000}
-      </Moment>
-    </div>
     <div className={`${styles.amount} ${invoice.settled ? styles.positive : styles.negative}`}>
-      <section>
-        <CurrencyIcon
-          currency={ticker.currency}
-          crypto={ticker.crypto}
-          styles={{ verticalAlign: 'top', width: '24px' }}
-        />
-      </section>
-      <section>
-        <span className='hint--top' data-hint='Invoice amount'>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(invoice.value)
-          }
-        </span>
-        <span className='hint--bottom' data-hint='Invoice fee'>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(invoice.fee, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(invoice.fee)
-          }
-        </span>
-      </section>
+      <span className='hint--top' data-hint='Invoice amount'>
+        + 
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(invoice.value)
+        }
+      </span>
+      <span className='hint--bottom' data-hint='Invoice fee'>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(invoice.fee, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(invoice.fee)
+        }
+      </span>
     </div>
   </div>
 )

app/routes/activity/components/components/Payment/Payment.js

@@ -9,49 +9,48 @@ import styles from '../Activity.scss'
 
 const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
   <div className={styles.container} onClick={() => showActivityModal('PAYMENT', { payment })}>
-    <div className={styles.label}>
-      <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
-        <FaBolt />
-      </i>
-      <h3>
-        Sent
-      </h3>
+    <div className={styles.date}>
+      <Moment format='D'>
+        {payment.creation_date * 1000}
+      </Moment>
+      <Moment format='MMMM'>
+        {payment.creation_date * 1000}
+      </Moment>
     </div>
     <div className={styles.data}>
       <div className={styles.title}>
-        {payment.payment_hash}
+        <i className={`${styles.icon} hint--top`} data-hint='Lightning Network payment'>
+          <FaBolt />
+        </i>
+        <h3>
+          Sent
+        </h3>
+        <span>
+          {ticker.currency}
+        </span>
+      </div>
+      <div className={styles.subtitle}>
+        {payment.payment_hash.toString('hex')}
       </div>
-    </div>
-    <div className={styles.date}>
-      <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>
     </div>
     <div className={styles.amount}>
-      <section>
-        <CurrencyIcon
-          currency={ticker.currency}
-          crypto={ticker.crypto}
-          styles={{ verticalAlign: 'top', width: '24px' }}
-        />
-      </section>
-      <section>
-        <span className='hint--top' data-hint='Payment amount'>
-          -
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(payment.value, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(payment.value)
-          }
-        </span>
-        <span className='hint--bottom' data-hint='Payment fee'>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(payment.fee, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(payment.fee)
-          }
-        </span>
-      </section>
+      <span className='hint--top' data-hint='Payment amount'>
+        - 
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(payment.value, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(payment.value)
+        }
+      </span>
+      <span className='hint--bottom' data-hint='Payment fee'>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(payment.fee, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(payment.fee)
+        }
+      </span>
     </div>
   </div>
 )

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

@@ -9,56 +9,48 @@ import styles from '../Activity.scss'
 
 const Transaction = ({ transaction, ticker, currentTicker, showActivityModal }) => (
   <div className={styles.container} onClick={() => showActivityModal('TRANSACTION', { transaction })}>
-    <div className={styles.label}>
-      <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
-        <FaChain />
-      </i>
-      <h3>
-        {
-          transaction.amount < 0 ?
-            'Sent'
-            :
-            'Received'
-        }
-      </h3>
+    <div className={styles.date}>
+      <Moment format='D'>
+        {transaction.time_stamp * 1000}
+      </Moment>
+      <Moment format='MMMM'>
+        {transaction.time_stamp * 1000}
+      </Moment>
     </div>
     <div className={styles.data}>
       <div className={styles.title}>
+        <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
+          <FaChain />
+        </i>
+        <h3>
+          { transaction.amount > 0 ? 'Received' : 'Sent' }
+        </h3>
+        <span>
+          {ticker.currency}
+        </span>
+      </div>
+      <div className={styles.subtitle}>
         {transaction.tx_hash}
       </div>
     </div>
-    <div className={styles.date}>
-      <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>
-    </div>
-    <div className={`${styles.amount} ${transaction.amount < 0 ? styles.negative : styles.positive}`}>
-      <section>
-        <CurrencyIcon
-          currency={ticker.currency}
-          crypto={ticker.crypto}
-          styles={{ verticalAlign: 'top', width: '24px' }}
-        />
-      </section>
-      <section>
-        <span className='hint--top' data-hint='Transaction amount'>
-          {
-            ticker.currency === 'usd' ?
-              btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
-              :
-              btc.satoshisToBtc(transaction.amount)
-          }
-        </span>
-        <span className='hint--bottom' data-hint='Transaction fee'>
-          {
-            transaction.amount < 0 ?
-              ticker.currency === 'usd' ?
-                btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd)
-                :
-                btc.satoshisToBtc(transaction.total_fees)
-              :
-              null
-          }
-        </span>
-      </section>
+    <div className={`${styles.amount} ${transaction.amount > 0 ? styles.positive : styles.negative}`}>
+      <span className='hint--top' data-hint='Transaction amount'>
+        { transaction.amount > 0 ? '+' : '' }
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(transaction.amount, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(transaction.amount)
+        }
+      </span>
+      <span className='hint--bottom' data-hint='Transaction fee'>
+        {
+          ticker.currency === 'usd' ?
+            btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd)
+            :
+            btc.satoshisToBtc(transaction.total_fees)
+        }
+      </span>
     </div>
   </div>
 )