infrastructure/plunk
2
0
Fork 0
Code Pull Requests 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>
)}
apps/web/src/pages/contacts/index.tsx
+2 -2
View File
@@ -289,7 +289,7 @@ export default function ContactsPage() {
</Button>
</Link>
<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>
</div>
</td>
@@ -334,7 +334,7 @@ export default function ContactsPage() {
</Button>
</Link>
<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>
</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">
{segments?.map(segment => (
<Card key={segment.id} className="hover:shadow-lg transition-shadow">
<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>}
{segment.description && (
<CardDescription className="mt-1">{segment.description}</CardDescription>
)}
</div>
</div>
</CardHeader>
apps/web/src/pages/settings/index.tsx
+2 -2
View File
@@ -545,9 +545,9 @@ export default function Settings() {
</div>
<Button
type="button"
variant="default"
variant="destructive"
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
</Button>
apps/web/src/pages/templates/index.tsx
+13 -22
View File
@@ -126,39 +126,30 @@ export default function TemplatesPage() {
{/* Type Filter */}
<div className="flex gap-2">
<button
<Button
type="button"
onClick={() => setTypeFilter('ALL')}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
typeFilter === 'ALL'
? 'bg-neutral-900 text-white'
: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
}`}
variant={typeFilter === 'ALL' ? 'default' : 'secondary'}
size="sm"
>
All Templates
</button>
<button
</Button>
<Button
type="button"
onClick={() => setTypeFilter('MARKETING')}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
typeFilter === 'MARKETING'
? 'bg-neutral-900 text-white'
: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
}`}
variant={typeFilter === 'MARKETING' ? 'default' : 'secondary'}
size="sm"
>
Marketing
</button>
<button
</Button>
<Button
type="button"
onClick={() => setTypeFilter('TRANSACTIONAL')}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
typeFilter === 'TRANSACTIONAL'
? 'bg-neutral-900 text-white'
: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
}`}
variant={typeFilter === 'TRANSACTIONAL' ? 'default' : 'secondary'}
size="sm"
>
Transactional
</button>
</Button>
</div>
</form>
</CardContent>
@@ -246,7 +237,7 @@ export default function TemplatesPage() {
setShowDeleteDialog(true);
}}
>
<Trash2 className="h-4 w-4 text-red-600" />
<Trash2 className="h-4 w-4" />
</Button>
</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)}
>
{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>
<Link href={`/workflows/${workflow.id}`}>
@@ -238,7 +238,7 @@ export default function WorkflowsPage() {
setShowDeleteDialog(true);
}}
>
<Trash2 className="h-4 w-4 text-red-600" />
<Trash2 className="h-4 w-4" />
</Button>
</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';
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: {
variant: {
default: 'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90',
destructive: 'bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90',
outline: 'border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900',
secondary: 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80',
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 hover:shadow-md',
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 hover:shadow-md',
ghost: 'hover:bg-neutral-100 hover:text-neutral-900',
link: 'text-neutral-900 underline-offset-4 hover:underline',
},