infrastructure/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
+4 -2
View File
@@ -140,12 +140,14 @@ export default function SegmentsPage() {
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{segments?.map(segment => ( {segments?.map(segment => (
<Card key={segment.id} className="hover:shadow-lg transition-shadow"> <Card key={segment.id}>
<CardHeader> <CardHeader>
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<CardTitle className="text-lg">{segment.name}</CardTitle> <CardTitle className="text-lg">{segment.name}</CardTitle>
{segment.description && <CardDescription className="mt-1">{segment.description}</CardDescription>} {segment.description && (
<CardDescription className="mt-1">{segment.description}</CardDescription>
)}
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
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',
}, },