(add) load more button is now a component

src/assets/stylesheets/components/_ButtonLoadMore.scss

@@ -0,0 +1,43 @@
+.sw-ButtonLoadMore {
+    align-items: center;
+    background-color: transparent;
+    background-size: 14px 14px;
+    border-radius: 5px;
+    border: 2px solid $poa-purple;
+    color: $poa-purple;
+    cursor: pointer;
+    display: flex;
+    font-size: 17px;
+    font-weight: 400;
+    height: 42px;
+    justify-content: center;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    width: 100%;
+
+    &#{ & }-core {
+        border-color: $poa-purple;
+    }
+
+    &#{ & }-sokol {
+        border-color: $sokol-cyan;
+    }
+
+    &#{ & }-dai {
+        border-color: $xdai-gray;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        width: auto;
+    }
+
+}
+
+.sw-ButtonLoadMore_Text {
+    margin-right: 15px;
+
+    .sw-ButtonLoadMore:hover & {
+        opacity: 0.7;
+    }
+}

src/assets/stylesheets/components/_IconLoadMore.scss

@@ -0,0 +1,17 @@
+.sw-IconLoadMore_Path {
+    &#{ & }-core {
+        fill: $poa-purple;
+    }
+
+    &#{ & }-sokol {
+        fill: $sokol-cyan;
+    }
+
+    &#{ & }-dai {
+        fill: $xdai-gray-dark;
+    }
+
+    .sw-ButtonLoadMore:hover & {
+        opacity: 0.7;
+    }
+}

src/assets/stylesheets/components/_LoadMore.scss

@@ -0,0 +1,5 @@
+.sw-LoadMore {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}

src/assets/stylesheets/components/_index.scss

@@ -7,6 +7,7 @@
 @import "Ballots";
 @import "BaseLoader";
 @import "ButtonFinalize";
+@import "ButtonLoadMore";
 @import "ButtonNewBallot";
 @import "Footer";
 @import "Header";
@@ -15,11 +16,13 @@
 @import "IconAll";
 @import "IconFinalize";
 @import "IconGithub";
+@import "IconLoadMore";
 @import "IconMobileMenu";
 @import "IconPOA";
 @import "IconTelegram";
 @import "IconToFinalize";
 @import "IconTwitter";
+@import "LoadMore";
 @import "Loading";
 @import "LogoDai";
 @import "LogoPOA";

src/assets/stylesheets/helpers/_variables.scss

@@ -17,6 +17,7 @@ $sokol-menu-icon-color: #fff;
 $xdai-orange: #fec042;
 $xdai-gray-darker:  #eaeef0;
 $xdai-gray: #f2f6f8;
+$xdai-gray-dark: #333;
 $xdai-menu-icon-color: #333;
 
 // colors

src/components/Ballots/index.js

@@ -1,7 +1,9 @@
-import React from 'react'
-import { observable } from 'mobx'
-import { inject, observer } from 'mobx-react'
 import 'babel-polyfill'
+import React from 'react'
+import { ButtonLoadMore } from '../ButtonLoadMore'
+import { inject, observer } from 'mobx-react'
+import { observable } from 'mobx'
+import { getNetworkBranch } from '../../utils/utils'
 
 @inject('commonStore', 'ballotsStore', 'ballotStore', 'contractsStore')
 @observer
@@ -13,7 +15,6 @@ export class Ballots extends React.Component {
     this.limit = this.props.commonStore.loadMoreLimit
     this.step = this.limit
     this.onClick = this.onClick.bind(this)
-    this.networkBranch = this.props.networkBranch
   }
 
   onClick = async () => {
@@ -138,6 +139,12 @@ export class Ballots extends React.Component {
     commonStore.isToFinalizeFilter = this.props.isToFinalizeFilter
   }
 
+  getVotingNetworkBranch = () => {
+    const { contractsStore } = this.props
+
+    return contractsStore.netId ? getNetworkBranch(contractsStore.netId) : null
+  }
+
   render() {
     const { ballotsStore, commonStore } = this.props
 
@@ -149,18 +156,12 @@ export class Ballots extends React.Component {
       ballotCards = this.filterBySearchTerm(commonStore.searchTerm, ballotCards)
     }
 
-    let loadMoreButton
+    let loadMore = null
 
     if (ballotCards.length > this.limit && !commonStore.isActiveFilter && !commonStore.isToFinalizeFilter) {
-      loadMoreButton = (
-        <div className="center">
-          <button
-            type="button"
-            className="btn btn-transparent btn-load-more text-capitalize"
-            onClick={e => this.onClick(e)}
-          >
-            Load More Ballots
-          </button>
+      loadMore = (
+        <div className="sw-LoadMore">
+          <ButtonLoadMore networkBranch={this.getVotingNetworkBranch()} onClick={e => this.onClick(e)} />
         </div>
       )
 
@@ -170,7 +171,7 @@ export class Ballots extends React.Component {
     return (
       <section className="sw-Ballots">
         {ballotCards}
-        {loadMoreButton}
+        {loadMore}
       </section>
     )
   }

src/components/ButtonLoadMore/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { IconLoadMore } from '../IconLoadMore'
+
+export const ButtonLoadMore = ({ extraClassName = '', networkBranch, onClick }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`sw-ButtonLoadMore ${extraClassName} sw-ButtonLoadMore-${networkBranch}`}
+    >
+      <span className="sw-ButtonLoadMore_Text">Load More Ballots</span> <IconLoadMore networkBranch={networkBranch} />
+    </button>
+  )
+}

src/components/IconLoadMore/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const IconLoadMore = ({ networkBranch }) => {
+  return (
+    <svg className="sw-IconLoadMore" xmlns="http://www.w3.org/2000/svg" width="15" height="18">
+      <path
+        className={`sw-IconLoadMore_Path sw-IconLoadMore_Path-${networkBranch}`}
+        d="M14 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 2 0v4.969h11V5H3.491l1.215 1.215a1.033 1.033 0 0 1-1.46 1.46L.325 4.754a1.013 1.013 0 0 1-.228-.35C.091 4.392.08 4.383.075 4.371a1.036 1.036 0 0 1 .221-1.136L3.235.296a1.038 1.038 0 1 1 1.469 1.469L3.469 3H14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1z"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}