Merge pull request #5278 from consuldemocracy/vote_contrast

Make like/unlike buttons more accessible

app/assets/stylesheets/_consul_settings.scss

@@ -73,8 +73,8 @@ $border:            #dee0e3 !default;
 
 $debates:           $brand !default;
 
-$like:              #7bd2a8 !default;
+$like:              #38a36f !default;
-$unlike:            #ef8585 !default;
+$unlike:            #ea6666 !default;
 
 $delete:            #db2e0f !default;
 $check:             #46db91 !default;

app/assets/stylesheets/in_favor_against.scss

@@ -14,49 +14,61 @@
 
   button {
     background: #fff;
-    border: 2px solid;
     border-radius: rem-calc(3);
-    color: $text-light;
+    color: $dark-gray;
     display: inline-block;
     font-size: rem-calc(30);
     line-height: rem-calc(30);
     padding: rem-calc(3) rem-calc(6) rem-calc(6);
     position: relative;
 
-    &:not([disabled]) {
-      &:hover,
-      &:active,
     &[aria-pressed=true] {
-        color: #fff;
+      border-style: inset;
+      border-width: 3px 2px 2px 3px;
+
+      &:active {
+        border-style: outset;
+        border-width: 2px 3px 3px 2px;
+      }
+    }
+
+    &[aria-pressed=false] {
+      border-style: outset;
+      border-width: 2px 3px 3px 2px;
+
+      &:active {
+        border-style: inset;
+        border-width: 3px 2px 2px 3px;
+      }
+    }
+  }
+
+  @mixin like-unlike-icon($icon, $pressed-color) {
+    @include has-fa-icon($icon, regular);
+
+    &:not([disabled]) {
       cursor: pointer;
+
+      &[aria-pressed=false]:hover,
+      &[aria-pressed=false]:active,
+      &[aria-pressed=true]:not(:hover, :active) {
+        @include has-fa-icon($icon, solid);
+      }
+
+      &[aria-pressed=true] {
+        background: $pressed-color;
+        border-color: $pressed-color;
+        color: #fff;
       }
     }
   }
 
   .in-favor button {
-    @include has-fa-icon(thumbs-up, solid);
+    @include like-unlike-icon(thumbs-up, $like);
-
-    &:not([disabled]) {
-      &:hover,
-      &:active,
-      &[aria-pressed=true] {
-        background: $like;
-        border: 2px solid $like;
-      }
-    }
   }
 
   .against button {
-    @include has-fa-icon(thumbs-down, solid);
+    @include like-unlike-icon(thumbs-down, $unlike);
-
-    &:not([disabled]) {
-      &:hover,
-      &:active,
-      &[aria-pressed=true] {
-        background: $unlike;
-        border: 2px solid $unlike;
-      }
-    }
   }
 
   .percentage {

app/assets/stylesheets/layout.scss

@@ -1695,7 +1695,7 @@ table {
 
   button,
   form {
-    color: $text-light;
+    color: $dark-gray;
     display: inline-block;
   }
 
@@ -1707,22 +1707,25 @@ table {
     }
   }
 
-  .in-favor button {
+  @mixin like-unlike-icon($icon, $pressed-color) {
-    @include has-fa-icon(thumbs-up, solid);
+    @include has-fa-icon($icon, regular);
 
-    &:hover,
+    &[aria-pressed=false]:hover,
-    &[aria-pressed=true] {
+    &[aria-pressed=true]:not(:hover) {
-      color: $like;
+      @include has-fa-icon($icon, solid);
     }
+
+    &[aria-pressed=true] {
+      color: $pressed-color;
+    }
+  }
+
+  .in-favor button {
+    @include like-unlike-icon(thumbs-up, $like);
   }
 
   .against button {
-    @include has-fa-icon(thumbs-down, solid);
+    @include like-unlike-icon(thumbs-down, $unlike);
-
-    &:hover,
-    &[aria-pressed=true] {
-      color: $unlike;
-    }
   }
 }
 

app/controllers/comments/votes_controller.rb

@@ -10,6 +10,7 @@ module Comments
       @comment.vote_by(voter: current_user, vote: params[:value])
 
       respond_to do |format|
+        format.html { redirect_to request.referer, notice: I18n.t("flash.actions.create.vote") }
         format.js { render :show }
       end
     end
@@ -18,6 +19,7 @@ module Comments
       @comment.unvote_by(current_user)
 
       respond_to do |format|
+        format.html { redirect_to request.referer, notice: I18n.t("flash.actions.destroy.vote") }
         format.js { render :show }
       end
     end

app/controllers/debates/votes_controller.rb

@@ -9,6 +9,7 @@ module Debates
       @debate.register_vote(current_user, params[:value])
 
       respond_to do |format|
+        format.html { redirect_to request.referer, notice: I18n.t("flash.actions.create.vote") }
         format.js { render :show }
       end
     end
@@ -17,6 +18,7 @@ module Debates
       @debate.unvote_by(current_user)
 
       respond_to do |format|
+        format.html { redirect_to request.referer, notice: I18n.t("flash.actions.destroy.vote") }
         format.js { render :show }
       end
     end

app/controllers/legislation/proposals/votes_controller.rb

@@ -13,6 +13,7 @@ module Legislation
         @proposal.vote_by(voter: current_user, vote: params[:value])
 
         respond_to do |format|
+          format.html { redirect_to request.referer, notice: I18n.t("flash.actions.create.vote") }
           format.js { render :show }
         end
       end
@@ -21,6 +22,7 @@ module Legislation
         @proposal.unvote_by(current_user)
 
         respond_to do |format|
+          format.html { redirect_to request.referer, notice: I18n.t("flash.actions.destroy.vote") }
           format.js { render :show }
         end
       end

config/locales/en/responders.yml

@@ -17,6 +17,7 @@ en:
         support: "Investment supported successfully"
         topic: "Topic created successfully."
         valuator_group: "Valuator group created successfully"
+        vote: "Vote created successfully"
       save_changes:
         notice: Changes saved
       update:
@@ -35,3 +36,4 @@ en:
         topic: "Topic deleted successfully."
         poll_question_answer_video: "Answer video deleted successfully."
         valuator_group: "Valuator group deleted successfully"
+        vote: "Vote deleted successfully"

spec/controllers/comments/votes_controller_spec.rb

@@ -1,7 +1,7 @@
 require "rails_helper"
 
 describe Comments::VotesController do
-  let(:comment) { create(:comment) }
+  let(:comment) { create(:debate_comment) }
 
   describe "POST create" do
     it "allows voting" do
@@ -11,6 +11,18 @@ describe Comments::VotesController do
         post :create, xhr: true, params: { comment_id: comment.id, value: "yes" }
       end.to change { comment.reload.votes_for.size }.by(1)
     end
+
+    it "redirects authenticated users without JavaScript to the same page" do
+      request.env["HTTP_REFERER"] = comment_path(comment)
+      sign_in create(:user)
+
+      expect do
+        post :create, params: { comment_id: comment.id, value: "yes" }
+      end.to change { comment.reload.votes_for.size }.by(1)
+
+      expect(response).to redirect_to comment_path(comment)
+      expect(flash[:notice]).to eq "Vote created successfully"
+    end
   end
 
   describe "DELETE destroy" do
@@ -30,5 +42,17 @@ describe Comments::VotesController do
         delete :destroy, xhr: true, params: { comment_id: comment.id, id: vote }
       end.to change { comment.reload.votes_for.size }.by(-1)
     end
+
+    it "redirects authenticated users without JavaScript to the same page" do
+      request.env["HTTP_REFERER"] = debate_path(comment.commentable)
+      sign_in user
+
+      expect do
+        delete :destroy, params: { comment_id: comment.id, id: vote }
+      end.to change { comment.reload.votes_for.size }.by(-1)
+
+      expect(response).to redirect_to debate_path(comment.commentable)
+      expect(flash[:notice]).to eq "Vote deleted successfully"
+    end
   end
 end

spec/controllers/debates/votes_controller_spec.rb

@@ -18,6 +18,19 @@ describe Debates::VotesController do
       expect(response).to redirect_to new_user_session_path
     end
 
+    it "redirects authenticated users without JavaScript to the same page" do
+      debate = create(:debate)
+      request.env["HTTP_REFERER"] = debate_path(debate)
+      sign_in create(:user)
+
+      expect do
+        post :create, params: { debate_id: debate.id, value: "yes" }
+      end.to change { debate.reload.votes_for.size }.by(1)
+
+      expect(response).to redirect_to debate_path(debate)
+      expect(flash[:notice]).to eq "Vote created successfully"
+    end
+
     describe "Vote with too many anonymous votes" do
       it "allows vote if user is allowed" do
         Setting["max_ratio_anon_votes_on_debates"] = 100
@@ -52,5 +65,16 @@ describe Debates::VotesController do
         delete :destroy, xhr: true, params: { debate_id: debate.id, id: vote }
       end.to change { debate.reload.votes_for.size }.by(-1)
     end
+
+    it "redirects authenticated users without JavaScript to the same page" do
+      request.env["HTTP_REFERER"] = debates_path
+
+      expect do
+        delete :destroy, params: { debate_id: debate.id, id: vote }
+      end.to change { debate.reload.votes_for.size }.by(-1)
+
+      expect(response).to redirect_to debates_path
+      expect(flash[:notice]).to eq "Vote deleted successfully"
+    end
   end
 end

spec/controllers/legislation/proposals/votes_controller_spec.rb

@@ -36,6 +36,18 @@ describe Legislation::Proposals::VotesController do
         post :create, xhr: true, params: vote_params
       end.not_to change { proposal.reload.votes_for.size }
     end
+
+    it "redirects authenticated users without JavaScript to the same page" do
+      request.env["HTTP_REFERER"] = legislation_process_proposal_path(legislation_process, proposal)
+      sign_in create(:user, :level_two)
+
+      expect do
+        post :create, params: vote_params
+      end.to change { proposal.reload.votes_for.size }.by(1)
+
+      expect(response).to redirect_to legislation_process_proposal_path(legislation_process, proposal)
+      expect(flash[:notice]).to eq "Vote created successfully"
+    end
   end
 
   describe "DELETE destroy" do
@@ -52,5 +64,17 @@ describe Legislation::Proposals::VotesController do
         delete :destroy, xhr: true, params: vote_params
       end.to change { proposal.reload.votes_for.size }.by(-1)
     end
+
+    it "redirects authenticated users without JavaScript to the same page" do
+      request.env["HTTP_REFERER"] = legislation_process_proposals_path(legislation_process)
+      sign_in user
+
+      expect do
+        delete :destroy, params: vote_params
+      end.to change { proposal.reload.votes_for.size }.by(-1)
+
+      expect(response).to redirect_to legislation_process_proposals_path(legislation_process)
+      expect(flash[:notice]).to eq "Vote deleted successfully"
+    end
   end
 end