(add) vote scale is a component now

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

@@ -1,65 +0,0 @@
-.vote-scale {
-    background-color: #f0f0f0;
-    border-radius: 5px;
-    clear: left;
-    height: 10px;
-    margin-top: 34px;
-    overflow: hidden;
-    &-not-finalized {
-        background-color: #fff;
-    }
-    &--fill {
-        height: 100%;
-        border-radius: 3px;
-        &_no {
-            background-color: $poa-danger-color;
-            .sokol & {
-                background-color: $sokol-danger-color;
-            }
-        }
-        &_yes {
-            background-color: $poa-green-color;
-            .sokol & {
-                background-color: $sokol-cyan;
-            }
-        }
-        &_send {
-            background-color: $poa-green-color;
-            .sokol & {
-                background-color: $sokol-cyan;
-            }
-        }
-        &_burn {
-            background-color: $poa-danger-color;
-            .sokol & {
-                background-color: $sokol-danger-color;
-            }
-        }
-        &_freeze {
-            background-color: $poa-freeze-color;
-            .sokol & {
-                background-color: $sokol-freeze-color;
-            }
-        }
-    }
-    &--container {
-        width: 100%;
-    }
-    &--value {
-        float: left;
-        font-size: 12px;
-    }
-    &--votes,
-    &--percentage {
-        float: right;
-        font-size: 13px;
-    }
-    &--votes {
-        color: $gray-text-color;
-        margin-left: 10px;
-    }
-    &--percentage {
-        color: #000;
-        font-weight: 700;
-    }
-}

src/assets/stylesheets/components/_BallotCard.scss

@@ -11,73 +11,6 @@
     }
 }
 
-.sw-BallotCard_Scale {
-    border-top: 1px solid $base-border-color;
-    display: flex;
-    margin-bottom: 30px;
-    margin-top: 30px;
-    padding: 30px 0 0 0;
-    @media screen and (max-width: $breakpoint-md) {
-        display: block;
-        margin-top: $tablet-indent;
-        padding: $tablet-indent 0 0 0;
-    }
-    @media screen and (max-width: $mobile-width) {
-        margin-top: $mobile-indent;
-        padding: $mobile-indent 0 0 0;
-    }
-}
-
-.sw-BallotCard_ScaleColumn {
-    display: flex;
-    flex-grow: 1;
-    justify-content: space-between;
-    margin-right: 40px;
-    @media screen and (max-width: $breakpoint-md) {
-        margin-bottom: 30px;
-        margin-right: 0;
-        overflow: hidden;
-        width: 100%;
-    }
-    &:last-child {
-        margin-right: 0;
-    }
-    &.reverse-responsive {
-        @media screen and (max-width: $breakpoint-md) {
-            flex-direction: row-reverse;
-        }
-    }
-}
-
-.sw-BallotCard_Name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.sw-BallotCard_VoteButton {
-    line-height: 44px;
-    min-width: 55px;
-    text-transform: capitalize;
-
-    &.xl {
-        min-width: 78px;
-    }
-    &.m-r-20 {
-        margin-right: 20px;
-    }
-    &.m-l-20 {
-        margin-left: 20px;
-    }
-
-    @media screen and (max-width: $breakpoint-md) {
-        &.m-r-20,
-        &.m-l-20 {
-            margin-left: 0;
-            margin-right: 20px;
-        }
-    }
-}
-
 ///////////////////////////
 ///////////////////////////
 ///////////////////////////

src/assets/stylesheets/components/_ButtonLoadMore.scss

@@ -40,4 +40,16 @@
     .sw-ButtonLoadMore:hover & {
         opacity: 0.7;
     }
+
+    .sw-ButtonLoadMore-core & {
+        color: $poa-purple;
+    }
+
+    .sw-ButtonLoadMore-sokol & {
+        color: $sokol-cyan;
+    }
+
+    .sw-ButtonLoadMore-dai & {
+        color: $xdai-gray;
+    }
 }

src/assets/stylesheets/components/_ButtonVoting.scss

@@ -9,19 +9,19 @@
     font-weight: 700;
     line-height: 42px;
     margin-right: 20px;
+    min-width: 55px;
     outline: none;
     padding: 0 15px;
     text-decoration: none;
     text-transform: uppercase;
     transition: 0.15s background-color linear;
-    width: 55px;
 
     &#{ & }-sm {
-        width: 55px;
+        min-width: 55px;
     }
 
     &#{ & }-md {
-        width: 78px;
+        min-width: 78px;
     }
 
     @media (min-width: $breakpoint-xl) {
@@ -33,6 +33,7 @@
         &#{ & }-right {
             margin-left: 20px;
             margin-right: 0;
+            order: 2;
         }
     }
 

src/assets/stylesheets/components/_Votes.scss

@@ -0,0 +1,39 @@
+.vt-Votes {
+    border-top: 1px solid $base-border-color;
+    display: flex;
+    margin-bottom: 30px;
+    margin-top: 30px;
+    padding: 30px 0 0 0;
+
+    @media screen and (max-width: $breakpoint-md) {
+        display: block;
+        margin-top: $tablet-indent;
+        padding: $tablet-indent 0 0 0;
+    }
+    @media screen and (max-width: $mobile-width) {
+        margin-top: $mobile-indent;
+        padding: $mobile-indent 0 0 0;
+    }
+}
+
+.vt-Votes_ScaleColumn {
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+    margin-right: 40px;
+
+    @media screen and (max-width: $breakpoint-md) {
+        margin-bottom: 30px;
+        margin-right: 0;
+        overflow: hidden;
+        width: 100%;
+    }
+    &:last-child {
+        margin-right: 0;
+    }
+    &.reverse-responsive {
+        @media screen and (max-width: $breakpoint-md) {
+            flex-direction: row-reverse;
+        }
+    }
+}

src/assets/stylesheets/components/_index.scss

@@ -33,4 +33,5 @@
 @import "NavigationLinks";
 @import "SearchBar";
 @import "SocialIcons";
-@import "VoteProgressBar";
+@import "VoteProgressBar";
+@import "Votes";

src/assets/stylesheets/index.scss

@@ -10,7 +10,6 @@
 @import 'application/controls';
 @import 'application/info';
 @import 'application/new';
-@import 'application/vote-scale';
 
 @import 'application/ballot-types';
 @import 'application/ballots/placeholders';

src/components/BallotCard/index.js

@@ -4,8 +4,7 @@ import swal from 'sweetalert2'
 import { BallotDataPair } from '../BallotDataPair'
 import { BallotFooter } from '../BallotFooter'
 import { BallotInfoContainer } from '../BallotInfoContainer'
-import { ButtonVoting } from '../ButtonVoting'
-import { VoteProgressBar } from '../VoteProgressBar'
+import { Votes } from '../Votes'
 import { getNetworkBranch } from '../../utils/utils'
 import { inject, observer } from 'mobx-react'
 import { messages } from '../../utils/messages'
@@ -653,95 +652,53 @@ export class BallotCard extends React.Component {
 
   render() {
     let { contractsStore, votingType, children } = this.props
-    let votingScale
+    let votes
 
     const threshold = this.getThreshold(contractsStore, votingType)
     const networkBranch = this.getVotingNetworkBranch()
 
     if (votingType === 'votingToManageEmissionFunds') {
-      votingScale = (
-        <div className="sw-BallotCard_Scale">
-          <div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
-            <ButtonVoting
-              networkBranch={networkBranch}
-              onClick={e => this.vote({ choice: BURN })}
-              size="md"
-              text="Burn"
-              type="negative"
-            />
-            <VoteProgressBar
-              networkBranch={networkBranch}
-              type="negative"
-              votesAmount={this.votesBurnNumber}
-              votesPercentage={this.votesBurnPercents}
-            />
-          </div>
-          <div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
-            <ButtonVoting
-              networkBranch={networkBranch}
-              onClick={e => this.vote({ choice: FREEZE })}
-              size="md"
-              text="Freeze"
-              type="neutral"
-            />
-            <VoteProgressBar
-              networkBranch={networkBranch}
-              type="neutral"
-              votesAmount={this.votesFreezeNumber}
-              votesPercentage={this.votesFreezePercents}
-            />
-          </div>
-          <div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
-            <ButtonVoting
-              networkBranch={networkBranch}
-              onClick={e => this.vote({ choice: SEND })}
-              size="md"
-              text="Send"
-              type="positive"
-            />
-            <VoteProgressBar
-              networkBranch={networkBranch}
-              type="positive"
-              votesAmount={this.votesSendNumber}
-              votesPercentage={this.votesSendPercents}
-            />
-          </div>
-        </div>
-      )
+      votes = [
+        {
+          onClick: e => this.vote({ choice: BURN }),
+          text: 'Burn',
+          type: 'negative',
+          votesAmount: this.votesBurnNumber,
+          votesPercentage: this.votesBurnPercents
+        },
+        {
+          onClick: e => this.vote({ choice: FREEZE }),
+          text: 'Freeze',
+          type: 'neutral',
+          votesAmount: this.votesFreezeNumber,
+          votesPercentage: this.votesFreezePercents
+        },
+        {
+          onClick: e => this.vote({ choice: SEND }),
+          text: 'Send',
+          type: 'positive',
+          votesAmount: this.votesSendNumber,
+          votesPercentage: this.votesSendPercents
+        }
+      ]
     } else {
-      votingScale = (
-        <div className="sw-BallotCard_Scale">
-          <div className="sw-BallotCard_ScaleColumn">
-            <ButtonVoting
-              networkBranch={networkBranch}
-              onClick={e => this.vote({ choice: REJECT })}
-              text="No"
-              type="negative"
-            />
-            <VoteProgressBar
-              networkBranch={networkBranch}
-              type="negative"
-              votesAmount={this.votesAgainstNumber}
-              votesPercentage={this.votesAgainstPercents}
-            />
-          </div>
-          <div className="sw-BallotCard_ScaleColumn reverse-responsive">
-            <VoteProgressBar
-              networkBranch={networkBranch}
-              type="positive"
-              votesAmount={this.votesForNumber}
-              votesPercentage={this.votesForPercents}
-            />
-            <ButtonVoting
-              networkBranch={networkBranch}
-              onClick={e => this.vote({ choice: ACCEPT })}
-              side="right"
-              text="Yes"
-              type="positive"
-            />
-          </div>
-        </div>
-      )
+      votes = [
+        {
+          onClick: e => this.vote({ choice: REJECT }),
+          text: 'No',
+          type: 'negative',
+          votesAmount: this.votesAgainstNumber,
+          votesPercentage: this.votesAgainstPercents
+        },
+        {
+          onClick: e => this.vote({ choice: ACCEPT }),
+          side: 'right',
+          text: 'Yes',
+          type: 'positive',
+          votesAmount: this.votesForNumber,
+          votesPercentage: this.votesForPercents
+        }
+      ]
     }
 
     return (
@@ -755,7 +712,7 @@ export class BallotCard extends React.Component {
             value={[this.startTime, `${this.timeTo.displayValue} (${this.timeTo.title})`]}
           />
         </div>
-        {votingScale}
+        <Votes networkBranch={networkBranch} votes={votes} />
         <BallotInfoContainer
           memo={this.memo}
           threshold={threshold}

src/components/VoteProgressBar/index.js

@@ -3,9 +3,9 @@ import React from 'react'
 export const VoteProgressBar = ({
   extraClassName = '',
   networkBranch,
+  type = 'positive',
   votesAmount = '',
-  votesPercentage = '',
-  type = 'positive'
+  votesPercentage = ''
 }) => {
   return (
     <div className={`vt-VoteProgressBar ${extraClassName} vt-VoteProgressBar-${networkBranch}`}>

src/components/Votes/index.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { ButtonVoting } from '../ButtonVoting'
+import { VoteProgressBar } from '../VoteProgressBar'
+
+export const Votes = ({ votes, networkBranch }) => {
+  const buttonSize = votes.length === 3 ? 'md' : 'sm'
+
+  return (
+    <div className="vt-Votes">
+      {votes.map((item, index) => {
+        return (
+          <div className="vt-Votes_ScaleColumn" key={index}>
+            <ButtonVoting
+              networkBranch={networkBranch}
+              onClick={item.onClick}
+              side={item.side ? item.side : undefined}
+              size={buttonSize}
+              text={item.text}
+              type={item.type}
+            />
+            <VoteProgressBar
+              networkBranch={networkBranch}
+              type={item.type}
+              votesAmount={item.votesAmount}
+              votesPercentage={item.votesPercentage}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}