From 945bcd30273d67c6105bd87c9acbd5d64102cfe4 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sun, 30 Mar 2025 18:42:44 -0700
Subject: [PATCH] fix(ui): colors, icons

---
 .../(landing)/components/hero-workflow.tsx    |  8 +++---
 .../marketplace-modal/marketplace-modal.tsx   |  6 ++---
 .../notification-dropdown-item.tsx            |  2 +-
 .../components/control-bar/control-bar.tsx    | 16 +++++------
 .../notifications/notifications.tsx           |  2 +-
 .../components/action-bar/action-bar.tsx      |  2 +-
 .../components/account/account.tsx            |  4 +--
 sim/app/w/components/sidebar/sidebar.tsx      |  2 +-
 .../components/control-bar/control-bar.tsx    |  6 ++---
 .../trace-spans/trace-spans-display.tsx       |  4 +--
 .../w/marketplace/constants/categories.tsx    |  2 +-
 sim/blocks/blocks/agent.ts                    |  2 +-
 sim/blocks/blocks/evaluator.ts                |  2 +-
 sim/blocks/blocks/image-generator.ts          |  2 +-
 sim/blocks/blocks/vision.ts                   |  2 +-
 sim/blocks/index.ts                           |  2 +-
 sim/components/icons.tsx                      | 27 +++++++++----------
 17 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/sim/app/(landing)/components/hero-workflow.tsx b/sim/app/(landing)/components/hero-workflow.tsx
index d245e506fa..2435b9d051 100644
--- a/sim/app/(landing)/components/hero-workflow.tsx
+++ b/sim/app/(landing)/components/hero-workflow.tsx
@@ -51,7 +51,7 @@ const initialNodes: Node[] = [
     data: {
       type: 'agent',
       name: 'Agent 1',
-      color: '#7F2FFF',
+      color: '#802FFF',
     },
     dragHandle: '.workflow-drag-handle',
   },
@@ -62,7 +62,7 @@ const initialNodes: Node[] = [
     data: {
       type: 'agent',
       name: 'Agent 2',
-      color: '#7F2FFF',
+      color: '#802FFF',
     },
     dragHandle: '.workflow-drag-handle',
   },
@@ -139,7 +139,7 @@ const getMobileNodes = (): Node[] => [
     data: {
       type: 'agent',
       name: 'Agent 1',
-      color: '#7F2FFF',
+      color: '#802FFF',
     },
     dragHandle: '.workflow-drag-handle',
   },
@@ -150,7 +150,7 @@ const getMobileNodes = (): Node[] => [
     data: {
       type: 'agent',
       name: 'Agent 2',
-      color: '#7F2FFF',
+      color: '#802FFF',
     },
     dragHandle: '.workflow-drag-handle',
   },
diff --git a/sim/app/w/[id]/components/control-bar/components/marketplace-modal/marketplace-modal.tsx b/sim/app/w/[id]/components/control-bar/components/marketplace-modal/marketplace-modal.tsx
index 9619d2c5ed..7184e7aeff 100644
--- a/sim/app/w/[id]/components/control-bar/components/marketplace-modal/marketplace-modal.tsx
+++ b/sim/app/w/[id]/components/control-bar/components/marketplace-modal/marketplace-modal.tsx
@@ -526,16 +526,16 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
               // Base styles
               'gap-2 font-medium',
               // Brand color with hover states
-              'bg-[#7F2FFF] hover:bg-[#7028E6]',
+              'bg-[#802FFF] hover:bg-[#7028E6]',
               // Hover effect with brand color
-              'shadow-[0_0_0_0_#7F2FFF] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
+              'shadow-[0_0_0_0_#802FFF] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
               // Text color and transitions
               'text-white transition-all duration-200',
               // Running state animation
               isSubmitting &&
                 'relative after:absolute after:inset-0 after:animate-pulse after:bg-white/20',
               // Disabled state
-              'disabled:opacity-50 disabled:hover:bg-[#7F2FFF] disabled:hover:shadow-none'
+              'disabled:opacity-50 disabled:hover:bg-[#802FFF] disabled:hover:shadow-none'
             )}
           >
             {isSubmitting ? 'Publishing...' : 'Publish Workflow'}
diff --git a/sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx b/sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx
index 271d2dfaff..34fb42077c 100644
--- a/sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx
+++ b/sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx
@@ -27,7 +27,7 @@ const NotificationIcon = {
 const NotificationColors = {
   error: 'text-destructive',
   console: 'text-foreground',
-  api: 'text-[#7F2FFF]',
+  api: 'text-[#802FFF]',
   marketplace: 'text-foreground',
   info: 'text-blue-500',
 }
diff --git a/sim/app/w/[id]/components/control-bar/control-bar.tsx b/sim/app/w/[id]/components/control-bar/control-bar.tsx
index c9e901c28e..5fc2a618b8 100644
--- a/sim/app/w/[id]/components/control-bar/control-bar.tsx
+++ b/sim/app/w/[id]/components/control-bar/control-bar.tsx
@@ -507,7 +507,7 @@ export function ControlBar() {
           size="icon"
           onClick={handleDeploy}
           disabled={isDeploying}
-          className={cn('hover:text-[#7F2FFF]', isDeployed && 'text-[#7F2FFF]')}
+          className={cn('hover:text-[#802FFF]', isDeployed && 'text-[#802FFF]')}
         >
           {isDeploying ? (
             <Loader2 className="h-5 w-5 animate-spin" />
@@ -644,7 +644,7 @@ export function ControlBar() {
           size="icon"
           onClick={handlePublishWorkflow}
           disabled={isPublishing}
-          className={cn('hover:text-[#7F2FFF]', isPublished && 'text-[#7F2FFF]')}
+          className={cn('hover:text-[#802FFF]', isPublished && 'text-[#802FFF]')}
         >
           {isPublishing ? (
             <Loader2 className="h-5 w-5 animate-spin" />
@@ -793,12 +793,12 @@ export function ControlBar() {
         <Button
           className={cn(
             'gap-2 font-medium',
-            'bg-[#7F2FFF] hover:bg-[#7028E6]',
-            'shadow-[0_0_0_0_#7F2FFF] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
+            'bg-[#802FFF] hover:bg-[#7028E6]',
+            'shadow-[0_0_0_0_#802FFF] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
             'text-white transition-all duration-200',
             (isExecuting || isMultiRunning) &&
               'relative after:absolute after:inset-0 after:animate-pulse after:bg-white/20',
-            'disabled:opacity-50 disabled:hover:bg-[#7F2FFF] disabled:hover:shadow-none',
+            'disabled:opacity-50 disabled:hover:bg-[#802FFF] disabled:hover:shadow-none',
             isDebugModeEnabled
               ? 'rounded py-2 px-4 h-10'
               : 'rounded-r-none border-r border-r-[#6420cc] py-2 px-4 h-10'
@@ -831,12 +831,12 @@ export function ControlBar() {
               <Button
                 className={cn(
                   'px-2 font-medium',
-                  'bg-[#7F2FFF] hover:bg-[#7028E6]',
-                  'shadow-[0_0_0_0_#7F2FFF] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
+                  'bg-[#802FFF] hover:bg-[#7028E6]',
+                  'shadow-[0_0_0_0_#802FFF] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
                   'text-white transition-all duration-200',
                   (isExecuting || isMultiRunning) &&
                     'relative after:absolute after:inset-0 after:animate-pulse after:bg-white/20',
-                  'disabled:opacity-50 disabled:hover:bg-[#7F2FFF] disabled:hover:shadow-none',
+                  'disabled:opacity-50 disabled:hover:bg-[#802FFF] disabled:hover:shadow-none',
                   'rounded-l-none h-10'
                 )}
                 disabled={isExecuting || isMultiRunning}
diff --git a/sim/app/w/[id]/components/notifications/notifications.tsx b/sim/app/w/[id]/components/notifications/notifications.tsx
index 180f5ccd2f..e4bc63d936 100644
--- a/sim/app/w/[id]/components/notifications/notifications.tsx
+++ b/sim/app/w/[id]/components/notifications/notifications.tsx
@@ -326,7 +326,7 @@ function NotificationAlert({ notification, isFading, onHide }: NotificationAlert
           <div className="flex items-start py-1 relative">
             {/* Left icon */}
             <div className="flex-shrink-0 mt-0.5">
-              <Icon className="!text-[#7F2FFF] h-4 w-4" />
+              <Icon className="!text-[#802FFF] h-4 w-4" />
             </div>
 
             {/* Content area with equal margins */}
diff --git a/sim/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx b/sim/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
index 6a9e30bfb5..cae4c6255e 100644
--- a/sim/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/sim/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
@@ -35,7 +35,7 @@ export function ActionBar({ blockId, blockType }: ActionBarProps) {
           <Button
             className={cn(
               isEnabled
-                ? 'bg-[#7F2FFF] hover:bg-[#7F2FFF]/90'
+                ? 'bg-[#802FFF] hover:bg-[#802FFF]/90'
                 : 'bg-gray-400 hover:bg-gray-400 cursor-not-allowed'
             )}
             size="sm"
diff --git a/sim/app/w/components/sidebar/components/settings-modal/components/account/account.tsx b/sim/app/w/components/sidebar/components/settings-modal/components/account/account.tsx
index 3cdec862d8..90806c2710 100644
--- a/sim/app/w/components/sidebar/components/settings-modal/components/account/account.tsx
+++ b/sim/app/w/components/sidebar/components/settings-modal/components/account/account.tsx
@@ -231,7 +231,7 @@ export function Account({ onOpenChange }: AccountProps) {
                   <div className="flex items-center gap-3">
                     <div className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-blue-500">
                       {userData.isLoggedIn ? (
-                        <div className="h-full w-full flex items-center justify-center bg-[#7F2FFF]">
+                        <div className="h-full w-full flex items-center justify-center bg-[#802FFF]">
                           <AgentIcon className="text-white transition-transform duration-200 group-hover:scale-110 -translate-y-[0.5px]" />
                         </div>
                       ) : (
@@ -282,7 +282,7 @@ export function Account({ onOpenChange }: AccountProps) {
                               account.isActive && 'bg-accent'
                             )}
                           >
-                            <div className="relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#7F2FFF]">
+                            <div className="relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#802FFF]">
                               <User className="text-white w-4 h-4" />
                             </div>
                             <div className="flex flex-col">
diff --git a/sim/app/w/components/sidebar/sidebar.tsx b/sim/app/w/components/sidebar/sidebar.tsx
index b68b49d941..8f6dcb1c5d 100644
--- a/sim/app/w/components/sidebar/sidebar.tsx
+++ b/sim/app/w/components/sidebar/sidebar.tsx
@@ -62,7 +62,7 @@ export function Sidebar() {
         {/* Sim Studio Logo */}
         <Link
           href="/w/1"
-          className="group flex h-8 w-8 items-center justify-center rounded-lg bg-[#7F2FFF]"
+          className="group flex h-8 w-8 items-center justify-center rounded-lg bg-[#802FFF]"
         >
           <AgentIcon className="text-white transition-all group-hover:scale-110 -translate-y-[0.5px] w-5 h-5" />
           <span className="sr-only">Sim Studio</span>
diff --git a/sim/app/w/logs/components/control-bar/control-bar.tsx b/sim/app/w/logs/components/control-bar/control-bar.tsx
index 71d6c5cf74..9b1aee3762 100644
--- a/sim/app/w/logs/components/control-bar/control-bar.tsx
+++ b/sim/app/w/logs/components/control-bar/control-bar.tsx
@@ -158,16 +158,16 @@ export function ControlBar() {
 
         <Button
           className={`gap-2 border bg-background text-foreground hover:bg-accent ${
-            isLive ? 'border-[#7F2FFF]' : 'border-input'
+            isLive ? 'border-[#802FFF]' : 'border-input'
           }`}
           onClick={toggleLive}
         >
           {isLive ? (
-            <Square className="!h-3.5 !w-3.5 text-[#7F2FFF]" />
+            <Square className="!h-3.5 !w-3.5 text-[#802FFF]" />
           ) : (
             <Play className="!h-3.5 !w-3.5" />
           )}
-          <span className={`${isLive ? 'text-[#7F2FFF]' : 'text-foreground'}`}>Live</span>
+          <span className={`${isLive ? 'text-[#802FFF]' : 'text-foreground'}`}>Live</span>
         </Button>
       </div>
     </div>
diff --git a/sim/app/w/logs/components/trace-spans/trace-spans-display.tsx b/sim/app/w/logs/components/trace-spans/trace-spans-display.tsx
index d36767b3fe..ac9dffe549 100644
--- a/sim/app/w/logs/components/trace-spans/trace-spans-display.tsx
+++ b/sim/app/w/logs/components/trace-spans/trace-spans-display.tsx
@@ -151,7 +151,7 @@ function TraceSpanItem({
 
     // Block type specific icons
     if (type === 'agent') {
-      return <AgentIcon className="h-3 w-3 text-[#7F2FFF]" />
+      return <AgentIcon className="h-3 w-3 text-[#802FFF]" />
     }
 
     if (type === 'evaluator') {
@@ -195,7 +195,7 @@ function TraceSpanItem({
   const getSpanColor = (type: string) => {
     switch (type.toLowerCase()) {
       case 'agent':
-        return '#7F2FFF' // Purple from AgentBlock
+        return '#802FFF' // Purple from AgentBlock
       case 'provider':
         return '#818cf8' // Indigo for provider
       case 'model':
diff --git a/sim/app/w/marketplace/constants/categories.tsx b/sim/app/w/marketplace/constants/categories.tsx
index 6279af69ae..279bef6d48 100644
--- a/sim/app/w/marketplace/constants/categories.tsx
+++ b/sim/app/w/marketplace/constants/categories.tsx
@@ -64,7 +64,7 @@ export const CATEGORIES: Category[] = [
     value: 'other',
     label: 'Other',
     icon: <Brain className="h-4 w-4 mr-2" />,
-    color: '#7F2FFF', // Brand purple
+    color: '#802FFF', // Brand purple
   },
 ]
 
diff --git a/sim/blocks/blocks/agent.ts b/sim/blocks/blocks/agent.ts
index 7a38ccb2ba..8ffb5c2726 100644
--- a/sim/blocks/blocks/agent.ts
+++ b/sim/blocks/blocks/agent.ts
@@ -31,7 +31,7 @@ export const AgentBlock: BlockConfig<AgentResponse> = {
   longDescription:
     'Create powerful AI agents using any LLM provider with customizable system prompts and tool integrations.',
   category: 'blocks',
-  bgColor: '#7F2FFF',
+  bgColor: '#802FFF',
   icon: AgentIcon,
   subBlocks: [
     {
diff --git a/sim/blocks/blocks/evaluator.ts b/sim/blocks/blocks/evaluator.ts
index 1d4c09a7ad..d7421233cf 100644
--- a/sim/blocks/blocks/evaluator.ts
+++ b/sim/blocks/blocks/evaluator.ts
@@ -126,7 +126,7 @@ export const EvaluatorBlock: BlockConfig<EvaluatorResponse> = {
   longDescription:
     'Assess content quality using customizable evaluation metrics and scoring criteria. Create objective evaluation frameworks with numeric scoring to measure performance across multiple dimensions.',
   category: 'tools',
-  bgColor: '#2FA1FF',
+  bgColor: '#4D5FFF',
   icon: ChartBarIcon,
   subBlocks: [
     {
diff --git a/sim/blocks/blocks/image-generator.ts b/sim/blocks/blocks/image-generator.ts
index 80bbab91bd..f9138f3588 100644
--- a/sim/blocks/blocks/image-generator.ts
+++ b/sim/blocks/blocks/image-generator.ts
@@ -9,7 +9,7 @@ export const ImageGeneratorBlock: BlockConfig<DalleResponse> = {
   longDescription:
     'Create high-quality images using DALL-E. Configure resolution, quality, style, and other parameters to get exactly the image you need.',
   category: 'tools',
-  bgColor: '#FF6B6B',
+  bgColor: '#4D5FFF',
   icon: ImageIcon,
   subBlocks: [
     {
diff --git a/sim/blocks/blocks/vision.ts b/sim/blocks/blocks/vision.ts
index 4994197eaa..ff26c05e95 100644
--- a/sim/blocks/blocks/vision.ts
+++ b/sim/blocks/blocks/vision.ts
@@ -9,7 +9,7 @@ export const VisionBlock: BlockConfig<VisionResponse> = {
   longDescription:
     'Process visual content with customizable prompts to extract insights and information from images.',
   category: 'tools',
-  bgColor: '#36BBFF',
+  bgColor: '#4D5FFF',
   icon: EyeIcon,
   subBlocks: [
     {
diff --git a/sim/blocks/index.ts b/sim/blocks/index.ts
index 7968bbc3f4..4a7ad88fa7 100644
--- a/sim/blocks/index.ts
+++ b/sim/blocks/index.ts
@@ -11,7 +11,7 @@ import { FirecrawlBlock } from './blocks/firecrawl'
 import { FunctionBlock } from './blocks/function'
 import { GitHubBlock } from './blocks/github'
 import { GmailBlock } from './blocks/gmail'
-import { GuestyBlock } from './blocks/guesty'
+// import { GuestyBlock } from './blocks/guesty'
 import { ImageGeneratorBlock } from './blocks/image-generator'
 import { JinaBlock } from './blocks/jina'
 import { NotionBlock } from './blocks/notion'
diff --git a/sim/components/icons.tsx b/sim/components/icons.tsx
index a64983838a..cf4a7c14e3 100644
--- a/sim/components/icons.tsx
+++ b/sim/components/icons.tsx
@@ -610,18 +610,15 @@ export function ChartBarIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       {...props}
-      width="30"
-      height="30"
-      viewBox="0 0 30 30"
+      width="24"
+      height="22"
+      viewBox="0 0 24 22"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M19.3333 11.2863V4.88889C19.3333 4.12271 19.029 3.38791 18.4872 2.84614C17.9454 2.30436 17.2106 2 16.4444 2H13.5556C12.7894 2 12.0546 2.30436 11.5128 2.84614C10.971 3.38791 10.6667 4.12271 10.6667 4.88889V16.8576M19.3333 11.2863V28M19.3333 11.2863H25.1111C25.8773 11.2863 26.6121 11.5907 27.1539 12.1325C27.6956 12.6742 28 13.409 28 14.1752V25.1111C28 25.8773 27.6956 26.6121 27.1539 27.1539C26.6121 27.6956 25.8773 28 25.1111 28H19.3333M10.6667 16.8576V28M10.6667 16.8576H4.88889C4.12271 16.8576 3.38791 17.1619 2.84614 17.7037C2.30436 18.2455 2 18.9803 2 19.7464V25.1111C2 25.8773 2.30436 26.6121 2.84614 27.1539C3.38791 27.6956 4.12271 28 4.88889 28H10.6667M19.3333 28H10.6667"
-        stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        d="M14.4 0C14.9139 0 15.4067 0.2107 15.7678 0.5858C16.1289 0.9609 16.3334 1.4696 16.3334 2V6.5H21.6C22.1139 6.5 22.6067 6.7107 22.9678 7.0858C23.3289 7.4609 23.5334 7.9696 23.5334 8.5V19.2C23.5334 19.7304 23.3289 20.2391 22.9678 20.6142C22.6067 20.9893 22.1139 21.2 21.6 21.2H2.4C1.8861 21.2 1.3933 20.9893 1.0322 20.6142C0.6711 20.2391 0.4666 19.7304 0.4666 19.2V12C0.4666 11.4696 0.6711 10.9609 1.0322 10.5858C1.3933 10.2107 1.8861 10 2.4 10H7.6666V2C7.6666 1.4696 7.8711 0.9609 8.2322 0.5858C8.5933 0.2107 9.0861 0 9.6 0H14.4ZM14.4 2.4H9.6V19.2H14.4V2.4ZM21.6 8.9H16.3334V19.2H21.6V8.9ZM7.6666 12.5H2.4V19.2H7.6666V12.5Z"
+        fill="currentColor"
       />
     </svg>
   )
@@ -1740,19 +1737,19 @@ export function ImageIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       {...props}
-      width="28"
-      height="28"
-      viewBox="0 0 28 28"
+      width="26"
+      height="26"
+      viewBox="0 0 26 26"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       stroke="currentColor"
-      strokeWidth="2.5"
+      strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <rect x="3" y="3" width="22" height="22" rx="2" />
-      <circle cx="9" cy="9" r="2" />
-      <path d="M3 21L10 14L14 18L21 11L25 15V21" />
+      <path d="M24.903 10.32C16.0897 9.10933 8.48966 15.6533 9.00033 24.3333M5.66699 7.66667C5.66699 8.37391 5.94794 9.05219 6.44804 9.55228C6.94814 10.0524 7.62641 10.3333 8.33366 10.3333C9.0409 10.3333 9.71918 10.0524 10.2193 9.55228C10.7194 9.05219 11.0003 8.37391 11.0003 7.66667C11.0003 6.95942 10.7194 6.28115 10.2193 5.78105C9.71918 5.28095 9.0409 5 8.33366 5C7.62641 5 6.94814 5.28095 6.44804 5.78105C5.94794 6.28115 5.66699 6.95942 5.66699 7.66667Z" />
+      <path d="M1 14.4213C4.70667 13.908 8.03333 15.6986 9.832 18.5546" />
+      <path d="M1 9.53333C1 6.54667 1 5.05333 1.58133 3.912C2.09265 2.90851 2.90851 2.09265 3.912 1.58133C5.05333 1 6.54667 1 9.53333 1H16.4667C19.4533 1 20.9467 1 22.088 1.58133C23.0915 2.09265 23.9073 2.90851 24.4187 3.912C25 5.05333 25 6.54667 25 9.53333V16.4667C25 19.4533 25 20.9467 24.4187 22.088C23.9073 23.0915 23.0915 23.9073 22.088 24.4187C20.9467 25 19.4533 25 16.4667 25H9.53333C6.54667 25 5.05333 25 3.912 24.4187C2.90851 23.9073 2.09265 23.0915 1.58133 22.088C1 20.9467 1 19.4533 1 16.4667V9.53333Z" />
     </svg>
   )
 }