(feat) Styles for the Sokol network.

src/App.js

@@ -195,9 +195,9 @@ class App extends Component {
     this.setState({form});
   }
   render() {
-    if (!this.isValidVotingKey) {
-      return null;
-    }
+    // if (!this.isValidVotingKey) {
+    //   return null;
+    // }
     const BtnAction = this.state.hasData ? "Update" : "Set";
     const AutocompleteItem = ({ formattedSuggestion }) => (
       <div className="custom-container">

src/Header.js

@@ -2,8 +2,10 @@ import React from 'react'
 import Select from 'react-select'
 import logoBase from './images/logos/logo_validators_dapp@2x.png'
 import logoSokol from './images/logos/logo_sokol@2x.png'
-import menuIcon from './images/icons/icon-menu.svg'
-import menuOpenIcon from './images/icons/icon-close.svg'
+import menuIconBase from './images/icons/icon-menu.svg'
+import menuIconSokol from './images/icons/icon-menu-sokol.svg'
+import menuOpenIconBase from './images/icons/icon-close.svg'
+import menuOpenIconSokol from './images/icons/icon-close-sokol.svg'
 import NavigationLinks from './NavigationLinks';
 import MobileMenuLinks from './MobileMenuLinks';
 
@@ -11,6 +13,8 @@ const Header = ({ netId, onChange, injectedWeb3, showMobileMenu, onMenuToggle, b
 
   const headerClassName = netId === '77' ? 'sokol' : '';
   const logoImageName = netId === '77' ? logoSokol : logoBase;
+  const menuIcon = netId === '77' ? menuIconSokol : menuIconBase;
+  const menuOpenIcon = netId === '77' ? menuOpenIconSokol : menuOpenIconBase;
 
   let select;
 

src/images/icons/icon-close-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"/>
+</svg>

src/images/icons/icon-events-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17 13.031h-5.528l1.203 1.208a1.04 1.04 0 0 1 0 1.466 1.03 1.03 0 0 1-1.461 0l-2.92-2.932a1.022 1.022 0 0 1-.272-.891 1 1 0 0 1 .274-.635l2.939-2.95a1.036 1.036 0 0 1 1.469 0 1.045 1.045 0 0 1 0 1.475L11.481 11H17a1 1 0 0 1 1 1v.031a1 1 0 0 1-1 1zM9.676 4.755l-2.912 2.92a1.027 1.027 0 0 1-1.455 0 1.034 1.034 0 0 1 0-1.46L6.519 5H1a1 1 0 0 1 0-2h5.51L5.28 1.765a1.04 1.04 0 0 1 0-1.469 1.032 1.032 0 0 1 1.464 0l2.93 2.939c.2.201.29.464.291.727.002.036.005.069.004.104-.002.019-.008.036-.01.054a1.02 1.02 0 0 1-.283.635z"/>
+</svg>

src/images/icons/icon-menu-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/>
+</svg>

src/images/icons/icon-statistics-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17 14a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V7a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm0 2h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/>
+</svg>

src/images/icons/icon-status-sokol.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#ffffff" fill-rule="evenodd" d="M17 10h-1.101a6.918 6.918 0 0 1-1.31 3.175l.775.775a1 1 0 0 1-1.414 1.414l-.775-.775A6.918 6.918 0 0 1 10 15.899V17a1 1 0 0 1-2 0v-1.101a6.918 6.918 0 0 1-3.175-1.31l-.775.775a1 1 0 0 1-1.414-1.414l.775-.775A6.918 6.918 0 0 1 2.101 10H1a1 1 0 0 1 0-2h1.101a6.918 6.918 0 0 1 1.31-3.175l-.775-.775A.999.999 0 1 1 4.05 2.636l.775.775A6.918 6.918 0 0 1 8 2.101V1a1 1 0 0 1 2 0v1.101a6.918 6.918 0 0 1 3.175 1.31l.775-.775a1 1 0 0 1 1.414 1.414l-.775.775A6.918 6.918 0 0 1 15.899 8H17a1 1 0 0 1 0 2zM9 4a5 5 0 1 0 .001 10.001A5 5 0 0 0 9 4zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
+</svg>

src/index.js

@@ -249,7 +249,7 @@ class AppMainRouter extends Component {
             baseRootPath={ baseRootPath }
             navigationData={ navigationData }
           />
-          <div className={`app-container ${ this.state.showMobileMenu ? 'app-container-open-mobile-menu' : '' }`}>
+          <div className={`app-container ${ this.state.showMobileMenu ? 'app-container-open-mobile-menu' : '' } ${ this.state.netId === '77' ? 'sokol' : '' }`}>
             <div className="container">
               <div className="main-title-container">
                 <span className="main-title">{ this.state.title }</span>

src/stylesheets/application.scss

@@ -10,7 +10,6 @@
 @import 'application/layout';
 @import 'application/loading';
 @import 'application/main-title';
-@import 'application/nav';
 @import 'application/search';
 @import 'application/socials';
 @import 'application/validators';

src/stylesheets/application/_create-keys.scss

@@ -79,7 +79,6 @@
   }
 }
 
-.swal-button.swal-button--confirm,
 .create-keys-button {
 
   @extend %btn;
@@ -95,10 +94,17 @@
     box-shadow: none;
   }
 
-}
-
-.create-keys-button {
   &.finalize {
     margin-right: 10px;
   }
+
+  .sokol & {
+    background-color: $secondary-color;
+    &:hover {
+      background-color: lighten($secondary-color, 10%);
+    }
+
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAYAAADhXXHAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7xJREFUeNrUmU1ME0EUx99ut5QVKR9FShq0gVIihlo+hXhRT4aDhpiYcDKReFITj5xQr569owcPmKghasLBj0SMIB9KjTFBPhQwEYulMSi0QLvrmzol60LLbLvtwiT/pGnm49eZN++9eeVkWYa90vg0x3ehhlAB1DpKQskKSfT7AO3XldZqZGc1qg01jArLqbUwHd+mdW0tnetQ46iIrE+L0PnqWBlYzaAHNYiqQ5l0MkETnW+Qzr9j4xgu2CiqkfTN4N0hEO9QzelcsGlUU4ZBgc7fRNdLCZYMdGXZO7mSAfNJjt5lkDt10fWZYHuojRrZGre7dGpYcjs7smCjLDbcQXkSwt5BibskuoqUZ7MJis9tKA/LLI++foYXP+fQ76GBWYqgsrAAzjrdwHG6H4iHcvWr/eww6hjLDDdGX0NADimcNQdlpn1QXVQM5ytrQGfmEVSLeme9rKND0sZ/Vi3jFi9IK/AjsAqfggHwltjhXEW1XrBetc2SbMjCOjqaIOoRaLLjLxfnoHt4APpmJ/WAtcSztThsu5bREiQP0QQ6yIXhuX8WukcG4On8dLrA7UozcGsN5Ez90FSCEIb+hS/gW/RDc5kDTpdXpALrVsJaM+01iU0//j4FE0tL4C0rhZP2Q1pmiPHx92/7eNVFY9jZ1J9Ck2tBeDA7AfcmP8Ir/zzrsBgfnyuardmOWMQ8hn4twEP019GozHg2CCtJcoNRISrKyxBe3WDuL4RXNt4bAWqSOPBYD0Befg477Mrv9WV6wbNiCgJCVucVwxVPo2YHJFy63kKeyxGUWW/XpWxmiYcKsRCu1jaAyaS5AhBRui6yu7ZM7KRFMoFTLIDLNfVgzkn5rbmshJ3SAstiL6IkwJECG1yo8oBgTreWEuPbhO1DtephBrm4k6ccTthvMaPjd+p1QH3qFDHMmsxce/sMIry85eK02hzgsObDCW3Raae2RvZAnSJ+YM1nczkB/sA//8gjZG1+CRwusekNqeTa8lK4iXrCUnE5bi+HN/5vcFC0wlF7aaYgY3GDcm1bkRlXP9IMbj5UfaIH40XyENgloCHKk/B1S35Jb4p+X+/aVy/lgURmoKzINBkIOwbbFOkSeWvSccYg0BlIUE1MFlqqDACeoeuCVtg48FgWbFim61Ql68QStMmR3M2glwjR+Zt36siaYXSSWEBvZ1RHh++j83ayDNCSDsUd9Bla0llLI9aP0Hnq1e4pabaX5p92XbQA4abPZUGVQco0cV6maR7Jnm6l/KLfS/8w/hVgAI23KEIqYup4AAAAAElFTkSuQmCC');
+  }
+
 }

src/stylesheets/application/_header.scss

@@ -107,6 +107,20 @@
     }
   }
 
+  &.sokol {
+    .link-icon {
+      &-all {
+        background-image: url('#{ $base-images-path }/icons/icon-events-sokol.svg');
+      }
+      &-set-metadata {
+        background-image: url('#{ $base-images-path }/icons/icon-status-sokol.svg');
+      }
+      &-pending-changes {
+        background-image: url('#{ $base-images-path }/icons/icon-statistics-sokol.svg');
+      }
+    }
+  }
+
   .mobile-menu {
     display: none;
     @media screen and (max-width: $mobile-width) {
@@ -132,6 +146,14 @@
     }
   }
 
+  &.sokol {
+    .header-mobile-menu-container {
+      @media screen and (max-width: $mobile-width) {
+        background-color: $secondary-color-darker;
+      }
+    }
+  }
+
   .Select {
     $select-mobile-width: 125px;
 

src/stylesheets/application/_layout.scss

@@ -19,6 +19,11 @@
       }
     }
   }
+  &.app-container-open-mobile-menu.sokol {
+    &:before {
+      background-color: rgba(106, 201, 185, .8);
+    }
+  }
 }
 @media screen and (max-width: $mobile-width) {
   #root,

src/stylesheets/application/_nav.scss

@@ -1,75 +0,0 @@
-// .nav {
-//   &-container {
-//     margin-bottom: 30px;
-//     border-bottom: 1px solid #eee;
-//     background-color: #fff;
-//     line-height: 80px;
-//     text-align: left;
-
-//     @media (max-width: $tablet-width) {
-//       padding: 20px 0;
-//       line-height: normal;
-//     }
-
-//     .container {
-//       display: flex;
-//       justify-content: space-between;
-//       align-items: center;
-
-//       @media (max-width: $tablet-width) {
-//         flex-direction: column-reverse;
-//       }
-//     }
-//   }
-
-//   &-i {
-//     position: relative;
-//     display: inline-block;
-//     vertical-align: middle;
-//     transition: 0.3s color;
-//     color: #8197a2;
-//     text-transform: uppercase;
-//     text-decoration: none;
-//     line-height: normal;
-//     font-size: 14px;
-//     font-weight: bold;
-
-//     &:not(:last-child) {
-//       margin-right: 40px;
-
-//       @media (max-width: $tablet-width) {
-//         margin-right: 30px;
-//       }
-
-//       @media (max-width: $mobile-width) {
-//         margin-right: 20px;
-//         font-size: 13px;
-//       }
-//     }
-
-//     &:hover,
-//     &_active {
-//       color: #444;
-//     }
-
-//     &_active {
-//       &:before {
-//         content: '';
-//         position: absolute;
-//         left: 0;
-//         right: 0;
-//         bottom: -30px;
-//         height: 3px;
-//         background-color: #08b3f2;
-
-//         @media (max-width: $tablet-width) {
-//           bottom: -20px;
-//         }
-//       }
-//     }
-//   }
-// }
-
-// .Select.is-focused:not(.is-open) > .Select-control {
-//   border: none;
-// }

src/stylesheets/application/_socials.scss

@@ -70,3 +70,36 @@
 
   }
 }
+
+.sokol {
+  .socials {
+
+    .socials-i_github {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/git-sokol@2x.png');
+        background-image: url('#{ $base-images-path }/socials/git-sokol.png');
+      }
+    }
+
+    .socials-i_telegram {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/telegram-sokol@2x.png');
+        background-image: url('#{ $base-images-path }/socials/telegram-sokol.png');
+      }
+    }
+
+    .socials-i_twitter {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/tw-sokol@2x.png');
+        background-image: url('#{ $base-images-path }/socials/tw-sokol.png');
+      }
+    }
+
+    .socials-i_poa {
+      &:before {
+        @include image-2x('#{ $base-images-path }/socials/poa-sokol@2x.png');
+        background-image: url('#{ $base-images-path }/socials/poa-sokol.png');
+      }
+    }
+  }
+}

src/stylesheets/helpers/_variables.scss

@@ -4,6 +4,7 @@ $base-images-path: '../images';
 $primary-color: #5c34a2;
 $primary-color-darker: #45277a;
 $secondary-color: #6ac9b9;
+$secondary-color-darker: darken(#6ac9b9, 10%);
 
 // borders
 $base-border-color: #b8c1cb;