From 644c59cd9b253abd06a3552202b1f96fe9cdde52 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Thu, 17 Apr 2025 14:31:56 +0200
Subject: [PATCH] fix(theme): inconsistent/unreadable styling on settings page
 when using phantom theme (@fehmer) (#6446)

1. Some buttons have the color animation set like funboxes on the
settings page while others have not:

![image](https://github.com/user-attachments/assets/6c4f1ecc-6a94-4e0f-9643-6dde901f8506)

2. On the active theme button the effects overlap making it unreadable:

![image](https://github.com/user-attachments/assets/d2784c9c-34c2-40c6-8e30-5d47a39ff5f4)

3. On the footer color effect was applied to the `textButton` (like
github, discord links) but not `button` (like contract and support).
This applies to all animated themes.
---
 frontend/static/themes/aurora.css  |  2 ++
 frontend/static/themes/fire.css    |  2 ++
 frontend/static/themes/grape.css   |  2 ++
 frontend/static/themes/phantom.css | 10 +++-------
 frontend/static/themes/rgb.css     |  2 ++
 frontend/static/themes/shadow.css  |  2 ++
 frontend/static/themes/trance.css  |  2 ++
 7 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/static/themes/aurora.css b/frontend/static/themes/aurora.css
index e929de472..8a1cefa54 100644
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@@ -66,6 +66,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: aurora 5s linear infinite;
 }
diff --git a/frontend/static/themes/fire.css b/frontend/static/themes/fire.css
index 79226cac9..944e384d9 100644
--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@@ -66,6 +66,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: fire 5s linear infinite;
 }
diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css
index 24c6b5866..92b6b23b5 100644
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@@ -66,6 +66,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: pastel 5s linear infinite;
 }
diff --git a/frontend/static/themes/phantom.css b/frontend/static/themes/phantom.css
index 828bf6f86..ea1f5e63f 100644
--- a/frontend/static/themes/phantom.css
+++ b/frontend/static/themes/phantom.css
@@ -104,10 +104,7 @@ input[type="submit"]:hover {
   color: var(--bg-color);
 }
 
-#caret,
-.pageSettings .section .buttons .button.active,
-.pageSettings .section.languages .buttons .language.active,
-.pageAccount .group.filterButtons .buttons .button.active {
+#caret {
   animation: tokyo-bg 3s linear infinite;
 }
 
@@ -117,13 +114,12 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: tokyo-glow 3s linear infinite;
 }
 
-.textButton.active {
-  animation: tokyo-glow 3s linear infinite;
-}
 .afk,
 .timeToday,
 #words .word letter.correct,
diff --git a/frontend/static/themes/rgb.css b/frontend/static/themes/rgb.css
index 2872c89ca..e0f71d726 100644
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@@ -96,6 +96,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover,
 #words.flipped .word {
   animation: rgb 5s linear infinite;
diff --git a/frontend/static/themes/shadow.css b/frontend/static/themes/shadow.css
index 9016fe386..411279afd 100644
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@@ -44,6 +44,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: shadow-repeat 3s linear infinite forwards;
 }
diff --git a/frontend/static/themes/trance.css b/frontend/static/themes/trance.css
index f6ac49590..08e1cf376 100644
--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@@ -54,6 +54,8 @@ header .config .group .buttons .textButton.active,
 nav .textButton:hover,
 nav button.text:hover,
 header .config .group .buttons .textButton:hover,
+footer .textButton:hover,
+footer button.text:hover,
 a:not(.button):hover {
   animation: trance 5s linear infinite;
 }