Merge pull request #103 from vbaranov/sokol-design
(Feature) Sokol theme
This commit is contained in:
commit
2c80777d9d
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>
|
||||
|
|
File diff suppressed because one or more lines are too long
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;
|
||||
|
|
|
@ -103,7 +103,11 @@ export class BallotKeysCard extends React.Component {
|
|||
} catch(e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
this.miningKey = `${metadata.lastName} ${miningKey}`;
|
||||
if (metadata) {
|
||||
this.miningKey = `${metadata.lastName} ${miningKey}`;
|
||||
} else {
|
||||
this.miningKey = `${miningKey}`;
|
||||
}
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
|
|
|
@ -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