vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve UI/UX Consistency

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-06 10:06:11 +01:00
parent 903ea73ca2
commit b2ecf60a13
9 changed files with 185 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/EmailEditor/Toolbar.tsx
+1 -1
View File
@@ -474,7 +474,7 @@ export function Toolbar({editor, onInsertVariable, onInsertImage, canUploadImage
type="button"
onMouseDown={e => e.preventDefault()}
onClick={handleColorClick}
className="w-8 h-8 rounded border-2 border-neutral-300 hover:border-neutral-500 hover:scale-110 transition-all relative group"
className="w-8 h-8 rounded border-2 border-neutral-300 hover:border-neutral-500 hover:scale-105 transition-all relative group"
style={{backgroundColor: color}}
title={color}
>
apps/web/src/components/QuickStart.tsx
+4 -5
View File
@@ -28,16 +28,16 @@ function HelpResources() {
<p className="text-xs font-medium text-neutral-500 mb-3">Need help?</p>
<div className="flex flex-col sm:flex-row gap-2">
<Link href={WIKI_URI} target="_blank" className="flex-1">
<button className="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-neutral-700 bg-white border border-neutral-200 rounded-lg hover:bg-neutral-50 hover:border-neutral-300 transition-all">
<Button variant="outline" size="sm" className="w-full">
<BookOpen className="h-3.5 w-3.5" />
Documentation
</button>
</Button>
</Link>
<Link href={`${LANDING_URI}/discord`} target="_blank" className="flex-1">
<button className="w-full flex items-center justify-center gap-2 px-3 py-2 text-xs font-medium text-neutral-700 bg-white border border-neutral-200 rounded-lg hover:bg-neutral-50 hover:border-neutral-300 transition-all">
<Button variant="outline" size="sm" className="w-full">
<MessageCircle className="h-3.5 w-3.5" />
Join Discord
</button>
</Button>
</Link>
</div>
</div>
@@ -237,7 +237,6 @@ export function QuickStart({setupState, isLoading}: QuickStartProps) {
<Button
size="sm"
variant={step.isCompleted ? 'outline' : 'default'}
className="h-9 transition-all group-hover:shadow-sm"
>
{step.linkText}
</Button>
apps/web/src/components/WorkflowBuilder.tsx
+15 -11
View File
@@ -133,9 +133,9 @@ function AddStepNode({data}: {data: {label: string; onClick?: () => void}}) {
}}
/>
<div className="cursor-pointer hover:scale-110 transition-transform" onClick={data.onClick}>
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-neutral-100 to-neutral-200 border-2 border-dashed border-neutral-400 hover:border-neutral-600 hover:from-blue-50 hover:to-blue-100 hover:border-blue-400 flex items-center justify-center shadow-md hover:shadow-lg transition-all">
<Plus className="h-8 w-8 text-neutral-500 hover:text-blue-600 transition-colors" />
<div className="cursor-pointer hover:scale-105 transition-transform" onClick={data.onClick}>
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-neutral-100 to-neutral-200 border-2 border-dashed border-neutral-400 hover:border-neutral-600 hover:from-blue-50 hover:to-blue-100 hover:border-blue-400 flex items-center justify-center shadow-md transition-all">
<Plus className="h-8 w-8 text-neutral-500 transition-colors" />
</div>
{data.label && <div className="text-xs text-neutral-500 text-center mt-2 font-medium">{data.label}</div>}
</div>
@@ -192,26 +192,30 @@ function CustomNode({
{/* Action buttons - shown on hover */}
{showActions && data.type !== 'TRIGGER' && (
<div className="absolute -top-3 -right-3 flex gap-1.5 z-10">
<button
<Button
onClick={e => {
e.stopPropagation();
data.onEdit?.();
}}
className="p-1.5 bg-white border-2 border-neutral-300 rounded-lg shadow-md hover:border-neutral-400 hover:bg-neutral-50 transition-all"
variant="outline"
size="icon"
className="h-7 w-7 shadow-md"
title="Edit step"
>
<Settings className="h-3.5 w-3.5 text-neutral-700" />
</button>
<button
<Settings className="h-3.5 w-3.5" />
</Button>
<Button
onClick={e => {
e.stopPropagation();
data.onDelete?.();
}}
className="p-1.5 bg-white border-2 border-red-300 rounded-lg shadow-md hover:border-red-400 hover:bg-red-50 transition-all"
variant="outline"
size="icon"
className="h-7 w-7 shadow-md hover:bg-red-50 hover:border-red-400"
title="Delete step"
>
<Trash2 className="h-3.5 w-3.5 text-red-600" />
</button>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
)}