From 3482e6e058a4c1afaf4dddfd0e07b64a109bb0b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 10 Oct 2023 22:50:20 +0200
Subject: [PATCH] Change styles of pressed buttons on hover

Since we were styling pressed buttons the same way as buttons on hover,
a person hovering on the button and then clicking it wouldn't notice
that the buttons had been pressed unless they noticed that the number
and percentages of votes had changes. They wouldn't notice the changes
when unpressing the buttons either, since, after clicking the button,
the cursor would still be over it, and so the hover styles would apply.

Furthermore, it was hard for mouse users to realize that a button could
be unpressed, since the style of pressed buttons didn't change on hover.

So we're now changing the icons on hover without changing the
background. This way all four states (unpressed, unpressed on hover,
pressed, pressed on hover) are styled in a different way.
---
 app/assets/stylesheets/in_favor_against.scss | 9 ++++++---
 app/assets/stylesheets/layout.scss           | 7 +++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss
index de0ceefd9..1fb0c288e 100644
--- a/app/assets/stylesheets/in_favor_against.scss
+++ b/app/assets/stylesheets/in_favor_against.scss
@@ -30,10 +30,13 @@
     &:not([disabled]) {
       cursor: pointer;
 
-      &:hover,
-      &:active,
-      &[aria-pressed=true] {
+      &[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;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 6c71d9d49..895749f89 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1710,9 +1710,12 @@ table {
   @mixin like-unlike-icon($icon, $pressed-color) {
     @include has-fa-icon($icon, regular);
 
-    &:hover,
-    &[aria-pressed=true] {
+    &[aria-pressed=false]:hover,
+    &[aria-pressed=true]:not(:hover) {
       @include has-fa-icon($icon, solid);
+    }
+
+    &[aria-pressed=true] {
       color: $pressed-color;
     }
   }