less colors

Author: Hyteq

apps/dashboard/components/layout/navigation/navigation-item.tsx

@@ -65,26 +65,29 @@ export function NavigationItem({
       data-nav-section={isRootLevel ? 'main-nav' : 'website-nav'}
       data-is-external={isExternal ? 'true' : 'false'}
       className={cn(
-        "flex items-center gap-x-3 px-3 py-2 text-sm rounded-md transition-all cursor-pointer",
+        "group flex items-center gap-x-3 px-3 py-2 text-sm rounded transition-colors",
         isActive
-          ? "bg-primary/15 text-primary font-medium"
-          : isHighlighted
-            ? "text-foreground hover:text-primary hover:bg-accent/50"
-            : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
+          ? "bg-accent text-foreground font-medium"
+          : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
       )}
     >
-      <span className={cn("flex-shrink-0", isActive && "text-primary")}>
-        <Icon size={32} weight="duotone" className="h-5 w-5" />
+      <span className="flex-shrink-0">
+        <Icon size={32} weight="duotone" className="h-4 w-4" />
       </span>
       <span className="flex-grow truncate">{name}</span>
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-1.5">
         {alpha && (
-          <span className="inline-flex items-center rounded-full bg-orange-100 dark:bg-orange-900/30 px-2 py-0.5 text-xs font-medium text-orange-800 dark:text-orange-300 border border-orange-200 dark:border-orange-800/50">
-            Alpha
+          <span className="text-xs text-muted-foreground font-mono">
+            ALPHA
           </span>
         )}
-        {isExternal && <ArrowSquareOut weight="duotone" className="h-3 w-3 text-muted-foreground" />}
+        {isExternal && (
+          <ArrowSquareOut
+            weight="duotone"
+            className="h-3 w-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+          />
+        )}
       </div>
     </LinkComponent>
   );
-} 
+}

apps/dashboard/components/ui/closable-alert.tsx

@@ -16,20 +16,6 @@ interface ClosableAlertProps {
     onClose?: (id: string) => void;
 }
 
-const variantStyles = {
-    warning: "border-l-orange-500 bg-orange-50 dark:bg-orange-950/20 border border-orange-200 dark:border-orange-800",
-    error: "border-l-red-500 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800",
-    success: "border-l-green-500 bg-green-50 dark:bg-green-950/20 border border-green-200 dark:border-green-800",
-    info: "border-l-blue-500 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800",
-};
-
-const iconStyles = {
-    warning: "text-orange-500",
-    error: "text-red-500",
-    success: "text-green-500",
-    info: "text-blue-500",
-};
-
 export function ClosableAlert({
     id,
     title,
@@ -50,18 +36,24 @@ export function ClosableAlert({
 
     if (!isVisible) return null;
 
+    // Only use color for critical errors
+    const isError = variant === "error";
+
     return (
         <div
             className={cn(
-                "rounded border-l-4 transition-all duration-200",
-                variantStyles[variant],
+                "rounded border bg-muted/50 transition-all duration-200",
+                isError && "border-destructive/20 bg-destructive/5",
                 className
             )}
         >
             {/* Header - always visible */}
             <div className="flex items-center justify-between p-3">
                 <div className="flex items-center gap-2 flex-1 min-w-0">
-                    <Icon className={cn("h-4 w-4 flex-shrink-0", iconStyles[variant])} />
+                    <Icon className={cn(
+                        "h-4 w-4 flex-shrink-0",
+                        isError ? "text-destructive" : "text-muted-foreground"
+                    )} />
                     <div className="flex-1 min-w-0">
                         <h4 className="text-sm font-medium">{title}</h4>
                         {!isExpanded && (
@@ -77,30 +69,30 @@ export function ClosableAlert({
                         <Button
                             variant="ghost"
                             size="sm"
-                            className="h-6 w-6 p-0 hover:bg-black/5 dark:hover:bg-white/5 rounded"
+                            className="h-6 w-6 p-0 rounded"
                             onClick={() => setIsExpanded(!isExpanded)}
                         >
                             {isExpanded ? (
-                                <ChevronUp className="h-3 w-3 text-muted-foreground" />
+                                <ChevronUp className="h-3 w-3" />
                             ) : (
-                                <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                                <ChevronDown className="h-3 w-3" />
                             )}
                         </Button>
                     )}
                     <Button
                         variant="ghost"
                         size="sm"
-                        className="h-6 w-6 p-0 hover:bg-black/5 dark:hover:bg-white/5 rounded"
+                        className="h-6 w-6 p-0 rounded"
                         onClick={handleClose}
                     >
-                        <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                        <X className="h-3 w-3" />
                     </Button>
                 </div>
             </div>
 
             {/* Expandable content */}
             {isExpanded && (
-                <div className="px-3 pb-3 border-t border-black/5 dark:border-white/5">
+                <div className="px-3 pb-3 border-t border-border/50">
                     <div className="pt-3 space-y-2">
                         <p className="text-xs text-muted-foreground leading-relaxed">
                             {description}