Use buttons to agree/disagree with comments

As mentioned in commits 5311daadf and bb958daf0, using links combined
with JavaScript to generate POST requests to the server has a few
issues.

app/assets/stylesheets/layout.scss

@@ -1887,7 +1887,7 @@ table {
       display: inline-block;
     }
 
-    form {
+    .comment-form form {
       margin-top: $line-height / 2;
     }
   }
@@ -2004,17 +2004,18 @@ table {
 
 .comment-votes {
 
-  a,
+  button,
+  form {
+    display: inline-block;
+  }
+
   .icon-like,
   .icon-unlike {
     color: $text-light;
-    display: inline-block;
-    vertical-align: top;
   }
 
-  a:hover {
+  button:hover {
-    color: $text-medium;
+    cursor: pointer;
-    text-decoration: none;
 
     .icon-like {
       color: $like;

app/components/comments/votes_component.html.erb

@@ -3,14 +3,11 @@
    | 
 
   <span class="in_favor">
-    <% if can?(:vote, comment) %>
+    <%= button_to vote_comment_path(comment, value: "yes"),
-      <%= link_to vote_comment_path(comment, value: "yes"),
+        method: "post",
-          method: "post", remote: true, title: t("votes.agree") do %>
+        remote: true,
-          <span class="icon-like">
+        title: t("votes.agree"),
-            <span class="show-for-sr"><%= t("votes.agree") %></span>
+        disabled: !can?(:vote, comment) do %>
-          </span>
-      <% end %>
-    <% else %>
       <span class="icon-like">
         <span class="show-for-sr"><%= t("votes.agree") %></span>
       </span>
@@ -19,14 +16,11 @@
   </span>
 
   <span class="against">
-    <% if can?(:vote, comment) %>
+    <%= button_to vote_comment_path(comment, value: "no"),
-      <%= link_to vote_comment_path(comment, value: "no"),
+        method: "post",
-          method: "post", remote: true, title: t("votes.disagree") do %>
+        remote: true,
-          <span class="icon-unlike">
+        title: t("votes.disagree"),
-            <span class="show-for-sr"><%= t("votes.disagree") %></span>
+        disabled: !can?(:vote, comment) do %>
-          </span>
-      <% end %>
-    <% else %>
       <span class="icon-unlike">
         <span class="show-for-sr"><%= t("votes.disagree") %></span>
       </span>

spec/system/budgets/ballots_spec.rb

@@ -177,7 +177,7 @@ describe "Ballots" do
         end
 
         within(".budget-investment", text: "More bridges") do
-          click_link "Remove vote"
+          click_button "Remove vote"
         end
 
         within("#sidebar") do
@@ -464,7 +464,7 @@ describe "Ballots" do
         hover_over_ballot
 
         expect(page).to have_content "Only verified users can vote on investments"
-        expect(page).to have_selector(".in-favor a", obscured: true)
+        expect(page).to have_button "Vote", disabled: true, obscured: true
       end
     end
 
@@ -575,8 +575,8 @@ describe "Ballots" do
       end
 
       within("#budget_investment_#{bi1.id}") do
-        find(".remove a").click
+        click_button "Remove vote"
-        expect(page).to have_css ".add a"
+        expect(page).to have_button "Vote"
       end
 
       within("#budget_investment_#{bi2.id}") do

spec/system/comments/budget_investments_spec.rb

@@ -525,7 +525,7 @@ describe "Commenting Budget::Investments" do
       visit budget_investment_path(budget, investment)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -543,13 +543,13 @@ describe "Commenting Budget::Investments" do
       visit budget_investment_path(budget, investment)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".against a").click
+        click_button "I disagree"
 
         within(".in_favor") do
           expect(page).to have_content "0"
@@ -567,13 +567,13 @@ describe "Commenting Budget::Investments" do
       visit budget_investment_path(budget, investment)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"

spec/system/comments/debates_spec.rb

@@ -331,7 +331,7 @@ describe "Commenting debates" do
       fill_in "Leave your comment", with: "Probably if government approves."
       click_button "Publish reply"
 
-      expect(page).not_to have_selector("form")
+      expect(page).not_to have_css ".comment-form"
 
       within ".comment" do
         expect(page).to have_content "Probably if government approves."
@@ -574,7 +574,7 @@ describe "Commenting debates" do
       visit debate_path(debate)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -592,13 +592,13 @@ describe "Commenting debates" do
       visit debate_path(debate)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".against a").click
+        click_button "I disagree"
 
         within(".in_favor") do
           expect(page).to have_content "0"
@@ -616,12 +616,12 @@ describe "Commenting debates" do
       visit debate_path(debate)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".in_favor a").click
+        click_button "I agree"
         within(".in_favor") do
           expect(page).not_to have_content "2"
           expect(page).to have_content "1"

spec/system/comments/legislation_annotations_spec.rb

@@ -541,7 +541,7 @@ describe "Commenting legislation questions" do
                                                               annotation)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -561,13 +561,13 @@ describe "Commenting legislation questions" do
                                                               annotation)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".against a").click
+        click_button "I disagree"
 
         within(".in_favor") do
           expect(page).to have_content "0"
@@ -587,12 +587,12 @@ describe "Commenting legislation questions" do
                                                               annotation)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".in_favor a").click
+        click_button "I agree"
         within(".in_favor") do
           expect(page).not_to have_content "2"
           expect(page).to have_content "1"

spec/system/comments/legislation_questions_spec.rb

@@ -491,7 +491,7 @@ describe "Commenting legislation questions" do
       visit legislation_process_question_path(question.process, question)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -509,13 +509,13 @@ describe "Commenting legislation questions" do
       visit legislation_process_question_path(question.process, question)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".against a").click
+        click_button "I disagree"
 
         within(".in_favor") do
           expect(page).to have_content "0"
@@ -533,12 +533,12 @@ describe "Commenting legislation questions" do
       visit legislation_process_question_path(question.process, question)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".in_favor a").click
+        click_button "I agree"
         within(".in_favor") do
           expect(page).not_to have_content "2"
           expect(page).to have_content "1"

spec/system/comments/polls_spec.rb

@@ -469,7 +469,7 @@ describe "Commenting polls" do
       visit poll_path(poll)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -487,13 +487,13 @@ describe "Commenting polls" do
       visit poll_path(poll)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".against a").click
+        click_button "I disagree"
 
         within(".in_favor") do
           expect(page).to have_content "0"
@@ -511,13 +511,13 @@ describe "Commenting polls" do
       visit poll_path(poll)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"

spec/system/comments/proposals_spec.rb

@@ -457,7 +457,7 @@ describe "Commenting proposals" do
       visit proposal_path(proposal)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -475,13 +475,13 @@ describe "Commenting proposals" do
       visit proposal_path(proposal)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".against a").click
+        click_button "I disagree"
 
         within(".in_favor") do
           expect(page).to have_content "0"
@@ -499,13 +499,13 @@ describe "Commenting proposals" do
       visit proposal_path(proposal)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"

spec/system/comments/topics_spec.rb

@@ -507,7 +507,7 @@ describe "Commenting topics from proposals" do
       visit community_topic_path(proposal.community, topic)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -525,13 +525,13 @@ describe "Commenting topics from proposals" do
       visit community_topic_path(proposal.community, topic)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".against a").click
+        click_button "I disagree"
 
         within(".in_favor") do
           expect(page).to have_content "0"
@@ -549,13 +549,13 @@ describe "Commenting topics from proposals" do
       visit community_topic_path(proposal.community, topic)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -1018,7 +1018,7 @@ describe "Commenting topics from budget investments" do
       visit community_topic_path(investment.community, topic)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
@@ -1036,13 +1036,13 @@ describe "Commenting topics from budget investments" do
       visit community_topic_path(investment.community, topic)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".against a").click
+        click_button "I disagree"
 
         within(".in_favor") do
           expect(page).to have_content "0"
@@ -1060,13 +1060,13 @@ describe "Commenting topics from budget investments" do
       visit community_topic_path(investment.community, topic)
 
       within("#comment_#{comment.id}_votes") do
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"
         end
 
-        find(".in_favor a").click
+        click_button "I agree"
 
         within(".in_favor") do
           expect(page).to have_content "1"