removes orange blocks and improves contrast on proposals

app/assets/stylesheets/_settings.scss

@@ -51,6 +51,7 @@ $base-font-size:      rem-calc(17);
 $base-line:           rem-calc(26);
 $small-font-size:     rem-calc(14);
 $line-height:         rem-calc(24);
+$tiny-font-size:      rem-calc(12);
 
 $brand:             #004A83;
 $dark:              darken($brand, 10%);
@@ -66,7 +67,6 @@ $link-hover:        darken($link, 20%);
 
 $debates:           #008CCF;
 
-$votes:             #26AEEE;
 $like:              #7BD2A8;
 $unlike:            #EF8585;
 
@@ -79,7 +79,7 @@ $budget:            #454372;
 $budget-hover:      #7571BF;
 
 $highlight:         #E7F2FC;
-$featured:          #FED900;
+$featured:          #FFDC5C;
 
 $footer-border:     #BFC1C3;
 

app/assets/stylesheets/layout.scss

@@ -1247,13 +1247,14 @@ table {
 }
 
 .share-supported {
+  text-align: center;
 
   .social-share-button {
     display: inline-block;
   }
 
   .ssb-twitter {
-    background: none;
+    background: #45B0E3;
     color: white;
     height: $line-height;
     position: relative;
@@ -1276,7 +1277,7 @@ table {
   }
 
   .ssb-facebook {
-    background: none;
+    background: #3B5998;
     color: white;
     height: rem-calc(24);
     position: relative;
@@ -1299,7 +1300,7 @@ table {
   }
 
   .ssb-google_plus {
-    background: none;
+    background: #DE4C34;
     color: white;
     height: rem-calc(24);
     position: relative;

app/assets/stylesheets/participation.scss

@@ -120,64 +120,65 @@
 }
 
 @mixin supports {
-  background: $proposals;
-  margin: 0 rem-calc(-12);
-  padding: rem-calc(14) rem-calc(12);
+  padding: $line-height 0;
   position: relative;
 
   .progress {
-    background-color: rgba(255,255,255,.8);
-    height: $line-height/2;
+    background: lighten($proposals, 35%);
+    border: 1px solid lighten($proposals, 35%);
+    height: rem-calc(14);
+    position: relative;
 
     .meter {
-      background: $like;
+      background: $proposals;
+      border-radius: 0;
+      border-bottom-right-radius: rem-calc(3);
+      border-top-right-radius: rem-calc(3);
       display: block;
       height: $line-height/2;
     }
   }
 
   .percentage {
-    font-size: rem-calc(10);
-    color: $brand;
-    vertical-align: top;
+    color: $text;
+    font-size: $tiny-font-size;
     position: absolute;
-    top: 13px;
-    right: 20px;
+    right: 6px;
+    top: -2px;
+    vertical-align: top;
   }
 
   abbr {
-    color: white;
+    color: $text-medium;
 
     &[title] {
-      border-bottom: 1px dotted white;
+      border-bottom: 1px dotted $text-medium;
     }
   }
 
   .button-support {
-    background: white;
+    background: $proposals;
     color: $text;
     display: inline-block;
     font-size: $small-font-size;
     margin-top: rem-calc(12);
 
-    &:hover {
-      background: darken($proposals, 35%);
-      color: white;
+    &:hover, &:active {
+      background: lighten($proposals, 25%);
       cursor: pointer;
     }
-
-    &:active {
-      opacity: .75;
-    }
   }
 
   .total-supports {
-    color: white;
+    color: $text;
+    display: block;
+    font-weight: bold;
     text-align: center;
-    font-size: $small-font-size;
 
     span {
       display: block;
+      font-size: $small-font-size;
+      font-weight: normal;
     }
   }
 
@@ -186,23 +187,17 @@
   }
 
   .supported {
-    color: white;
+    color: $text;
     margin-top: rem-calc(12);
   }
 }
 
-.message {
-  @include supports;
-  background: none;
-  border-top: 0;
+.supports-container {
+  border-top: 1px solid $border;
 
   @include breakpoint(medium) {
     border-left: 1px solid $border;
-    margin: $line-height rem-calc(-25) 0 rem-calc(12);
-  }
-
-  p {
-    font-size: $small-font-size;
+    border-top: 0;
   }
 }
 
@@ -438,15 +433,6 @@
 
   .supports {
     @include supports;
-    border: 0;
-    border-radius: 0;
-    margin: 0;
-
-    .total-supports {
-      display: block;
-      float: none;
-      line-height: $line-height;
-    }
   }
 
   .leave-comment {
@@ -471,6 +457,17 @@
   word-break: break-word;
 }
 
+.proposal-show {
+
+  .supports {
+    padding: $line-height/2 0 0;
+  }
+
+  .share-supported {
+    display: none;
+  }
+}
+
 // 04. List participation
 // ----------------------
 
@@ -667,45 +664,6 @@
 
   .supports {
     @include supports;
-    border: 1px solid $proposals;
-    margin: 0 rem-calc(-12);
-
-    @include breakpoint(medium) {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-      margin: 0 rem-calc(-25) 0 rem-calc(12);
-    }
-
-    &:after {
-      content: none;
-      position: absolute;
-      display: block;
-      border-style: solid;
-      border-color: #664212 transparent transparent transparent;
-      bottom: -14px;
-      border-left-width: 0;
-      border-right-color: transparent;
-      right: -1px;
-      border-width: 13px 13px 0 0;
-
-      @include breakpoint(medium) {
-        content: "";
-      }
-    }
-
-    .total-supports {
-      display: inline-block;
-      line-height: $line-height;
-      padding-top: rem-calc(12);
-      vertical-align: top;
-
-      @include breakpoint(medium) {
-        display: block;
-        float: none;
-        margin-left: 0;
-        padding-top: 0;
-      }
-    }
   }
 }
 
@@ -857,7 +815,14 @@
     }
 
     .button-support {
+      background: $text;
+      color: $featured;
       margin-top: 0;
+
+      &:hover {
+        background: white;
+        color: $text;
+      }
     }
 
     .participation-not-allowed {
@@ -878,6 +843,7 @@
 
     .supported {
       margin-top: 0;
+      font-size: $small-font-size;
     }
 
     .share-supported {
@@ -885,7 +851,10 @@
       .ssb-twitter,
       .ssb-facebook,
       .ssb-google_plus {
-        height: rem-calc(33);
+        background: none;
+        color: $text;
+        height: rem-calc(33) !important;
+
 
         &:before {
           font-size: rem-calc(18);

app/views/proposals/_featured_votes.html.erb

@@ -1,4 +1,4 @@
-<div class="supports">
+<div class="supports text-center">
   <div class="in-favor">
     <% if voted_for?(@featured_proposals_votes, proposal) %>
       <div class="supported">

app/views/proposals/_proposal.html.erb

@@ -52,26 +52,22 @@
         </div>
       </div>
 
-      <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column">
+      <div id="<%= dom_id(proposal) %>_votes" class="small-12 medium-3 column supports-container">
+        <div class="supports text-center">
           <% if proposal.successfull? %>
-          <div class="message">
             <p>
               <%= t("proposal_ballots.successfull",
                   voting: link_to(t("proposal_ballots.voting"), proposal_ballots_path)).html_safe %>
             </p>
-          </div>
           <% elsif proposal.archived? %>
-          <div class="message">
             <strong><%= t("proposals.proposal.supports", count: proposal.total_votes) %></strong>
             <p><%= t("proposals.proposal.archived") %></p>
-          </div>
           <% else %>
-          <div class="text-center">
             <%= render 'votes',
                       { proposal: proposal, vote_url: vote_proposal_path(proposal, value: 'yes') } %>
-          </div>
           <% end %>
         </div>
       </div>
     </div>
+  </div>
 </div>

app/views/proposals/_votes.html.erb

@@ -1,24 +1,22 @@
-<div class="supports">
-
-  <div class="progress small-12 round">
+<div class="progress small-12 round">
   <span class="meter" style="width: <%= progress_bar_percentage(proposal) %>%;"></span>
   <span class="percentage">
     <%= supports_percentage(proposal) %>&nbsp;/&nbsp;<%= t("proposals.proposal.total_percent") %>
   </span>
-  </div>
+</div>
 
-  <span class="total-supports">
+<span class="total-supports">
   <%= t("proposals.proposal.supports", count: proposal.total_votes) %>&nbsp;
   <span>
     <abbr title="<%= t("proposals.proposal.reason_for_supports_necessary") %>">
       <%= t("proposals.proposal.supports_necessary", number: number_with_delimiter(Proposal.votes_needed_for_success)) %>
     </abbr>
   </span>
-  </span>
+</span>
 
-  <div class="in-favor">
+<div class="in-favor">
   <% if voted_for?(@proposal_votes, proposal) %>
-      <div class="supported">
+    <div class="supported callout success">
       <%= t("proposals.proposal.already_supported") %>
     </div>
   <% else %>
@@ -28,32 +26,31 @@
       <%= t("proposals.proposal.support") %>
     <% end %>
   <% end %>
-  </div>
+</div>
 
-  <% if user_signed_in? && current_user.organization? %>
+<% if user_signed_in? && current_user.organization? %>
   <div class="participation-not-allowed" style='display:none' aria-hidden="false">
     <p>
       <%= t("votes.organizations") %>
     </p>
   </div>
-  <% elsif user_signed_in? && !proposal.votable_by?(current_user)%>
+<% elsif user_signed_in? && !proposal.votable_by?(current_user)%>
   <div class="participation-not-allowed" style='display:none' aria-hidden="false">
     <p>
       <%= t("votes.verified_only",
           verify_account: link_to(t("votes.verify_account"), verification_path )).html_safe %>
     </p>
   </div>
-  <% elsif !user_signed_in? %>
+<% elsif !user_signed_in? %>
   <div class="participation-not-allowed" style='display:none' aria-hidden="false">
     <%= t("votes.unauthenticated",
       signin: link_to(t("votes.signin"), new_user_session_path),
       signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
   </div>
-  <% end %>
+<% end %>
 
-  <% if voted_for?(@proposal_votes, proposal) && setting['twitter_handle'] %>
+<% if voted_for?(@proposal_votes, proposal) && setting['twitter_handle'] %>
   <div class="share-supported">
     <%= social_share_button_tag("#{proposal.title} #{setting['twitter_hashtag']}", url: proposal_url(proposal), via: setting['twitter_handle']) %>
   </div>
-  <% end %>
-</div>
+<% end %>

app/views/proposals/show.html.erb

@@ -102,22 +102,20 @@
       <aside class="small-12 medium-3 column">
         <div class="sidebar-divider"></div>
         <h3><%= t("votes.supports") %></h3>
-        <div id="<%= dom_id(@proposal) %>_votes">
+        <div id="<%= dom_id(@proposal) %>_votes" class="supports text-center">
           <% if @proposal.successfull? %>
             <p>
               <%= t("proposal_ballots.successfull",
                   voting: link_to(t("proposal_ballots.voting"), proposal_ballots_path)).html_safe %>
             </p>
           <% elsif @proposal.archived? %>
-            <p class="text-center">
+            <p>
               <strong><%= t("proposals.proposal.supports", count: @proposal.total_votes) %></strong>
             </p>
             <p><%= t("proposals.proposal.archived") %></p>
           <% else %>
-            <div class="text-center">
             <%= render 'votes',
                       { proposal: @proposal, vote_url: vote_proposal_path(@proposal, value: 'yes') } %>
-            </div>
           <% end %>
         </div>
         <div id="social-share" class="sidebar-divider"></div>