(feat) Ballot cards restyling.

src/assets/images/icons/icon-info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18">
+    <path fill="#333" fill-rule="evenodd" d="M9 18H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v11h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+</svg>

src/assets/images/icons/icon-min.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#333" fill-rule="evenodd" d="M17 18h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6h-4v4h4v-4zm1-4h-6a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6h-4v4h4V2zM7 18H1a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h4v-4zm.728-8.514l-.118.118-.127.128h-.001l-.881.882-.78.779c-.023.03-.034.066-.062.093l-.805.805a.86.86 0 0 1-.222.441c-.2.2-.471.269-.732.237a.869.869 0 0 1-.732-.237.86.86 0 0 1-.222-.441l-.56-.559-.127-.128-.118-.118-1-1a.88.88 0 1 1 1.245-1.245l1.246 1.245.268.268.175-.175c.023-.03.034-.065.062-.093l1.246-1.245.754-.755 1.246-1.245a.88.88 0 1 1 1.245 1.245l-1 1z"/>
+</svg>

src/assets/stylesheets/application/_info.scss

@@ -1,18 +1,64 @@
+.info-container {
+  background-color: #f8f8f8;
+  margin-bottom: 20px;
+  margin-left: -#{ $desktop-indent };
+  margin-right: -#{ $desktop-indent };
+  padding-bottom: #{ $desktop-indent };
+  padding-left: #{ $desktop-indent };
+  padding-right: #{ $desktop-indent };
+  padding-top: #{ $desktop-indent };
+
+  @media screen and (max-width: $tablet-width) {
+    margin-left: -#{ $tablet-indent };
+    margin-right: -#{ $tablet-indent };
+    padding-left: #{ $tablet-indent };
+    padding-right: #{ $tablet-indent };
+  }
+
+}
 .info {
   color: #000;
 
   .ballots & {
-    @include image-2x('./images/info@2x.png', 32px, 32px);
+    background-position: 0 7px;
-    align-items: center;
-    background-image: url(./images/info.png);
-    background-position: left center;
     background-repeat: no-repeat;
-    display: flex;
+    color: #333333;
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-height: 1.71;
     margin-bottom: 20px;
     max-width: 100%;
     min-height: 32px;
-    padding-left: 44px;
+    padding-left: 30px;
+    text-align: left;
     word-break: break-all;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &-minimum {
+      background-image: url('#{ $base-images-path }/icons/icon-min.svg');
+      background-size: 18px 18px;
+    }
+    &-details {
+      background-image: url('#{ $base-images-path }/icons/icon-info.svg');
+      background-size: 10px 18px;
+      position: relative;
+      &.collapsed {
+        height: 90px;
+        overflow: hidden;
+      }
+
+      .toggle-show {
+        color: $primary-color;
+        cursor: pointer;
+        display: inline-block;
+        margin-left: 5px;
+      }
+    }
+
   }
 
   .new-form & {

src/assets/stylesheets/application/_socials.scss

@@ -102,80 +102,3 @@
     }
   }
 }
-
-// .socials {
-//   font-size: 0;
-
-//   .footer & {
-//     right: 0;
-//   }
-
-//   &-i {
-//     transition: 0.3s background-color;
-//     position: relative;
-//     display: inline-block;
-//     vertical-align: top;
-//     width: 30px;
-//     height: 30px;
-//     border-radius: 50%;
-//     background-color: fade-out(#fff, 0.8);
-
-//     &:not(:first-child) {
-//       margin-left: 10px;
-//     }
-
-//     &:hover {
-//       background-color: fade-out(#fff, 0.6);
-//     }
-
-//     &:before {
-//       @include image-2x('./images/socials@2x.png', 16px, 69px);
-//       transform: translate(-50%, -50%);
-//       content: '';
-//       position: absolute;
-//       left: 50%;
-//       top: 50%;
-//       background-image: url(./images/socials.png);
-//     }
-
-//     &_github {
-//       &:before {
-//         width: 16px;
-//         height: 16px;
-//         background-position: 0 0;
-//       }
-//     }
-
-//     &_oracles {
-//       &:before {
-//         width: 16px;
-//         height: 14px;
-//         background-position: 0 -16px;
-//       }
-//     }
-
-//     &_reddit {
-//       &:before {
-//         width: 15px;
-//         height: 13px;
-//         background-position: 0 -30px;
-//       }
-//     }
-
-//     &_telegram {
-//       &:before {
-//         width: 16px;
-//         height: 14px;
-//         background-position: 0 -43px;
-//       }
-//     }
-
-//     &_twitter {
-//       &:before {
-//         width: 15px;
-//         height: 12px;
-//         background-position: 0 -57px;
-//       }
-//     }
-//   }
-// }

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

@@ -15,7 +15,7 @@
     border-radius: 3px;
 
     &_yes {
-      background-color: $danger-color;;
+      background-color: $danger-color;
     }
 
     &_no {

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

@@ -17,14 +17,14 @@
       width: 100% !important;
     }
     &_name {
-      width: 20%;
+      width: 12%;
     }
     &_action {
-      width: 10%;
+      width: 8%;
     }
     // 25
     &_type {
-      width: 10%;
+      width: 8%;
     }
     &_proposal {
       width: 30%;
@@ -50,35 +50,13 @@
       word-break: break-all;
     }
     &_time {
-      width: 8%;
+      width: 20%;
-      text-align: right;
-      @media screen and (max-width: $tablet-width) {
-        text-align: left;
-      }
-      #{$this}-i--title {
-        text-align: right;
-        @media screen and (max-width: $tablet-width) {
-          text-align: left;
-        }
-      }
     }
     &--title {
-      color: #333;
+      color: #777;
       font-size: 13px;
-      font-weight: 700;
+      font-weight: 400;
-      left: 0;
-      position: absolute;
-      right: 0;
       text-align: left;
-      top: -#{ $desktop-indent * 2 + 10 };
-      z-index: 1;
-      @media screen and (max-width: $tablet-width) {
-        position: relative;
-        left: auto;
-        right: auto;
-        top: auto;
-        white-space: nowrap;
-      }
     }
     &:first-child .ballots-about-td-value {
       border-left: none;
@@ -91,14 +69,11 @@
   }
   &-td {
     &.ballots-about-td-value {
-      border-right: 1px solid $base-border-color;
+      color: #333;
-      font-size: 13px;
+      font-size: 14px;
-      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;
       }
@@ -118,4 +93,4 @@
       }
     }
   }
-}
+}

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

@@ -10,18 +10,14 @@
   }
   &-i {
     @extend %white-block;
-    background-color: rgba(240, 240, 240, 0.2);
+    background-color: #fff;
-    &-not-finalized {
-      background-color: #fff;
-      border-color: rgba($primary-color, 0.3);
-    }
     &-scale {
-      border-top: 1px solid #e5eef9;
+      border-top: 1px solid $base-border-color;
       display: flex;
       justify-content: space-between;
       margin-bottom: 30px;
-      margin-top: $desktop-indent;
+      margin-top: 30px;
-      padding: $desktop-indent 0 0 0;
+      padding: 30px 0 0 0;
       @media screen and (max-width: $tablet-width) {
         display: block;
         margin-top: $tablet-indent;
@@ -48,47 +44,19 @@
       }
     }
     &--name {
-      color: #333;
-      font-weight: bold;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    &--created {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6M9jT1MAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lKU1RZYmNrbHV2iYqLo6Spqqusra7Cw8TFysvM29zk5ufo6/Lz+Pn8DzgVHgAAATNJREFUeNplk+1agkAQhQfRykQTrJTEUjSCvtTQECPk/q+qPQ7LsnR+7DOzL898LiRlOP46zfN0vXQM0tXydkWlndeqs/620LTtK3Z7LBo6OpLd5fDzl6nVubSnIXv3zIY/8N4HVGrwBj8bwjaR77SgmhYn5DWF5eE7ZoribkZkoIeI78ZJMmYrQkcGjZD9mq+SokjY6qKqEfniDIiFYMR6FqZPn+J8+A9dYX5QKs5eBaFz3p4wUkLwizrkvB2UcoZXJUwYHiqIsDclnBzAvicyrFYQpBW0lK0oqVbkEHR1fzEEHl/YhCHG1yKaoYi5zubl4Mn8wsqe6uwRK4tNmHaG717VsiP4mV1uih9G4FrttuUG7GGGTLOioUwyRI51Ftv6o94rtNcfNbCz2uB32KycCv0BfU5XCrQEyKwAAAAASUVORK5CYII=);
-      background-position: left center;
-      background-repeat: no-repeat;
-      background-size: 14px 14px;
-      font-size: 13px;
-      font-weight: 700;
-      padding-left: 20px;
-    }
     &--see-all-proposal {
       display: inline-block;
       margin-top: 5px;
     }
-    &--time {
-      color: #333;
-      font-size: 24px;
-      font-weight: bold;
-      @media screen and (max-width: $tablet-width) {
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 10px;
-      }
-    }
-    &--to-close {
-      color: #333;
-      text-transform: uppercase;
-      @media screen and (max-width: $tablet-width) {
-        display: inline-block;
-        vertical-align: middle;
-      }
-    }
     &--vote {
       @extend %_button;
       &-label {
+        color: #333;
         cursor: default;
-        font-size: 15px;
+        font-size: 14px;
         font-weight: 700;
         line-height: 1.2;
         @media screen and (max-width: $mobile-width) {
@@ -98,11 +66,13 @@
       &-label-right {
         margin-left: auto !important;
       }
-      &_no {
+      &_no,
+      &_yes {
         @media screen and (max-width: $tablet-width) {
           float: left;
           margin-left: 0;
           margin-right: 15px;
+          min-width: 51px;
         }
       }
     }

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

@@ -27,7 +27,11 @@
   }
 
   p {
-    color: $gray-text-color;
+    color: #777;
+    font-size: 14px;
+    font-stretch: normal;
+    font-style: normal;
+    font-weight: normal;
     line-height: 18px;
     max-width: 340px;
     padding-left: 15px;

src/assets/stylesheets/helpers/_placeholders.scss

@@ -11,9 +11,9 @@
 
 %white-block {
   background-color: #fff;
-  border: 1px solid $base-border-color;
   border-radius: 6px;
-  margin-bottom: 80px;
+  border: 1px solid $base-border-color;
+  margin-bottom: 30px;
   padding: $desktop-indent;
   transition: 0.15s box-shadow;
 

src/assets/stylesheets/helpers/_vars.scss

@@ -14,7 +14,7 @@ $btn-primary-bg: $primary-color;
 $btn-secondary-bg: #61db97;
 
 // borders
-$base-border-color: #b8c1cb;
+$base-border-color: #e4e4e4;
 
 // widths
 $container-width: 960px;

src/components/BallotCard.jsx

@@ -9,6 +9,7 @@ import swal from 'sweetalert2'
 const ACCEPT = 1
 const REJECT = 2
 const USDateTimeFormat = 'MM/DD/YYYY h:mm:ss A'
+const maxDetailsLength = 500
 
 const zeroTimeTo = '00:00'
 
@@ -47,7 +48,9 @@ export class BallotCard extends React.Component {
 
   @computed
   get finalizeButtonClass() {
-    const cls = this.isFinalized ? 'btn btn-primary btn-finalize disabled' : 'btn btn-primary btn-finalize'
+    const cls = this.isFinalized
+      ? 'btn btn-primary btn-finalize disabled text-capitalize'
+      : 'btn btn-primary btn-finalize text-capitalize'
     return cls
   }
 
@@ -350,6 +353,13 @@ export class BallotCard extends React.Component {
     } else {
       this.getHasAlreadyVoted()
     }
+    this.state = {
+      detailsCollapsed: this.memo.length > maxDetailsLength
+    }
+  }
+
+  toggleDetails = () => {
+    this.setState(prevState => ({ detailsCollapsed: !prevState.detailsCollapsed }))
   }
 
   componentDidMount() {
@@ -399,6 +409,14 @@ export class BallotCard extends React.Component {
     )
     let showHasAlreadyVotedLabel = this.hasAlreadyVoted ? hasAlreadyVotedLabel : ''
     const threshold = this.getThreshold(contractsStore, votingType)
+    let toggleShowMore =
+      this.memo.length > maxDetailsLength ? (
+        <span className="toggle-show more" onClick={this.toggleDetails}>
+          {this.state.detailsCollapsed ? 'More...' : 'Less'}
+        </span>
+      ) : (
+        ''
+      )
     return (
       <div className={ballotClass}>
         <div className="ballots-about">
@@ -408,7 +426,6 @@ export class BallotCard extends React.Component {
             </div>
             <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}
@@ -417,8 +434,10 @@ export class BallotCard extends React.Component {
               <p className="ballots-about-i--title">Ballot Time</p>
             </div>
             <div className="ballots-about-td ballots-about-td-value">
-              <p className="ballots-i--time">{this.timeTo.displayValue}</p>
+              <p className="ballots-i--created">{this.startTime}</p>
-              <p className="ballots-i--to-close">{this.timeTo.title}</p>
+              <p className="ballots-i--time">
+                {this.timeTo.displayValue}&nbsp;({this.timeTo.title})
+              </p>
             </div>
           </div>
         </div>
@@ -459,11 +478,17 @@ export class BallotCard extends React.Component {
             </button>
           </div>
         </div>
-        <div className="info">
+        <div className="info-container">
-          Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal
+          <div className="info info-minimum">
+            Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal
+          </div>
+          <div className={`info info-details ${this.state.detailsCollapsed ? 'collapsed' : ''}`}>
+            {this.state.detailsCollapsed
+              ? this.memo.substr(0, this.memo.lastIndexOf(' ', maxDetailsLength))
+              : this.memo}
+            {toggleShowMore}
+          </div>
         </div>
-        <div className="info">{this.memo}</div>
-        <hr />
         <div className="ballots-footer">
           <div className="ballots-footer-left">
             <button type="button" onClick={e => this.finalize(e)} className={this.finalizeButtonClass}>