lukechilds
/
zap-desktop
mirror of https://github.com/lukechilds/zap-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix(design): redesign activities based on brandons screenshot

renovate/lint-staged-8.x
Jack Mallers 7 years ago
parent
27a6f3c803
commit
72e0c28e43
6 changed files with 200 additions and 198 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/routes/activity/components/Activity.js
  2. 1
      app/routes/activity/components/Activity.scss
  3. 151
      app/routes/activity/components/components/Activity.scss
  4. 89
      app/routes/activity/components/components/Invoice/Invoice.js
  5. 73
      app/routes/activity/components/components/Payment/Payment.js
  6. 80
      app/routes/activity/components/components/Transaction/Transaction.js

2
app/routes/activity/components/Activity.js
View File

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

1
app/routes/activity/components/Activity.scss
View File

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

151
app/routes/activity/components/components/Activity.scss
View File

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

89
app/routes/activity/components/components/Invoice/Invoice.js
View File

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

73
app/routes/activity/components/components/Payment/Payment.js
View File

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

80
app/routes/activity/components/components/Transaction/Transaction.js
View File

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

Write Preview
Loading…
Cancel
Save