(feat) Add Sokol styles.
This commit is contained in:
Gabriel Rodriguez Alsina
parent
f41217187b
commit
7359b9d681
|
|
@ -107,13 +107,17 @@ 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} /> : ''
|
||||
|
||||
const search = this.shouldShowSearch() ? (
|
||||
<div className={`search-container`}>
|
||||
<div className={`search-container ${this.getNetIdClass()}`}>
|
||||
<div className="container">
|
||||
<input type="search" className="search-input" onChange={this.onSearch} placeholder="Search..." />
|
||||
</div>
|
||||
|
|
@ -135,7 +139,7 @@ class App extends Component {
|
|||
{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">
|
||||
|
|
|
|||
|
|
@ -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,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="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="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="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="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,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,30 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="144px"
|
||||
height="18px"
|
||||
>
|
||||
<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="M30.506,5.000 L28.857,5.000 L28.013,8.000 L29.752,8.000 L28.997,11.000 L15.753,11.000 L14.735,15.000 L10.305,15.000 L9.993,15.000 L1.166,15.000 C0.325,15.000 -0.174,14.328 0.052,13.500 L2.504,4.500 C2.730,3.672 3.595,3.000 4.436,3.000 L13.012,3.000 L13.575,3.000 L31.009,3.000 L30.506,5.000 ZM8.573,14.000 L8.989,12.000 L7.437,12.000 L7.020,14.000 L8.573,14.000 ZM2.421,12.000 L1.996,14.000 L3.581,14.000 L4.006,12.000 L2.421,12.000 ZM4.700,5.000 L3.012,11.000 L9.302,11.000 L10.989,5.000 L4.700,5.000 ZM17.851,5.000 L17.007,8.000 L20.152,8.000 L20.996,5.000 L17.851,5.000 ZM23.845,5.000 L22.994,8.000 L26.164,8.000 L27.015,5.000 L23.845,5.000 ZM28.995,12.000 L28.177,15.000 L15.992,15.000 L16.809,12.000 L28.995,12.000 Z"
|
||||
/>
|
||||
<text
|
||||
fill="rgb(255, 255, 255)"
|
||||
transform="matrix( 0.60869565217391, 0, 0, 0.6,41.2910869565218, 12.4000000000001)"
|
||||
font-size="18.333px"
|
||||
>Sokol Test Network</text>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
fill="rgb(255, 255, 255)"
|
||||
d="M143.500,-0.000 C143.776,-0.000 144.000,0.224 144.000,0.500 L144.000,17.500 C144.000,17.776 143.776,18.000 143.500,18.000 C143.224,18.000 143.000,17.776 143.000,17.500 L143.000,0.500 C143.000,0.224 143.224,-0.000 143.500,-0.000 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 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 |
|
|
@ -26,6 +26,9 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
.sokol & {
|
||||
background-color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_active {
|
||||
|
|
@ -35,6 +38,10 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,9 @@ a {
|
|||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sokol {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,26 @@
|
|||
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 {
|
||||
|
|
@ -24,59 +44,49 @@ textarea {
|
|||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.15s background-color;
|
||||
&.btn-primary {
|
||||
background-color: $primary-color;
|
||||
box-shadow: 0px 5px 10px 0 rgba(92, 52, 162, 0.3);
|
||||
&:hover {
|
||||
background-color: darken($primary-color, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
background-color: $secondary-color;
|
||||
&:hover {
|
||||
background-color: darken($secondary-color, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-success {
|
||||
background-color: $success-color;
|
||||
box-shadow: 0px 5px 10px 0 rgba(96, 219, 151, 0.3);
|
||||
&:hover {
|
||||
background-color: darken($success-color, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-danger {
|
||||
background-color: $danger-color;
|
||||
box-shadow: 0px 5px 10px 0 rgba(242, 27, 87, 0.3);
|
||||
&:hover {
|
||||
background-color: darken($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));
|
||||
|
||||
.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));
|
||||
}
|
||||
|
||||
&.btn-new {
|
||||
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');
|
||||
@include btn-background-properties();
|
||||
.sokol & {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-load-more-sokol.svg');
|
||||
}
|
||||
}
|
||||
&.btn-transparent {
|
||||
color: $primary-color;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
&.btn-load-more {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-load-more.svg');
|
||||
@include btn-background-properties();
|
||||
}
|
||||
&.no-shadow {
|
||||
box-shadow: none;
|
||||
.sokol & {
|
||||
color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
color: #333333;
|
||||
cursor: default;
|
||||
background-color: #f0f0f0;;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
&,
|
||||
.sokol & {
|
||||
color: #333333;
|
||||
cursor: default;
|
||||
background-color: #f0f0f0;;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
background-color: #f0f0f0;;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-finalize {
|
||||
|
|
@ -87,6 +97,10 @@ textarea {
|
|||
background-image: url('#{ $base-images-path }/icons/icon-finalize-black.svg');
|
||||
}
|
||||
}
|
||||
// helpers
|
||||
&.no-shadow {
|
||||
box-shadow: none;
|
||||
}
|
||||
&.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
@ -96,4 +110,4 @@ textarea {
|
|||
&.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,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 {
|
||||
|
|
@ -91,6 +91,11 @@ button {
|
|||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -108,6 +104,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
.link-icon {
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all-sokol.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active-sokol.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize-sokol.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
|
|
@ -136,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -164,6 +174,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.app-container {
|
||||
padding-bottom: 40px;
|
||||
padding-top: 40px;
|
||||
position: relative;
|
||||
&.app-container-open-mobile-menu {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,9 @@
|
|||
box-sizing: border-box;
|
||||
height: $search-container-height;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
&.sokol {
|
||||
background-color: $secondary-color-darker;
|
||||
background-color: $primary-color-darker-sokol;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
|
|
@ -35,10 +36,9 @@
|
|||
padding-left: 30px;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
.sokol & {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-search-sokol.svg');
|
||||
}
|
||||
|
||||
@include placeholder-full($color: rgba(255, 255, 255, 0.5));
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,10 +16,16 @@
|
|||
|
||||
&_yes {
|
||||
background-color: $danger-color;
|
||||
.sokol & {
|
||||
background-color: $danger-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_no {
|
||||
background-color: $success-color;
|
||||
.sokol & {
|
||||
background-color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -91,10 +91,19 @@ textarea {
|
|||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,9 @@
|
|||
&:focus {
|
||||
border-color: $primary-color;
|
||||
color: $input-color;
|
||||
.sokol & {
|
||||
border-color: $primary-color-sokol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,16 +3,14 @@ $base-images-path: '../assets/images';
|
|||
// colors
|
||||
$primary-color: #5c34a2;
|
||||
$primary-color-darker: #45277a;
|
||||
$secondary-color: #6ac9b9;
|
||||
$secondary-color-darker: darken(#6ac9b9, 10%);
|
||||
$primary-color-sokol: #6ac9b9;
|
||||
$primary-color-darker-sokol: #41b19e;
|
||||
$danger-color: #f21b57;
|
||||
$danger-color-sokol: #f24c67;
|
||||
$success-color: #60db97;
|
||||
$success-color-sokol: #6ac9b9;
|
||||
$gray-text-color: #333;
|
||||
|
||||
// buttons
|
||||
$btn-primary-bg: $primary-color;
|
||||
$btn-secondary-bg: #61db97;
|
||||
|
||||
// borders
|
||||
$base-border-color: #e4e4e4;
|
||||
|
||||
|
|
@ -20,7 +18,7 @@ $base-border-color: #e4e4e4;
|
|||
$container-width: 960px;
|
||||
$container-responsive-width: 980px;
|
||||
$tablet-width: 768px;
|
||||
$mobile-width: 414px;
|
||||
$mobile-width: 767px;
|
||||
$small-mobile-width: 360px;
|
||||
|
||||
// header
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ class ContractsStore {
|
|||
@observable proxyBallotThreshold
|
||||
@observable validatorLimits
|
||||
@observable validatorsMetadata
|
||||
@observable netId
|
||||
|
||||
constructor() {
|
||||
this.votingKey = null
|
||||
|
|
|
|||
Loading…
Reference in New Issue