From 77bed648ae948c10eb9fa04883aaef1644257bbc Mon Sep 17 00:00:00 2001
From: Shine1i <wasimysdev@gmail.com>
Date: Sun, 22 Feb 2026 02:20:51 +0100
Subject: [PATCH] refactor: update UI styles for graph nodes and components
 with consistent transitions and rounded elements

---
 .../recipe-studio/components/recipe-graph-node.tsx       | 2 +-
 .../recipe-studio/components/rf-ui/base-node.tsx         | 9 +++++----
 .../src/features/recipe-studio/recipe-studio-page.tsx    | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx b/studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx
index 41324d9631..2ba6c80f58 100644
--- a/studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx
+++ b/studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx
@@ -339,7 +339,7 @@ function RecipeGraphNodeBase({
         <div className="flex min-w-0 items-center gap-2">
           <div
             className={cn(
-              "flex size-7 items-center justify-center rounded-md border",
+              "corner-squircle flex size-7 items-center justify-center rounded-md border",
               meta.tone,
             )}
           >
diff --git a/studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx b/studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx
index 7b9361dcbf..5bfc573f4a 100644
--- a/studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx
+++ b/studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx
@@ -9,10 +9,11 @@ export function BaseNode({
   return (
     <div
       className={cn(
-        "bg-card text-card-foreground relative rounded-md border",
-        "hover:ring-1",
-        "[.react-flow\\_\\_node.selected_&]:border-muted-foreground",
-        "[.react-flow\\_\\_node.selected_&]:shadow-lg",
+        "bg-card text-card-foreground relative rounded-md border transition-[border-color,box-shadow] duration-150",
+        "hover:border-primary/40 hover:ring-1 hover:ring-primary/20 hover:shadow-sm",
+        "[.react-flow\\_\\_node.selected_&]:border-primary/45",
+        "[.react-flow\\_\\_node.selected_&]:ring-1 [.react-flow\\_\\_node.selected_&]:ring-primary/25",
+        "[.react-flow\\_\\_node.selected_&]:shadow-md",
         className,
       )}
       tabIndex={0}
diff --git a/studio/frontend/src/features/recipe-studio/recipe-studio-page.tsx b/studio/frontend/src/features/recipe-studio/recipe-studio-page.tsx
index 6123215fef..fd6827ed53 100644
--- a/studio/frontend/src/features/recipe-studio/recipe-studio-page.tsx
+++ b/studio/frontend/src/features/recipe-studio/recipe-studio-page.tsx
@@ -390,7 +390,7 @@ export function RecipeStudioPage({
                       onClick={openRootBlockSheet}
                       className="pointer-events-auto corner-squircle flex min-h-36 w-full max-w-md flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border/70 bg-background/75 px-6 py-6 text-center backdrop-blur-[1px] transition hover:border-primary/60 hover:bg-background"
                     >
-                      <div className="flex size-12 items-center justify-center rounded-xl border border-border/70 bg-muted/40">
+                      <div className="flex size-12 items-center justify-center corner-squircle rounded-xl border border-border/70 bg-muted/40">
                         <HugeiconsIcon
                           icon={PlusSignIcon}
                           className="size-6 text-muted-foreground"