Skip to content

Commit f7a3279

Browse files
hotlonghotlong
committed
Refactor TreeView and Toaster for theme consistency
Updated TreeView and Toaster components to use theme-based color variables and simplified class names for improved consistency with the application's design system. Removed custom icons and excessive styling from the Toaster, and streamlined TreeView visuals to better align with theme tokens and reduce visual clutter.
1 parent 73399a2 commit f7a3279

File tree

2 files changed

+21
-53
lines changed

2 files changed

+21
-53
lines changed

‎packages/components/src/renderers/data-display/tree-view.tsx‎

Lines changed: 17 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -27,67 +27,56 @@ const TreeNodeComponent = ({
2727

2828
return (
2929
<div className="relative">
30-
{/* Connecting line for siblings (visual aid, tricky to do perfectly without depth context, so we focus on the left border of the container) */}
31-
3230
<div
3331
className={cn(
34-
'group flex items-center py-1.5 px-2 rounded-sm cursor-pointer transition-all duration-200 border border-transparent',
35-
'hover:bg-cyan-950/30 hover:border-cyan-500/20 hover:shadow-[inset_0_0_10px_-5px_cyan]',
36-
isOpen && hasChildren && 'bg-slate-900/40' // Active parent state
32+
'group flex items-center py-1.5 px-2 rounded-sm cursor-pointer transition-colors',
33+
'hover:bg-accent hover:text-accent-foreground',
34+
isOpen && hasChildren && 'bg-accent/50'
3735
)}
3836
onClick={handleClick}
3937
>
40-
{/* Indentation adjustment triggered by parent's padding/margin, not calculated prop here to allow CSS lines */}
41-
4238
{hasChildren ? (
4339
<button
4440
onClick={handleToggle}
45-
className="mr-2 p-0.5 h-5 w-5 flex items-center justify-center rounded-sm hover:bg-cyan-500/20 text-cyan-600 transition-colors"
41+
className="mr-2 p-0.5 h-5 w-5 flex items-center justify-center rounded-sm hover:bg-muted text-muted-foreground transition-colors"
4642
>
4743
{isOpen ? (
48-
<ChevronDown className="h-4 w-4 drop-shadow-[0_0_5px_cyan]" />
44+
<ChevronDown className="h-4 w-4" />
4945
) : (
5046
<ChevronRight className="h-4 w-4" />
5147
)}
5248
</button>
5349
) : (
5450
<span className="mr-2 w-5 flex justify-center">
55-
<div className="w-1 h-1 rounded-full bg-slate-700/50 group-hover:bg-cyan-500/50" />
51+
<div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
5652
</span>
5753
)}
5854

5955
{node.icon === 'folder' || hasChildren ? (
6056
isOpen ?
61-
<FolderOpen className="h-4 w-4 mr-2 text-cyan-400 drop-shadow-[0_0_5px_rgba(6,182,212,0.5)]" /> :
62-
<Folder className="h-4 w-4 mr-2 text-cyan-600 group-hover:text-cyan-400 transition-colors" />
57+
<FolderOpen className="h-4 w-4 mr-2 text-primary" /> :
58+
<Folder className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-primary transition-colors" />
6359
) : (
64-
<File className="h-4 w-4 mr-2 text-slate-500 group-hover:text-cyan-200 transition-colors" />
60+
<File className="h-4 w-4 mr-2 text-muted-foreground group-hover:text-primary transition-colors" />
6561
)}
6662

6763
<span className={cn(
68-
"text-sm font-mono tracking-wide transition-colors",
69-
isOpen ? "text-cyan-100 font-bold shadow-cyan-500/20" : "text-slate-400 group-hover:text-cyan-300"
64+
"text-sm transition-colors",
65+
isOpen ? "font-medium text-foreground" : "text-muted-foreground group-hover:text-foreground"
7066
)}>
7167
{node.label}
7268
</span>
7369
</div>
7470

75-
{/* Children Container with Circuit Line */}
7671
{hasChildren && isOpen && (
77-
<div className="relative ml-[11px] pl-3 border-l border-cyan-800/40 animate-in slide-in-from-left-2 fade-in duration-200">
78-
{/* Decorative little bulb at the junction */}
79-
<div className="absolute top-0 -left-[1px] -translate-x-1/2 w-1.5 h-1.5 bg-cyan-700/50 rounded-full" />
80-
72+
<div className="relative ml-[11px] pl-3 border-l border-border animate-in slide-in-from-left-2 fade-in duration-200">
8173
{node.children!.map((child) => (
8274
<TreeNodeComponent
8375
key={child.id}
8476
node={child}
8577
onNodeClick={onNodeClick}
8678
/>
8779
))}
88-
89-
{/* Decorative end cap */}
90-
<div className="absolute bottom-0 -left-[1px] -translate-x-1/2 w-1 h-1 bg-cyan-800/50 rounded-full" />
9180
</div>
9281
)}
9382
</div>
@@ -104,23 +93,18 @@ ComponentRegistry.register('tree-view',
10493

10594
return (
10695
<div className={cn(
107-
'relative border border-border/60 rounded-lg p-3 bg-card/40 backdrop-blur-md overflow-hidden',
108-
'shadow-lg shadow-primary/5',
96+
'relative border rounded-lg p-3 bg-card text-card-foreground',
10997
className
11098
)}
11199
{...props}
112100
>
113-
{/* Background Grid */}
114-
<div className="absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--border)/0.1)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border)/0.1)_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
115-
116101
{schema.title && (
117-
<div className="flex items-center gap-2 mb-3 pb-2 border-b border-primary/20 relative z-10">
118-
<CircuitBoard className="w-4 h-4 text-primary" />
119-
<h3 className="text-xs font-bold font-mono uppercase tracking-widest text-primary">{schema.title}</h3>
102+
<div className="flex items-center gap-2 mb-3 pb-2 border-b">
103+
<h3 className="text-sm font-semibold">{schema.title}</h3>
120104
</div>
121105
)}
122-
<div className="space-y-1 relative z-10">
123-
{schema.nodes?.map((node: TreeNode) => (
106+
<div className="space-y-1">
107+
{(schema.nodes || schema.data)?.map((node: TreeNode) => (
124108
<TreeNodeComponent
125109
key={node.id}
126110
node={node}

‎packages/components/src/ui/sonner.tsx‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
import {
2-
CircleCheckIcon,
3-
InfoIcon,
4-
Loader2Icon,
5-
OctagonXIcon,
6-
TriangleAlertIcon,
7-
} from "lucide-react"
81
import { useTheme } from "next-themes"
92
import { Toaster as Sonner, type ToasterProps } from "sonner"
103

@@ -18,23 +11,14 @@ const Toaster = ({ ...props }: ToasterProps) => {
1811
toastOptions={{
1912
classNames: {
2013
toast:
21-
"group toast group-[.toaster]:bg-slate-950/90 group-[.toaster]:backdrop-blur-xl group-[.toaster]:text-cyan-100 group-[.toaster]:border-slate-800 group-[.toaster]:shadow-[0_0_30px_-10px_rgba(0,0,0,0.5)] transition-all duration-30 data-[type=success]:border-emerald-500/50 data-[type=success]:shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)] data-[type=error]:border-red-500/50 data-[type=error]:shadow-[0_0_20px_-5px_rgba(239,68,68,0.2)] data-[type=info]:border-cyan-500/50 data-[type=info]:shadow-[0_0_20px_-5px_rgba(6,182,212,0.2)] data-[type=warning]:border-amber-500/50 data-[type=warning]:shadow-[0_0_20px_-5px_rgba(245,158,11,0.2)]",
22-
description: "group-[.toast]:text-slate-400 group-[.toast]:font-mono group-[.toast]:text-xs",
14+
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
15+
description: "group-[.toast]:text-muted-foreground",
2316
actionButton:
24-
"group-[.toast]:bg-cyan-600 group-[.toast]:text-white group-[.toast]:font-bold group-[.toast]:rounded-sm group-[.toast]:shadow-[0_0_10px_cyan]",
17+
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
2518
cancelButton:
26-
"group-[.toast]:bg-slate-800 group-[.toast]:text-slate-400 group-[.toast]:rounded-sm",
27-
title: "group-[.toast]:font-mono group-[.toast]:uppercase group-[.toast]:tracking-widest group-[.toast]:font-bold group-[.toast]:text-cyan-300 group-[.toast]:text-xs group-[.toast]:data-[type=error]:text-red-400 group-[.toast]:data-[type=success]:text-emerald-400",
28-
icon: "group-[.toast]:data-[type=success]:text-emerald-400 group-[.toast]:data-[type=error]:text-red-400 group-[.toast]:data-[type=info]:text-cyan-400 group-[.toast]:data-[type=warning]:text-amber-400",
19+
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
2920
},
3021
}}
31-
icons={{
32-
success: <CircleCheckIcon className="size-5 drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]" />,
33-
info: <InfoIcon className="size-5 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]" />,
34-
warning: <TriangleAlertIcon className="size-5 drop-shadow-[0_0_8px_rgba(245,158,11,0.5)]" />,
35-
error: <OctagonXIcon className="size-5 drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]" />,
36-
loading: <Loader2Icon className="size-5 animate-spin text-cyan-500" />,
37-
}}
3822
{...props}
3923
/>
4024
)

0 commit comments

Comments
 (0)