From 66c08b5d6d1431c93473eebd923ac71729f48d65 Mon Sep 17 00:00:00 2001
From: Boris Kovalskii <36034823+JustYay@users.noreply.github.com>
Date: Thu, 11 Jun 2026 09:45:17 +1000
Subject: [PATCH] fix(backgrounds): read aurora gradient colors and speed from
 settings

---
 .../ui/backgrounds/aurora-background.tsx         | 16 +++++++++++++---
 src/components/ui/backgrounds/registry.ts        | 12 +++++++++---
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/backgrounds/aurora-background.tsx b/src/components/ui/backgrounds/aurora-background.tsx
index 72de75e..e689c4e 100644
--- a/src/components/ui/backgrounds/aurora-background.tsx
+++ b/src/components/ui/backgrounds/aurora-background.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@/lib/utils';
-import { safeBoolean } from './types';
+import { sanitizeColor, safeBoolean, safeSelect } from './types';
 import { useAnimationPause } from '@/hooks/useAnimationLoop';
 
 interface Props {
@@ -8,7 +8,17 @@ interface Props {
 
 const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
 
+const SPEED_DURATIONS: Record<string, string> = {
+  slow: '90s',
+  normal: '60s',
+  fast: '30s',
+};
+
 export default function AuroraBackground({ settings }: Props) {
+  const firstColor = sanitizeColor(settings.firstColor, '#3b82f6');
+  const secondColor = sanitizeColor(settings.secondColor, '#a5b4fc');
+  const thirdColor = sanitizeColor(settings.thirdColor, '#93c5fd');
+  const speed = safeSelect(settings.speed, ['slow', 'normal', 'fast'] as const, 'normal');
   const showRadialGradient = safeBoolean(settings.showRadialGradient, true);
   const paused = useAnimationPause();
 
@@ -22,9 +32,9 @@ export default function AuroraBackground({ settings }: Props) {
             '[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,transparent_70%)]',
         )}
         style={{
-          backgroundImage:
-            'repeating-linear-gradient(100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%), repeating-linear-gradient(100deg, #3b82f6 10%, #a5b4fc 15%, #93c5fd 20%, #ddd6fe 25%, #60a5fa 30%)',
+          backgroundImage: `repeating-linear-gradient(100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%), repeating-linear-gradient(100deg, ${firstColor} 10%, ${secondColor} 15%, ${thirdColor} 20%, ${secondColor} 25%, ${firstColor} 30%)`,
           backgroundSize: isMobile ? '100%, 100%' : '300%, 200%',
+          animationDuration: SPEED_DURATIONS[speed],
           animationPlayState: paused ? 'paused' : 'running',
         }}
       />
diff --git a/src/components/ui/backgrounds/registry.ts b/src/components/ui/backgrounds/registry.ts
index 18638d7..d4494aa 100644
--- a/src/components/ui/backgrounds/registry.ts
+++ b/src/components/ui/backgrounds/registry.ts
@@ -59,9 +59,15 @@ export const backgroundRegistry: BackgroundDefinition[] = [
     descriptionKey: 'admin.backgrounds.auroraDesc',
     category: 'css',
     settings: [
-      { key: 'firstColor', label: 'admin.backgrounds.color1', type: 'color', default: '#00d2ff' },
-      { key: 'secondColor', label: 'admin.backgrounds.color2', type: 'color', default: '#7928ca' },
-      { key: 'thirdColor', label: 'admin.backgrounds.color3', type: 'color', default: '#ff0080' },
+      { key: 'firstColor', label: 'admin.backgrounds.color1', type: 'color', default: '#3b82f6' },
+      { key: 'secondColor', label: 'admin.backgrounds.color2', type: 'color', default: '#a5b4fc' },
+      { key: 'thirdColor', label: 'admin.backgrounds.color3', type: 'color', default: '#93c5fd' },
+      {
+        key: 'showRadialGradient',
+        label: 'admin.backgrounds.radialGradient',
+        type: 'boolean',
+        default: true,
+      },
       {
         key: 'speed',
         label: 'admin.backgrounds.speed',