From 740f31b1b23e57a5eafbc299f17a03f17f89e003 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Wed, 17 Dec 2025 18:14:35 -0500
Subject: [PATCH] style(ui): use earthy sophisticated colors for flow
 connection lines

Replace generic gray connection lines with curated earthy palette
(Charcoal Brown, Forest Moss, Vintage Berry, Harvest Gold, Blue Slate,
Burnt Caramel) for more visually interesting bezier curves in account
flow visualization.
---
 ui/src/components/account-flow-viz.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/account-flow-viz.tsx b/ui/src/components/account-flow-viz.tsx
index f61bc906..f17b7720 100644
--- a/ui/src/components/account-flow-viz.tsx
+++ b/ui/src/components/account-flow-viz.tsx
@@ -21,6 +21,21 @@ import {
   RotateCcw,
 } from 'lucide-react';
 
+// Earthy, sophisticated color palette for connection lines - works in both light/dark themes
+const CONNECTION_COLORS = [
+  '#3b3c36', // Charcoal Brown - urban mystery
+  '#568203', // Forest Moss - woodland depth
+  '#8d4557', // Vintage Berry - timeless elegance
+  '#da9100', // Harvest Gold - sun-drenched warmth
+  '#3c6c82', // Blue Slate - cool authority
+  '#c96907', // Burnt Caramel - earthy comfort
+];
+
+/** Get a muted connection color based on index */
+function getConnectionColor(index: number): string {
+  return CONNECTION_COLORS[index % CONNECTION_COLORS.length];
+}
+
 /** Position offset for draggable cards */
 interface DragOffset {
   x: number;
@@ -678,6 +693,8 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
               const isHovered = hoveredAccount === i;
               const isDimmed = hoveredAccount !== null && hoveredAccount !== i;
               const isPulsing = pulsingAccounts.has(account.id);
+              // Use muted connection colors for gentler appearance
+              const connectionColor = getConnectionColor(i);
 
               return (
                 <g key={i}>
@@ -685,9 +702,9 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
                   <path
                     d={d}
                     fill="none"
-                    stroke={account.color}
+                    stroke={connectionColor}
                     strokeWidth={strokeWidth}
-                    strokeOpacity={isHovered ? 0.9 : isDimmed ? 0.05 : 0.2}
+                    strokeOpacity={isHovered ? 0.8 : isDimmed ? 0.15 : 0.4}
                     strokeLinecap="round"
                     filter={isHovered ? 'url(#flow-glow)' : undefined}
                     className="transition-all duration-300"