(feat) Send / Burn / Freeze buttons.

src/assets/stylesheets/application/_buttons.scss

@@ -48,11 +48,13 @@ textarea {
   @include make-themed-btn('btn-primary', $primary-color, (92, 52, 162, 0.3));
   @include make-themed-btn('btn-success', $success-color, (96, 219, 151, 0.3));
   @include make-themed-btn('btn-danger', $danger-color, (242, 27, 87, 0.3));
+  @include make-themed-btn('btn-freeze', $freeze-color, (80, 187, 218, 0.3));
 
   .sokol & {
     @include make-themed-btn('btn-primary', $primary-color-sokol, (106, 201, 185, 0.3));
     @include make-themed-btn('btn-success', $success-color-sokol, (96, 219, 151, 0.3));
     @include make-themed-btn('btn-danger', $danger-color-sokol, (242, 76, 103, 0.33));
+    @include make-themed-btn('btn-freeze', $freeze-color-sokol, (80, 187, 218, 0.3));
   }
 
   &.btn-new {

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

@@ -1,5 +1,5 @@
 .vote-scale {
-  background-color: fade-out(#e5eef9, 0.5);
+  background-color: #f0f0f0;
   border-radius: 5px;
   clear: left;
   height: 10px;
@@ -27,16 +27,32 @@
         background-color: $success-color-sokol;
       }
     }
+
+    &_send {
+      background-color: $success-color;
+      .sokol & {
+        background-color: $success-color-sokol;
+      }
+    }
+
+    &_burn {
+      background-color: $danger-color;
+      .sokol & {
+        background-color: $danger-color-sokol;
+      }
+    }
+
+    &_freeze {
+      background-color: $freeze-color;
+      .sokol & {
+        background-color: $freeze-color-sokol;
+      }
+    }
+
   }
 
   &--container {
     width: 100%;
-    max-width: 350px;
-
-    @media screen and (max-width: $tablet-width) {
-      float: right;
-      max-width: 100%;
-    }
   }
 
   &--value {

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

@@ -19,7 +19,6 @@
     &-scale {
       border-top: 1px solid $base-border-color;
       display: flex;
-      justify-content: space-between;
       margin-bottom: 30px;
       margin-top: 30px;
       padding: 30px 0 0 0;
@@ -34,18 +33,27 @@
       }
       &-column {
         display: flex;
+        flex-grow: 1;
         justify-content: space-between;
-        width: 47.5%;
+        margin-right: 40px;
+
         @media screen and (max-width: $tablet-width) {
+          margin-bottom: 30px;
+          margin-right: 0;
           overflow: hidden;
           width: 100%;
         }
+
         &:last-child {
+          margin-right: 0;
+        }
+
+        &.reverse-responsive {
           @media screen and (max-width: $tablet-width) {
             flex-direction: row-reverse;
-            margin-top: 30px;
           }
         }
+
       }
     }
     &--name {
@@ -75,10 +83,21 @@
         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: $tablet-width) {
-          float: left;
-          margin-left: 0;
-          margin-right: 15px;
+          &.m-r-20,
+          &.m-l-20 {
+            margin-left: 0;
+            margin-right: 20px;
+          }
         }
       }
     }

src/assets/stylesheets/helpers/_vars.scss

@@ -6,6 +6,8 @@ $primary-color-darker: #45277a;
 $primary-color-sokol: #6ac9b9;
 $primary-color-darker-sokol: #41b19e;
 $danger-color: #f21b57;
+$freeze-color: #50bbda;
+$freeze-color-sokol: #50bbda;
 $danger-color-sokol: #f24c67;
 $success-color: #60db97;
 $success-color-sokol: #6ac9b9;

src/components/BallotCard.jsx

@@ -441,12 +441,73 @@ export class BallotCard extends React.Component {
             </div>
           </div>
         </div>
+        {/* Send / Burn / Freeze */}
         <div className="ballots-i-scale">
+          <div className="ballots-i-scale-column ballots-i-scale-column-3">
+            <button
+              className="btn btn-success ballots-i--vote_btn xl m-r-20"
+              onClick={e => this.vote({ choice: ACCEPT })}
+              type="button"
+            >
+              Send
+            </button>
+            <div className="vote-scale--container">
+              <p className="vote-scale--votes">{this.votesForNumber} Votes</p>
+              <p className="vote-scale--percentage">{this.votesForPercents}%</p>
+              <div className={voteScaleClass}>
+                <div
+                  className="vote-scale--fill vote-scale--fill_send"
+                  style={{ width: `${this.votesForPercents}%` }}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="ballots-i-scale-column ballots-i-scale-column-3">
+            <button
+              type="button"
+              onClick={e => this.vote({ choice: REJECT })}
+              className="btn btn-danger ballots-i--vote_btn xl m-r-20"
+            >
+              Burn
+            </button>
+            <div className="vote-scale--container">
+              <p className="vote-scale--votes">{this.votesAgainstNumber} Votes</p>
+              <p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
+              <div className={voteScaleClass}>
+                <div
+                  className="vote-scale--fill vote-scale--fill_burn"
+                  style={{ width: `${this.votesAgainstPercents}%` }}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="ballots-i-scale-column ballots-i-scale-column-3">
+            <button
+              type="button"
+              onClick={e => this.vote({ choice: REJECT })}
+              className="btn btn-freeze ballots-i--vote_btn xl m-r-20"
+            >
+              Freeze
+            </button>
+            <div className="vote-scale--container">
+              <p className="vote-scale--votes">{this.votesAgainstNumber} Votes</p>
+              <p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
+              <div className={voteScaleClass}>
+                <div
+                  className="vote-scale--fill vote-scale--fill_freeze"
+                  style={{ width: `${this.votesAgainstPercents}%` }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* No / yes */}
+        {/* <div className="ballots-i-scale">
           <div className="ballots-i-scale-column">
             <button
               type="button"
               onClick={e => this.vote({ choice: REJECT })}
-              className="btn btn-danger ballots-i--vote_no ballots-i--vote_btn"
+              className="btn btn-danger ballots-i--vote_btn m-r-20"
             >
               No
             </button>
@@ -461,7 +522,7 @@ export class BallotCard extends React.Component {
               </div>
             </div>
           </div>
-          <div className="ballots-i-scale-column">
+          <div className="ballots-i-scale-column reverse-responsive">
             <div className="vote-scale--container">
               <p className="vote-scale--votes">{this.votesForNumber} Votes</p>
               <p className="vote-scale--percentage">{this.votesForPercents}%</p>
@@ -470,14 +531,14 @@ export class BallotCard extends React.Component {
               </div>
             </div>
             <button
-              className="btn btn-success ballots-i--vote_yes ballots-i--vote_btn"
+              className="btn btn-success ballots-i--vote_btn m-l-20"
               onClick={e => this.vote({ choice: ACCEPT })}
               type="button"
             >
               Yes
             </button>
           </div>
-        </div>
+        </div> */}
         <div className="info-container">
           <div className="info info-minimum">
             Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal