From 5d37220282f72c6528ec37859831e5523ed32d97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 9 Oct 2022 21:57:54 +0200 Subject: [PATCH 1/6] Fix hover colors on buttons to show/hide content We were setting the color to be the same as links, but forgot to do the same on hover. Using the `link` mixin solves the issue. --- app/assets/stylesheets/advanced_search.scss | 3 +-- app/assets/stylesheets/layout.scss | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/advanced_search.scss b/app/assets/stylesheets/advanced_search.scss index a22625b20..344176a48 100644 --- a/app/assets/stylesheets/advanced_search.scss +++ b/app/assets/stylesheets/advanced_search.scss @@ -29,8 +29,7 @@ > [aria-expanded] { @include xy-gutters; - color: $link; - cursor: pointer; + @include link; margin-top: $line-height; margin-bottom: $line-height; max-width: max-content; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 69373ae03..46cde7be2 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2359,8 +2359,7 @@ table { } .add-related-content { - color: $link; - cursor: pointer; + @include link; display: block; margin-bottom: $line-height; From 9dfff1864ab5abc5447d9dedc2e5c1909c52e48e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 9 Oct 2022 23:12:08 +0200 Subject: [PATCH 2/6] Fix hover and current datepicker color We were using the wrong color since commit e2d540d20 because, by using `@extend`, the compiled CSS had the styles for `.ui-state-hover` appear before the styles for `.ui-state-default`. --- app/assets/stylesheets/datepicker_overrides.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss index 239b38f70..d59d8b7c7 100644 --- a/app/assets/stylesheets/datepicker_overrides.scss +++ b/app/assets/stylesheets/datepicker_overrides.scss @@ -8,14 +8,14 @@ .ui-datepicker-calendar { - .ui-state-default { - background: $highlight; - color: $text; - } - .ui-state-hover, .ui-state-active { @extend %brand-background; + + .ui-state-default:not(&) { + background: $highlight; + color: $text; + } } thead { From 21faad66c9642b4484ebd2a11f5d6176eae6f191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 9 Oct 2022 23:58:36 +0200 Subject: [PATCH 3/6] Fix color changing on hover on non-link notifications IMHO it was really strange to change the color on hover when the element isn't interactive. --- app/assets/stylesheets/layout.scss | 13 ++++++++----- app/views/notifications/_notification.html.erb | 2 +- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 46cde7be2..4098fc319 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1375,16 +1375,20 @@ form { } } + .notification-link { + color: inherit; + + &:hover { + color: $link; + } + } + &:hover { a { text-decoration: none; } - p:not(.time) { - color: $link; - } - &::before { content: "\43"; } @@ -1405,7 +1409,6 @@ form { } p { - color: $text; margin-bottom: 0; max-width: 80%; } diff --git a/app/views/notifications/_notification.html.erb b/app/views/notifications/_notification.html.erb index 48ae90db0..4eae3d8c5 100644 --- a/app/views/notifications/_notification.html.erb +++ b/app/views/notifications/_notification.html.erb @@ -5,7 +5,7 @@ title: notification.notifiable_title, body: notification.notifiable_body } %> <% link_text = render "/notifications/notification_body", locals %> - <%= link_to_if notification.link.present?, link_text, notification.link %> + <%= link_to_if notification.link.present?, link_text, notification.link, class: "notification-link" %> <% else %>

From a16247b2583c55d310430265d50c21b66b24ad8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 12 Oct 2022 14:59:35 +0200 Subject: [PATCH 4/6] Respect hover color in leaflet and author links We were overwriting the color of the links, but not the color of the links on hover. Note we're removing the `!important` rule from the author link; after testing it, it looks like it wasn't necessary. --- app/assets/stylesheets/layout.scss | 2 +- app/assets/stylesheets/participation.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 4098fc319..47f0dd81a 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2461,7 +2461,7 @@ table { } a { - color: $link; + @include link; } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 2b8ceffac..c1830da9c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -249,7 +249,7 @@ font-weight: bold; a { - color: $link !important; + @include link; } } From 5dbd694861a7d9ef819abfe5d0b883fddf83ae5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 12 Oct 2022 15:13:21 +0200 Subject: [PATCH 5/6] Use the same color for solid and hollow buttons Should hollow buttons use the same color as links do or the same color as solid buttons do? In the default scenario, it doesn't matter, since links and solid buttons use the same color. However, it matters when people customize the application so links and solid buttons don't use the same color. I'm choosing to use the same color for solid and hollow buttons because these elements are usually isolated and so from the UX perspective they are similar; links, on the other hand, are often in the middle of some text. Note we're talking about links and buttons while many of the "buttons" we use in the application are actually links styled as buttons. Here, "buttons" means "things that look like buttons". --- app/assets/stylesheets/layout.scss | 3 +-- app/assets/stylesheets/mixins/buttons.scss | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 47f0dd81a..79631fcd4 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -146,9 +146,8 @@ button, } .button.hollow { - @include normal-selection; + @include brand-text; border: 1px solid; - color: $link; } .button.hollow.error { diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss index b5e1aee6c..96b3da07a 100644 --- a/app/assets/stylesheets/mixins/buttons.scss +++ b/app/assets/stylesheets/mixins/buttons.scss @@ -23,7 +23,7 @@ @include base-button; } -@mixin hollow-button($color: $link) { +@mixin hollow-button($color: $brand) { @include button($style: hollow, $background: $color); @include normal-selection; @include base-button; From 7ed0dbfd9aef542e77ca4a75d9920a58861e5765 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 13 Oct 2022 20:58:12 +0200 Subject: [PATCH 6/6] Use the same colors for admin top-links Doing so will help to immediately identify which administration you're managing when using multitenant applications. We might revert this change if we detect it causes usability issues in the admin section. --- app/assets/stylesheets/admin.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 1619efbec..7751f4cab 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -61,8 +61,6 @@ $table-header: #ecf1f6; } .top-links { - background: #000; - color: $white; a { line-height: rem-calc($line-height * 1.5);