Massive Material 3 re-styling

src/components/ui/Button.tsx

@@ -1,6 +1,7 @@
 
 import React from 'react';
 import { Loader2 } from 'lucide-react';
+import { Ripple } from './Ripple';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
@@ -35,10 +36,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         return (
             <button
                 ref={ref}
-                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className}`}
+                className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className} relative overflow-hidden`}
                 disabled={disabled || loading}
                 {...props}
             >
+                <Ripple color={variant === 'primary' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)'} />
                 {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 {children}
             </button>