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" type="button"
onMouseDown={e => e.preventDefault()} onMouseDown={e => e.preventDefault()}
onClick={handleColorClick} 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}} style={{backgroundColor: color}}
title={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> <p className="text-xs font-medium text-neutral-500 mb-3">Need help?</p>
<div className="flex flex-col sm:flex-row gap-2"> <div className="flex flex-col sm:flex-row gap-2">
<Link href={WIKI_URI} target="_blank" className="flex-1"> <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" /> <BookOpen className="h-3.5 w-3.5" />
Documentation Documentation
</button> </Button>
</Link> </Link>
<Link href={`${LANDING_URI}/discord`} target="_blank" className="flex-1"> <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" /> <MessageCircle className="h-3.5 w-3.5" />
Join Discord Join Discord
</button> </Button>
</Link> </Link>
</div> </div>
</div> </div>
@@ -237,7 +237,6 @@ export function QuickStart({setupState, isLoading}: QuickStartProps) {
<Button <Button
size="sm" size="sm"
variant={step.isCompleted ? 'outline' : 'default'} variant={step.isCompleted ? 'outline' : 'default'}
className="h-9 transition-all group-hover:shadow-sm"
> >
{step.linkText} {step.linkText}
</Button> </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="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 hover:shadow-lg transition-all"> <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 hover:text-blue-600 transition-colors" /> <Plus className="h-8 w-8 text-neutral-500 transition-colors" />
</div> </div>
{data.label && <div className="text-xs text-neutral-500 text-center mt-2 font-medium">{data.label}</div>} {data.label && <div className="text-xs text-neutral-500 text-center mt-2 font-medium">{data.label}</div>}
</div> </div>
@@ -192,26 +192,30 @@ function CustomNode({
{/* Action buttons - shown on hover */} {/* Action buttons - shown on hover */}
{showActions && data.type !== 'TRIGGER' && ( {showActions && data.type !== 'TRIGGER' && (
<div className="absolute -top-3 -right-3 flex gap-1.5 z-10"> <div className="absolute -top-3 -right-3 flex gap-1.5 z-10">
<button <Button
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
data.onEdit?.(); 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" title="Edit step"
> >
<Settings className="h-3.5 w-3.5 text-neutral-700" /> <Settings className="h-3.5 w-3.5" />
</button> </Button>
<button <Button
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
data.onDelete?.(); 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" title="Delete step"
> >
<Trash2 className="h-3.5 w-3.5 text-red-600" /> <Trash2 className="h-3.5 w-3.5" />
</button> </Button>
</div> </div>
)} )}
apps/web/src/pages/contacts/index.tsx
+2 -2
View File
@@ -289,7 +289,7 @@ export default function ContactsPage() {
</Button> </Button>
</Link> </Link>
<Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}> <Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
<Trash2 className="h-4 w-4 text-red-600" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
</td> </td>
@@ -334,7 +334,7 @@ export default function ContactsPage() {
</Button> </Button>
</Link> </Link>
<Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}> <Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
<Trash2 className="h-4 w-4 text-red-600" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div> </div>
apps/web/src/pages/segments/index.tsx
+140 -138
View File
@@ -72,147 +72,149 @@ export default function SegmentsPage() {
<NextSeo title="Segments" /> <NextSeo title="Segments" />
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Segments</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Segments</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base"> <p className="text-neutral-500 mt-2 text-sm sm:text-base">
Create dynamic audience groups based on contact attributes and behaviors Create dynamic audience groups based on contact attributes and behaviors
</p> </p>
</div>
<Link href="/segments/new" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
<span className="hidden sm:inline">Create Segment</span>
<span className="sm:hidden">Create</span>
</Button>
</Link>
</div> </div>
<Link href="/segments/new" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto"> {/* Warning if too many segments */}
<Plus className="h-4 w-4" /> {showLimitWarning && (
<span className="hidden sm:inline">Create Segment</span> <Alert variant="default">
<span className="sm:hidden">Create</span> <AlertTriangle className="h-4 w-4" />
</Button> <AlertDescription>
</Link> Showing first {segments?.length} segments. Consider archiving old segments to improve performance.
</AlertDescription>
</Alert>
)}
{/* Segments Grid */}
{isLoading ? (
<div className="flex items-center justify-center py-12">
<div className="text-center">
<svg
className="h-8 w-8 animate-spin mx-auto text-neutral-900"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
<p className="mt-2 text-sm text-neutral-500">Loading segments...</p>
</div>
</div>
) : segments?.length === 0 ? (
<Card>
<CardContent className="py-12">
<div className="text-center">
<Filter className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-neutral-900 mb-2">No segments yet</h3>
<p className="text-neutral-500 mb-6">
Create your first segment to group contacts based on attributes and behaviors
</p>
<Link href="/segments/new">
<Button>
<Plus className="h-4 w-4" />
Create Segment
</Button>
</Link>
</div>
</CardContent>
</Card>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{segments?.map(segment => (
<Card key={segment.id}>
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex-1">
<CardTitle className="text-lg">{segment.name}</CardTitle>
{segment.description && (
<CardDescription className="mt-1">{segment.description}</CardDescription>
)}
</div>
</div>
</CardHeader>
<CardContent>
<div className="space-y-4">
{/* Stats */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Users className="h-4 w-4 text-neutral-500" />
<span className="text-sm text-neutral-600">Members</span>
</div>
<span className="text-lg font-semibold text-neutral-900">{segment.memberCount}</span>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Filter className="h-4 w-4 text-neutral-500" />
<span className="text-sm text-neutral-600">Filters</span>
</div>
<span className="text-sm font-medium text-neutral-900">
{countFiltersInCondition(segment.condition)}
</span>
</div>
{/* Actions */}
<div className="flex items-center gap-2 pt-2 border-t border-neutral-200">
<Link href={`/segments/${segment.id}`} className="flex-1">
<Button variant="outline" size="sm" className="w-full">
<Edit className="h-4 w-4" />
Edit
</Button>
</Link>
<Button
variant="ghost"
size="sm"
onClick={() => {
setSegmentToDelete(segment.id);
setShowDeleteDialog(true);
}}
className="text-red-600 hover:text-red-700 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
{/* Metadata */}
<div className="text-xs text-neutral-500 pt-2 border-t border-neutral-200">
Created {new Date(segment.createdAt).toLocaleDateString()}
</div>
</div>
</CardContent>
</Card>
))}
</div>
)}
</div> </div>
{/* Warning if too many segments */} <ConfirmDialog
{showLimitWarning && ( open={showDeleteDialog}
<Alert variant="default"> onOpenChange={setShowDeleteDialog}
<AlertTriangle className="h-4 w-4" /> onConfirm={handleDelete}
<AlertDescription> title="Delete Segment"
Showing first {segments?.length} segments. Consider archiving old segments to improve performance. description="Are you sure you want to delete this segment? This action cannot be undone."
</AlertDescription> confirmText="Delete"
</Alert> variant="destructive"
)} />
</DashboardLayout>
{/* Segments Grid */}
{isLoading ? (
<div className="flex items-center justify-center py-12">
<div className="text-center">
<svg
className="h-8 w-8 animate-spin mx-auto text-neutral-900"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
<p className="mt-2 text-sm text-neutral-500">Loading segments...</p>
</div>
</div>
) : segments?.length === 0 ? (
<Card>
<CardContent className="py-12">
<div className="text-center">
<Filter className="h-12 w-12 text-neutral-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-neutral-900 mb-2">No segments yet</h3>
<p className="text-neutral-500 mb-6">
Create your first segment to group contacts based on attributes and behaviors
</p>
<Link href="/segments/new">
<Button>
<Plus className="h-4 w-4" />
Create Segment
</Button>
</Link>
</div>
</CardContent>
</Card>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{segments?.map(segment => (
<Card key={segment.id} className="hover:shadow-lg transition-shadow">
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex-1">
<CardTitle className="text-lg">{segment.name}</CardTitle>
{segment.description && <CardDescription className="mt-1">{segment.description}</CardDescription>}
</div>
</div>
</CardHeader>
<CardContent>
<div className="space-y-4">
{/* Stats */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Users className="h-4 w-4 text-neutral-500" />
<span className="text-sm text-neutral-600">Members</span>
</div>
<span className="text-lg font-semibold text-neutral-900">{segment.memberCount}</span>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Filter className="h-4 w-4 text-neutral-500" />
<span className="text-sm text-neutral-600">Filters</span>
</div>
<span className="text-sm font-medium text-neutral-900">
{countFiltersInCondition(segment.condition)}
</span>
</div>
{/* Actions */}
<div className="flex items-center gap-2 pt-2 border-t border-neutral-200">
<Link href={`/segments/${segment.id}`} className="flex-1">
<Button variant="outline" size="sm" className="w-full">
<Edit className="h-4 w-4" />
Edit
</Button>
</Link>
<Button
variant="ghost"
size="sm"
onClick={() => {
setSegmentToDelete(segment.id);
setShowDeleteDialog(true);
}}
className="text-red-600 hover:text-red-700 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
{/* Metadata */}
<div className="text-xs text-neutral-500 pt-2 border-t border-neutral-200">
Created {new Date(segment.createdAt).toLocaleDateString()}
</div>
</div>
</CardContent>
</Card>
))}
</div>
)}
</div>
<ConfirmDialog
open={showDeleteDialog}
onOpenChange={setShowDeleteDialog}
onConfirm={handleDelete}
title="Delete Segment"
description="Are you sure you want to delete this segment? This action cannot be undone."
confirmText="Delete"
variant="destructive"
/>
</DashboardLayout>
</> </>
); );
} }
apps/web/src/pages/settings/index.tsx
+2 -2
View File
@@ -545,9 +545,9 @@ export default function Settings() {
</div> </div>
<Button <Button
type="button" type="button"
variant="default" variant="destructive"
onClick={() => setShowDeleteDialog(true)} onClick={() => setShowDeleteDialog(true)}
className="shrink-0 bg-red-600 hover:bg-red-700 text-white shadow-sm hover:shadow-md transition-all" className="shrink-0"
> >
Delete Project Delete Project
</Button> </Button>
apps/web/src/pages/templates/index.tsx
+13 -22
View File
@@ -126,39 +126,30 @@ export default function TemplatesPage() {
{/* Type Filter */} {/* Type Filter */}
<div className="flex gap-2"> <div className="flex gap-2">
<button <Button
type="button" type="button"
onClick={() => setTypeFilter('ALL')} onClick={() => setTypeFilter('ALL')}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${ variant={typeFilter === 'ALL' ? 'default' : 'secondary'}
typeFilter === 'ALL' size="sm"
? 'bg-neutral-900 text-white'
: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
}`}
> >
All Templates All Templates
</button> </Button>
<button <Button
type="button" type="button"
onClick={() => setTypeFilter('MARKETING')} onClick={() => setTypeFilter('MARKETING')}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${ variant={typeFilter === 'MARKETING' ? 'default' : 'secondary'}
typeFilter === 'MARKETING' size="sm"
? 'bg-neutral-900 text-white'
: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
}`}
> >
Marketing Marketing
</button> </Button>
<button <Button
type="button" type="button"
onClick={() => setTypeFilter('TRANSACTIONAL')} onClick={() => setTypeFilter('TRANSACTIONAL')}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${ variant={typeFilter === 'TRANSACTIONAL' ? 'default' : 'secondary'}
typeFilter === 'TRANSACTIONAL' size="sm"
? 'bg-neutral-900 text-white'
: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
}`}
> >
Transactional Transactional
</button> </Button>
</div> </div>
</form> </form>
</CardContent> </CardContent>
@@ -246,7 +237,7 @@ export default function TemplatesPage() {
setShowDeleteDialog(true); setShowDeleteDialog(true);
}} }}
> >
<Trash2 className="h-4 w-4 text-red-600" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div> </div>
apps/web/src/pages/workflows/index.tsx
+3 -3
View File
@@ -220,9 +220,9 @@ export default function WorkflowsPage() {
onClick={() => handleToggleEnabled(workflow.id, workflow.enabled)} onClick={() => handleToggleEnabled(workflow.id, workflow.enabled)}
> >
{workflow.enabled ? ( {workflow.enabled ? (
<PowerOff className="h-4 w-4 text-orange-600" /> <PowerOff className="h-4 w-4" />
) : ( ) : (
<Power className="h-4 w-4 text-green-600" /> <Power className="h-4 w-4" />
)} )}
</Button> </Button>
<Link href={`/workflows/${workflow.id}`}> <Link href={`/workflows/${workflow.id}`}>
@@ -238,7 +238,7 @@ export default function WorkflowsPage() {
setShowDeleteDialog(true); setShowDeleteDialog(true);
}} }}
> >
<Trash2 className="h-4 w-4 text-red-600" /> <Trash2 className="h-4 w-4" />
</Button> </Button>
</div> </div>
</div> </div>
packages/ui/src/components/atoms/Button.tsx
+5 -5
View File
@@ -5,14 +5,14 @@ import * as React from 'react';
import {cn} from '../../lib'; import {cn} from '../../lib';
const buttonVariants = cva( const buttonVariants = cva(
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer', 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
{ {
variants: { variants: {
variant: { variant: {
default: 'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90', default: 'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 hover:shadow-md',
destructive: 'bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90', destructive: 'bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 hover:shadow-md',
outline: 'border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900', outline: 'border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 hover:shadow-md',
secondary: 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80', secondary: 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 hover:shadow-md',
ghost: 'hover:bg-neutral-100 hover:text-neutral-900', ghost: 'hover:bg-neutral-100 hover:text-neutral-900',
link: 'text-neutral-900 underline-offset-4 hover:underline', link: 'text-neutral-900 underline-offset-4 hover:underline',
}, },