Merge pull request #5257 from consuldemocracy/increase_contrast

Increase contrast in colors used in "My account"

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;

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%);
   }
 }
 

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,

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);

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%);
   }
 }
 

app/components/shared/avatar_component.html.erb

@@ -0,0 +1 @@
+<%= avatar_image(record, options) %>

app/components/shared/avatar_component.rb

@@ -0,0 +1,30 @@
+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
+      { 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
+end

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" %>
     </div>
 
-    <%= avatar_image(@account, seed: @account.id, size: 100, class: "margin-bottom") %>
+    <%= render Shared::AvatarComponent.new(@account, size: 100, class: "margin-bottom") %>
 
     <h1 class="inline-block"><%= t("account.show.title") %></h1>
 

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 %>
 

app/views/communities/_participant.html.erb

@@ -1,7 +1,7 @@
 <div class="comment-body">
   <div class="comment-info">
 
-    <%= avatar_image(participant, seed: participant.id, size: 32, class: "author-photo") %>
+    <%= render Shared::AvatarComponent.new(participant, size: 32, class: "author-photo") %>
 
     <div class="comment-info">
 

app/views/shared/_author_info.html.erb

@@ -4,7 +4,7 @@
       <%= t("shared.author_info.author_deleted") %>
   </span>
 <% 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") %>
   <span class="author">
       <%= link_to resource.author.name, user_path(resource.author) %>
   </span>

app/views/users/show.html.erb

@@ -15,7 +15,7 @@
       <% end %>
 
       <h2 class="inline-block">
-        <%= avatar_image(@user, seed: @user.id, size: 60) %>
+        <%= render Shared::AvatarComponent.new(@user, size: 60) %>
         <%= @user.name %>
         <% if current_user&.administrator? %>
           <small><%= @user.email %></small>