From aa2c551411130689a2e48320e8d3bb0a46d38ac6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 7 Feb 2022 15:02:28 +0100
Subject: [PATCH] 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            | 22 +++++++++++------
 .../stylesheets/legislation_process.scss      | 16 -------------
 .../comments/votes_component.html.erb         | 10 +++-----
 .../comments/budget_investments_spec.rb       | 12 +++++-----
 spec/system/comments/debates_spec.rb          | 12 +++++-----
 .../comments/legislation_annotations_spec.rb  | 12 +++++-----
 .../comments/legislation_questions_spec.rb    | 12 +++++-----
 spec/system/comments/polls_spec.rb            | 12 +++++-----
 spec/system/comments/proposals_spec.rb        | 12 +++++-----
 spec/system/comments/topics_spec.rb           | 24 +++++++++----------
 10 files changed, 66 insertions(+), 78 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 2b8b8cc85..d26617846 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2006,22 +2006,30 @@ table {
 
   button,
   form {
+    color: $text-light;
     display: inline-block;
   }
 
-  .icon-like,
-  .icon-unlike {
-    color: $text-light;
+  button {
+    font-size: $base-font-size;
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
-  button:hover {
-    cursor: pointer;
+  .in-favor button {
+    @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;
     }
   }
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index a52e6c362..11f781a1c 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/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);
-              }
             }
           }
         }
diff --git a/app/components/comments/votes_component.html.erb b/app/components/comments/votes_component.html.erb
index 584e014b8..61f6b2cb0 100644
--- a/app/components/comments/votes_component.html.erb
+++ b/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>
+      <span class="show-for-sr"><%= t("votes.agree") %></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>
+      <span class="show-for-sr"><%= t("votes.disagree") %></span>
     <% end %>
     <%= comment.total_dislikes %>
   </span>
diff --git a/spec/system/comments/budget_investments_spec.rb b/spec/system/comments/budget_investments_spec.rb
index 961ddc4af..c8df55a93 100644
--- a/spec/system/comments/budget_investments_spec.rb
+++ b/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
 
diff --git a/spec/system/comments/debates_spec.rb b/spec/system/comments/debates_spec.rb
index eb37f8667..d1021bd00 100644
--- a/spec/system/comments/debates_spec.rb
+++ b/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
diff --git a/spec/system/comments/legislation_annotations_spec.rb b/spec/system/comments/legislation_annotations_spec.rb
index e8428dfd5..18b669f1f 100644
--- a/spec/system/comments/legislation_annotations_spec.rb
+++ b/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
diff --git a/spec/system/comments/legislation_questions_spec.rb b/spec/system/comments/legislation_questions_spec.rb
index f2ec32324..a00f030f3 100644
--- a/spec/system/comments/legislation_questions_spec.rb
+++ b/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
diff --git a/spec/system/comments/polls_spec.rb b/spec/system/comments/polls_spec.rb
index 7ef8ed6be..105c2b91f 100644
--- a/spec/system/comments/polls_spec.rb
+++ b/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
 
diff --git a/spec/system/comments/proposals_spec.rb b/spec/system/comments/proposals_spec.rb
index e00093c51..8b6f86fa8 100644
--- a/spec/system/comments/proposals_spec.rb
+++ b/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
 
diff --git a/spec/system/comments/topics_spec.rb b/spec/system/comments/topics_spec.rb
index cda1dc8ae..caa5957cb 100644
--- a/spec/system/comments/topics_spec.rb
+++ b/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