(fix) add separators to ballot columns.

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

@@ -1,5 +1,4 @@
 .ballots-about {
-  font-size: 0;
   @media screen and (max-width: $tablet-width) {
     display: table;
     width: 100%;
@@ -13,12 +12,6 @@
     display: inline-block;
     vertical-align: top;
     box-sizing: border-box;
-    &:not(&_time) {
-      padding-right: 10px;
-      @media screen and (max-width: $tablet-width) {
-        padding-right: 0;
-      }
-    }
     @media screen and (max-width: $tablet-width) {
       display: table-row;
       width: 100% !important;
@@ -37,7 +30,7 @@
       width: 30%;
     }
     &_key {
-      width: 25%;
+      width: 26%;
       word-break: break-all;
     }
     &_key_wide {
@@ -57,7 +50,7 @@
       word-break: break-all;
     }
     &_time {
-      width: 10%;
+      width: 8%;
       text-align: right;
       @media screen and (max-width: $tablet-width) {
         text-align: left;
@@ -71,13 +64,13 @@
     }
     &--title {
       color: #333;
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 700;
       left: 0;
       position: absolute;
       right: 0;
       text-align: left;
-      top: -#{$desktop-indent * 2};
+      top: -#{ $desktop-indent * 2 + 10 };
       z-index: 1;
       @media screen and (max-width: $tablet-width) {
         position: relative;
@@ -87,15 +80,36 @@
         white-space: nowrap;
       }
     }
+    &:first-child .ballots-about-td-value {
+      border-left: none;
+      padding-left: 0;
+    }
+    &:last-child .ballots-about-td-value {
+      border-right: none;
+      padding-right: 0;
+    }
   }
   &-td {
+    &.ballots-about-td-value {
+      border-right: 1px solid $base-border-color;
+      font-size: 13px;
+      min-height: 56px;
+      padding-left: 5px;
+      padding-right: 5px;
+      @media screen and (max-width: $tablet-width) {
+        border: none;
+        min-height: 0;
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
     @media screen and (max-width: $tablet-width) {
       display: table-cell;
       vertical-align: top;
     }
     &:first-child {
       @media screen and (max-width: $tablet-width) {
-        padding-right: 20px;
+        padding-right: 10px;
       }
     }
     #{$this}-i:not(:last-child) & {

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

@@ -16,19 +16,20 @@
       border-color: rgba($primary-color, 0.3);
     }
     &-scale {
+      border-top: 1px solid #e5eef9;
       display: flex;
       justify-content: space-between;
+      margin-bottom: 30px;
       margin-top: $desktop-indent;
-      border-top: 1px solid #e5eef9;
-      padding: $desktop-indent 0;
+      padding: $desktop-indent 0 0 0;
       @media screen and (max-width: $tablet-width) {
         display: block;
         margin-top: $tablet-indent;
-        padding: $tablet-indent 0;
+        padding: $tablet-indent 0 0 0;
       }
       @media screen and (max-width: $mobile-width) {
         margin-top: $mobile-indent;
-        padding: $mobile-indent 0;
+        padding: $mobile-indent 0 0 0;
       }
       &-column {
         display: flex;

src/assets/stylesheets/helpers/_vars.scss

@@ -35,9 +35,9 @@ $footer-height_desktop: 66px;
 $footer-height_mobile: 132px;
 
 // misc
-$desktop-indent: 30px;
-$tablet-indent: 20px;
-$mobile-indent: 15px;
+$desktop-indent: 20px;
+$tablet-indent: 15px;
+$mobile-indent: 10px;
 
 // forms
 $input-height: 40px;

src/components/BallotCard.jsx

@@ -408,20 +408,20 @@ export class BallotCard extends React.Component {
       <div className={ballotClass}>
         <div className="ballots-about">
           <div className="ballots-about-i ballots-about-i_name">
-            <div className="ballots-about-td">
+            <div className="ballots-about-td ballots-about-td-title">
               <p className="ballots-about-i--title">Proposer</p>
             </div>
-            <div className="ballots-about-td">
+            <div className="ballots-about-td ballots-about-td-value">
               <p className="ballots-i--name">{this.creator}</p>
               <p className="ballots-i--created">{this.startTime}</p>
             </div>
           </div>
           {children}
           <div className="ballots-about-i ballots-about-i_time">
-            <div className="ballots-about-td">
+            <div className="ballots-about-td ballots-about-td-title">
               <p className="ballots-about-i--title">Ballot Time</p>
             </div>
-            <div className="ballots-about-td">
+            <div className="ballots-about-td ballots-about-td-value">
               <p className="ballots-i--time">{this.timeTo.displayValue}</p>
               <p className="ballots-i--to-close">{this.timeTo.title}</p>
             </div>
@@ -437,7 +437,6 @@ export class BallotCard extends React.Component {
               No
             </button>
             <div className="vote-scale--container">
-              {/* <p className="vote-scale--value">No</p> */}
               <p className="vote-scale--votes">Votes: {this.votesAgainstNumber}</p>
               <p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
               <div className={voteScaleClass}>
@@ -450,7 +449,6 @@ export class BallotCard extends React.Component {
           </div>
           <div className="ballots-i-scale-column">
             <div className="vote-scale--container">
-              {/* <p className="vote-scale--value">Yes</p> */}
               <p className="vote-scale--votes">Votes: {this.votesForNumber}</p>
               <p className="vote-scale--percentage">{this.votesForPercents}%</p>
               <div className={voteScaleClass}>

src/components/BallotKeysCard.jsx

@@ -24,10 +24,10 @@ export class BallotKeysCard extends React.Component {
       affectedKeyClassName = 'ballots-about-i_key'
       miningKeyDiv = (
         <div className="ballots-about-i ballots-about-i_key">
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-title">
             <p className="ballots-about-i--title">Validator key</p>
           </div>
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-value">
             <p>{votingState.miningKey}</p>
           </div>
         </div>
@@ -37,26 +37,26 @@ export class BallotKeysCard extends React.Component {
     return (
       <BallotCard votingType="votingToChangeKeys" votingState={votingState} id={id} pos={pos}>
         <div className="ballots-about-i ballots-about-i_action">
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-title">
             <p className="ballots-about-i--title">Action</p>
           </div>
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-value">
             <p>{votingState.ballotTypeDisplayName}</p>
           </div>
         </div>
         <div className="ballots-about-i ballots-about-i_type">
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-title">
             <p className="ballots-about-i--title">Key type</p>
           </div>
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-value">
             <p>{votingState.affectedKeyTypeDisplayName}</p>
           </div>
         </div>
         <div className={`ballots-about-i ${affectedKeyClassName}`}>
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-title">
             <p className="ballots-about-i--title">Affected key</p>
           </div>
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-value">
             {affectedKey}
             {newVotingKey}
             {newPayoutKey}

src/components/BallotMinThresholdCard.jsx

@@ -10,10 +10,10 @@ export class BallotMinThresholdCard extends React.Component {
     return (
       <BallotCard votingType="votingToChangeMinThreshold" votingState={votingState} id={id} pos={pos}>
         <div className="ballots-about-i ballots-about-i_proposed-min-threshold">
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-title">
             <p className="ballots-about-i--title">Proposed min threshold</p>
           </div>
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-value">
             <p>{votingState.proposedValue}</p>
           </div>
         </div>

src/components/BallotProxyCard.jsx

@@ -10,18 +10,18 @@ export class BallotProxyCard extends React.Component {
     return (
       <BallotCard votingType="votingToChangeProxy" votingState={votingState} id={id} pos={pos}>
         <div className="ballots-about-i ballots-about-i_contract-type">
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-title">
             <p className="ballots-about-i--title">Contract type</p>
           </div>
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-value">
             <p>{votingState.contractTypeDisplayName}</p>
           </div>
         </div>
         <div className="ballots-about-i ballots-about-i_proposed-address">
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-title">
             <p className="ballots-about-i--title">Proposed contract address</p>
           </div>
-          <div className="ballots-about-td">
+          <div className="ballots-about-td ballots-about-td-value">
             <p>{votingState.proposedValue}</p>
           </div>
         </div>