Feature/UI ux overhaul

client/src/components/ui-new/badge.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "./button"
+
+/**
+ * Badge Component Variants
+ * Default, Primary, Success, Warning, Error, Info variants
+ */
+const badgeVariants = cva(
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-full font-medium transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-700 text-slate-200 hover:bg-slate-600",
+        primary:
+          "bg-[#3B82F6]/20 text-[#3B82F6] hover:bg-[#3B82F6]/30 border border-[#3B82F6]/30",
+        success:
+          "bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30 border border-emerald-500/30",
+        warning:
+          "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/30",
+        error:
+          "bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30",
+        info:
+          "bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30 border border-cyan-500/30",
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-3 py-1 text-sm",
+        lg: "px-4 py-1.5 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {
+  icon?: React.ReactNode
+}
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, size, icon, children, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(badgeVariants({ variant, size, className }))}
+      {...props}
+    >
+      {icon && <span className="flex-shrink-0">{icon}</span>}
+      {children}
+    </span>
+  )
+)
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }

client/src/components/ui-new/button.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/**
+ * Utility function to merge Tailwind classes
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/**
+ * Button Component Variants
+ * Primary, Secondary, Ghost, and Icon variants
+ */
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-[#3B82F6] text-white hover:bg-[#2563EB] active:bg-[#1D4ED8] shadow-md hover:shadow-lg focus-visible:ring-[#3B82F6]",
+        secondary:
+          "border border-[#3B82F6] bg-transparent text-[#3B82F6] hover:bg-[#3B82F6]/10 active:bg-[#3B82F6]/20 focus-visible:ring-[#3B82F6]",
+        ghost:
+          "bg-transparent text-slate-400 hover:bg-slate-800 hover:text-slate-200 focus-visible:ring-slate-400",
+        danger:
+          "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-md hover:shadow-lg focus-visible:ring-red-600",
+        outline:
+          "border border-slate-600 bg-transparent text-slate-300 hover:bg-slate-800 hover:text-slate-200 focus-visible:ring-slate-400",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg",
+        icon: "h-10 w-10 p-2",
+        "icon-sm": "h-8 w-8 p-1.5",
+        "icon-lg": "h-12 w-12 p-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  loading?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, loading, disabled, children, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="h-4 w-4 animate-spin"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {children}
+      </button>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

client/src/components/ui-new/card.tsx

@@ -0,0 +1,118 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "./button"
+
+/**
+ * Card Component Variants
+ * Three-tier hierarchy: Primary, Secondary, Tertiary
+ */
+const cardVariants = cva(
+  "rounded-xl border transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        // Primary: Critical information with accent
+        primary:
+          "bg-slate-800/90 border-slate-700 shadow-lg backdrop-blur-sm border-l-4 border-l-[#3B82F6]",
+        // Secondary: Supporting information
+        secondary:
+          "bg-slate-800/70 border-slate-700/50 shadow-md backdrop-blur-sm",
+        // Tertiary: Background containers
+        tertiary:
+          "bg-slate-900/50 border-slate-700/30",
+        // Glass: Glassmorphism effect
+        glass:
+          "bg-slate-800/40 backdrop-blur-xl border-white/10 shadow-xl hover:bg-slate-800/60 hover:border-white/20",
+        // Interactive: Hover effects
+        interactive:
+          "bg-slate-800/80 border-slate-700 cursor-pointer hover:bg-slate-800 hover:border-slate-600 hover:shadow-lg transition-all",
+      },
+      padding: {
+        none: "",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8",
+      },
+    },
+    defaultVariants: {
+      variant: "secondary",
+      padding: "md",
+    },
+  }
+)
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, padding, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant, padding, className }))}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight text-slate-100",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-slate-400", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center pt-4 mt-4 border-t border-slate-700/50", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants }