From 74c0df9783363634fc67272d3c5c2a3d5ba8f620 Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Sun, 16 Nov 2025 23:16:30 +0800
Subject: [PATCH] Enhance UI components with improved backdrop filters and
 shadow effects; update ThemeSwitcher, Badge, and Button styles for better
 visual consistency

---
 components/ThemeSwitcher.tsx | 2 +-
 components/ui/Badge.tsx      | 5 +++--
 components/ui/Button.tsx     | 4 +++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
index e7c00b4..ef5d6da 100644
--- a/components/ThemeSwitcher.tsx
+++ b/components/ThemeSwitcher.tsx
@@ -6,7 +6,7 @@ export function ThemeSwitcher() {
   const { theme, setTheme } = useTheme();
 
   return (
-    <div className="inline-flex bg-[var(--glass-bg)] backdrop-blur-xl border border-[var(--glass-border)] rounded-[var(--radius-full)] p-1 shadow-[var(--shadow-sm)]">
+    <div className="inline-flex bg-[var(--glass-bg)] backdrop-blur-xl [-webkit-backdrop-filter:blur(25px)] border border-[var(--glass-border)] rounded-[var(--radius-full)] p-1 shadow-[var(--shadow-sm)]">
       <button
         onClick={() => setTheme('light')}
         className={`
diff --git a/components/ui/Badge.tsx b/components/ui/Badge.tsx
index 3c2c128..eb6127c 100644
--- a/components/ui/Badge.tsx
+++ b/components/ui/Badge.tsx
@@ -8,8 +8,8 @@ interface BadgeProps {
 
 export function Badge({ children, variant = 'primary', className = '' }: BadgeProps) {
   const variants = {
-    primary: "bg-[var(--accent-color)] text-white",
-    secondary: "bg-[var(--glass-bg)] backdrop-blur-[10px] border border-[var(--glass-border)] text-[var(--text-color)]",
+    primary: "bg-[var(--accent-color)] text-white shadow-[var(--shadow-sm)]",
+    secondary: "bg-[var(--glass-bg)] backdrop-blur-[10px] [-webkit-backdrop-filter:blur(10px)] border border-[var(--glass-border)] text-[var(--text-color)]",
   };
 
   return (
@@ -19,6 +19,7 @@ export function Badge({ children, variant = 'primary', className = '' }: BadgePr
         px-3 py-1
         rounded-[var(--radius-full)]
         text-xs font-semibold
+        transition-all duration-200
         ${variants[variant]}
         ${className}
       `}
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 67e24a8..3bc3822 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -27,7 +27,9 @@ export function Button({
     `,
     secondary: `
       bg-[var(--glass-bg)] 
-      backdrop-blur-xl 
+      backdrop-blur-xl
+      [-webkit-backdrop-filter:blur(25px)_saturate(180%)]
+      saturate-[180%]
       border 
       border-[var(--glass-border)] 
       rounded-[var(--radius-2xl)]