From 959176b66d7492a7400bd15378d41498cc42ce79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 26 Sep 2023 17:51:28 +0200 Subject: [PATCH 1/4] Use a darker "delete" color The color we were using didn't have enough contrast against a white background, which made it harder to read texts like "Remove map marker" or "Erase my account". Since the new color is almost identical to the color we were using on hover and for the border, we're changing the color on hover as well, while IMHO it's no longer necessary to use a different color for the border. --- app/assets/stylesheets/_consul_settings.scss | 2 +- app/assets/stylesheets/admin.scss | 4 ++-- app/assets/stylesheets/map_location.scss | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index bbf168e92..34c716112 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -76,7 +76,7 @@ $debates: $brand !default; $like: #7bd2a8 !default; $unlike: #ef8585 !default; -$delete: #f04124 !default; +$delete: #db2e0f !default; $check: #46db91 !default; $proposals: #ffa42d !default; diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 261cbe0c5..542a765a7 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -347,7 +347,7 @@ code { // ----------------- .delete { - border-bottom: 1px dotted #cf2a0e; + border-bottom: 1px dotted; color: $delete; font-size: $small-font-size; @@ -355,7 +355,7 @@ code { &:active, &:focus { border-bottom-color: transparent; - color: #cf2a0e; + color: darken($delete, 10%); } } diff --git a/app/assets/stylesheets/map_location.scss b/app/assets/stylesheets/map_location.scss index 00f322efe..f613d1dd6 100644 --- a/app/assets/stylesheets/map_location.scss +++ b/app/assets/stylesheets/map_location.scss @@ -1,5 +1,5 @@ .map-location-remove-marker { - border-bottom: 1px dotted #cf2a0e; + border-bottom: 1px dotted; border-radius: 0; color: $delete; cursor: pointer; @@ -10,7 +10,7 @@ &:active, &:focus { border-bottom-style: solid; - color: #cf2a0e; + color: darken($delete, 10%); } } From 517f74a7489c824fe4c9cdeac2c02d74864203f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 26 Sep 2023 23:37:42 +0200 Subject: [PATCH 2/4] Extract component to render an initialjs avatar This way it'll be easier to change it. --- .../shared/avatar_component.html.erb | 1 + app/components/shared/avatar_component.rb | 23 +++++++++++++++++++ app/views/account/show.html.erb | 2 +- app/views/comments/_comment.html.erb | 2 +- app/views/communities/_participant.html.erb | 2 +- app/views/shared/_author_info.html.erb | 2 +- app/views/users/show.html.erb | 2 +- 7 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 app/components/shared/avatar_component.html.erb create mode 100644 app/components/shared/avatar_component.rb diff --git a/app/components/shared/avatar_component.html.erb b/app/components/shared/avatar_component.html.erb new file mode 100644 index 000000000..d84a07cea --- /dev/null +++ b/app/components/shared/avatar_component.html.erb @@ -0,0 +1 @@ +<%= avatar_image(record, options) %> diff --git a/app/components/shared/avatar_component.rb b/app/components/shared/avatar_component.rb new file mode 100644 index 000000000..046951588 --- /dev/null +++ b/app/components/shared/avatar_component.rb @@ -0,0 +1,23 @@ +class Shared::AvatarComponent < ApplicationComponent + attr_reader :record, :given_options + delegate :avatar_image, to: :helpers + + def initialize(record, **given_options) + @record = record + @given_options = given_options + end + + private + + def default_options + { seed: seed } + end + + def options + default_options.merge(given_options) + end + + def seed + record.id + end +end diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb index 161f904c6..9623976de 100644 --- a/app/views/account/show.html.erb +++ b/app/views/account/show.html.erb @@ -6,7 +6,7 @@ <%= link_to t("account.show.erase_account_link"), users_registrations_delete_form_path, class: "delete" %> - <%= avatar_image(@account, seed: @account.id, size: 100, class: "margin-bottom") %> + <%= render Shared::AvatarComponent.new(@account, size: 100, class: "margin-bottom") %>

<%= t("account.show.title") %>

diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 549bab2d1..542fa0d71 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -19,7 +19,7 @@ <% elsif comment.user.organization? %> <%= image_tag("avatar_collective.png", size: 32, class: "avatar float-left") %> <% else %> - <%= avatar_image(comment.user, seed: comment.user_id, size: 32, class: "float-left") %> + <%= render Shared::AvatarComponent.new(comment.user, size: 32, class: "float-left") %> <% end %> <% end %> diff --git a/app/views/communities/_participant.html.erb b/app/views/communities/_participant.html.erb index 003b5a668..746ec42c7 100644 --- a/app/views/communities/_participant.html.erb +++ b/app/views/communities/_participant.html.erb @@ -1,7 +1,7 @@
- <%= avatar_image(participant, seed: participant.id, size: 32, class: "author-photo") %> + <%= render Shared::AvatarComponent.new(participant, size: 32, class: "author-photo") %>
diff --git a/app/views/shared/_author_info.html.erb b/app/views/shared/_author_info.html.erb index d732844b4..8b9f21b89 100644 --- a/app/views/shared/_author_info.html.erb +++ b/app/views/shared/_author_info.html.erb @@ -4,7 +4,7 @@ <%= t("shared.author_info.author_deleted") %> <% else %> - <%= avatar_image(resource.author, seed: resource.author_id, size: 32, class: "author-photo") %> + <%= render Shared::AvatarComponent.new(resource.author, size: 32, class: "author-photo") %> <%= link_to resource.author.name, user_path(resource.author) %> diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb index d10b71bbc..0b500609b 100644 --- a/app/views/users/show.html.erb +++ b/app/views/users/show.html.erb @@ -15,7 +15,7 @@ <% end %>

- <%= avatar_image(@user, seed: @user.id, size: 60) %> + <%= render Shared::AvatarComponent.new(@user, size: 60) %> <%= @user.name %> <% if current_user&.administrator? %> <%= @user.email %> From 19bb08f7b8346d58c37f63b28e656fa424143b2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 27 Sep 2023 00:10:45 +0200 Subject: [PATCH 3/4] Increase contrast in initialjs avatars Not all the colors initialjs uses by default provide enough contrast against a white text. The default initialjs colors are: ["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"] We're replacing them with colors containing less luminosity when necessary in order to get a 4,5:1 contrast (it could be argued that a 3:1 contrast is enough when the icons are big, but that isn't always the case and more contrast doesn't hurt): ["#16836d", "#12826c", "#896f06", "#a06608", "#1e8549", "#1e8549", "#b35e14", "#c75000", "#207ab6", "#2779b0", "#de2f1b", "#c0392b", "#9b59b6", "#8e44ad", "#6c767f", "#34495e", "#2c3e50", "#66797a", "#697677", "#d82286", "#c93b8e", "#db310f", "#727755", "#8a6f3d", "#8a6f3d", "#a94136"] Since initialjs doesn't provide a way to change these colors using JavaScript, we're changing them in Ruby, following the same algorithm used by initialjs. --- app/components/shared/avatar_component.rb | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/app/components/shared/avatar_component.rb b/app/components/shared/avatar_component.rb index 046951588..1009360e9 100644 --- a/app/components/shared/avatar_component.rb +++ b/app/components/shared/avatar_component.rb @@ -10,13 +10,20 @@ class Shared::AvatarComponent < ApplicationComponent private def default_options - { seed: seed } + { background_color: colors[seed % colors.size] } end def options default_options.merge(given_options) end + def colors + ["#16836d", "#12826c", "#896f06", "#a06608", "#1e8549", "#1e8549", "#b35e14", + "#c75000", "#207ab6", "#2779b0", "#de2f1b", "#c0392b", "#9b59b6", "#8e44ad", + "#6c767f", "#34495e", "#2c3e50", "#66797a", "#697677", "#d82286", "#c93b8e", + "#db310f", "#727755", "#8a6f3d", "#8a6f3d", "#a94136"] + end + def seed record.id end From ae4b07de41e82c74050dc63a1fe6a704478c131e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 28 Sep 2023 17:59:48 +0200 Subject: [PATCH 4/4] Make alt text readable when the logo doesn't load We were displaying the alt text using the same color as the background color, which made it impossible to read it when the logo didn't load (for whatever reason). Using the same color as the text, like done in the admin section, solves the issue. --- app/assets/stylesheets/layout.scss | 4 ++++ app/assets/stylesheets/layout/admin_header.scss | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index ea7bba8bc..fc211c76a 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -506,6 +506,10 @@ body > header, padding: rem-calc(6) 0; text-align: center; } + + h1 a { + color: inherit; + } } .public > .wrapper > header, diff --git a/app/assets/stylesheets/layout/admin_header.scss b/app/assets/stylesheets/layout/admin_header.scss index 105aa3f35..8c6753985 100644 --- a/app/assets/stylesheets/layout/admin_header.scss +++ b/app/assets/stylesheets/layout/admin_header.scss @@ -54,7 +54,6 @@ } a { - color: inherit; display: inline-block; font-family: "Lato" !important; font-size: rem-calc(24);