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