Refactor scss for in favor against component

In order to reduce the code used to add styles to the buttons,
we removed the classes that had been added and handled it with
the new aria-pressed attribute

app/assets/stylesheets/in_favor_against.scss

@@ -25,10 +25,10 @@
 
     &:not([disabled]) {
       &:hover,
-      &:active {
+      &:active,
+      &[aria-pressed=true] {
         color: #fff;
         cursor: pointer;
-        opacity: 1 !important;
       }
     }
   }
@@ -38,7 +38,8 @@
 
     &:not([disabled]) {
       &:hover,
-      &:active {
+      &:active,
+      &[aria-pressed=true] {
         background: $like;
         border: 2px solid $like;
       }
@@ -50,19 +51,14 @@
 
     &:not([disabled]) {
       &:hover,
-      &:active {
+      &:active,
+      &[aria-pressed=true] {
         background: $unlike;
         border: 2px solid $unlike;
       }
     }
   }
 
-  .like,
-  .unlike {
-    vertical-align: super;
-    text-decoration: none;
-  }
-
   .percentage {
     display: inline-block;
     font-size: $small-font-size;
@@ -76,22 +72,4 @@
       padding-right: 0;
     }
   }
-
-  .voted {
-    color: #fff;
-  }
-
-  .in-favor .voted {
-    background: $like;
-    border: 2px solid $like;
-  }
-
-  .against .voted {
-    background: $unlike;
-    border: 2px solid $unlike;
-  }
-
-  .no-voted {
-    opacity: 0.3;
-  }
 }

app/components/shared/in_favor_against_component.html.erb

@@ -1,7 +1,6 @@
 <div class="in-favor-against">
   <div class="in-favor">
     <%= button_to polymorphic_path(votable, action: :vote, value: "yes"),
-                  class: "like #{voted_classes[:in_favor]}",
                   title: t("votes.agree"),
                   "aria-label": agree_aria_label,
                   "aria-pressed": pressed?("yes"),
@@ -14,7 +13,6 @@
 
   <div class="against">
     <%= button_to polymorphic_path(votable, action: :vote, value: "no"),
-                  class: "unlike #{voted_classes[:against]}",
                   title: t("votes.disagree"),
                   "aria-label": disagree_aria_label,
                   "aria-pressed": pressed?("no"),

app/components/shared/in_favor_against_component.rb

@@ -8,21 +8,6 @@ class Shared::InFavorAgainstComponent < ApplicationComponent
 
   private
 
-    def voted_classes
-      @voted_classes ||= css_classes_for_vote
-    end
-
-    def css_classes_for_vote
-      case current_user&.voted_as_when_voted_for(votable)
-      when true
-        { in_favor: "voted", against: "no-voted" }
-      when false
-        { in_favor: "no-voted", against: "voted" }
-      else
-        { in_favor: "", against: "" }
-      end
-    end
-
     def agree_aria_label
       t("votes.agree_label", title: votable.title)
     end

spec/system/votes_spec.rb

@@ -19,37 +19,31 @@ describe "Votes" do
       within("#debates") do
         within("#debate_#{debate1.id}_votes") do
           within(".in-favor") do
-            expect(page).to have_button class: "voted"
+            expect(page).to have_css "button[aria-pressed='true']"
-            expect(page).not_to have_button class: "no-voted"
           end
 
           within(".against") do
-            expect(page).to have_button class: "no-voted"
+            expect(page).to have_css "button[aria-pressed='false']"
-            expect(page).not_to have_button class: "voted"
           end
         end
 
         within("#debate_#{debate2.id}_votes") do
           within(".in-favor") do
-            expect(page).not_to have_button class: "voted"
+            expect(page).to have_css "button[aria-pressed='false']"
-            expect(page).not_to have_button class: "no-voted"
           end
 
           within(".against") do
-            expect(page).not_to have_button class: "no-voted"
+            expect(page).to have_css "button[aria-pressed='false']"
-            expect(page).not_to have_button class: "voted"
           end
         end
 
         within("#debate_#{debate3.id}_votes") do
           within(".in-favor") do
-            expect(page).to have_button class: "no-voted"
+            expect(page).to have_css "button[aria-pressed='false']"
-            expect(page).not_to have_button class: "voted"
           end
 
           within(".against") do
-            expect(page).to have_button class: "voted"
+            expect(page).to have_css "button[aria-pressed='true']"
-            expect(page).not_to have_button class: "no-voted"
           end
         end
       end
@@ -63,14 +57,12 @@ describe "Votes" do
 
         within(".in-favor") do
           expect(page).to have_content "0%"
-          expect(page).not_to have_button class: "voted"
+          expect(page).to have_css "button[aria-pressed='false']"
-          expect(page).not_to have_button class: "no-voted"
         end
 
         within(".against") do
           expect(page).to have_content "0%"
-          expect(page).not_to have_button class: "voted"
+          expect(page).to have_css "button[aria-pressed='false']"
-          expect(page).not_to have_button class: "no-voted"
         end
       end
 
@@ -83,12 +75,12 @@ describe "Votes" do
 
         within(".in-favor") do
           expect(page).to have_content "100%"
-          expect(page).to have_button class: "voted"
+          expect(page).to have_css "button[aria-pressed='true']"
         end
 
         within(".against") do
           expect(page).to have_content "0%"
-          expect(page).to have_css("button.no-voted")
+          expect(page).to have_css "button[aria-pressed='false']"
         end
 
         expect(page).to have_content "1 vote"
@@ -97,12 +89,12 @@ describe "Votes" do
 
         within(".in-favor") do
           expect(page).to have_content "0%"
-          expect(page).to have_button class: "no-voted"
+          expect(page).to have_css "button[aria-pressed='false']"
         end
 
         within(".against") do
           expect(page).to have_content "100%"
-          expect(page).to have_button class: "voted"
+          expect(page).to have_css "button[aria-pressed='true']"
         end
 
         expect(page).to have_content "1 vote"
@@ -136,12 +128,12 @@ describe "Votes" do
 
         within(".in-favor") do
           expect(page).to have_content "50%"
-          expect(page).to have_button class: "voted"
+          expect(page).to have_css "button[aria-pressed='true']"
         end
 
         within(".against") do
           expect(page).to have_content "50%"
-          expect(page).to have_button class: "no-voted"
+          expect(page).to have_css "button[aria-pressed='false']"
         end
       end
 
@@ -154,12 +146,12 @@ describe "Votes" do
 
           within(".in-favor") do
             expect(page).to have_content "100%"
-            expect(page).to have_button class: "voted"
+            expect(page).to have_css "button[aria-pressed='true']"
           end
 
           within(".against") do
             expect(page).to have_content "0%"
-            expect(page).to have_button class: "no-voted"
+            expect(page).to have_css "button[aria-pressed='false']"
           end
 
           expect(page).to have_content "1 vote"