sokol coloring scheme
This commit is contained in:
parent
88f54c5ad1
commit
396cfbd1d3
|
@ -28,12 +28,6 @@
|
||||||
<noscript>
|
<noscript>
|
||||||
You need to enable JavaScript to run this app.
|
You need to enable JavaScript to run this app.
|
||||||
</noscript>
|
</noscript>
|
||||||
<header class="header">
|
|
||||||
<div class="container">
|
|
||||||
<a href="/poa-dapps-keys-generation" class="header-logo"></a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@ import JSzip from 'jszip';
|
||||||
import FileSaver from 'file-saver';
|
import FileSaver from 'file-saver';
|
||||||
import { constants } from './constants';
|
import { constants } from './constants';
|
||||||
import networkAddresses from './addresses';
|
import networkAddresses from './addresses';
|
||||||
|
import Header from './Header';
|
||||||
import Footer from './Footer';
|
import Footer from './Footer';
|
||||||
import Loading from './Loading';
|
import Loading from './Loading';
|
||||||
|
|
||||||
|
@ -167,7 +168,7 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
let loader = this.state.loading ? <Loading /> : '';
|
let loader = this.state.loading ? <Loading netId={this.state.web3Config.netId}/> : '';
|
||||||
let createKeyBtn = (<div className="create-keys">
|
let createKeyBtn = (<div className="create-keys">
|
||||||
<h1>Create keys from initial key</h1>
|
<h1>Create keys from initial key</h1>
|
||||||
<h2>
|
<h2>
|
||||||
|
@ -188,11 +189,12 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
|
<Header netId={this.state.web3Config.netId}/>
|
||||||
{loader}
|
{loader}
|
||||||
<section className="content">
|
<section className="content">
|
||||||
{content}
|
{content}
|
||||||
</section>
|
</section>
|
||||||
<Footer />
|
<Footer netId={this.state.web3Config.netId}/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
const Footer = () => (
|
const Footer = ({netId}) => {
|
||||||
<footer className="footer">
|
const footerClassName = netId === '77' ? 'sokol' : '';
|
||||||
|
return (
|
||||||
|
<footer className={`footer ${footerClassName}`}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<p className="footer-rights">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
<p className="footer-rights">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||||
<a href="/poa-dapps-keys-generation" className="footer-logo"></a>
|
<a href="/poa-dapps-keys-generation" className="footer-logo"></a>
|
||||||
|
@ -13,6 +15,7 @@ const Footer = () => (
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default Footer;
|
export default Footer;
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react';
|
||||||
|
let Header = ({netId}) => {
|
||||||
|
const headerClassName = netId === '77' ? 'sokol' : '';
|
||||||
|
const logoClassName = netId === '77' ? 'header-logo-sokol' : 'header-logo';
|
||||||
|
return (
|
||||||
|
<header class={`header ${headerClassName}`}>
|
||||||
|
<div class="container">
|
||||||
|
<a href="/poa-dapps-keys-generation" class={logoClassName}></a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header;
|
|
@ -1,6 +1,22 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
const Loading = () => (
|
const styles = (netId) => {
|
||||||
<div className="loading-container">
|
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">
|
||||||
<div className="loading-i"></div>
|
<div className="loading-i"></div>
|
||||||
<div className="loading-i"></div>
|
<div className="loading-i"></div>
|
||||||
|
@ -11,5 +27,4 @@ const Loading = () => (
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
export default Loading;
|
export default Loading;
|
Binary file not shown.
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
|
@ -10,6 +10,10 @@
|
||||||
padding: 20px 10px 0;
|
padding: 20px 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.sokol {
|
||||||
|
background-color: #6ac9b9;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
|
@ -8,6 +8,11 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
|
&.sokol {
|
||||||
|
background-image: none;
|
||||||
|
background-color: #6ac9b9;
|
||||||
|
}
|
||||||
|
|
||||||
&-logo {
|
&-logo {
|
||||||
@include image-2x('../images/logo_ceremony_dapp@2x.png', 182px, 35px);
|
@include image-2x('../images/logo_ceremony_dapp@2x.png', 182px, 35px);
|
||||||
float: left;
|
float: left;
|
||||||
|
@ -16,4 +21,14 @@
|
||||||
background-image: url(../images/logo_ceremony_dapp.png);
|
background-image: url(../images/logo_ceremony_dapp.png);
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-logo-sokol {
|
||||||
|
@include image-2x('../images/logo_sokol@2x.png', 146px, 35px);
|
||||||
|
display: block;
|
||||||
|
width: 146px;
|
||||||
|
height: 35px;
|
||||||
|
background-image: url('../images/logo_sokol.png');
|
||||||
|
background-position: 0 0;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -237,6 +237,8 @@ button:focus {
|
||||||
.footer {
|
.footer {
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 20px 10px 0; } }
|
padding: 20px 10px 0; } }
|
||||||
|
.footer.sokol {
|
||||||
|
background-color: #6ac9b9; }
|
||||||
.footer .container {
|
.footer .container {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
@media screen and (max-width: 414px) {
|
@media screen and (max-width: 414px) {
|
||||||
|
@ -282,6 +284,9 @@ button:focus {
|
||||||
background-image: url(../images/bg_header.png);
|
background-image: url(../images/bg_header.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover; }
|
background-size: cover; }
|
||||||
|
.header.sokol {
|
||||||
|
background-image: none;
|
||||||
|
background-color: #6ac9b9; }
|
||||||
.header-logo {
|
.header-logo {
|
||||||
float: left;
|
float: left;
|
||||||
width: 182px;
|
width: 182px;
|
||||||
|
@ -292,6 +297,17 @@ button:focus {
|
||||||
.header-logo {
|
.header-logo {
|
||||||
background-image: url("../images/logo_ceremony_dapp@2x.png");
|
background-image: url("../images/logo_ceremony_dapp@2x.png");
|
||||||
background-size: 182px 35px; } }
|
background-size: 182px 35px; } }
|
||||||
|
.header-logo-sokol {
|
||||||
|
display: 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; } }
|
||||||
|
|
||||||
.keys {
|
.keys {
|
||||||
display: table;
|
display: table;
|
||||||
|
|
Loading…
Reference in New Issue