consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Increase contrast in like/unlike buttons

Browse Source 
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.
This commit is contained in:
Javi Martín
2023-10-10 22:28:53 +02:00
parent 1387356c86
commit 11a33c12e3
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/_consul_settings.scss
View File

@@ -73,8 +73,8 @@ $border: #dee0e3 !default;
$debates: $brand !default; $debates: $brand !default;
$like: #7bd2a8 !default; $like: #38a36f !default;
$unlike: #ef8585 !default; $unlike: #ea6666 !default;
$delete: #db2e0f !default; $delete: #db2e0f !default;
$check: #46db91 !default; $check: #46db91 !default;

5
app/assets/stylesheets/in_favor_against.scss
View File

@@ -16,7 +16,7 @@
background: #fff; background: #fff;
border: 2px solid; border: 2px solid;
border-radius: rem-calc(3); border-radius: rem-calc(3);
color: $text-light; color: $dark-gray;
display: inline-block; display: inline-block;
font-size: rem-calc(30); font-size: rem-calc(30);
line-height: rem-calc(30); line-height: rem-calc(30);
@@ -25,7 +25,7 @@
} }
@mixin like-unlike-icon($icon, $pressed-color) { @mixin like-unlike-icon($icon, $pressed-color) {
@include has-fa-icon($icon, solid); @include has-fa-icon($icon, regular);
&:not([disabled]) { &:not([disabled]) {
cursor: pointer; cursor: pointer;
@@ -33,6 +33,7 @@
&:hover, &:hover,
&:active, &:active,
&[aria-pressed=true] { &[aria-pressed=true] {
@include has-fa-icon($icon, solid);
background: $pressed-color; background: $pressed-color;
border-color: $pressed-color; border-color: $pressed-color;
color: #fff; color: #fff;

5
app/assets/stylesheets/layout.scss
View File

@@ -1695,7 +1695,7 @@ table {
button, button,
form { form {
color: $text-light; color: $dark-gray;
display: inline-block; display: inline-block;
} }
@@ -1708,10 +1708,11 @@ table {
} }
@mixin like-unlike-icon($icon, $pressed-color) { @mixin like-unlike-icon($icon, $pressed-color) {
@include has-fa-icon($icon, solid); @include has-fa-icon($icon, regular);
&:hover, &:hover,
&[aria-pressed=true] { &[aria-pressed=true] {
@include has-fa-icon($icon, solid);
color: $pressed-color; color: $pressed-color;
} }
} }