update colors of social buttons

webui/src/components/SocialButton.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { FaBook, FaCoffee, FaCrown, FaDiscord, FaLink } from 'react-icons/fa';
 
 const ICONS_BY_ID = {
@@ -8,14 +9,53 @@ const ICONS_BY_ID = {
   throne: FaCrown,
 };
 
-const VARIANT_BY_ID = {
-  discord: 'rainbow-animate-bg',
-  kofi: 'kofi-animate-bg',
-  'ko-fi': 'kofi-animate-bg',
-  wiki: 'wiki-animate-bg',
-  throne: 'throne-animate-bg',
+const GRADIENT_STYLE_BY_ID = {
+  discord: {
+    backgroundImage:
+      'linear-gradient(270deg,#5865F2,#404EED,#5865F2)',
+    backgroundSize: '600% 600%',
+    animation: 'socialGradient 180s ease infinite',
+  },
+  kofi: {
+    backgroundImage: 'linear-gradient(270deg,#FF6433,#E04822,#FF6433)',
+    backgroundSize: '600% 600%',
+    animation: 'socialGradient 170s ease infinite',
+  },
+  'ko-fi': {
+    backgroundImage: 'linear-gradient(270deg,#FF6433,#E04822,#FF6433)',
+    backgroundSize: '600% 600%',
+    animation: 'socialGradient 170s ease infinite',
+  },
+  wiki: {
+    backgroundImage: 'linear-gradient(270deg,#EE8019,#C65C08,#EE8019)',
+    backgroundSize: '600% 600%',
+    animation: 'socialGradient 180s ease infinite',
+  },
+  throne: {
+    backgroundImage: 'linear-gradient(270deg,#7C3AED,#5B21B6,#7C3AED)',
+    backgroundSize: '600% 600%',
+    animation: 'socialGradient 180s ease infinite',
+  },
 };
 
+function useSocialButtonStyles() {
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const styleId = 'social-button-keyframes';
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      @keyframes socialGradient {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+}
+
 function normalizeId(id, label) {
   if (typeof id === 'string' && id.trim()) return id.trim().toLowerCase();
   if (typeof label === 'string' && label.trim()) {
@@ -30,9 +70,10 @@ function normalizeId(id, label) {
 
 export default function SocialButton({ id, label, url, className = '' }) {
   if (!url) return null;
+  useSocialButtonStyles();
   const key = normalizeId(id, label);
   const Icon = ICONS_BY_ID[key] || FaLink;
-  const variantClass = VARIANT_BY_ID[key] || 'bg-slate-700 hover:bg-slate-600';
+  const gradientStyle = GRADIENT_STYLE_BY_ID[key] || null;
   const text = label || id || 'Link';
 
   return (
@@ -41,7 +82,10 @@ export default function SocialButton({ id, label, url, className = '' }) {
       target="_blank"
       rel="noopener noreferrer"
       aria-label={text}
-      className={`inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white transition justify-center gap-1 rounded-md ${variantClass} ${className}`}
+      className={`inline-flex items-center w-full px-0.5 py-0.5 text-sm font-medium text-white transition justify-center gap-1 rounded-md ${
+        gradientStyle ? '' : 'bg-slate-700 hover:bg-slate-600'
+      } ${className}`}
+      style={gradientStyle || undefined}
     >
       <Icon className="mr-0" />
       {text}

webui/src/index.css

@@ -75,82 +75,6 @@ body {
     @apply px-0.5 py-0.5 text-sm font-medium text-white transition-colors bg-rose-600 hover:bg-rose-500 rounded-md;
   }
 
-  .rainbow-animate-bg {
-    background: linear-gradient(
-      270deg,
-      #ff0000,
-      #ff7f00,
-      #ffff00b3,
-      #00ff00,
-      #0000ff,
-      #4b0082,
-      #8b00ff
-
-      /* less colors: */
-      /* #ff0000,
-      #00ff00,
-      #0000ff */
-
-      /* blue, white, pink */
-      /* #00e5ff,
-      #ffffff,
-      #ff69b4 */
-
-      /* discord colors */
-      /* #5865f2,
-      #ffffff,
-      #ff4754 */
-    );
-    background-size: 1400% 1400%;
-    animation: rainbowBG 300s ease infinite;
-  }
-  @keyframes rainbowBG {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
-
-  .kofi-animate-bg {
-    background: linear-gradient(
-      270deg,
-      #ff5f5f,
-      #ff9f43,
-      #ffd166,
-      #ff5f5f
-    );
-    background-size: 800% 800%;
-    animation: rainbowBG 240s ease infinite;
-  }
-
-  .wiki-animate-bg {
-    background: linear-gradient(
-      270deg,
-      #14b8a6,
-      #38bdf8,
-      #22d3ee,
-      #14b8a6
-    );
-    background-size: 700% 700%;
-    animation: rainbowBG 240s ease infinite;
-  }
-
-  .throne-animate-bg {
-    background: linear-gradient(
-      270deg,
-      #f59e0b,
-      #fbbf24,
-      #fde68a,
-      #f59e0b
-    );
-    background-size: 700% 700%;
-    animation: rainbowBG 240s ease infinite;
-  }
 }
 
 @layer utilities {