From c5d0f985e95ffe4ba19809dbc3e2f493e7ce723b Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Fri, 18 Apr 2025 22:10:07 +0200
Subject: [PATCH] impr: use rainbow effect on rgb badges for reduced-motion
 (@fehmer) (#6466)

---
 frontend/src/ts/controllers/badge-controller.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/controllers/badge-controller.ts b/frontend/src/ts/controllers/badge-controller.ts
index 79b137d36..5793cd017 100644
--- a/frontend/src/ts/controllers/badge-controller.ts
+++ b/frontend/src/ts/controllers/badge-controller.ts
@@ -15,7 +15,8 @@ const badges: Record<number, UserBadge> = {
     description: "I made this",
     icon: "fa-laptop",
     color: "white",
-    customStyle: "animation: rgb-bg 10s linear infinite;",
+    customStyle:
+      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
   },
   2: {
     id: 2,
@@ -23,7 +24,8 @@ const badges: Record<number, UserBadge> = {
     description: "I helped make this",
     icon: "fa-code",
     color: "white",
-    customStyle: "animation: rgb-bg 10s linear infinite;",
+    customStyle:
+      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
   },
   3: {
     id: 3,
@@ -31,7 +33,8 @@ const badges: Record<number, UserBadge> = {
     description: "Discord server moderator",
     icon: "fa-hammer",
     color: "white",
-    customStyle: "animation: rgb-bg 10s linear infinite;",
+    customStyle:
+      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
   },
   4: {
     id: 4,
@@ -111,7 +114,8 @@ const badges: Record<number, UserBadge> = {
     description: "Yes, I'm actually this fast",
     icon: "fa-rocket",
     color: "white",
-    customStyle: "animation: rgb-bg 10s linear infinite;",
+    customStyle:
+      "animation: rgb-bg 10s linear infinite; background: linear-gradient(45deg in hsl longer hue, hsl(330, 90%, 30%) 0%, hsl(250, 90%, 30%) 100%);",
   },
   14: {
     id: 14,