From 4518723b32a4faafaeeb6c4132aaa6c2b6270006 Mon Sep 17 00:00:00 2001
From: Mark Phelps <209477+markphelps@users.noreply.github.com>
Date: Thu, 21 Nov 2024 17:17:57 -0500
Subject: [PATCH] chore: adjust colors to be a bit more unique

Signed-off-by: Mark Phelps <209477+markphelps@users.noreply.github.com>
---
 ui/src/components/node-panel.tsx | 40 +++++++++++++++--
 ui/src/components/node.tsx       |  4 +-
 ui/src/index.css                 | 73 ++++++++++++--------------------
 ui/src/lib/utils.ts              | 18 ++++----
 4 files changed, 74 insertions(+), 61 deletions(-)

diff --git a/ui/src/components/node-panel.tsx b/ui/src/components/node-panel.tsx
index c117768..6cd958e 100644
--- a/ui/src/components/node-panel.tsx
+++ b/ui/src/components/node-panel.tsx
@@ -1,7 +1,14 @@
 import { PhaseNode } from '@/types/flow';
-import { Badge } from './ui/badge';
-import { Package, GitBranch, ChevronDown, ChevronUp } from 'lucide-react';
-import { getLabelColor } from '@/lib/utils';
+import {
+  Package,
+  GitBranch,
+  ChevronDown,
+  ChevronUp,
+  CheckCircle,
+  CircleArrowUp,
+  CircleAlert
+} from 'lucide-react';
+import { TooltipProvider, TooltipTrigger, Tooltip, TooltipContent } from '@/components/ui/tooltip';
 import { Button } from './ui/button';
 import { cn } from '@/lib/utils';
 import { Label } from './label';
@@ -30,6 +37,33 @@ export function NodePanel({ node, isExpanded, onToggle }: NodePanelProps) {
         <div className="flex items-center gap-2">
           {getIcon()}
           <h2 className="text-lg font-semibold">{node.data.name}</h2>
+          {node.data.depends_on && node.data.depends_on !== '' && (
+            <>
+              {node.data.synced ? (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <CheckCircle className="h-4 w-4 flex-shrink-0 text-green-400" />
+                    </TooltipTrigger>
+                    <TooltipContent sideOffset={5} className="text-xs">
+                      Up to Date
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              ) : (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <CircleAlert className="h-4 w-4 flex-shrink-0 cursor-pointer" />
+                    </TooltipTrigger>
+                    <TooltipContent sideOffset={5} className="text-xs">
+                      Out of Sync
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+            </>
+          )}
         </div>
         <Button variant="ghost" size="sm" onClick={onToggle}>
           {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
diff --git a/ui/src/components/node.tsx b/ui/src/components/node.tsx
index ab2eb58..7bd9559 100644
--- a/ui/src/components/node.tsx
+++ b/ui/src/components/node.tsx
@@ -51,7 +51,7 @@ const PhaseNode = ({ data }: NodeProps<PhaseNodeType>) => {
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <CheckCircle className="ml-2 h-4 w-4 flex-shrink-0 text-green-600" />
+                    <CheckCircle className="ml-2 h-4 w-4 flex-shrink-0 text-green-400" />
                   </TooltipTrigger>
                   <TooltipContent sideOffset={5} className="text-xs">
                     Up to Date
@@ -63,7 +63,7 @@ const PhaseNode = ({ data }: NodeProps<PhaseNodeType>) => {
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <CircleArrowUp
-                      className="ml-2 h-4 w-4 flex-shrink-0 cursor-pointer transition-transform hover:rotate-90 hover:text-green-600"
+                      className="ml-2 h-4 w-4 flex-shrink-0 cursor-pointer transition-transform hover:rotate-90 hover:text-green-400"
                       onClick={() => setDialogOpen(true)}
                     />
                   </TooltipTrigger>
diff --git a/ui/src/index.css b/ui/src/index.css
index ba168fe..d54da3b 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -8,35 +8,25 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
+    --background: 126 35% 99%;
+    --foreground: 126 50% 3%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
+    --popover: 126 35% 99%;
+    --popover-foreground: 126 50% 3%;
+    --card: 126 35% 99%;
+    --card-foreground: 126 50% 3%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --primary: 126 69% 63%;
+    --primary-foreground: 126 69% 3%;
+    --secondary: 126 11% 92%;
+    --secondary-foreground: 126 11% 32%;
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
-
     --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
+    --ring: 126 69% 63%;
     --radius: 0.5rem;
 
     --sidebar-background: 0 0% 98%;
@@ -50,36 +40,25 @@
   }
 
   .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
+    --background: 126 58% 1%;
+    --foreground: 126 12% 98%;
     --muted: 223 47% 11%;
     --muted-foreground: 215.4 16.3% 56.9%;
-
+    --popover: 126 58% 1%;
+    --popover-foreground: 126 12% 98%;
+    --card: 126 58% 1%;
+    --card-foreground: 126 12% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 126 69% 63%;
+    --primary-foreground: 126 69% 3%;
+    --secondary: 126 5% 15%;
+    --secondary-foreground: 126 5% 75%;
     --accent: 216 34% 17%;
     --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
     --destructive: 0 63% 31%;
     --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
+    --ring: 126 69% 63%;
 
     color-scheme: dark;
 
diff --git a/ui/src/lib/utils.ts b/ui/src/lib/utils.ts
index 3b53dd4..cfb5a32 100644
--- a/ui/src/lib/utils.ts
+++ b/ui/src/lib/utils.ts
@@ -11,15 +11,15 @@ export function getLabelColor(key: string, value: string): string {
   }, 0);
 
   const colors = [
-    'bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 dark:text-red-200',
-    'bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800 dark:text-blue-200',
-    'bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:hover:bg-green-800 dark:text-green-200',
-    'bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-900 dark:hover:bg-yellow-800 dark:text-yellow-200',
-    'bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900 dark:hover:bg-purple-800 dark:text-purple-200',
-    'bg-pink-100 text-pink-800 hover:bg-pink-200 dark:bg-pink-900 dark:hover:bg-pink-800 dark:text-pink-200',
-    'bg-indigo-100 text-indigo-800 hover:bg-indigo-200 dark:bg-indigo-900 dark:hover:bg-indigo-800 dark:text-indigo-200',
-    'bg-orange-100 text-orange-800 hover:bg-orange-200 dark:bg-orange-900 dark:hover:bg-orange-800 dark:text-orange-200',
-    'bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-200'
+    'bg-red-200 text-red-900 hover:bg-red-300 dark:bg-red-600 dark:hover:bg-red-500 dark:text-red-100',
+    'bg-blue-200 text-blue-900 hover:bg-blue-300 dark:bg-blue-600 dark:hover:bg-blue-500 dark:text-blue-100',
+    'bg-green-200 text-green-900 hover:bg-green-300 dark:bg-green-600 dark:hover:bg-green-500 dark:text-green-100',
+    'bg-yellow-200 text-yellow-900 hover:bg-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-500 dark:text-yellow-100',
+    'bg-purple-200 text-purple-900 hover:bg-purple-300 dark:bg-purple-600 dark:hover:bg-purple-500 dark:text-purple-100',
+    'bg-pink-200 text-pink-900 hover:bg-pink-300 dark:bg-pink-600 dark:hover:bg-pink-500 dark:text-pink-100',
+    'bg-indigo-200 text-indigo-900 hover:bg-indigo-300 dark:bg-indigo-600 dark:hover:bg-indigo-500 dark:text-indigo-100',
+    'bg-orange-200 text-orange-900 hover:bg-orange-300 dark:bg-orange-600 dark:hover:bg-orange-500 dark:text-orange-100',
+    'bg-gray-200 text-gray-900 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-gray-100'
   ];
 
   return colors[Math.abs(hash) % colors.length];