opensource/sim
3
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-09-24 15:45:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): colors, icons

Browse Source
This commit is contained in:
Emir Karabeg
2025-03-30 18:44:41 -07:00
parent e14bb91bec
commit 945bcd3027
17 changed files with 44 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sim/app/(landing)/components/hero-workflow.tsx
+4 -4
View File
@@ -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',
},
sim/app/w/[id]/components/control-bar/components/marketplace-modal/marketplace-modal.tsx
+3 -3
View File
@@ -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'}
sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx
+1 -1
View File
@@ -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',
}
sim/app/w/[id]/components/control-bar/control-bar.tsx
+8 -8
View File
@@ -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}
sim/app/w/[id]/components/notifications/notifications.tsx
+1 -1
View File
@@ -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 */}
sim/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
+1 -1
View File
@@ -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"
sim/app/w/components/sidebar/components/settings-modal/components/account/account.tsx
+2 -2
View File
@@ -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">
sim/app/w/components/sidebar/sidebar.tsx
+1 -1
View File
@@ -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>
sim/app/w/logs/components/control-bar/control-bar.tsx
+3 -3
View File
@@ -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>
sim/app/w/logs/components/trace-spans/trace-spans-display.tsx
+2 -2
View File
@@ -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':
sim/app/w/marketplace/constants/categories.tsx
+1 -1
View File
@@ -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
},
]
sim/blocks/blocks/agent.ts
+1 -1
View File
@@ -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: [
{
sim/blocks/blocks/evaluator.ts
+1 -1
View File
@@ -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: [
{
sim/blocks/blocks/image-generator.ts
+1 -1
View File
@@ -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: [
{
sim/blocks/blocks/vision.ts
+1 -1
View File
@@ -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: [
{
sim/blocks/index.ts
+1 -1
View File
@@ -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'
sim/components/icons.tsx
+12 -15
View File
@@ -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>
)
}