From 2d274ca1a2458fea5802e585c393867d09cafa84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marius=20B=C4=82LTEANU?= <marius.balteanu@zitec.com>
Date: Thu, 7 Aug 2025 22:48:46 +0300
Subject: [PATCH] Generates a color from the user's ID without using CSS
 classes.

---
 app/assets/stylesheets/application.css | 75 --------------------------
 app/helpers/avatars_helper.rb          | 15 ++++--
 2 files changed, 12 insertions(+), 78 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 568bed2bc..0f14a599f 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2241,81 +2241,6 @@ span[role="img"].avatar {
   user-select: none;
   font-weight: 700;
 }
-.avatar.s13 {
-  block-size: 13px;
-  inline-size: 13px;
-}
-span[role="img"].avatar.s13 {
-  font-size: calc(16px * .3);
-}
-.avatar.s16 {
-  block-size: 16px;
-  inline-size: 16px;
-}
-span[role="img"].avatar.s16 {
-  font-size: calc(16px * .4);
-}
-.avatar.s22 {
-  block-size: 22px;
-  inline-size: 22px;
-}
-span[role="img"].avatar.s22 {
-  font-size: calc(22px * .4);
-}
-.avatar.s24 {
-  block-size: 24px;
-  inline-size: 24px;
-}
-span[role="img"].avatar.s24  {
-  font-size: calc(24px * .4);
-}
-.avatar.s40 {
-  block-size: 40px;
-  inline-size: 40px;
-}
-span[role="img"].avatar.s40  {
-  font-size: calc(40px * .4);
-}
-.avatar.s50 {
-  block-size: 50px;
-  inline-size: 50px;
-}
-span[role="img"].avatar.s50  {
-  font-size: calc(50px * .4);
-}
-
-.avatar-color-0 {
-  background-color: #880000;
-  color: #FFFFFF;
-}
-.avatar-color-1 {
-  background-color: #ff0000;
-  color: #000000;
-}
-.avatar-color-2 {
-  background-color: #00ff00;
-  color: #000000;
-}
-.avatar-color-3 {
-  background-color: #008800;
-  color: #FFFFFF;
-}
-.avatar-color-4 {
-  background-color: #0000ff;
-  color: #FFFFFF;
-}
-.avatar-color-5 {
-  background-color: #000088;
-  color: #FFFFFF;
-}
-.avatar-color-6 {
-  background-color: #ff8800;
-  color: #000000;
-}
-.avatar-color-7 {
-  background-color: #ff0088;
-  color: #000000;
-}
 
 /* Reaction styles */
 .reaction-button:hover, .reaction-button:active {
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index f178f6a8a..b4fe2295b 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -58,10 +58,19 @@ module AvatarsHelper
         nil
       end
     elsif user.respond_to?(:initials)
-      size = options.delete(:size) || GravatarHelper::DEFAULT_OPTIONS[:size]
-      css_class = "avatar-color-#{user.id % 8} avatar s#{size}"
+      size = (options.delete(:size) || GravatarHelper::DEFAULT_OPTIONS[:size]).to_i
+
+      # Generate a color from the user's ID
+      hue = (user.id * 137.508).modulo(360) # Using the golden angle for a good color distribution
+      background_color = "hsl(#{hue}, 50%, 45%)"
+      text_color = "#FFFFFF"
+
+      style = "width: #{size}px; height: #{size}px; font-size: #{size * 0.45}px; background-color: #{background_color}; color: #{text_color};"
+
+      css_class = "avatar"
       css_class += " #{options[:class]}" if options[:class]
-      content_tag('span', user.initials, role: 'img', class: css_class)
+
+      content_tag('span', user.initials, role: 'img', class: css_class, style: style)
     else
       ''
     end
-- 
2.39.5 (Apple Git-154)