Sokol theme
This commit is contained in:
parent
d531577bdb
commit
dd3869bd83
10
src/App.js
10
src/App.js
|
@ -6,7 +6,7 @@ import './assets/App.css';
|
|||
import Loading from './Loading';
|
||||
import { inject, observer } from 'mobx-react';
|
||||
|
||||
@inject("commonStore")
|
||||
@inject("commonStore","contractsStore")
|
||||
@observer
|
||||
class App extends Component {
|
||||
onBallotsRender = () => {
|
||||
|
@ -42,8 +42,8 @@ class App extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { commonStore } = this.props;
|
||||
const loading = commonStore.loading ? <Loading /> : ''
|
||||
const { commonStore, contractsStore } = this.props;
|
||||
const loading = commonStore.loading ? <Loading netId={contractsStore.netId} /> : ''
|
||||
const nav = this.shouldShowNavPan() ? <div className="search">
|
||||
<div className="container flex-container">
|
||||
<div className="nav">
|
||||
|
@ -56,14 +56,14 @@ class App extends Component {
|
|||
return (
|
||||
<div>
|
||||
{loading}
|
||||
<Header />
|
||||
<Header netId={contractsStore.netId} />
|
||||
{nav}
|
||||
<Route exact path={`/`} render={this.onBallotsRender}/>
|
||||
<Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender}/>
|
||||
<Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender}/>
|
||||
<Route path={`${commonStore.rootPath}/new`} render={this.onNewBallotRender}/>
|
||||
{/*<Route path={`${commonStore.rootPath}/settings`} render={this.onSettingsRender}/>*/}
|
||||
<Footer />
|
||||
<Footer netId={contractsStore.netId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,22 @@
|
|||
import React from 'react';
|
||||
const Loading = () => (
|
||||
<div className="loading-container">
|
||||
const styles = (netId) => {
|
||||
const core = {
|
||||
backgroundColor: 'rgba(35, 29, 115, 0.8)'
|
||||
};
|
||||
const sokol = {
|
||||
backgroundColor: 'rgba(47, 109, 99, 0.8)'
|
||||
}
|
||||
switch(netId) {
|
||||
case '77':
|
||||
return sokol;
|
||||
case '99':
|
||||
return core;
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
}
|
||||
const Loading = ({netId}) => (
|
||||
<div className="loading-container" style={styles(netId)}>
|
||||
<div className="loading">
|
||||
<div className="loading-i"></div>
|
||||
<div className="loading-i"></div>
|
||||
|
|
|
@ -272,6 +272,8 @@ button {
|
|||
.footer {
|
||||
height: auto;
|
||||
padding: 20px 10px 0; } }
|
||||
.footer.sokol {
|
||||
background-color: #6ac9b9; }
|
||||
.footer .container {
|
||||
position: relative; }
|
||||
@media screen and (max-width: 414px) {
|
||||
|
@ -314,11 +316,25 @@ button {
|
|||
margin-bottom: 0px; } }
|
||||
.header .container {
|
||||
overflow: hidden; }
|
||||
.header.sokol {
|
||||
background-image: none;
|
||||
background-color: #6ac9b9; }
|
||||
.header-logo {
|
||||
float: left;
|
||||
width: 182px;
|
||||
height: 35px;
|
||||
background-position: 0 -24px; }
|
||||
.header-logo-sokol {
|
||||
display: inline-block;
|
||||
width: 146px;
|
||||
height: 35px;
|
||||
background-image: url("./images/logo_sokol.png");
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat; }
|
||||
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
|
||||
.header-logo-sokol {
|
||||
background-image: url("./images/logo_sokol@2x.png");
|
||||
background-size: 146px 35px; } }
|
||||
.header-settings, .header-new-ballot {
|
||||
float: right;
|
||||
border-radius: 3px;
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
|
@ -10,6 +10,11 @@
|
|||
padding: 20px 10px 0;
|
||||
}
|
||||
|
||||
|
||||
&.sokol {
|
||||
background-color: #6ac9b9;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
|
|
|
@ -15,6 +15,11 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.sokol {
|
||||
background-image: none;
|
||||
background-color: #6ac9b9;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
@extend %logos;
|
||||
float: left;
|
||||
|
@ -23,6 +28,16 @@
|
|||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
&-logo-sokol {
|
||||
@include image-2x('./images/logo_sokol@2x.png', 146px, 35px);
|
||||
display: inline-block;
|
||||
width: 146px;
|
||||
height: 35px;
|
||||
background-image: url('./images/logo_sokol.png');
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&-settings,
|
||||
&-new-ballot {
|
||||
@extend %button;
|
||||
|
|
|
@ -2,17 +2,20 @@ import React from "react";
|
|||
import moment from "moment";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export const Footer = () => (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<p className="footer-rights">{moment().format("YYYY")} POA Network. All rights reserved.</p>
|
||||
<Link to="/poa-dapps-voting" className="footer-logo"></Link>
|
||||
<div className="socials">
|
||||
<a href="https://twitter.com/poanetwork" className="socials-i socials-i_twitter"></a>
|
||||
<a href="https://poa.network" className="socials-i socials-i_oracles"></a>
|
||||
<a href="https://t.me/oraclesnetwork" className="socials-i socials-i_telegram"></a>
|
||||
<a href="https://github.com/poanetwork/" className="socials-i socials-i_github"></a>
|
||||
export const Footer = ({netId}) => {
|
||||
const footerClassName = netId === '77' ? 'sokol' : '';
|
||||
return (
|
||||
<footer className={`footer ${footerClassName}`}>
|
||||
<div className="container">
|
||||
<p className="footer-rights">{moment().format("YYYY")} POA Network. All rights reserved.</p>
|
||||
<Link to="/poa-dapps-voting" className="footer-logo"></Link>
|
||||
<div className="socials">
|
||||
<a href="https://twitter.com/poanetwork" className="socials-i socials-i_twitter"></a>
|
||||
<a href="https://poa.network" className="socials-i socials-i_oracles"></a>
|
||||
<a href="https://t.me/oraclesnetwork" className="socials-i socials-i_telegram"></a>
|
||||
<a href="https://github.com/poanetwork/" className="socials-i socials-i_github"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,12 +1,17 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export const Header = () => (
|
||||
<header className="header">
|
||||
<div className="container">
|
||||
<Link to="/poa-dapps-voting" className="header-logo"></Link>
|
||||
<Link to="/poa-dapps-voting/new" className="header-new-ballot">New ballot</Link>
|
||||
{/*<Link to="/poa-dapps-voting/settings" className="header-settings">Settings</Link>*/}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
export const Header = ({netId}) => {
|
||||
console.log("netId: ", netId)
|
||||
let headerClassName = netId === '77' ? 'sokol' : '';
|
||||
const logoClassName = netId === '77' ? 'header-logo-sokol' : 'header-logo';
|
||||
return(
|
||||
<header className={`header ${headerClassName}`}>
|
||||
<div className="container">
|
||||
<Link to="/poa-dapps-voting" className={logoClassName}></Link>
|
||||
<Link to="/poa-dapps-voting/new" className="header-new-ballot">New ballot</Link>
|
||||
{/*<Link to="/poa-dapps-voting/settings" className="header-settings">Settings</Link>*/}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue