(add) BalloEmissionFundsMetadata component layout
This commit is contained in:
Gabriel Rodriguez Alsina
parent
a8883a332f
commit
b1e6bb9c6f
|
|
@ -1,73 +0,0 @@
|
|||
html,
|
||||
body,
|
||||
p, h1, h2, h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
color: $base-text-color;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: $base-font-size;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $poa-purple;
|
||||
text-decoration: none;
|
||||
|
||||
&.sokol {
|
||||
color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: $container-max-width;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: $container-max-width) {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
@mixin btn-background-properties() {
|
||||
background-size: 14px 14px;
|
||||
padding-right: 45px;
|
||||
}
|
||||
|
||||
@mixin make-themed-btn($selector-name: '', $background-color: '', $box-shadow-color: '') {
|
||||
|
||||
@if($selector-name != '') {
|
||||
|
||||
&.#{ $selector-name } {
|
||||
background-color: $background-color;
|
||||
|
||||
@if($box-shadow-color != '') {
|
||||
box-shadow: 0px 5px 10px 0 rgba($box-shadow-color...);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken($background-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-position: calc(100% - 15px) 50%;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 42px;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.15s background-color;
|
||||
|
||||
@include make-themed-btn('btn-primary', $poa-purple, (92, 52, 162, 0.3));
|
||||
@include make-themed-btn('btn-success', $poa-green-color, (96, 219, 151, 0.3));
|
||||
@include make-themed-btn('btn-danger', $poa-danger-color, (242, 27, 87, 0.3));
|
||||
@include make-themed-btn('btn-freeze', $poa-freeze-color, (80, 187, 218, 0.3));
|
||||
|
||||
.sokol & {
|
||||
@include make-themed-btn('btn-primary', $sokol-cyan, (106, 201, 185, 0.3));
|
||||
@include make-themed-btn('btn-success', $sokol-cyan, (96, 219, 151, 0.3));
|
||||
@include make-themed-btn('btn-danger', $sokol-danger-color, (242, 76, 103, 0.33));
|
||||
@include make-themed-btn('btn-freeze', $sokol-freeze-color, (80, 187, 218, 0.3));
|
||||
}
|
||||
|
||||
&.btn-new {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-add.svg');
|
||||
@include btn-background-properties();
|
||||
}
|
||||
|
||||
&.btn-transparent {
|
||||
color: $poa-purple;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.sokol & {
|
||||
color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
&,
|
||||
.sokol & {
|
||||
color: #333333;
|
||||
cursor: default;
|
||||
background-color: #f0f0f0;;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
background-color: #f0f0f0;;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-finalize-white.svg');
|
||||
@include btn-background-properties();
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-finalize-black.svg');
|
||||
}
|
||||
}
|
||||
// helpers
|
||||
&.no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
&.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
&.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
|
||||
|
||||
|
||||
.hint {
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 1.38;
|
||||
padding-top: 12px;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
|
||||
a {
|
||||
color: $poa-purple;
|
||||
|
||||
.sokol & {
|
||||
color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +1,5 @@
|
|||
.lo-FormElement {
|
||||
margin-bottom: $base-grid-gap;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $gray-text-color;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
// TODO: delete
|
||||
@include form-element-base-style();
|
||||
height: $input-height;
|
||||
|
||||
// TODO: keep
|
||||
&[type='radio'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
@include form-element-base-style();
|
||||
height: 70px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
// TODO: delete
|
||||
@include form-element-base-style();
|
||||
@include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
|
||||
appearance: none;
|
||||
background-image: url('#{ $base-images-path }/Base/select.png');
|
||||
background-position: right 13px center;
|
||||
background-repeat: no-repeat;
|
||||
height: $input-height;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.frm-BallotEmissionFundsMetadata {
|
||||
margin-bottom: $base-grid-gap;
|
||||
}
|
||||
|
||||
.frm-BallotEmissionFundsMetadata_Row {
|
||||
@include form-row-base-styles();
|
||||
display: grid;
|
||||
grid-row-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (min-width: $breakpoint-xxl) {
|
||||
grid-column-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
color: $gray-text-color;
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
margin-left: 10px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.vt-VoteProgressBar_Percentage {
|
||||
|
|
@ -65,4 +65,5 @@
|
|||
float: right;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
@import "BallotAbout";
|
||||
@import "BallotCard";
|
||||
@import "BallotDataPair";
|
||||
@import "BallotEmissionFundsMetadata";
|
||||
@import "BallotFooter";
|
||||
@import "BallotInfoContainer";
|
||||
@import "BallotKeysMetadata";
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
&:focus {
|
||||
border-color: darken($base-border-color, 10%);
|
||||
color: $input-color;
|
||||
cursor: default;
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,3 @@
|
|||
@import 'layout/index';
|
||||
@import 'pages/index';
|
||||
@import 'components/index';
|
||||
|
||||
// @import 'application/base';
|
||||
// @import 'application/buttons';
|
||||
@import 'application/controls';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react'
|
||||
import moment from 'moment'
|
||||
import { FormInput } from '../FormInput'
|
||||
import { constants } from '../../utils/constants'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import { observable, action } from 'mobx'
|
||||
|
|
@ -12,6 +13,13 @@ export class BallotEmissionFundsMetadata extends React.Component {
|
|||
@observable beginDateTime
|
||||
@observable endDateTime
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.getEmissionFundsBalance()
|
||||
this.getNoActiveBallotExists()
|
||||
this.getDateTimeLimits()
|
||||
}
|
||||
|
||||
@action('Get EmissionFunds balance')
|
||||
getEmissionFundsBalance = async () => {
|
||||
const { contractsStore } = this.props
|
||||
|
|
@ -54,13 +62,6 @@ export class BallotEmissionFundsMetadata extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.getEmissionFundsBalance()
|
||||
this.getNoActiveBallotExists()
|
||||
this.getDateTimeLimits()
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.interval = setInterval(this.getEmissionFundsBalance, constants.getTransactionReceiptInterval)
|
||||
}
|
||||
|
|
@ -70,8 +71,9 @@ export class BallotEmissionFundsMetadata extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { ballotStore, contractsStore } = this.props
|
||||
const { ballotStore, contractsStore, networkBranch } = this.props
|
||||
let note, explorerLink
|
||||
|
||||
if (this.noActiveBallotExists === true) {
|
||||
note = (
|
||||
<p>
|
||||
|
|
@ -82,43 +84,35 @@ export class BallotEmissionFundsMetadata extends React.Component {
|
|||
} else if (this.noActiveBallotExists !== true) {
|
||||
note = <p>To be able to create a new ballot, the previous ballot of this type must be finalized.</p>
|
||||
}
|
||||
|
||||
if (constants.NETWORKS[contractsStore.netId].NAME.toLowerCase() === 'sokol') {
|
||||
explorerLink = `https://sokol.poaexplorer.com/address/search/${contractsStore.emissionFunds.address}`
|
||||
} else {
|
||||
explorerLink = `https://poaexplorer.com/address/${contractsStore.emissionFunds.address}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="hidden">
|
||||
<div className="left">
|
||||
<div className="form-el">
|
||||
<label htmlFor="receiver">Address of funds receiver</label>
|
||||
<input
|
||||
type="text"
|
||||
id="receiver"
|
||||
value={ballotStore.ballotEmissionFunds.receiver}
|
||||
onChange={e => ballotStore.changeBallotMetadata(e, 'receiver', 'ballotEmissionFunds')}
|
||||
/>
|
||||
<p className="hint">The address which the funds will be sent to, in case of the majority of votes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="form-el">
|
||||
<label htmlFor="amount">Current amount of funds</label>
|
||||
<input type="text" id="amount" value={this.emissionFundsBalance} disabled="disabled" />
|
||||
<p className="hint">
|
||||
Current balance of
|
||||
<a href={explorerLink} target="_blank">
|
||||
EmissionFunds contract
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="frm-BallotEmissionFundsMetadata">
|
||||
<div className="frm-BallotEmissionFundsMetadata_Row">
|
||||
<FormInput
|
||||
hint="The address which the funds will be sent to, in case of the majority of votes."
|
||||
id="receiver"
|
||||
networkBranch={networkBranch}
|
||||
onChange={e => ballotStore.changeBallotMetadata(e, 'receiver', 'ballotEmissionFunds')}
|
||||
title="Address of funds receiver"
|
||||
value={ballotStore.ballotEmissionFunds.receiver}
|
||||
/>
|
||||
<FormInput
|
||||
disabled={true}
|
||||
hint={`Current balance of <a href=${explorerLink} target="_blank">EmissionFunds contract</a>.`}
|
||||
id="amount"
|
||||
networkBranch={networkBranch}
|
||||
onChange={e => ballotStore.changeBallotMetadata(e, 'receiver', 'ballotEmissionFunds')}
|
||||
title="Current amount of funds"
|
||||
value={this.emissionFundsBalance}
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
{note}
|
||||
<br />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react'
|
||||
import Select from 'react-select'
|
||||
import { FormInput } from '../FormInput'
|
||||
import { FormSelect } from '../FormSelect'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
|
|
|
|||
|
|
@ -438,7 +438,7 @@ export class NewBallot extends React.Component {
|
|||
minThreshold = contractsStore.proxyBallotThreshold
|
||||
break
|
||||
case ballotStore.BallotType.emissionFunds:
|
||||
metadata = <BallotEmissionFundsMetadata />
|
||||
metadata = <BallotEmissionFundsMetadata networkBranch={networkBranch} />
|
||||
minThreshold = contractsStore.emissionFundsBallotThreshold
|
||||
break
|
||||
default:
|
||||
|
|
|
|||
Loading…
Reference in New Issue