Merge pull request #103 from vbaranov/sokol-design

(Feature) Sokol theme

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>
     );
   }

src/Loading.js

@@ -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>

src/assets/stylesheets/footer.scss

@@ -10,6 +10,11 @@
     padding: 20px 10px 0;
   }
 
+
+  &.sokol {
+    background-color: #6ac9b9;
+  }
+
   .container {
     position: relative;
 

src/assets/stylesheets/header.scss

@@ -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;

src/components/BallotKeysCard.jsx

@@ -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) {

src/components/Footer.jsx

@@ -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>
+  );
+}

src/components/Header.jsx

@@ -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>
+	)
+};