Merge pull request #185 from DevLoversTeam/yn/refactor/footer-theme-styles

refactor: update accent color hover effects to Footer

Author: ViktorSvertoka

frontend/components/shared/Footer.tsx

@@ -46,7 +46,10 @@ export default function Footer() {
           <div className="space-y-3">
             <p className="text-sm text-slate-700 dark:text-slate-200">
               {t('builtWith')}{' '}
-              <span className="font-semibold text-blue-600 dark:text-blue-400">
+              <span
+                className="font-semibold "
+                style={{ color: 'var(--accent-primary)' }}
+              >
                 DevLovers
               </span>{' '}
               {t('byCommunity')}
@@ -55,14 +58,14 @@ export default function Footer() {
             <p className="text-sm text-slate-500 dark:text-slate-400">
               <Link
                 href="/privacy-policy"
-                className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                className="transition-colors hover:[color:var(--accent-hover)] focus-visible:[color:var(--accent-hover)]"
               >
                 {t('privacyPolicy')}
               </Link>
               <span className="px-2 opacity-60">|</span>
               <Link
                 href="/terms-of-service"
-                className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                className="transition-colors hover:[color:var(--accent-hover)] focus-visible:[color:var(--accent-hover)]"
               >
                 {t('termsOfService')}
               </Link>
@@ -94,11 +97,12 @@ export default function Footer() {
                       bg-white/40
                       text-slate-600
                       transition-all
-                      hover:-translate-y-0.5 hover:text-blue-600 hover:border-blue-300/60
+                      hover:-translate-y-0.5
                       dark:border-neutral-800/60
                       dark:bg-neutral-950/30
                       dark:text-slate-300
-                      dark:hover:text-blue-400 dark:hover:border-blue-500/40
+                      [&:hover]:!text-[var(--accent-primary)]
+                      [&:hover]:!border-[var(--accent-primary)]
                     "
                   >
                     <Icon className="h-5 w-5" />

frontend/components/theme/ThemeToggle.tsx

@@ -1,34 +1,37 @@
-"use client"
+'use client';
 
-import { useTheme } from "next-themes"
-import { Monitor, Sun, Moon } from "lucide-react"
-import { motion } from "framer-motion"
-import { useEffect, useState } from "react"
+import { useTheme } from 'next-themes';
+import { Monitor, Sun, Moon } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
 
 const themes = [
-  { value: "system", icon: Monitor, label: "System theme" },
-  { value: "light", icon: Sun, label: "Light theme" },
-  { value: "dark", icon: Moon, label: "Dark theme" },
-] as const
+  { value: 'system', icon: Monitor, label: 'System theme' },
+  { value: 'light', icon: Sun, label: 'Light theme' },
+  { value: 'dark', icon: Moon, label: 'Dark theme' },
+] as const;
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
   if (!mounted) {
     return (
       <div className="flex h-9 items-center gap-1 rounded-full bg-neutral-100 p-1 dark:border dark:border-neutral-800 dark:bg-neutral-950">
         {themes.map(({ value, icon: Icon }) => (
-          <div key={value} className="relative flex h-7 w-7 items-center justify-center rounded-full">
+          <div
+            key={value}
+            className="relative flex h-7 w-7 items-center justify-center rounded-full"
+          >
             <Icon className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
           </div>
         ))}
       </div>
-    )
+    );
   }
 
   return (
@@ -38,18 +41,25 @@ export function ThemeToggle() {
           key={value}
           onClick={() => setTheme(value)}
           aria-label={label}
-          className="relative flex h-7 w-7 items-center justify-center rounded-full"
+          className="theme-toggle-btn relative flex h-7 w-7 items-center justify-center rounded-full"
         >
           {theme === value && (
             <motion.div
               layoutId="theme-active"
               className="absolute inset-0 rounded-full bg-white shadow-sm dark:bg-neutral-800"
-              transition={{ type: "spring", stiffness: 400, damping: 30 }}
+              transition={{ type: 'spring', stiffness: 400, damping: 30 }}
             />
           )}
-          <Icon className="relative z-10 h-4 w-4 text-neutral-500 dark:text-neutral-400" />
+          <Icon className="relative z-10 h-4 w-4 text-neutral-500 dark:text-neutral-400 transition-colors" />
         </button>
       ))}
+
+      <style jsx>{`
+        .theme-toggle-btn:hover :global(svg),
+        .theme-toggle-btn:focus-visible :global(svg) {
+          color: var(--accent-primary);
+        }
+      `}</style>
     </div>
-  )
-}
+  );
+}