Merge pull request #166 from gabitoesmiapodo/issue-164-styles
(Feature) Add new styles to DApp.
This commit is contained in:
Vadim Arasev
GitHub
commit
178bb4d760
|
|
@ -5110,7 +5110,8 @@
|
|||
},
|
||||
"jsbn": {
|
||||
"version": "0.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"json-schema": {
|
||||
"version": "0.2.3",
|
||||
|
|
|
|||
27
src/App.js
27
src/App.js
|
|
@ -18,28 +18,28 @@ class App extends Component {
|
|||
showMobileMenu: false,
|
||||
navigationData: [
|
||||
{
|
||||
icon: '',
|
||||
icon: 'link-icon-all',
|
||||
title: 'All',
|
||||
url: commonStore.rootPath,
|
||||
class: ''
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
icon: 'link-icon-active',
|
||||
title: 'Active',
|
||||
url: `${commonStore.rootPath}/active`,
|
||||
class: ''
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
icon: 'link-icon-to-finalize',
|
||||
title: 'To Finalize',
|
||||
url: `${commonStore.rootPath}/tofinalize`,
|
||||
class: ''
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
icon: 'link-icon-add',
|
||||
title: 'New Ballot',
|
||||
url: `${commonStore.rootPath}/new`,
|
||||
class: 'btn btn-new-ballot btn-success btn-new'
|
||||
class: 'btn btn-new-ballot btn-success btn-new no-shadow text-capitalize'
|
||||
}
|
||||
// {
|
||||
// 'icon': '',
|
||||
|
|
@ -107,14 +107,21 @@ class App extends Component {
|
|||
return this.state.navigationData[0].title
|
||||
}
|
||||
}
|
||||
getNetIdClass() {
|
||||
const { contractsStore } = this.props
|
||||
return contractsStore.netId === '77' ? 'sokol' : ''
|
||||
}
|
||||
|
||||
render() {
|
||||
const { commonStore, contractsStore } = this.props
|
||||
const loading = commonStore.loading ? <Loading netId={contractsStore.netId} /> : ''
|
||||
console.log(contractsStore.netId)
|
||||
|
||||
const search = this.shouldShowSearch() ? (
|
||||
<input type="search" className="search-input" onChange={this.onSearch} />
|
||||
<div className={`search-container ${this.getNetIdClass()}`}>
|
||||
<div className="container">
|
||||
<input type="search" className="search-input" onChange={this.onSearch} placeholder="Search..." />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
|
|
@ -129,15 +136,15 @@ class App extends Component {
|
|||
onMenuToggle={this.toggleMobileMenu}
|
||||
showMobileMenu={this.state.showMobileMenu}
|
||||
/>
|
||||
{search}
|
||||
<div
|
||||
className={`app-container ${this.state.showMobileMenu ? 'app-container-open-mobile-menu' : ''} ${
|
||||
this.state.netId === '77' ? 'sokol' : ''
|
||||
contractsStore.netId === '77' ? 'sokol' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="main-title-container">
|
||||
<div className={`main-title-container ${this.shouldShowSearch() ? '' : 'no-search-on-top'}`}>
|
||||
<span className="main-title">{this.getTitle()}</span>
|
||||
{search}
|
||||
</div>
|
||||
</div>
|
||||
<Route exact path={`/`} render={this.onBallotsRender} />
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@ const styles = netId => {
|
|||
case '77':
|
||||
return sokol
|
||||
case '99':
|
||||
default:
|
||||
return core
|
||||
default:
|
||||
return {}
|
||||
}
|
||||
}
|
||||
const Loading = ({ netId }) => (
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,6 @@
|
|||
@import 'stylesheets/application/layout';
|
||||
@import 'stylesheets/application/loading';
|
||||
@import 'stylesheets/application/main-title';
|
||||
@import 'stylesheets/application/nav';
|
||||
@import 'stylesheets/application/new';
|
||||
@import 'stylesheets/application/search';
|
||||
@import 'stylesheets/application/settings';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M17 18a1 1 0 0 1-1-1v-1H2v1a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm0-5H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h14V7zM4 8h1a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm4 0h6a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2zm9-4H1a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1h14V1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 448 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M17 18a1 1 0 0 1-1-1v-1H2v1a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm0-5H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h14V7zM4 8h1a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm4 0h6a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2zm9-4H1a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1h14V1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 448 B |
|
|
@ -0,0 +1,11 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
>
|
||||
<path
|
||||
fill="#6ac9b9"
|
||||
fill-rule="evenodd"
|
||||
d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 242 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 198 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M16 10.95V11H2v-.05a2.502 2.502 0 0 1 0-4.9V6h14v.05a2.502 2.502 0 0 1 0 4.9zM16 8H2v1h14V8zm0-3.05V5H2v-.05a2.502 2.502 0 0 1 0-4.9V0h14v.05a2.502 2.502 0 0 1 0 4.9zM16 2H2v1h14V2zM2 12.05V12h14v.05a2.502 2.502 0 0 1 0 4.9V17H2v-.05a2.502 2.502 0 0 1 0-4.9zM2 15h14v-1H2v1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 397 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M16 10.95V11H2v-.05a2.502 2.502 0 0 1 0-4.9V6h14v.05a2.502 2.502 0 0 1 0 4.9zM16 8H2v1h14V8zm0-3.05V5H2v-.05a2.502 2.502 0 0 1 0-4.9V0h14v.05a2.502 2.502 0 0 1 0 4.9zM16 2H2v1h14V2zM2 12.05V12h14v.05a2.502 2.502 0 0 1 0 4.9V17H2v-.05a2.502 2.502 0 0 1 0-4.9zM2 15h14v-1H2v1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 397 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path fill="#333" fill-rule="evenodd" d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path fill="#FFF" fill-rule="evenodd" d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18">
|
||||
<path fill="#333" fill-rule="evenodd" d="M9 18H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v11h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 234 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18">
|
||||
<path fill="#6ac9b9" fill-rule="evenodd" d="M14 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v4.969h11V5H3.491l1.215 1.215a1.033 1.033 0 0 1-1.46 1.46L.325 4.754a1.013 1.013 0 0 1-.228-.35C.091 4.392.08 4.383.075 4.371a1.036 1.036 0 0 1 .221-1.136L3.235.296a1.038 1.038 0 1 1 1.469 1.469L3.469 3H14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 399 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18">
|
||||
<path fill="#5C34A2" fill-rule="evenodd" d="M14 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v4.969h11V5H3.491l1.215 1.215a1.033 1.033 0 0 1-1.46 1.46L.325 4.754a1.013 1.013 0 0 1-.228-.35C.091 4.392.08 4.383.075 4.371a1.036 1.036 0 0 1 .221-1.136L3.235.296a1.038 1.038 0 1 1 1.469 1.469L3.469 3H14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 399 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path fill="#333" fill-rule="evenodd" d="M17 18h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6h-4v4h4v-4zm1-4h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6h-4v4h4V2zM7 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h4v-4zm.728-8.514l-.118.118-.127.128h-.001l-.881.882-.78.779c-.023.03-.034.066-.062.093l-.805.805a.86.86 0 0 1-.222.441c-.2.2-.471.269-.732.237a.869.869 0 0 1-.732-.237.86.86 0 0 1-.222-.441l-.56-.559-.127-.128-.118-.118-1-1a.88.88 0 1 1 1.245-1.245l1.246 1.245.268.268.175-.175c.023-.03.034-.065.062-.093l1.246-1.245.754-.755 1.246-1.245a.88.88 0 1 1 1.245 1.245l-1 1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 743 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M13.711 13.711a1.01 1.01 0 0 1-1.427 0l-1.97-1.97A6.444 6.444 0 0 1 6.5 13 6.5 6.5 0 1 1 13 6.5c0 1.43-.476 2.741-1.259 3.814l1.97 1.97a1.01 1.01 0 0 1 0 1.427zM6.5 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 326 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M13.711 13.711a1.01 1.01 0 0 1-1.427 0l-1.97-1.97A6.444 6.444 0 0 1 6.5 13 6.5 6.5 0 1 1 13 6.5c0 1.43-.476 2.741-1.259 3.814l1.97 1.97a1.01 1.01 0 0 1 0 1.427zM6.5 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 326 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 262 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 262 B |
|
|
@ -0,0 +1,42 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="178px"
|
||||
height="26px"
|
||||
>
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
|
||||
text {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(255, 255, 255)"
|
||||
d="M8.938,17.812 L8.125,17.812 L8.125,20.188 L8.122,20.188 C8.122,20.193 8.125,20.198 8.125,20.203 C8.125,20.643 7.761,21.000 7.313,21.000 L0.813,21.000 C0.364,21.000 0.000,20.643 0.000,20.203 C0.000,20.198 0.003,20.193 0.003,20.188 L0.000,20.188 L0.000,5.812 L0.003,5.812 C0.003,5.807 0.000,5.802 0.000,5.797 C0.000,5.357 0.364,5.000 0.813,5.000 L8.938,5.000 C12.527,5.000 15.437,7.868 15.437,11.406 C15.437,14.944 12.527,17.812 8.938,17.812 Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(255, 255, 255)"
|
||||
d="M25.188,5.000 C29.675,5.000 33.313,8.582 33.313,13.000 C33.313,17.418 29.675,21.000 25.188,21.000 C20.700,21.000 17.062,17.418 17.062,13.000 C17.062,8.582 20.700,5.000 25.188,5.000 Z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(255, 255, 255)"
|
||||
d="M52.000,20.493 C52.000,20.766 51.775,20.987 51.497,20.987 L33.064,20.987 C33.042,20.990 33.023,21.000 33.000,21.000 C32.724,21.000 32.500,20.776 32.500,20.500 C32.500,20.391 32.542,20.296 32.601,20.214 L32.592,20.197 L41.743,5.388 L41.763,5.388 C41.811,5.164 42.004,4.993 42.246,4.993 C42.488,4.993 42.680,5.164 42.728,5.388 L42.749,5.388 L52.000,20.296 L51.968,20.339 C51.985,20.389 52.000,20.439 52.000,20.493 Z"
|
||||
/>
|
||||
<text
|
||||
font-family="Nunito"
|
||||
fill="rgb(255, 255, 255)"
|
||||
font-size="14px"
|
||||
x="63px"
|
||||
y="17px"
|
||||
>Governance App</text>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(96, 219, 151)"
|
||||
d="M177.000,0.000 C177.552,0.000 178.000,0.448 178.000,1.000 L178.000,25.000 C178.000,25.552 177.552,26.000 177.000,26.000 C176.448,26.000 176.000,25.552 176.000,25.000 L176.000,1.000 C176.000,0.448 176.448,0.000 177.000,0.000 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,27 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="178"
|
||||
height="26"
|
||||
> <defs>
|
||||
<style type="text/css">
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
|
||||
text {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
fill="#FFF"
|
||||
fill-rule="evenodd"
|
||||
d="M36.528 20H24.272c-.167 0-.334-.028-.499-.068l.018.068h-5.287l-1.607-5.969H.969A.96.96 0 0 1 0 13.078l.003-.015H0V5.906C0 4.853.86 4 1.922 4l.016.002V4h30.275c1.061 0 2.153.855 2.437 1.91l3.285 12.18c.285 1.055-.345 1.91-1.407 1.91zM7.723 6.866H3.361l1.169 4.298h4.362L7.723 6.866zm7.209 0h-4.361l1.169 4.298h4.361l-1.169-4.298zm11.743 10.985h1.923l-.517-1.911h-1.922l.516 1.911zm5.201-10.985h-8.17l2.194 8.119h8.171l-2.195-8.119zm2.453 9.074h-1.922l.516 1.911h1.923l-.517-1.911zm-33.61.047v-.049h12.969v.002h1.557L16.341 20H1.938v-.002L1.922 20A1.914 1.914 0 0 1 0 18.094v-1.188h.005c0-.006-.005-.01-.005-.015 0-.44.308-.793.719-.904z"
|
||||
/> <text
|
||||
x="47"
|
||||
y="17"
|
||||
fill="#FFF"
|
||||
font-size="14"
|
||||
> Sokol Test Network </text>
|
||||
<path
|
||||
fill="#FFF"
|
||||
fill-rule="evenodd"
|
||||
d="M177 0a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"
|
||||
/> </svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 817 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,22 +1,34 @@
|
|||
.ballot-types {
|
||||
border-bottom: 1px solid #e5eef9;
|
||||
padding: 0 30px 10px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid $base-border-color;
|
||||
padding: 20px 30px 10px;
|
||||
|
||||
&-i {
|
||||
$i-height: 30px;
|
||||
|
||||
color: $gray-text-color;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
line-height: $i-height;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
height: 30px;
|
||||
width: 3px;
|
||||
transform: translateY(-50%);
|
||||
background-color: $primary-color;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
content: '';
|
||||
height: $i-height;
|
||||
left: -30px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
.sokol & {
|
||||
background-color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_active {
|
||||
|
|
@ -25,6 +37,11 @@
|
|||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,9 @@ a {
|
|||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sokol {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
@ -44,7 +47,7 @@ hr {
|
|||
height: 1px;
|
||||
margin: 10px 0 30px;
|
||||
border: 0;
|
||||
background-color: #e5eef9;
|
||||
background-color: $base-border-color;
|
||||
}
|
||||
|
||||
.center {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,28 @@
|
|||
@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 {
|
||||
|
|
@ -19,42 +44,77 @@ textarea {
|
|||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.15s background-color;
|
||||
&.btn-primary {
|
||||
background-color: $primary-color;
|
||||
&:hover {
|
||||
background-color: lighten($primary-color, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
background-color: $secondary-color;
|
||||
&:hover {
|
||||
background-color: lighten($secondary-color, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-success {
|
||||
background-color: $success-color;
|
||||
&:hover {
|
||||
background-color: lighten($success-color, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-danger {
|
||||
background-color: $danger-color;
|
||||
&:hover {
|
||||
background-color: lighten($danger-color, 10%);
|
||||
}
|
||||
|
||||
@include make-themed-btn('btn-primary', $primary-color, (92, 52, 162, 0.3));
|
||||
@include make-themed-btn('btn-success', $success-color, (96, 219, 151, 0.3));
|
||||
@include make-themed-btn('btn-danger', $danger-color, (242, 27, 87, 0.3));
|
||||
@include make-themed-btn('btn-freeze', $freeze-color, (80, 187, 218, 0.3));
|
||||
|
||||
.sokol & {
|
||||
@include make-themed-btn('btn-primary', $primary-color-sokol, (106, 201, 185, 0.3));
|
||||
@include make-themed-btn('btn-success', $success-color-sokol, (96, 219, 151, 0.3));
|
||||
@include make-themed-btn('btn-danger', $danger-color-sokol, (242, 76, 103, 0.33));
|
||||
@include make-themed-btn('btn-freeze', $freeze-color-sokol, (80, 187, 218, 0.3));
|
||||
}
|
||||
|
||||
&.btn-new {
|
||||
padding-right: 45px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAYAAADhXXHAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA/JJREFUeNrcmUtME1EUhv8ppVDegpaHgFTAN7FYRHwQ0agRFWNc6sIY3bjXsDO4VBMX6lpdaMTEBTFujK+Fr/AG4wutLxQxihGLwNCWGc8tt8mo2N6ZtlA8yZ8QMvfeb07PvefcM5KqqpgpZgpzfD3pEWmA5CEpJFUjhf9/gD9XH9ZqzLM6VUtqJsmqMZP5+Fq9a+t52EHqJPnUyJiPz+eINOw50ogaHRvh84fkkAQ2WCvJSZKiuHcYRDtpZbCHQsG6SMVTuOFfk0qMnAZTDQq+nksvbOs0gGqBW0Vhz/EYnU5zco6gMesgPSRZYyBhjZLWkLr+BdvJgWPFGGj5ZGFQSyoTmUEe8eJs/QNcPtWBvjdueGQfolRjlHGuvzzbTKoUmeFF+xecOHQbHo+CWTYrquvmw1lTgFx7KqzJFkiRPZFbSKv+hJVJCSKjW2/14vSR+1CVibES0eUUpaBy8zyUVeWiaHEmEpPMkYIdIyWyP+IaGhoC1dNW0dHvnn1D292PE3mH289BD152fMXb5wMY/Cr7vZuelQhzfLiFHczckQ8Cr79Lz2ivV2FFxaQV3IeXP9DncuPxwz4scuagYkM+SpbPhiUhLhxgxnc8AFuqZ6TiUxBsPykUHr09g+h/O4SnLf0EnY3qHXZ/eBj0dGnAxczSdMEqYjvf6xknL//Al96f6L7XB8e6PGzZuwi589L0bkI/n+nKmS6TBlqsRFL0HVMMeuDTMO5cdeHonhu4eLIN7u+y3riFKdEan6a3/FNVY2cT+0XkYQ9uXOrB4bpruH7+GcbHhV7cv6CJJlhh5CoUrkkmCa4n3/wJRti98rC3w1CpbNBSMywoWDALjup8VG0tRHKqRRx2eMjj5stL0WRNSbf4j7Cy1XkoX58H29xU3e4xHzy6il2XfaT4aHiWZbKFThul43wsrsiGrSAFcXG6jy+f9uhi3s0SZw1Na6KYZJDVO+1Y4LAhKycJ8RbDicGthX2lB1YKcUjal2Zi+74llAxs9PMnRCLlvtLCNpGqwj0N5hanoe7AMlRuKiQvmkK+lA5r0sIeJx0TrbrYTzzhYQr0BDOyC1NQs7sYa7fZ/Z6MsI1xvt8yV7doPZuVm4zMHCsy5iShYmMBQRZRTCZH67bQPVmvq1a0NTQ26lNbbr5XP/cOqVE2n7YnNmPvYMz281tlLNgo5/ln34C9SWN4CTViva9G7TU8WK+LdUQqphG2bbImXbDG3HT0uoI254KllhI+MCZAQ8EGgNumIIZVvk5J0GQkMBGLnQtRPCVG+fwrhfL8//ZNISa+1khh3qfqeQOilF+XzX/cOFReOLt5mdcUKEoM3dtm0hfGXwIMAC+6tL4wp5PYAAAAAElFTkSuQmCC');
|
||||
background-size: 18px 18px;
|
||||
background-image: url('#{ $base-images-path }/icons/icon-add.svg');
|
||||
@include btn-background-properties();
|
||||
}
|
||||
&.btn-load-more {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-load-more.svg');
|
||||
border-radius: 5px;
|
||||
border: 2px solid $primary-color;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
@include btn-background-properties();
|
||||
.sokol & {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-load-more-sokol.svg');
|
||||
border-color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
&.btn-transparent {
|
||||
color: $primary-color;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
color: #788f9a;
|
||||
cursor: default;
|
||||
background-color: #dde2e8;
|
||||
&:hover {
|
||||
background-color: #dde2e8;
|
||||
&,
|
||||
.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,8 +1,9 @@
|
|||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
color: $gray-text-color;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
@ -10,7 +11,7 @@ textarea {
|
|||
@extend %form-el;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
|
|
@ -30,10 +31,10 @@ select {
|
|||
@include image-2x('./images/select@2x.png', 8px, 4px);
|
||||
@extend %form-el;
|
||||
appearance: none;
|
||||
padding-right: 30px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 13px center;
|
||||
background-image: url(./images/select.png);
|
||||
background-position: right 13px center;
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -54,93 +55,85 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
// @extend %form-el;
|
||||
transition: 0.3s color,
|
||||
0.3s background-color,
|
||||
0.3s border-color;
|
||||
cursor: pointer;
|
||||
.radio-button {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
line-height: $input-height;
|
||||
|
||||
input[type='radio']:checked + & {
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&_icon {
|
||||
padding-left: 37px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 16px;
|
||||
background-position: left 11px center;
|
||||
}
|
||||
|
||||
&_add {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZ0lEQVR4AWIgF8SYLPIE4mdQ7MlAbwC1GNB+HWAAAMJQGL5f9z9C2jGWWTIASk/8eAS8D/LMV4YC4DX/AgAAAAAAQFk1f5xcUVH5RqgBFoAWD0F5j25+AQAAAAAAuHWcmgCQK3q6ahPyvQbTMeZShQAAAABJRU5ErkJggg==')
|
||||
}
|
||||
|
||||
&_remove {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAc0lEQVR42u2XwQ3AIAwDM1SXgBmYrrNVyRglbz5WcRGtZEv3Q/g+icBQ2nGWxJP7IZ4UYwPKEb5bIN4QqElMlF9JNUWh5pwH7wmqnMd3C8Qw5zT8nhgPGhV8nwQkIAEJSEACEvi6AM8vBXyhQBB/wTVvwA5ymYbEmIcsVAAAAABJRU5ErkJggg==');
|
||||
}
|
||||
|
||||
&_swap {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABBklEQVR4AWLABWJMFgGarwfdCoAgCsNbxujz1LZt2wyquHi7BrVtW9tTc7ZXO3Mn+eL0P20v62APtiBRcR6C3aC/WBOLv9mTjD9CDUe8h4g3S8abOOKNoC1agQjTgGPQlk2ZBmxKD8iFe4vxRYj473FQRIwYUFzn7SO6pUccKZzkiHnFfYhmwSxMQIiLP8MHfJXEIZwPB3AEldxxfzgh3tRYBgTAxR9vbo2cI9pAS4/oI0bUO/O/DHLTqHkEHc+BU9CWPEKJacAeaMtWpD8nTJsGJMGWxfgNyxceRMaJeAZHfIyIZ3LEh4l4Fkc8EK7/iGdzvQL6wcGX+K3VODEiFqbfJCvingAZLf+WroN1/QAAAABJRU5ErkJggg==');
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transition: 0.3s border-color;
|
||||
left: -40px;
|
||||
top: ($input-height - 24px) / 2;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
&-label {
|
||||
@include not-selectable-text();
|
||||
border-radius: 3px;
|
||||
border: 1px solid $base-border-color;
|
||||
|
||||
input[type='radio']:checked + & {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
color: $gray-text-color;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
transition: 0.25s background-color;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
transition: 0.3s transform,
|
||||
0.3s opacity;
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
left: -34px;
|
||||
top: ($input-height - 12px) / 2;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
input[type='radio'] {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
input[type='radio']:checked + &-label {
|
||||
background-color: $primary-color;
|
||||
|
||||
input[type='radio']:checked + & {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0px 5px 10px 0 rgba(92, 52, 162, 0.3);
|
||||
color: #fff;
|
||||
.sokol & {
|
||||
background-color: $primary-color-sokol;
|
||||
border-color: $primary-color-sokol;
|
||||
box-shadow: 0px 5px 10px 0 rgba(106, 201, 185, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
.keys-radio-button-tr {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.keys-radio-button-td {
|
||||
min-width: 30%;
|
||||
margin-right: 5%;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.radio-button-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: 15px;
|
||||
margin-right: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-el {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: $gray-text-color;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
margin-top: 15px;
|
||||
word-break: break-all;
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 1.38;
|
||||
padding-top: 12px;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
position: absolute;
|
||||
|
||||
&.sokol {
|
||||
background-color: $secondary-color;
|
||||
background-color: $primary-color-sokol;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -31,15 +31,19 @@
|
|||
}
|
||||
|
||||
&-logo {
|
||||
@include image-2x('#{ $base-images-path}/logos/logo_voting_dapp_footer@2x.png');
|
||||
background-image: url('#{ $base-images-path}/logos/logo_voting_dapp_footer.png');
|
||||
background-image: url('#{ $base-images-path}/logos/logo-poa.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
height: 20px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
order: 0;
|
||||
width: 123px;
|
||||
width: 139px;
|
||||
|
||||
&.sokol {
|
||||
background-image: url('#{ $base-images-path}/logos/logo-sokol.svg');
|
||||
width: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
&-rights {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
right: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 123;
|
||||
z-index: 124;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -18,10 +18,6 @@
|
|||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
width: 93%;
|
||||
padding: 22px 0;
|
||||
|
|
@ -29,7 +25,7 @@
|
|||
}
|
||||
|
||||
&.sokol {
|
||||
background-color: $secondary-color;
|
||||
background-color: $primary-color-sokol;
|
||||
}
|
||||
|
||||
// logos
|
||||
|
|
@ -70,9 +66,10 @@
|
|||
|
||||
.link {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
margin-left: 30px;
|
||||
line-height: 18px;
|
||||
margin-left: 34px;
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
transition: opacity linear 0.1s;
|
||||
|
|
@ -97,26 +94,26 @@
|
|||
background-repeat: no-repeat;
|
||||
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-events.svg');
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all.svg');
|
||||
}
|
||||
&-set-metadata {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-status.svg');
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active.svg');
|
||||
}
|
||||
&-pending-changes {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-statistics.svg');
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.link-icon {
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-events-sokol.svg');
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all-sokol.svg');
|
||||
}
|
||||
&-set-metadata {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-status-sokol.svg');
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active-sokol.svg');
|
||||
}
|
||||
&-pending-changes {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-statistics-sokol.svg');
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize-sokol.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -149,7 +146,7 @@
|
|||
&.sokol {
|
||||
.header-mobile-menu-container {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
background-color: $secondary-color-darker;
|
||||
background-color: $primary-color-darker-sokol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -169,18 +166,28 @@
|
|||
}
|
||||
|
||||
.btn.btn-new-ballot {
|
||||
background-image: url('#{ $base-images-path }/btn-new-success.png');
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
opacity: 1;
|
||||
.link-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.btn.btn-new-ballot {
|
||||
background-color: #fff;
|
||||
background-image: url('#{ $base-images-path }/icons/icon-add-sokol.svg');
|
||||
color: $primary-color-sokol;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.select-network-id {
|
||||
background: #fff;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,69 @@
|
|||
$padding-left-items: 25px;
|
||||
|
||||
.info-container {
|
||||
background-color: #f8f8f8;
|
||||
margin-bottom: 30px;
|
||||
margin-left: -#{ $desktop-indent };
|
||||
margin-right: -#{ $desktop-indent };
|
||||
padding-bottom: #{ $desktop-indent };
|
||||
padding-left: #{ $desktop-indent };
|
||||
padding-right: #{ $desktop-indent };
|
||||
padding-top: #{ $desktop-indent };
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-left: -#{ $tablet-indent };
|
||||
margin-right: -#{ $tablet-indent };
|
||||
padding-left: #{ $tablet-indent };
|
||||
padding-right: #{ $tablet-indent };
|
||||
}
|
||||
|
||||
}
|
||||
.info {
|
||||
color: #000;
|
||||
|
||||
.ballots & {
|
||||
@include image-2x('./images/info@2x.png', 32px, 32px);
|
||||
align-items: center;
|
||||
background-image: url(./images/info.png);
|
||||
background-position: left center;
|
||||
background-position: 0 2px;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 1.71;
|
||||
margin-bottom: 20px;
|
||||
max-width: 100%;
|
||||
min-height: 32px;
|
||||
padding-left: 44px;
|
||||
word-break: break-all;
|
||||
padding-left: 30px;
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-minimum {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-min.svg');
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
&-details {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-info.svg');
|
||||
background-size: 10px 18px;
|
||||
position: relative;
|
||||
&.collapsed {
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toggle-show {
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.new-form & {
|
||||
|
|
@ -20,38 +71,47 @@
|
|||
}
|
||||
|
||||
&-title {
|
||||
position: relative;
|
||||
color: $gray-text-color;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 30px;
|
||||
padding-left: 44px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
@include image-2x('./images/info@2x.png', 32px, 32px);
|
||||
background-image: url('#{ $base-images-path }/icons/icon-info.svg');
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px 18px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 32px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-i {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
line-height: 1.71;
|
||||
margin-bottom: 20px;
|
||||
padding-left: $padding-left-items;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 12px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 7px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
$circle-dimensions: 6px;
|
||||
|
||||
background-color: #333;
|
||||
border-radius: 50%;
|
||||
background-color: $primary-color;
|
||||
content: '';
|
||||
height: $circle-dimensions;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
width: $circle-dimensions;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.app-container {
|
||||
padding-bottom: 30px;
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&.app-container-open-mobile-menu {
|
||||
&:before {
|
||||
background-color: rgba(78, 44, 137, .8);
|
||||
|
|
@ -9,9 +9,9 @@
|
|||
content: '';
|
||||
display: none;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
top: $header-mobile-menu-container-height + $header-height_mobile;
|
||||
z-index: 1234;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
.content {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-top: $header-height_mobile;
|
||||
padding-top: $header-height_mobile + $search-container-height;
|
||||
}
|
||||
&.content-menu-open {
|
||||
padding-top: $header-mobile-menu-container-height + $header-height_mobile;
|
||||
|
|
@ -49,4 +49,4 @@
|
|||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.main-title {
|
||||
font-size: 24px;
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
.nav {
|
||||
font-size: 0;
|
||||
|
||||
&-i {
|
||||
transition: 0.3s color;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 40px;
|
||||
color: $gray-text-color;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
line-height: normal;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover,
|
||||
&_active {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
&_active {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -30px;
|
||||
height: 3px;
|
||||
background-color: #08b3f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,27 +10,30 @@
|
|||
}
|
||||
|
||||
&-side {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&_left {
|
||||
background-color: #f8f8f8;
|
||||
padding-top: 0;
|
||||
width: 30%;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&_right {
|
||||
width: 70%;
|
||||
border-left: 1px solid #e5eef9;
|
||||
border-left: 1px solid $base-border-color;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
width: 70%;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,47 @@
|
|||
.search-input {
|
||||
@include default-text-input-styles();
|
||||
.search-container {
|
||||
background-color: #502d8d;
|
||||
box-sizing: border-box;
|
||||
height: $search-container-height;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6McEf5GAAAARXRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lMU1RVWFlcXV5iY2tsdXZ4iYqLo6Spqqusra7Cw8TFysvM29zm5+jr8vP4+fzSh6raAAABM0lEQVR4AYWTeVeCQBTFr6AtuaTYkpUVlqZm0JIaLhjBfP+v1NxDyDCcA7+/3nLPecu8QULFGs/9MPTnE6uCPIa9EntWtgGN5lJkWDaR4WwnNHYWFM5DxsLXfqN22Ok7sXeR5ts/jHy0Er/1Tj9oJ77J+tEICqOIfZiIsalnXlUwNvifn/O50HA5bQWky45OoHHMTrsgY2nNkONFhscgX9K6Ro6eDH+C+NKqI0ddhn0QFjtAjhpb2wuOigQscVpQorzJScGYRYv65aLSVTvQcLhqI7YHQjJEhqHyWDC/+dxPUHjkc3tm4nYC6t/Sg3GFdgGX8ZHNeo1qtdGb0ZNEd4oiEBq6ouNlc95zRMW9+nHWaXptG3jQFTCs6YJfbzG1OL+m0EkVt2WKLUoUGxRxs91c/QFA1F3oKOgExAAAAABJRU5ErkJggg==);
|
||||
background-position: 15px 50%;
|
||||
&.sokol {
|
||||
background-color: $primary-color-darker-sokol;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 70px;
|
||||
z-index: 123;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input.search-input {
|
||||
background-color: transparent;
|
||||
background-image: url('#{ $base-images-path }/icons/icon-search.svg');
|
||||
background-position: 0 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 16px;
|
||||
display: inline-block;
|
||||
padding-left: 40px;
|
||||
width: 300px;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 30px;
|
||||
outline: none;
|
||||
padding-left: 30px;
|
||||
width: 100%;
|
||||
&,
|
||||
&:focus
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #fff;
|
||||
}
|
||||
.sokol & {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-search-sokol.svg');
|
||||
}
|
||||
@include placeholder-full($color: rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -102,80 +102,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .socials {
|
||||
// font-size: 0;
|
||||
|
||||
// .footer & {
|
||||
// right: 0;
|
||||
// }
|
||||
|
||||
// &-i {
|
||||
// transition: 0.3s background-color;
|
||||
// position: relative;
|
||||
// display: inline-block;
|
||||
// vertical-align: top;
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// border-radius: 50%;
|
||||
// background-color: fade-out(#fff, 0.8);
|
||||
|
||||
// &:not(:first-child) {
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
|
||||
// &:hover {
|
||||
// background-color: fade-out(#fff, 0.6);
|
||||
// }
|
||||
|
||||
// &:before {
|
||||
// @include image-2x('./images/socials@2x.png', 16px, 69px);
|
||||
// transform: translate(-50%, -50%);
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// top: 50%;
|
||||
// background-image: url(./images/socials.png);
|
||||
// }
|
||||
|
||||
// &_github {
|
||||
// &:before {
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// background-position: 0 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &_oracles {
|
||||
// &:before {
|
||||
// width: 16px;
|
||||
// height: 14px;
|
||||
// background-position: 0 -16px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &_reddit {
|
||||
// &:before {
|
||||
// width: 15px;
|
||||
// height: 13px;
|
||||
// background-position: 0 -30px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &_telegram {
|
||||
// &:before {
|
||||
// width: 16px;
|
||||
// height: 14px;
|
||||
// background-position: 0 -43px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &_twitter {
|
||||
// &:before {
|
||||
// width: 15px;
|
||||
// height: 12px;
|
||||
// background-position: 0 -57px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.vote-scale {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
clear: left;
|
||||
height: 10px;
|
||||
margin-top: 34px;
|
||||
overflow: hidden;
|
||||
height: 6px;
|
||||
margin-top: 30px;
|
||||
border-radius: 3px;
|
||||
background-color: fade-out(#e5eef9, 0.5);
|
||||
|
||||
&-not-finalized {
|
||||
background-color: #ffffff;
|
||||
|
|
@ -14,23 +14,45 @@
|
|||
height: 100%;
|
||||
border-radius: 3px;
|
||||
|
||||
&_yes {
|
||||
background-color: $danger-color;;
|
||||
&_no {
|
||||
background-color: $danger-color;
|
||||
.sokol & {
|
||||
background-color: $danger-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_no {
|
||||
&_yes {
|
||||
background-color: $success-color;
|
||||
.sokol & {
|
||||
background-color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_send {
|
||||
background-color: $success-color;
|
||||
.sokol & {
|
||||
background-color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_burn {
|
||||
background-color: $danger-color;
|
||||
.sokol & {
|
||||
background-color: $danger-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_freeze {
|
||||
background-color: $freeze-color;
|
||||
.sokol & {
|
||||
background-color: $freeze-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--container {
|
||||
width: 100%;
|
||||
max-width: 343px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
float: right;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--value {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
.ballots-about {
|
||||
$cell-right-padding: 12px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
|
@ -16,15 +18,18 @@
|
|||
display: table-row;
|
||||
width: 100% !important;
|
||||
}
|
||||
& .ballots-about-td-value {
|
||||
padding-right: $cell-right-padding;
|
||||
}
|
||||
&_name {
|
||||
width: 20%;
|
||||
width: 12%;
|
||||
}
|
||||
&_action {
|
||||
width: 10%;
|
||||
width: 8%;
|
||||
}
|
||||
// 25
|
||||
&_type {
|
||||
width: 10%;
|
||||
width: 8%;
|
||||
}
|
||||
&_proposal {
|
||||
width: 30%;
|
||||
|
|
@ -37,12 +42,20 @@
|
|||
width: 50%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_proposed_receiver {
|
||||
width: 45%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_funds_amount {
|
||||
width: 23%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_proposed-min-threshold {
|
||||
width: 70%;
|
||||
width: 30%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_contract-type {
|
||||
width: 40%;
|
||||
width: 25%;
|
||||
word-break: break-all;
|
||||
}
|
||||
&_proposed-address {
|
||||
|
|
@ -50,35 +63,13 @@
|
|||
word-break: break-all;
|
||||
}
|
||||
&_time {
|
||||
width: 8%;
|
||||
text-align: right;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
text-align: left;
|
||||
}
|
||||
#{$this}-i--title {
|
||||
text-align: right;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
width: 20%;
|
||||
}
|
||||
&--title {
|
||||
color: #333;
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
top: -#{ $desktop-indent * 2 + 10 };
|
||||
z-index: 1;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
position: relative;
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&:first-child .ballots-about-td-value {
|
||||
border-left: none;
|
||||
|
|
@ -91,17 +82,19 @@
|
|||
}
|
||||
&-td {
|
||||
&.ballots-about-td-value {
|
||||
border-right: 1px solid $base-border-color;
|
||||
font-size: 13px;
|
||||
min-height: 56px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
|
||||
.ballots-about-i_action &,
|
||||
.ballots-about-i_type & {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
border: none;
|
||||
min-height: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: table-cell;
|
||||
|
|
@ -118,4 +111,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
.ballots {
|
||||
.title {
|
||||
margin-bottom: 50px;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: $tablet-indent;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: $mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
&-about {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
&-i {
|
||||
@extend %white-block;
|
||||
background-color: #fff;
|
||||
&-scale {
|
||||
border-top: 1px solid $base-border-color;
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
padding: 30px 0 0 0;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: block;
|
||||
margin-top: $tablet-indent;
|
||||
padding: $tablet-indent 0 0 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-top: $mobile-indent;
|
||||
padding: $mobile-indent 0 0 0;
|
||||
}
|
||||
&-column {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
margin-right: 40px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: 30px;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.reverse-responsive {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&--name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&--see-all-proposal {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
&--vote {
|
||||
@extend %_button;
|
||||
&-label {
|
||||
color: #333;
|
||||
cursor: default;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
&-label-right {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
&_btn {
|
||||
line-height: 44px;
|
||||
min-width: 55px;
|
||||
text-transform: capitalize;
|
||||
&.xl {
|
||||
min-width: 78px;
|
||||
}
|
||||
&.m-r-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&.m-l-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
&.m-r-20,
|
||||
&.m-l-20 {
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
overflow: auto;
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-primary {
|
||||
color: $primary-color;
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
.color-danger {
|
||||
color: $danger-color;
|
||||
.sokol & {
|
||||
color: $danger-color-sokol;
|
||||
}
|
||||
}
|
||||
.color-success {
|
||||
color: $success-color;
|
||||
.sokol & {
|
||||
color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +27,11 @@
|
|||
}
|
||||
|
||||
p {
|
||||
color: $gray-text-color;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
max-width: 340px;
|
||||
padding-left: 15px;
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
.ballots {
|
||||
.title {
|
||||
margin-bottom: 50px;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: $tablet-indent;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: $mobile-indent;
|
||||
}
|
||||
}
|
||||
&-i {
|
||||
@extend %white-block;
|
||||
background-color: rgba(240, 240, 240, 0.2);
|
||||
&-not-finalized {
|
||||
background-color: #fff;
|
||||
border-color: rgba($primary-color, 0.3);
|
||||
}
|
||||
&-scale {
|
||||
border-top: 1px solid #e5eef9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
margin-top: $desktop-indent;
|
||||
padding: $desktop-indent 0 0 0;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: block;
|
||||
margin-top: $tablet-indent;
|
||||
padding: $tablet-indent 0 0 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-top: $mobile-indent;
|
||||
padding: $mobile-indent 0 0 0;
|
||||
}
|
||||
&-column {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 48%;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
&:last-child {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--name {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&--created {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6M9jT1MAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lKU1RZYmNrbHV2iYqLo6Spqqusra7Cw8TFysvM29zk5ufo6/Lz+Pn8DzgVHgAAATNJREFUeNplk+1agkAQhQfRykQTrJTEUjSCvtTQECPk/q+qPQ7LsnR+7DOzL898LiRlOP46zfN0vXQM0tXydkWlndeqs/620LTtK3Z7LBo6OpLd5fDzl6nVubSnIXv3zIY/8N4HVGrwBj8bwjaR77SgmhYn5DWF5eE7ZoribkZkoIeI78ZJMmYrQkcGjZD9mq+SokjY6qKqEfniDIiFYMR6FqZPn+J8+A9dYX5QKs5eBaFz3p4wUkLwizrkvB2UcoZXJUwYHiqIsDclnBzAvicyrFYQpBW0lK0oqVbkEHR1fzEEHl/YhCHG1yKaoYi5zubl4Mn8wsqe6uwRK4tNmHaG717VsiP4mV1uih9G4FrttuUG7GGGTLOioUwyRI51Ftv6o94rtNcfNbCz2uB32KycCv0BfU5XCrQEyKwAAAAASUVORK5CYII=);
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
padding-left: 20px;
|
||||
}
|
||||
&--see-all-proposal {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
&--time {
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
&--to-close {
|
||||
color: #333;
|
||||
text-transform: uppercase;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&--vote {
|
||||
@extend %_button;
|
||||
&-label {
|
||||
cursor: default;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
&-label-right {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
&_yes {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&_no {
|
||||
margin-left: 15px;
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
overflow: auto;
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-primary {
|
||||
color: $primary-color;
|
||||
}
|
||||
.color-danger {
|
||||
color: $danger-color;
|
||||
}
|
||||
.color-success {
|
||||
color: $success-color;
|
||||
}
|
||||
|
|
@ -29,3 +29,40 @@
|
|||
color: $input-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder-full($color: #fff, $font-size: 14px) {
|
||||
&::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: $color!important;
|
||||
font-size: $font-size!important;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: $color!important;
|
||||
font-size: $font-size!important;
|
||||
opacity: 1;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: $color!important;
|
||||
font-size: $font-size!important;
|
||||
opacity: 1;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: $color!important;
|
||||
font-size: $font-size!important;
|
||||
}
|
||||
}
|
||||
|
||||
// #avoid text selection
|
||||
@mixin not-selectable-text() {
|
||||
-moz-user-select: none;
|
||||
/* Firefox all */
|
||||
-ms-user-select: none;
|
||||
/* IE 10+ */
|
||||
-webkit-user-select: none;
|
||||
/* Chrome all / Safari all */
|
||||
user-select: none;
|
||||
/* Likely future */
|
||||
}
|
||||
|
|
@ -11,17 +11,12 @@
|
|||
|
||||
%white-block {
|
||||
background-color: #fff;
|
||||
border: 1px solid $base-border-color;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 80px;
|
||||
border: 1px solid $base-border-color;
|
||||
margin-bottom: 30px;
|
||||
padding: $desktop-indent;
|
||||
transition: 0.15s box-shadow;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0 0 55px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: $tablet-indent;
|
||||
padding: $tablet-indent;
|
||||
|
|
@ -48,6 +43,9 @@
|
|||
&:focus {
|
||||
border-color: $primary-color;
|
||||
color: $input-color;
|
||||
.sokol & {
|
||||
border-color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,39 +3,42 @@ $base-images-path: '../assets/images';
|
|||
// colors
|
||||
$primary-color: #5c34a2;
|
||||
$primary-color-darker: #45277a;
|
||||
$secondary-color: #6ac9b9;
|
||||
$secondary-color-darker: darken(#6ac9b9, 10%);
|
||||
$danger-color: #ff4949;
|
||||
$success-color: #13ce66;
|
||||
$gray-text-color: #778f9b;
|
||||
|
||||
// buttons
|
||||
$btn-primary-bg: $primary-color;
|
||||
$btn-secondary-bg: #61db97;
|
||||
$primary-color-sokol: #6ac9b9;
|
||||
$primary-color-darker-sokol: #41b19e;
|
||||
$danger-color: #f21b57;
|
||||
$freeze-color: #50bbda;
|
||||
$freeze-color-sokol: #50bbda;
|
||||
$danger-color-sokol: #f24c67;
|
||||
$success-color: #60db97;
|
||||
$success-color-sokol: #6ac9b9;
|
||||
$gray-text-color: #333;
|
||||
|
||||
// borders
|
||||
$base-border-color: #b8c1cb;
|
||||
$base-border-color: #e4e4e4;
|
||||
|
||||
// widths
|
||||
$container-width: 960px;
|
||||
$container-responsive-width: 980px;
|
||||
$tablet-width: 768px;
|
||||
$mobile-width: 414px;
|
||||
$mobile-width: 767px;
|
||||
$small-mobile-width: 360px;
|
||||
|
||||
// header
|
||||
$header-links-container-height: 70px;
|
||||
$header-height_mobile: 70px;
|
||||
|
||||
// search
|
||||
$search-container-height: 50px;
|
||||
|
||||
// mobile menu
|
||||
$header-mobile-menu-container-height: 172px;
|
||||
$header-mobile-menu-container-height: 220px;
|
||||
|
||||
// footer
|
||||
$footer-height_desktop: 66px;
|
||||
$footer-height_mobile: 132px;
|
||||
|
||||
// misc
|
||||
$desktop-indent: 20px;
|
||||
$desktop-indent: 30px;
|
||||
$tablet-indent: 15px;
|
||||
$mobile-indent: 10px;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import swal from 'sweetalert2'
|
|||
const ACCEPT = 1
|
||||
const REJECT = 2
|
||||
const USDateTimeFormat = 'MM/DD/YYYY h:mm:ss A'
|
||||
const maxDetailsLength = 500
|
||||
|
||||
const zeroTimeTo = '00:00'
|
||||
|
||||
|
|
@ -47,7 +48,9 @@ export class BallotCard extends React.Component {
|
|||
|
||||
@computed
|
||||
get finalizeButtonClass() {
|
||||
const cls = this.isFinalized ? 'btn btn-primary disabled' : 'btn btn-primary'
|
||||
const cls = this.isFinalized
|
||||
? 'btn btn-primary btn-finalize disabled text-capitalize'
|
||||
: 'btn btn-primary btn-finalize text-capitalize'
|
||||
return cls
|
||||
}
|
||||
|
||||
|
|
@ -358,6 +361,13 @@ export class BallotCard extends React.Component {
|
|||
} else {
|
||||
this.getHasAlreadyVoted()
|
||||
}
|
||||
this.state = {
|
||||
detailsCollapsed: this.memo.length > maxDetailsLength
|
||||
}
|
||||
}
|
||||
|
||||
toggleDetails = () => {
|
||||
this.setState(prevState => ({ detailsCollapsed: !prevState.detailsCollapsed }))
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -407,6 +417,14 @@ export class BallotCard extends React.Component {
|
|||
)
|
||||
let showHasAlreadyVotedLabel = this.hasAlreadyVoted ? hasAlreadyVotedLabel : ''
|
||||
const threshold = this.getThreshold(contractsStore, votingType)
|
||||
let toggleShowMore =
|
||||
this.memo.length > maxDetailsLength ? (
|
||||
<span className="toggle-show more" onClick={this.toggleDetails}>
|
||||
{this.state.detailsCollapsed ? 'More...' : 'Less'}
|
||||
</span>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
return (
|
||||
<div className={ballotClass}>
|
||||
<div className="ballots-about">
|
||||
|
|
@ -416,7 +434,6 @@ export class BallotCard extends React.Component {
|
|||
</div>
|
||||
<div className="ballots-about-td ballots-about-td-value">
|
||||
<p className="ballots-i--name">{this.creator}</p>
|
||||
<p className="ballots-i--created">{this.startTime}</p>
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
|
|
@ -425,41 +442,104 @@ export class BallotCard extends React.Component {
|
|||
<p className="ballots-about-i--title">Ballot Time</p>
|
||||
</div>
|
||||
<div className="ballots-about-td ballots-about-td-value">
|
||||
<p className="ballots-i--time">{this.timeTo.displayValue}</p>
|
||||
<p className="ballots-i--to-close">{this.timeTo.title}</p>
|
||||
<p className="ballots-i--created">{this.startTime}</p>
|
||||
<p className="ballots-i--time">
|
||||
{this.timeTo.displayValue} ({this.timeTo.title})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ballots-i-scale">
|
||||
<div className="ballots-i-scale-column">
|
||||
{/* TODO: Send / Burn / Freeze */}
|
||||
{/* <div className="ballots-i-scale">
|
||||
<div className="ballots-i-scale-column ballots-i-scale-column-3">
|
||||
<button
|
||||
className="btn btn-success ballots-i--vote_btn xl m-r-20"
|
||||
onClick={e => this.vote({ choice: ACCEPT })}
|
||||
type="button"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesForNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesForPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div
|
||||
className="vote-scale--fill vote-scale--fill_send"
|
||||
style={{ width: `${this.votesForPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ballots-i-scale-column ballots-i-scale-column-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => this.vote({ choice: REJECT })}
|
||||
className="btn btn-danger ballots-i--vote_no"
|
||||
className="btn btn-danger ballots-i--vote_btn xl m-r-20"
|
||||
>
|
||||
No
|
||||
Burn
|
||||
</button>
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">Votes: {this.votesAgainstNumber}</p>
|
||||
<p className="vote-scale--votes">{this.votesAgainstNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div
|
||||
className="vote-scale--fill vote-scale--fill_yes"
|
||||
className="vote-scale--fill vote-scale--fill_burn"
|
||||
style={{ width: `${this.votesAgainstPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ballots-i-scale-column">
|
||||
<div className="ballots-i-scale-column ballots-i-scale-column-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => this.vote({ choice: REJECT })}
|
||||
className="btn btn-freeze ballots-i--vote_btn xl m-r-20"
|
||||
>
|
||||
Freeze
|
||||
</button>
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">Votes: {this.votesForNumber}</p>
|
||||
<p className="vote-scale--votes">{this.votesAgainstNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div
|
||||
className="vote-scale--fill vote-scale--fill_freeze"
|
||||
style={{ width: `${this.votesAgainstPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* No / yes */}
|
||||
<div className="ballots-i-scale">
|
||||
<div className="ballots-i-scale-column">
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => this.vote({ choice: REJECT })}
|
||||
className="btn btn-danger ballots-i--vote_btn m-r-20"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesAgainstNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div
|
||||
className="vote-scale--fill vote-scale--fill_no"
|
||||
style={{ width: `${this.votesAgainstPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ballots-i-scale-column reverse-responsive">
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesForNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesForPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div className="vote-scale--fill vote-scale--fill_no" style={{ width: `${this.votesForPercents}%` }} />
|
||||
<div className="vote-scale--fill vote-scale--fill_yes" style={{ width: `${this.votesForPercents}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-success ballots-i--vote_yes"
|
||||
className="btn btn-success ballots-i--vote_btn m-l-20"
|
||||
onClick={e => this.vote({ choice: ACCEPT })}
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -467,11 +547,17 @@ export class BallotCard extends React.Component {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="info">
|
||||
Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal
|
||||
<div className="info-container">
|
||||
<div className="info info-minimum">
|
||||
Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal
|
||||
</div>
|
||||
<div className={`info info-details ${this.state.detailsCollapsed ? 'collapsed' : ''}`}>
|
||||
{this.state.detailsCollapsed
|
||||
? this.memo.substr(0, this.memo.lastIndexOf(' ', maxDetailsLength))
|
||||
: this.memo}
|
||||
{toggleShowMore}
|
||||
</div>
|
||||
</div>
|
||||
<div className="info">{this.memo}</div>
|
||||
<hr />
|
||||
<div className="ballots-footer">
|
||||
<div className="ballots-footer-left">
|
||||
<button type="button" onClick={e => this.finalize(e)} className={this.finalizeButtonClass}>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ import { BallotCard } from './BallotCard.jsx'
|
|||
export class BallotKeysCard extends React.Component {
|
||||
render() {
|
||||
let { id, votingState, pos } = this.props
|
||||
|
||||
let affectedKeyClassName
|
||||
let affectedKey = <p>{votingState.affectedKey}</p>
|
||||
let newVotingKey
|
||||
let newPayoutKey
|
||||
let miningKeyDiv
|
||||
|
||||
if (votingState.isAddMining) {
|
||||
affectedKeyClassName = 'ballots-about-i_key_wide'
|
||||
if (votingState.newVotingKey || votingState.newPayoutKey) {
|
||||
|
|
@ -63,6 +63,23 @@ export class BallotKeysCard extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
{miningKeyDiv}
|
||||
{/* TODO: New ballot type */}
|
||||
{/* <div className="ballots-about-i ballots-about-i_proposed_receiver">
|
||||
<div className="ballots-about-td ballots-about-td-title">
|
||||
<p className="ballots-about-i--title">Proposed Receiver</p>
|
||||
</div>
|
||||
<div className="ballots-about-td ballots-about-td-value">
|
||||
<p>0x4432c441EE96ef387CEC496709967Be6E27f57C8</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ballots-about-i ballots-about-i_funds_amount">
|
||||
<div className="ballots-about-td ballots-about-td-title">
|
||||
<p className="ballots-about-i--title">Funds Amount</p>
|
||||
</div>
|
||||
<div className="ballots-about-td ballots-about-td-value">
|
||||
<p>10000 POA</p>
|
||||
</div>
|
||||
</div> */}
|
||||
</BallotCard>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -143,8 +143,12 @@ export class Ballots extends React.Component {
|
|||
if (ballotCards.length > this.limit && !commonStore.isActiveFilter && !commonStore.isToFinalizeFilter) {
|
||||
loadMoreButton = (
|
||||
<div className="center">
|
||||
<button type="button" className="btn btn-primary load-more" onClick={e => this.onClick(e)}>
|
||||
↓ LOAD MORE BALLOTS ↓
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-transparent btn-load-more text-capitalize"
|
||||
onClick={e => this.onClick(e)}
|
||||
>
|
||||
Load More Ballots
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const Footer = ({ netId }) => {
|
|||
return (
|
||||
<footer className={`footer ${footerClassName}`}>
|
||||
<div className="container">
|
||||
<Link to="/poa-dapps-voting" className="footer-logo" />
|
||||
<Link to="/poa-dapps-voting" className={`footer-logo ${footerClassName}`} />
|
||||
<p className="footer-rights">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||
<Socials />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import logoBase from '../assets/images/logos/logo_voting_dapp@2x.png'
|
||||
import logoSokol from '../assets/images/logos/logo_sokol@2x.png'
|
||||
import logoBase from '../assets/images/logos/logo-poa.svg'
|
||||
import logoSokol from '../assets/images/logos/logo-sokol.svg'
|
||||
import menuIconBase from '../assets/images/icons/icon-menu.svg'
|
||||
import menuIconSokol from '../assets/images/icons/icon-menu-sokol.svg'
|
||||
import menuOpenIconBase from '../assets/images/icons/icon-close.svg'
|
||||
|
|
|
|||
|
|
@ -8,91 +8,103 @@ export class KeysTypes extends React.Component {
|
|||
const { ballotStore } = this.props
|
||||
return (
|
||||
<div className="hidden">
|
||||
<div className="left">
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="add-key"
|
||||
value={ballotStore.KeysBallotType.add}
|
||||
checked={ballotStore.isAddKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add)}
|
||||
/>
|
||||
<label htmlFor="add-key" className="radio radio_icon radio_add">
|
||||
Add key
|
||||
</label>
|
||||
<div className="keys-radio-button-tr">
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="add-key"
|
||||
value={ballotStore.KeysBallotType.add}
|
||||
checked={ballotStore.isAddKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="add-key">
|
||||
Add key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Add new key.</p>
|
||||
</div>
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="remove-key"
|
||||
value={ballotStore.KeysBallotType.remove}
|
||||
checked={ballotStore.isRemoveKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove)}
|
||||
/>
|
||||
<label htmlFor="remove-key" className="radio radio_icon radio_remove">
|
||||
Remove key
|
||||
</label>
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="remove-key"
|
||||
value={ballotStore.KeysBallotType.remove}
|
||||
checked={ballotStore.isRemoveKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="remove-key">
|
||||
Remove key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Remove existing key.</p>
|
||||
</div>
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="swap-key"
|
||||
value={ballotStore.KeysBallotType.swap}
|
||||
checked={ballotStore.isSwapKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap)}
|
||||
/>
|
||||
<label htmlFor="swap-key" className="radio radio_icon radio_swap">
|
||||
Swap key
|
||||
</label>
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="swap-key"
|
||||
value={ballotStore.KeysBallotType.swap}
|
||||
checked={ballotStore.isSwapKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="swap-key">
|
||||
Swap key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Remove existing key and add new key.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="mining-key"
|
||||
value={ballotStore.KeyType.mining}
|
||||
checked={ballotStore.isMiningKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining)}
|
||||
/>
|
||||
<label htmlFor="mining-key" className="radio">
|
||||
Mining Key
|
||||
</label>
|
||||
<div className="keys-radio-button-tr">
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="mining-key"
|
||||
value={ballotStore.KeyType.mining}
|
||||
checked={ballotStore.isMiningKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="mining-key">
|
||||
Mining Key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Mining key type.</p>
|
||||
</div>
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="payout-key"
|
||||
value={ballotStore.KeyType.payout}
|
||||
checked={ballotStore.isPayoutKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout)}
|
||||
/>
|
||||
<label htmlFor="payout-key" className="radio">
|
||||
Payout Key
|
||||
</label>
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="payout-key"
|
||||
value={ballotStore.KeyType.payout}
|
||||
checked={ballotStore.isPayoutKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="payout-key">
|
||||
Payout Key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Payout key type.</p>
|
||||
</div>
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="voting-key"
|
||||
value={ballotStore.KeyType.voting}
|
||||
checked={ballotStore.isVotingKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting)}
|
||||
/>
|
||||
<label htmlFor="voting-key" className="radio">
|
||||
Voting Key
|
||||
</label>
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="voting-key"
|
||||
value={ballotStore.KeyType.voting}
|
||||
checked={ballotStore.isVotingKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="voting-key">
|
||||
Voting Key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Voting key type.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const MobileMenuLinks = ({ onMenuToggle, navigationData }) => {
|
|||
return (
|
||||
<div className="links-container-mobile" onClick={onMenuToggle}>
|
||||
{navigationData.map(item => (
|
||||
<NavLink activeClassName="active" className="link" exact to={item.url}>
|
||||
<NavLink activeClassName="active" className={`link ${item.class}`} exact to={item.url}>
|
||||
<i className={`link-icon ${item.icon}`} />
|
||||
<span className="link-text">{item.title}</span>
|
||||
</NavLink>
|
||||
|
|
|
|||
|
|
@ -290,6 +290,7 @@ export class NewBallot extends React.Component {
|
|||
|
||||
menuItemActive = ballotType => {
|
||||
const { ballotStore } = this.props
|
||||
|
||||
if (ballotType == ballotStore.ballotType) {
|
||||
return 'ballot-types-i ballot-types-i_active'
|
||||
} else {
|
||||
|
|
@ -297,6 +298,11 @@ export class NewBallot extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { ballotStore } = this.props
|
||||
ballotStore.changeBallotType(null, ballotStore.BallotType.keys)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { contractsStore, ballotStore } = this.props
|
||||
let validator = ballotStore.isNewValidatorPersonalData ? <Validator /> : ''
|
||||
|
|
@ -368,61 +374,10 @@ export class NewBallot extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="hidden">
|
||||
<div className="left">
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="ballot-type"
|
||||
id="ballot-for-validators"
|
||||
value={ballotStore.BallotType.keys}
|
||||
checked={ballotStore.isBallotForKey}
|
||||
onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.keys)}
|
||||
/>
|
||||
<label htmlFor="ballot-for-validators" className="radio">
|
||||
Validator Management Ballot
|
||||
</label>
|
||||
<p className="hint">Ballot to add, remove or swap any type of key for existing or new validators.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="ballot-type"
|
||||
id="ballot-for-consensus"
|
||||
value={ballotStore.BallotType.minThreshold}
|
||||
checked={ballotStore.isBallotForMinThreshold}
|
||||
onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.minThreshold)}
|
||||
/>
|
||||
<label htmlFor="ballot-for-consensus" className="radio">
|
||||
Consensus Threshold Ballot
|
||||
</label>
|
||||
<p className="hint">Ballot to change the minimum threshold for consensus to vote for keys.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="left">
|
||||
<div className="radio-container">
|
||||
<input
|
||||
type="radio"
|
||||
name="ballot-type"
|
||||
id="ballot-for-proxy"
|
||||
value={ballotStore.BallotType.proxy}
|
||||
checked={ballotStore.isBallotForProxy}
|
||||
onChange={e => ballotStore.changeBallotType(e, ballotStore.BallotType.proxy)}
|
||||
/>
|
||||
<label htmlFor="ballot-for-proxy" className="radio">
|
||||
Modify Proxy Contract Ballot
|
||||
</label>
|
||||
<p className="hint">Ballot to change one of the proxy contracts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
{validator}
|
||||
{keysTypes}
|
||||
{validator}
|
||||
{metadata}
|
||||
<button type="button" className="btn btn-primary add-ballot" onClick={e => this.onClick(e)}>
|
||||
<button type="button" className="btn btn-primary btn-new text-capitalize" onClick={e => this.onClick(e)}>
|
||||
Add ballot
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,6 @@ let Socials = () => {
|
|||
title: 'Twitter',
|
||||
url: 'https://twitter.com/poanetwork'
|
||||
},
|
||||
{
|
||||
icon: 'socials-i_poa',
|
||||
title: 'POA Network',
|
||||
url: 'https://poa.network'
|
||||
},
|
||||
{
|
||||
icon: 'socials-i_telegram',
|
||||
title: 'Telegram',
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ class AppMainRouter extends Component {
|
|||
.then(async web3Config => {
|
||||
let getSokolContractsAddresses = getContractsAddresses('sokol')
|
||||
let getCoreContractsAddresses = getContractsAddresses('core')
|
||||
|
||||
await Promise.all([getSokolContractsAddresses, getCoreContractsAddresses])
|
||||
|
||||
contractsStore.setWeb3Instance(web3Config)
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ class ContractsStore {
|
|||
@observable proxyBallotThreshold
|
||||
@observable validatorLimits
|
||||
@observable validatorsMetadata
|
||||
@observable netId
|
||||
|
||||
constructor() {
|
||||
this.votingKey = null
|
||||
|
|
|
|||
Loading…
Reference in New Issue