From b7c29cdebdb1e108939981111f7bc03261d3d257 Mon Sep 17 00:00:00 2001
From: Biswajeet Das <biswajeetdas18@gmail.com>
Date: Wed, 18 Dec 2024 15:01:24 +0530
Subject: [PATCH 1/2] feat(dashboard): update node styles

---
 .../src/components/workflow-editor/base-node.tsx          | 8 ++++----
 apps/dashboard/src/components/workflow-editor/nodes.tsx   | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/components/workflow-editor/base-node.tsx b/apps/dashboard/src/components/workflow-editor/base-node.tsx
index 430c2263222..56ce76c0594 100644
--- a/apps/dashboard/src/components/workflow-editor/base-node.tsx
+++ b/apps/dashboard/src/components/workflow-editor/base-node.tsx
@@ -66,7 +66,7 @@ export const NodeBody = ({ children }: { children: ReactNode }) => {
       <span className="text-foreground-400 overflow-hidden text-ellipsis text-nowrap text-sm font-medium">
         {children}
       </span>
-      <span className="to-background/90 absolute left-0 top-0 h-full w-full bg-gradient-to-r from-[rgba(255,255,255,0.00)] from-70% to-95%" />
+      <span className="to-background/90 absolute left-0 top-0 h-full w-full rounded-b-[calc(var(--radius)-1px)] bg-gradient-to-r from-[rgba(255,255,255,0.00)] from-70% to-95%" />
     </div>
   );
 };
@@ -98,11 +98,11 @@ export const NODE_WIDTH = 300;
 export const NODE_HEIGHT = 86;
 
 const nodeVariants = cva(
-  `relative border-neutral-alpha-200 transition-colors aria-selected:border-primary bg-foreground-0 flex w-[300px] flex-col gap-1 border p-1 shadow-xs`,
+  `relative bg-neutral-alpha-200 transition-colors aria-selected:bg-gradient-to-tr aria-selected:to-warning/50 aria-selected:from-destructive/60 [&>span]:bg-foreground-0 flex w-[300px] flex-col gap-1 p-px shadow-xs flex [&>span]:flex-1 [&>span]:rounded-[calc(var(--radius)-1px)]`,
   {
     variants: {
       variant: {
-        default: 'rounded-xl',
+        default: 'rounded-lg',
         sm: 'text-neutral-400 w-min rounded-lg',
       },
     },
@@ -118,7 +118,7 @@ export const Node = (props: BaseNodeProps) => {
   const { children, variant, className, ...rest } = props;
   return (
     <div className={nodeVariants({ variant, className })} {...rest}>
-      {children}
+      <span>{children}</span>
     </div>
   );
 };
diff --git a/apps/dashboard/src/components/workflow-editor/nodes.tsx b/apps/dashboard/src/components/workflow-editor/nodes.tsx
index 32816bcd7c6..3e54b3a2ae8 100644
--- a/apps/dashboard/src/components/workflow-editor/nodes.tsx
+++ b/apps/dashboard/src/components/workflow-editor/nodes.tsx
@@ -37,8 +37,8 @@ export const TriggerNode = ({ data }: NodeProps<FlowNode<{ environmentSlug: stri
       workflowSlug: data.workflowSlug,
     })}
   >
-    <Node className="relative rounded-tl-none border-r">
-      <div className="border-neutral-alpha-200 text-foreground-600 absolute -left-[1px] top-0 flex -translate-y-full items-center gap-1 rounded-t-lg border bg-neutral-50 px-2 py-1 text-xs font-medium">
+    <Node className="relative rounded-tl-none [&>span]:rounded-tl-none">
+      <div className="border-neutral-alpha-200 text-foreground-600 absolute left-0 top-0 flex -translate-y-full items-center gap-1 rounded-t-lg border border-b-0 bg-neutral-50 px-2 py-1 text-xs font-medium">
         <RiPlayCircleLine className="size-3" />
         <span>TRIGGER</span>
       </div>

From 54fca3cd1a329187f9ec66175ddf7971f451db85 Mon Sep 17 00:00:00 2001
From: Biswajeet Das <biswajeetdas18@gmail.com>
Date: Wed, 18 Dec 2024 16:36:15 +0530
Subject: [PATCH 2/2] feat(workflow-editor): enhance node styling for improved
 layout

---
 apps/dashboard/src/components/workflow-editor/base-node.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/workflow-editor/base-node.tsx b/apps/dashboard/src/components/workflow-editor/base-node.tsx
index 56ce76c0594..5c0c0554bcd 100644
--- a/apps/dashboard/src/components/workflow-editor/base-node.tsx
+++ b/apps/dashboard/src/components/workflow-editor/base-node.tsx
@@ -98,7 +98,7 @@ export const NODE_WIDTH = 300;
 export const NODE_HEIGHT = 86;
 
 const nodeVariants = cva(
-  `relative bg-neutral-alpha-200 transition-colors aria-selected:bg-gradient-to-tr aria-selected:to-warning/50 aria-selected:from-destructive/60 [&>span]:bg-foreground-0 flex w-[300px] flex-col gap-1 p-px shadow-xs flex [&>span]:flex-1 [&>span]:rounded-[calc(var(--radius)-1px)]`,
+  `relative bg-neutral-alpha-200 transition-colors aria-selected:bg-gradient-to-tr aria-selected:to-warning/50 aria-selected:from-destructive/60 [&>span]:bg-foreground-0 flex w-[300px] flex-col p-px shadow-xs flex [&>span]:flex-1 [&>span]:rounded-[calc(var(--radius)-1px)] [&>span]:p-1 [&>span]:flex [&>span]:flex-col [&>span]:gap-1`,
   {
     variants: {
       variant: {