feature: dashboard settings and invite activation flow consistency fixed. frontend warnings fixed

frontend/src/components/ui/common/Button.tsx

@@ -0,0 +1,67 @@
+// src/components/ui/Button.tsx
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  fullWidth?: boolean;
+  children: React.ReactNode;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  isLoading = false,
+  fullWidth = false,
+  children,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  const baseClasses =
+    'inline-flex items-center justify-center rounded-[var(--radius-md)] font-medium transition-all duration-200 ' +
+    'focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:opacity-50 disabled:cursor-not-allowed';
+
+  const variantClasses: Record<ButtonVariant, string> = {
+    primary:
+      'bg-primary text-primary-contrast hover:brightness-105 shadow-[0_0_0_1px_var(--color-primary-soft)]',
+
+    secondary:
+      'bg-surface-elevated text-text-primary border border-border hover:border-border-strong',
+
+    outline:
+      'border border-border text-text-primary hover:bg-background-card/70',
+
+    danger:
+      'bg-red-600 text-white hover:bg-red-700',
+
+    ghost:
+      'text-text-secondary hover:text-text-primary hover:bg-background-card/70',
+  };
+
+  const sizeClasses: Record<ButtonSize, string> = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-6 py-3 text-base',
+  };
+
+  const widthClass = fullWidth ? 'w-full' : '';
+
+  return (
+    <button
+      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${widthClass} ${className}`}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading && (
+        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+      )}
+      {children}
+    </button>
+  );
+};