Use has-fa-icon in agree/disagree comment buttons

Note we're using the in-favor HTML class instead of the in_favor class
so we're consistent with our conventions for HTML classes and because we
use the in-favor class in similar places.

Also note the styles of the legislation process annotations/comments
buttons is now similar to the styles in the other sections. Previously,
the colors didn't have enough contrast and there was a very strange
margin between the "thumbs up" icon and the number of people agreeing
(that margin wasn't present between the "thumbs down" icon and the
number of people disagreeing).

app/assets/stylesheets/layout.scss

@@ -2006,22 +2006,30 @@ table {
 
   button,
   form {
+    color: $text-light;
     display: inline-block;
   }
 
-  .icon-like,
+  button {
-  .icon-unlike {
+    font-size: $base-font-size;
-    color: $text-light;
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
-  button:hover {
+  .in-favor button {
-    cursor: pointer;
+    @include has-fa-icon(thumbs-up, solid);
 
-    .icon-like {
+    &:hover {
       color: $like;
     }
+  }
 
-    .icon-unlike {
+  .against button {
+    @include has-fa-icon(thumbs-down, solid);
+
+    &:hover {
       color: $unlike;
     }
   }

app/assets/stylesheets/legislation_process.scss

@@ -746,22 +746,6 @@
                   content: "|";
                 }
               }
-
-              .icon-like,
-              .icon-unlike {
-                cursor: pointer;
-                color: #c7c7c7;
-
-                &:hover,
-                &:active,
-                &:focus {
-                  color: #838383;
-                }
-              }
-
-              .icon-like {
-                margin-right: rem-calc(4);
-              }
             }
           }
         }

app/components/comments/votes_component.html.erb

@@ -2,15 +2,13 @@
   <%= t("comments.comment.votes", count: comment.total_votes) %>
   &nbsp;|&nbsp;
 
-  <span class="in_favor">
+  <span class="in-favor">
     <%= button_to vote_comment_path(comment, value: "yes"),
         method: "post",
         remote: true,
         title: t("votes.agree"),
         disabled: !can?(:vote, comment) do %>
-      <span class="icon-like">
       <span class="show-for-sr"><%= t("votes.agree") %></span>
-      </span>
     <% end %>
     <%= comment.total_likes %>
   </span>
@@ -21,9 +19,7 @@
         remote: true,
         title: t("votes.disagree"),
         disabled: !can?(:vote, comment) do %>
-      <span class="icon-unlike">
       <span class="show-for-sr"><%= t("votes.disagree") %></span>
-      </span>
     <% end %>
     <%= comment.total_dislikes %>
   </span>

spec/system/comments/budget_investments_spec.rb

@@ -509,7 +509,7 @@ describe "Commenting Budget::Investments" do
       visit budget_investment_path(budget, investment)
 
       within("#comment_#{comment.id}_votes") do
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -527,7 +527,7 @@ describe "Commenting Budget::Investments" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -545,13 +545,13 @@ describe "Commenting Budget::Investments" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I disagree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "0"
         end
 
@@ -569,13 +569,13 @@ describe "Commenting Budget::Investments" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 

spec/system/comments/debates_spec.rb

@@ -558,7 +558,7 @@ describe "Commenting debates" do
       visit debate_path(debate)
 
       within("#comment_#{comment.id}_votes") do
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -576,7 +576,7 @@ describe "Commenting debates" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -594,13 +594,13 @@ describe "Commenting debates" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I disagree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "0"
         end
 
@@ -617,12 +617,12 @@ describe "Commenting debates" do
 
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I agree"
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).not_to have_content "2"
           expect(page).to have_content "1"
         end

spec/system/comments/legislation_annotations_spec.rb

@@ -523,7 +523,7 @@ describe "Commenting legislation questions" do
                                                               annotation)
 
       within("#comment_#{comment.id}_votes") do
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -543,7 +543,7 @@ describe "Commenting legislation questions" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -563,13 +563,13 @@ describe "Commenting legislation questions" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I disagree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "0"
         end
 
@@ -588,12 +588,12 @@ describe "Commenting legislation questions" do
 
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I agree"
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).not_to have_content "2"
           expect(page).to have_content "1"
         end

spec/system/comments/legislation_questions_spec.rb

@@ -475,7 +475,7 @@ describe "Commenting legislation questions" do
       visit legislation_process_question_path(question.process, question)
 
       within("#comment_#{comment.id}_votes") do
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -493,7 +493,7 @@ describe "Commenting legislation questions" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -511,13 +511,13 @@ describe "Commenting legislation questions" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I disagree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "0"
         end
 
@@ -534,12 +534,12 @@ describe "Commenting legislation questions" do
 
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I agree"
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).not_to have_content "2"
           expect(page).to have_content "1"
         end

spec/system/comments/polls_spec.rb

@@ -453,7 +453,7 @@ describe "Commenting polls" do
       visit poll_path(poll)
 
       within("#comment_#{comment.id}_votes") do
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -471,7 +471,7 @@ describe "Commenting polls" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -489,13 +489,13 @@ describe "Commenting polls" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I disagree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "0"
         end
 
@@ -513,13 +513,13 @@ describe "Commenting polls" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 

spec/system/comments/proposals_spec.rb

@@ -441,7 +441,7 @@ describe "Commenting proposals" do
       visit proposal_path(proposal)
 
       within("#comment_#{comment.id}_votes") do
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -459,7 +459,7 @@ describe "Commenting proposals" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -477,13 +477,13 @@ describe "Commenting proposals" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I disagree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "0"
         end
 
@@ -501,13 +501,13 @@ describe "Commenting proposals" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 

spec/system/comments/topics_spec.rb

@@ -491,7 +491,7 @@ describe "Commenting topics from proposals" do
       visit community_topic_path(proposal.community, topic)
 
       within("#comment_#{comment.id}_votes") do
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -509,7 +509,7 @@ describe "Commenting topics from proposals" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -527,13 +527,13 @@ describe "Commenting topics from proposals" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I disagree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "0"
         end
 
@@ -551,13 +551,13 @@ describe "Commenting topics from proposals" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -1002,7 +1002,7 @@ describe "Commenting topics from budget investments" do
       visit community_topic_path(investment.community, topic)
 
       within("#comment_#{comment.id}_votes") do
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -1020,7 +1020,7 @@ describe "Commenting topics from budget investments" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
@@ -1038,13 +1038,13 @@ describe "Commenting topics from budget investments" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I disagree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "0"
         end
 
@@ -1062,13 +1062,13 @@ describe "Commenting topics from budget investments" do
       within("#comment_#{comment.id}_votes") do
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end
 
         click_button "I agree"
 
-        within(".in_favor") do
+        within(".in-favor") do
           expect(page).to have_content "1"
         end