sokol coloring scheme

public/index.html

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

src/App.js

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

src/Footer.js

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

src/Header.js

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

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>
@@ -11,5 +27,4 @@ const Loading = () => (
     </div>
   </div>
 )
-
 export default Loading;

src/index/footer.scss

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

src/index/header.scss

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

src/index/index.css

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