(add) add ballot button component

src/assets/stylesheets/components/_ButtonAddBallot.scss

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

src/assets/stylesheets/components/_IconAdd.scss

@@ -1,19 +1,33 @@
+@mixin path-colors($parent-class: '', $fill-core: #fff, $fill-sokol: #fff, $fill-dai: #fff) {
+
+    #{ $parent-class } &#{ & }-core {
+        fill: $fill-core;
+    }
+
+    #{ $parent-class } &#{ & }-sokol {
+        fill: $fill-sokol;
+    }
+
+    #{ $parent-class } &#{ & }-dai {
+        fill: $fill-dai;
+    }
+
+}
+
 .sw-IconAdd {
     .sw-ButtonNewBallot & {
         margin-left: 10px;
     }
+
+    .sw-ButtonAddBallot & {
+        margin-left: 10px;
+    }
 }
 
 .sw-IconAdd_Path {
-    &#{ & }-core {
-        fill: #fff;
-    }
 
-    &#{ & }-sokol {
-        fill: $sokol-cyan;;
-    }
+    @include path-colors('.sw-ButtonNewBallot', #fff, $sokol-cyan, #fff);
+
+    @include path-colors('.sw-ButtonAddBallot');
 
-    &#{ & }-dai {
-        fill: #fff;
-    }
 }

src/assets/stylesheets/components/_index.scss

@@ -6,6 +6,7 @@
 @import "BallotInfoContainer";
 @import "Ballots";
 @import "BaseLoader";
+@import "ButtonAddBallot";
 @import "ButtonFinalize";
 @import "ButtonLoadMore";
 @import "ButtonNewBallot";

src/assets/stylesheets/index.scss

@@ -5,10 +5,10 @@
 @import 'pages/index';
 @import 'components/index';
 
-@import 'application/base';
-@import 'application/buttons';
+// @import 'application/base';
+// @import 'application/buttons';
 @import 'application/controls';
-@import 'application/info';
+// @import 'application/info';
 @import 'application/new';
 
 @import 'application/ballot-types';

src/components/ButtonAddBallot/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconAdd } from '../IconAdd'
+
+export const ButtonAddBallot = ({ extraClassName = '', networkBranch, onClick }) => {
+  return (
+    <button
+      className={`sw-ButtonAddBallot ${extraClassName} sw-ButtonAddBallot-${networkBranch}`}
+      onClick={onClick}
+      type="button"
+    >
+      Add Ballot <IconAdd networkBranch={networkBranch} />
+    </button>
+  )
+}

src/components/NewBallot/index.js

@@ -5,6 +5,7 @@ import { BallotEmissionFundsMetadata } from '../BallotEmissionFundsMetadata'
 import { BallotKeysMetadata } from '../BallotKeysMetadata'
 import { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
 import { BallotProxyMetadata } from '../BallotProxyMetadata'
+import { ButtonAddBallot } from '../ButtonAddBallot'
 import { KeysTypes } from '../KeysTypes'
 import { NewBallotMenu } from '../NewBallotMenu'
 import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
@@ -247,6 +248,7 @@ export class NewBallot extends React.Component {
   onClick = async () => {
     const { commonStore, contractsStore, ballotStore, ballotsStore } = this.props
     const { push } = this.props.routing
+
     if (!contractsStore.votingKey) {
       swal('Warning!', messages.NO_METAMASK_MSG, 'warning')
       return
@@ -254,8 +256,11 @@ export class NewBallot extends React.Component {
       swal('Warning!', messages.invalidVotingKeyMsg(contractsStore.votingKey), 'warning')
       return
     }
+
     commonStore.showLoading()
+
     const isFormValid = this.checkValidation()
+
     if (isFormValid) {
       if (ballotStore.ballotType === ballotStore.BallotType.keys) {
         const inputToAreBallotParamsValid = {
@@ -414,8 +419,6 @@ export class NewBallot extends React.Component {
   render() {
     const { contractsStore, ballotStore } = this.props
     const networkBranch = this.getVotingNetworkBranch()
-    let validator = ballotStore.isNewValidatorPersonalData ? <Validator /> : ''
-    let keysTypes = ballotStore.isBallotForKey ? <KeysTypes /> : ''
     let metadata
     let minThreshold = 0
 
@@ -461,12 +464,10 @@ export class NewBallot extends React.Component {
               </div>
             </div>
             <hr />
-            {keysTypes}
-            {validator}
+            {ballotStore.isBallotForKey ? <KeysTypes /> : null}
+            {ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
             {metadata}
-            <button type="button" className="btn btn-primary btn-new text-capitalize" onClick={e => this.onClick(e)}>
-              Add ballot
-            </button>
+            <ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
           </div>
         </form>
       </section>