(add) new ballot button component

src/assets/stylesheets/application/_buttons.scss

@@ -46,13 +46,13 @@ textarea {
   transition: 0.15s background-color;
 
   @include make-themed-btn('btn-primary', $poa-purple, (92, 52, 162, 0.3));
-  @include make-themed-btn('btn-success', $poa-success-color, (96, 219, 151, 0.3));
+  @include make-themed-btn('btn-success', $poa-green-color, (96, 219, 151, 0.3));
   @include make-themed-btn('btn-danger', $poa-danger-color, (242, 27, 87, 0.3));
   @include make-themed-btn('btn-freeze', $poa-freeze-color, (80, 187, 218, 0.3));
 
   .sokol & {
     @include make-themed-btn('btn-primary', $sokol-cyan, (106, 201, 185, 0.3));
-    @include make-themed-btn('btn-success', $sokol-success-color, (96, 219, 151, 0.3));
+    @include make-themed-btn('btn-success', $sokol-cyan, (96, 219, 151, 0.3));
     @include make-themed-btn('btn-danger', $sokol-danger-color, (242, 76, 103, 0.33));
     @include make-themed-btn('btn-freeze', $sokol-freeze-color, (80, 187, 218, 0.3));
   }

src/assets/stylesheets/application/_vote-scale.scss

@@ -22,16 +22,16 @@
     }
 
     &_yes {
-      background-color: $poa-success-color;
+      background-color: $poa-green-color;
       .sokol & {
-        background-color: $sokol-success-color;
+        background-color: $sokol-cyan;
       }
     }
 
     &_send {
-      background-color: $poa-success-color;
+      background-color: $poa-green-color;
       .sokol & {
-        background-color: $sokol-success-color;
+        background-color: $sokol-cyan;
       }
     }
 

src/assets/stylesheets/application/ballots/_base.scss

@@ -127,8 +127,8 @@ textarea {
   }
 }
 .color-success {
-  color: $poa-success-color;
+  color: $poa-green-color;
   .sokol & {
-    color: $sokol-success-color;
+    color: $sokol-cyan;
   }
 }

src/assets/stylesheets/components/_ButtonNewBallot.scss

@@ -0,0 +1,50 @@
+$sw-ButtonNewBallot-height: 36px;
+
+.sw-ButtonNewBallot {
+    align-items: center;
+    border-radius: 3px;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    font-size: 14px;
+    font-weight: 700;
+    height: $sw-ButtonNewBallot-height;
+    line-height: $sw-ButtonNewBallot-height;
+    opacity: 1;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    transition: 0.15s background-color;
+
+    &#{ & }-core {
+        background-color: $poa-green-color;
+        color: #fff;
+
+        &:hover {
+            background-color: darken($poa-green-color, 10%);
+        }
+    }
+
+    &#{ & }-sokol {
+        background-color: #fff;
+        color: $sokol-cyan;
+
+        &:hover {
+            background-color: darken(#fff, 5%);
+        }
+    }
+
+    &#{ & }-dai {
+        background-color: $xdai-menu-icon-color;
+        color: #fff;
+
+        &:hover {
+            background-color: lighten($poa-green-color, 5%);
+        }
+    }
+
+    .sw-Header_Links & {
+        margin-left: 40px;
+    }
+
+}

src/assets/stylesheets/components/_Header.scss

@@ -15,11 +15,6 @@
     width: 100%;
     z-index: 124;
 
-    // @media (min-width: $mobile-width) {
-    //     position: relative;
-    //     z-index: 9999;
-    // }
-
     &#{ & }-menu-open {
         flex-direction: column;
         height: auto;
@@ -37,24 +32,6 @@
         background-color: $xdai-gray;
     }
 
-    .btn.btn-new-ballot {
-        height: 36px;
-        line-height: 36px;
-        opacity: 1;
-        .link-icon {
-            display: none;
-        }
-    }
-    &.sokol {
-        .btn.btn-new-ballot {
-            background-color: #fff;
-            background-image: url('#{ $base-images-path }/icons/icon-add-sokol.svg');
-            color: $sokol-cyan;
-            &:hover {
-                opacity: 0.9;
-            }
-        }
-    }
 }
 
 .sw-Header_Content {

src/assets/stylesheets/components/_IconAdd.scss

@@ -0,0 +1,19 @@
+.sw-IconAdd {
+    .sw-ButtonNewBallot & {
+        margin-left: 10px;
+    }
+}
+
+.sw-IconAdd_Path {
+    &#{ & }-core {
+        fill: #fff;
+    }
+
+    &#{ & }-sokol {
+        fill: $sokol-cyan;;
+    }
+
+    &#{ & }-dai {
+        fill: #fff;
+    }
+}

src/assets/stylesheets/components/_index.scss

@@ -1,9 +1,11 @@
 @import "App";
 @import "BaseLoader";
+@import "ButtonNewBallot";
 @import "Footer";
 @import "Header";
 @import "IconAFinalize";
 @import "IconActive";
+@import "IconAdd";
 @import "IconAll";
 @import "IconGithub";
 @import "IconMobileMenu";

src/assets/stylesheets/helpers/_variables.scss

@@ -5,20 +5,19 @@ $poa-purple: #5c34a2;
 $poa-purple-darker: #45277a;
 $poa-freeze-color: #50bbda;
 $poa-danger-color: #f21b57;
-$poa-success-color: #60db97;
+$poa-green-color: #60db97;
 $poa-menu-icon-color: #60db97;
 
 $sokol-cyan: #6ac9b9;
 $sokol-cyan-darker: #41b19e;
 $sokol-freeze-color: #50bbda;
 $sokol-danger-color: #f24c67;
-$sokol-success-color: #6ac9b9;
-$sokol-menu-icon-color: #ffffff;
+$sokol-menu-icon-color: #fff;
 
 $xdai-orange: #fec042;
 $xdai-gray-darker:  #eaeef0;
 $xdai-gray: #f2f6f8;
-$xdai-menu-icon-color: #333333;
+$xdai-menu-icon-color: #333;
 
 // colors
 $gray-text-color: #333;

src/components/ButtonNewBallot/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { constants } from '../../utils/constants'
+import { IconAdd } from '../IconAdd'
+
+export const ButtonNewBallot = ({ extraClassName = '', networkBranch }) => {
+  return (
+    <a
+      href={`${constants.rootPath}/new`}
+      className={`sw-ButtonNewBallot ${extraClassName} sw-ButtonNewBallot-${networkBranch}`}
+    >
+      New Ballot <IconAdd networkBranch={networkBranch} />
+    </a>
+  )
+}

src/components/Footer/index.js

@@ -6,7 +6,7 @@ import { constants } from '../../utils/constants'
 
 export const Footer = ({ extraClassName = '', networkBranch = false }) => {
   return (
-    <footer className={`sw-Footer ${extraClassName} ${networkBranch ? 'sw-Footer-' + networkBranch : ''}`}>
+    <footer className={`sw-Footer ${extraClassName}  sw-Footer-${networkBranch}`}>
       <div className="sw-Footer_Content">
         <Logo networkBranch={networkBranch} href={constants.baseURL} />
         <p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>

src/components/Header/index.js

@@ -1,8 +1,9 @@
 import React from 'react'
+import { ButtonNewBallot } from '../ButtonNewBallot'
+import { IconMobileMenu } from '../IconMobileMenu'
 import { Logo } from '../Logo'
 import { MobileMenuLinks } from '../MobileMenuLinks'
 import { NavigationLinks } from '../NavigationLinks'
-import { IconMobileMenu } from '../IconMobileMenu'
 
 export const Header = ({
   baseRootPath,
@@ -18,6 +19,7 @@ export const Header = ({
         <Logo networkBranch={networkBranch} href={baseRootPath} />
         <div className="sw-Header_Links">
           <NavigationLinks networkBranch={networkBranch} navigationData={navigationData} />
+          <ButtonNewBallot networkBranch={networkBranch} />
         </div>
         <IconMobileMenu networkBranch={networkBranch} isOpen={showMobileMenu} onClick={onMenuToggle} />
       </div>

src/components/IconAdd/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const IconAdd = ({ networkBranch }) => {
+  return (
+    <svg className="sw-IconAdd" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+      <path
+        className={`sw-IconAdd_Path sw-IconAdd_Path-${networkBranch}`}
+        d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}