ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: update UI styles for graph nodes and components with consistent transitions and rounded elements

Browse source
This commit is contained in:
Shine1i 2026-02-22 02:20:51 +01:00
commit 77bed648ae
3 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
studio/frontend/src/features/recipe-studio/components/recipe-graph-node.tsx
View file

@ -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,
)}
>

9
studio/frontend/src/features/recipe-studio/components/rf-ui/base-node.tsx
View file

@ -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}

2
studio/frontend/src/features/recipe-studio/recipe-studio-page.tsx
View file

@ -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"