Skip to content

Commit

Permalink
MINT-244 Static markup for the Rewards page (#162)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ipavlenko
ipavlenko authored and Boris Shevchenko committed Jun 20, 2017
1 parent 43343c3 commit ef47883
Show file tree
Hide file tree
Showing 19 changed files with 545 additions and 244 deletions.
95 changes: 11 additions & 84 deletions src/components/dashboard/Rewards.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import React from 'react'
import PropTypes from 'prop-types'

import { RaisedButton, FloatingActionButton, FontIcon, FlatButton } from 'material-ui'

import { RaisedButton, FloatingActionButton, FontIcon } from 'material-ui'
import RewardsPeriod from './RewardsPeriod'
import SplitSection from './SplitSection'
import ProgressSection from './ProgressSection'

import './Rewards.scss'

class Rewards extends React.Component {

constructor(props) {
super(props)
static propTypes = {
period: PropTypes.number,
progress: PropTypes.number,
}

static defaultProps = {
period: 1,
progress: 0
}

render() {
Expand All @@ -34,87 +37,11 @@ class Rewards extends React.Component {
</FloatingActionButton>
)}
>
<div styleName="content">
<div styleName="marker">
<div styleName="number">#{this.props.period}</div>
</div>
<div styleName="main">
<div styleName="info">
<h5>Rewards period #{this.props.period}</h5>
<div styleName="table">
<div styleName="col1">
<div styleName="row">
<span styleName="entry">
<span styleName="entry1">Start date: </span>
<span styleName="entry2">20 May 2017</span>
</span>
<span styleName="entry">
<span styleName="entry1">End date: </span>
<span styleName="entry2">11 July 2017 (in 45 days)</span>
</span>
</div>
<div styleName="row">
<span styleName="entry">
<span styleName="entry1">Total TIME tokens deposited: </span><br />
<span styleName="entry2">68 120 TIME (77% of total count)</span>
</span>
</div>
<div styleName="row">
<span styleName="entry">
<span styleName="entry1">Unique shareholders</span><br />
<span styleName="entry2">45 713</span>
</span>
</div>
</div>
<div styleName="col2">
<div styleName="row">
Dividends accumulated for period:
</div>
<div styleName="row">
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHUS</span>
</span>
</div>
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHAU</span>
</span>
</div>
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHEU</span>
</span>
</div>
</div>
</div>
</div>
<div styleName="progress">
<ProgressSection value={this.props.progress} />
</div>
<div styleName="links">
<FlatButton label="Withdraw time tokens" primary />
</div>
</div>
</div>
</div>
<RewardsPeriod period={this.props.period} progress={this.props.period} />
</SplitSection>
</div>
)
}
}

Rewards.propTypes = {
period: PropTypes.number,
progress: PropTypes.number,
}

Rewards.defaultProps = {
period: 1,
progress: 0
}

export default Rewards
122 changes: 5 additions & 117 deletions src/components/dashboard/Rewards.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,124 +19,12 @@
margin: 24px;
}

.content {

min-height: 100px;
margin: 65px 65px 25px 65px;
display: flex;
flex-direction: row;
border-radius: 2px;
overflow: hidden;

.marker {
flex: 0 0 auto;
width: 193px;
background: $color-primary-1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 200px;

.number {
flex: 0 0 auto;
font-size: 112px;
font-weight: 400;
text-align: center;
color: $color-white;
text-shadow: $text-shadow-title;
}
}

.main {
flex: 1 1 auto;
background-color: $color-white;

.info {
padding: 24px 24px;
color: $color-primary-0;

h5 {
display: block;
margin: 0;
padding: 0;
font-size: 24px;
font-weight: 400;
text-align: left;
}

.label {
font-size: 14px;
}

.bold {
font-size: 16px;
}

.table {
display: table;
width: 100%;

.row {
margin: 15px 0;
}

.col1 {
display: table-cell;
vertical-align: top;
width: 70%;
}

.col2 {
display: table-cell;
vertical-align: top;
text-align: right;
width: 30%;
}

.entry {

margin-right: 40px;
line-height: 18px;

.entry1 {
font-size: 14px;
font-weight: 300;
}
.entry2 {
font-size: 16px;
font-weight: 400;
}
}

.value {

.value1 {
font-size: 24px;
font-weight: 300;
line-height: 31px;
vertical-align: baseline;
}

.value2 {
font-size: 16px;
// line-height: 41px;
vertical-align: baseline;
opacity: 0.5;
}
}
}

.progress {
margin: 0 25px 0 0;
}
.root {
position: relative;

.links {
margin: 0px -16px;
}
:global {
.RewardsPeriod__root {
margin: 65px 65px 25px 65px;
}
}
}

.root {
position: relative;
}
123 changes: 123 additions & 0 deletions src/components/dashboard/RewardsPeriod.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import React from 'react'
import PropTypes from 'prop-types'
import { FlatButton } from 'material-ui'
import ProgressSection from './ProgressSection'
import './RewardsPeriod.scss'

export default class RewardsPeriod extends React.Component {

static propTypes = {
period: PropTypes.number,
progress: PropTypes.number
}

render() {
return (
<div styleName="root" className="RewardsPeriod__root">
<div styleName="marker" className="RewardsPeriod__marker">
<div styleName="number">#{this.props.period}</div>
</div>
<div styleName="main" className="RewardsPeriod__main">
<div styleName="info">
<div styleName="table">
<div styleName="col1">
<h5>Rewards period #{this.props.period}</h5>
</div>
<div styleName="col2">
<div styleName="status">
<span styleName="badgeOrange">Ongoing</span>
</div>
</div>
</div>
<div styleName="table">
<div styleName="col1">
<div styleName="row">
<span styleName="entry">
<span styleName="entry1">Start date: </span>
<span styleName="entry2">20 May 2017</span>
</span>
<span styleName="entry">
<span styleName="entry1">End date: </span>
<span styleName="entry2">11 July 2017 (in 45 days)</span>
</span>
</div>
<div styleName="row">
<span styleName="entry">
<span styleName="entry1">Total TIME tokens deposited: </span><br />
<span styleName="entry2">68 120 TIME (77% of total count)</span>
</span>
</div>
<div styleName="row">
<span styleName="entry">
<span styleName="entry1">Unique shareholders</span><br />
<span styleName="entry2">45 713</span>
</span>
</div>
<div styleName="row">
<span styleName="entry">
<span styleName="entry1">Your TIME tokens eligible for rewards in the period:</span><br />
<span styleName="entry2">1 120 TIME (2.45455544% of total deposited amount)</span>
</span>
</div>
</div>
<div styleName="col2">
<div styleName="row">
Dividends accumulated for period:
</div>
<div styleName="row">
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHUS</span>
</span>
</div>
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHAU</span>
</span>
</div>
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHEU</span>
</span>
</div>
</div>
<div styleName="row">
Your approximate revenue for period:
</div>
<div styleName="row">
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHUS</span>
</span>
</div>
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHAU</span>
</span>
</div>
<div>
<span styleName="value">
<span styleName="value1">1 512 000</span>
<span styleName="value2">.00124 LHEU</span>
</span>
</div>
</div>
</div>
</div>
<div styleName="progress">
<ProgressSection value={this.props.progress} />
</div>
<div styleName="links">
<FlatButton label="Withdraw time tokens" primary />
</div>
</div>
</div>
</div>
)
}
}
Loading

0 comments on commit ef47883

Please sign in to comment.