From 11a33c12e374d852e3cea4dc6d39c8e1a77e45df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 10 Oct 2023 22:28:53 +0200
Subject: [PATCH] Increase contrast in like/unlike buttons

The colors we were using (gray for unpressed buttons and green or red
for pressed buttons) didn't contrast well against a white background, so
we're now using darker colors.

However, with darker colors, using solid icons for the unpressed buttons
makes it harder to differentiate when a button is pressed and when it
isn't, particularly for color-blind people.

So we're now using regular icons for the unpressed buttons and solid
icons for the pressed ones.
---
 app/assets/stylesheets/_consul_settings.scss | 4 ++--
 app/assets/stylesheets/in_favor_against.scss | 5 +++--
 app/assets/stylesheets/layout.scss           | 5 +++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 34c716112..162671568 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -73,8 +73,8 @@ $border:            #dee0e3 !default;
 
 $debates:           $brand !default;
 
-$like:              #7bd2a8 !default;
-$unlike:            #ef8585 !default;
+$like:              #38a36f !default;
+$unlike:            #ea6666 !default;
 
 $delete:            #db2e0f !default;
 $check:             #46db91 !default;
diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss
index 03accb68e..de0ceefd9 100644
--- a/app/assets/stylesheets/in_favor_against.scss
+++ b/app/assets/stylesheets/in_favor_against.scss
@@ -16,7 +16,7 @@
     background: #fff;
     border: 2px solid;
     border-radius: rem-calc(3);
-    color: $text-light;
+    color: $dark-gray;
     display: inline-block;
     font-size: rem-calc(30);
     line-height: rem-calc(30);
@@ -25,7 +25,7 @@
   }
 
   @mixin like-unlike-icon($icon, $pressed-color) {
-    @include has-fa-icon($icon, solid);
+    @include has-fa-icon($icon, regular);
 
     &:not([disabled]) {
       cursor: pointer;
@@ -33,6 +33,7 @@
       &:hover,
       &:active,
       &[aria-pressed=true] {
+        @include has-fa-icon($icon, solid);
         background: $pressed-color;
         border-color: $pressed-color;
         color: #fff;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ab5874c24..6c71d9d49 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1695,7 +1695,7 @@ table {
 
   button,
   form {
-    color: $text-light;
+    color: $dark-gray;
     display: inline-block;
   }
 
@@ -1708,10 +1708,11 @@ table {
   }
 
   @mixin like-unlike-icon($icon, $pressed-color) {
-    @include has-fa-icon($icon, solid);
+    @include has-fa-icon($icon, regular);
 
     &:hover,
     &[aria-pressed=true] {
+      @include has-fa-icon($icon, solid);
       color: $pressed-color;
     }
   }