Browse Source

fix(header): redesign activity header

renovate/lint-staged-8.x
Jack Mallers 7 years ago
parent
commit
6c1eb42d36
  1. 15
      app/routes/activity/components/Activity.js
  2. 30
      app/routes/activity/components/Activity.scss
  3. 7
      app/routes/activity/components/components/Invoice/Invoice.js

15
app/routes/activity/components/Activity.js

@ -71,7 +71,7 @@ class Activity extends Component {
value={tab === 1 ? '' : invoicesSearchText}
onChange={event => (tab === 1 ? null : searchInvoices(event.target.value))}
className={`${styles.text} ${styles.input}`}
placeholder={tab === 1 ? 'Search transactions by amount, public key, channel' : 'Search requests by memo'}
placeholder={tab === 1 ? 'Search by amount, hash, memo, etc' : 'Search requests by memo'}
type='text'
id='invoiceSearch'
/>
@ -79,18 +79,7 @@ class Activity extends Component {
<div className={styles.activities}>
<header className={styles.header}>
<span
className={`${styles.title} ${tab === 1 ? styles.active : null}`}
onClick={() => this.setState({ tab: 1 })}
>
Payments
</span>
<span
className={`${styles.title} ${tab === 2 ? styles.active : null}`}
onClick={() => this.setState({ tab: 2 })}
>
Requests
</span>
<h2>Activity</h2>
</header>
<ul className={styles.activityContainer}>
{

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

@ -34,31 +34,19 @@
background: $lightgrey;
.header {
width: 75%;
padding: 60px 0 20px 0;
margin: 0 auto;
.title {
display: inline-block;
margin: 60px 0 20px 0;
padding: 5px 10px;
background: $lightgrey;
color: $darkestgrey;
h2 {
margin-left: auto;
margin-right: auto;
padding-left: 100px;
padding-right: 100px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: $darkestgrey;
font-size: 14px;
font-weight: 400;
letter-spacing: 1.6px;
cursor: pointer;
transition: all 0.5s;
&:first-child {
border-right: 1px solid $darkestgrey;
}
&.active {
color: $main;
font-weight: bold;
}
font-weight: 400;
}
}
}

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

@ -29,12 +29,7 @@ const Invoice = ({ invoice, ticker, currentTicker }) => (
</div>
<div className={styles.date}>
<Moment format='MMM Do'>
{
invoice.settled ?
invoice.settle_date * 1000
:
invoice.creation_date * 1000
}
{invoice.creation_date * 1000}
</Moment>
</div>
<div className={`${styles.amount} ${invoice.settled ? styles.positive : styles.negative}`}>

Loading…
Cancel
Save