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

fix: Consistency across buttons and labels

Browse Source
This commit is contained in:
Dries Augustyns
2026-04-24 13:35:25 +02:00
parent 517753c420
commit c1bcd358cc
40 changed files with 195 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/ActivityFeed.tsx
+1 -2
View File
@@ -1,8 +1,7 @@
import {Button, IconSpinner} from '@plunk/ui';
import {Button, EmptyState, IconSpinner} from '@plunk/ui';
import type {Activity, CursorPaginatedResponse} from '@plunk/types';
import {network} from '../lib/network';
import {ActivityItem} from './ActivityItem';
import {EmptyState} from './EmptyState';
import {Activity as ActivityIcon} from 'lucide-react';
import {useCallback, useEffect, useMemo, useState} from 'react';
apps/web/src/components/ActivityItem.tsx
+26 -26
View File
@@ -133,8 +133,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'event.triggered':
return {
icon: Zap,
color: 'text-blue-600',
bgColor: 'bg-blue-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
title: (typeof metadata.eventName === 'string' ? metadata.eventName : undefined) || 'Event triggered',
description: undefined,
badge: {
@@ -150,8 +150,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.sent':
return {
icon: Send,
color: 'text-green-600',
bgColor: 'bg-green-100',
color: 'text-green-700',
bgColor: 'bg-green-50',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email sent',
description: metadata.campaignName
? `Campaign: ${String(metadata.campaignName)}`
@@ -169,8 +169,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.delivered':
return {
icon: CheckCircle,
color: 'text-green-600',
bgColor: 'bg-green-100',
color: 'text-green-700',
bgColor: 'bg-green-50',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email delivered',
description: metadata.campaignName
? `Campaign: ${String(metadata.campaignName)}`
@@ -186,8 +186,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.received':
return {
icon: Inbox,
color: 'text-blue-600',
bgColor: 'bg-blue-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email received',
description: typeof metadata.from === 'string' ? `From: ${metadata.from}` : 'Inbound email',
badge: {
@@ -199,8 +199,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.opened':
return {
icon: Eye,
color: 'text-purple-600',
bgColor: 'bg-purple-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email opened',
description:
typeof metadata.totalOpens === 'number' && metadata.totalOpens > 1
@@ -219,8 +219,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.clicked':
return {
icon: MousePointerClick,
color: 'text-orange-600',
bgColor: 'bg-orange-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email clicked',
description:
typeof metadata.totalClicks === 'number' && metadata.totalClicks > 1
@@ -239,8 +239,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.bounced':
return {
icon: XCircle,
color: 'text-red-600',
bgColor: 'bg-red-100',
color: 'text-red-700',
bgColor: 'bg-red-50',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Email bounced',
description: (typeof metadata.error === 'string' ? metadata.error : undefined) || 'Email failed to deliver',
badge: {
@@ -252,8 +252,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'email.complaint':
return {
icon: ShieldAlert,
color: 'text-red-600',
bgColor: 'bg-red-100',
color: 'text-red-700',
bgColor: 'bg-red-50',
title: (typeof metadata.subject === 'string' ? metadata.subject : undefined) || 'Spam complaint',
description: metadata.campaignName
? `Campaign: ${String(metadata.campaignName)}`
@@ -269,8 +269,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'workflow.started':
return {
icon: Workflow,
color: 'text-indigo-600',
bgColor: 'bg-indigo-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
title: (typeof metadata.workflowName === 'string' ? metadata.workflowName : undefined) || 'Workflow started',
description: `Status: ${String(metadata.status || 'unknown')}`,
badge: {
@@ -282,8 +282,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'workflow.completed':
return {
icon: CheckCheck,
color: 'text-green-600',
bgColor: 'bg-green-100',
color: 'text-green-700',
bgColor: 'bg-green-50',
title: (typeof metadata.workflowName === 'string' ? metadata.workflowName : undefined) || 'Workflow completed',
description: metadata.exitReason
? `Exit: ${String(metadata.exitReason)}`
@@ -297,8 +297,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'campaign.scheduled':
return {
icon: Calendar,
color: 'text-blue-600',
bgColor: 'bg-blue-50',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
title: (typeof metadata.campaignName === 'string' ? metadata.campaignName : undefined) || 'Campaign scheduled',
description: metadata.subject
? `${String(metadata.subject)}${metadata.totalRecipients ? ` • ${metadata.totalRecipients} recipients` : ''}`
@@ -314,8 +314,8 @@ function getActivityConfig(activity: Activity): ActivityConfig {
case 'workflow.email.scheduled':
return {
icon: Calendar,
color: 'text-indigo-600',
bgColor: 'bg-indigo-50',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
title: (typeof metadata.stepName === 'string' ? metadata.stepName : undefined) || 'Workflow email scheduled',
description: metadata.workflowName
? `Workflow: ${String(metadata.workflowName)}${metadata.subject ? ` • ${String(metadata.subject)}` : ''}`
@@ -353,7 +353,7 @@ export const ActivityItem = memo(function ActivityItem({activity, isUpcoming = f
<div className={`flex items-start gap-4 ${isUpcoming ? 'opacity-80' : ''}`}>
{/* Icon */}
<div
className={`h-10 w-10 rounded-lg ${config.bgColor} flex items-center justify-center flex-shrink-0 ${isUpcoming ? 'ring-2 ring-offset-2 ring-blue-200' : ''}`}
className={`h-10 w-10 rounded-lg ${config.bgColor} flex items-center justify-center flex-shrink-0 ${isUpcoming ? 'ring-2 ring-offset-2 ring-neutral-300' : ''}`}
>
<Icon className={`h-5 w-5 ${config.color}`} />
</div>
@@ -410,7 +410,7 @@ export const ActivityItem = memo(function ActivityItem({activity, isUpcoming = f
)}
</div>
<span
className={`text-xs flex-shrink-0 whitespace-nowrap ${isUpcoming ? 'text-blue-600 font-medium' : 'text-neutral-400'}`}
className={`text-xs flex-shrink-0 whitespace-nowrap ${isUpcoming ? 'text-neutral-700 font-medium' : 'text-neutral-400'}`}
title={timestamp.toLocaleString()}
>
{relativeTime}
apps/web/src/components/BillingConsumption.tsx
+8 -8
View File
@@ -111,8 +111,8 @@ export function BillingConsumption({projectId, hasSubscription}: BillingConsumpt
{/* Total Usage */}
<div className="border border-neutral-200 rounded-lg p-6">
<div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-blue-50 rounded-lg">
<TrendingUp className="h-5 w-5 text-blue-600" />
<div className="p-2 bg-neutral-100 rounded-lg">
<TrendingUp className="h-5 w-5 text-neutral-600" />
</div>
<div>
<p className="text-sm text-neutral-500">Total Emails Sent</p>
@@ -123,19 +123,19 @@ export function BillingConsumption({projectId, hasSubscription}: BillingConsumpt
{/* Account Credits */}
{consumptionData.credits && consumptionData.credits.hasCredits && (
<div className="border border-green-200 rounded-lg p-6 bg-green-50">
<div className="border border-neutral-200 rounded-lg p-6">
<div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-white rounded-lg shadow-sm border border-green-200">
<Coins className="h-5 w-5 text-green-600" />
<div className="p-2 bg-neutral-100 rounded-lg">
<Coins className="h-5 w-5 text-neutral-600" />
</div>
<div>
<p className="text-sm text-green-700">Account Credits</p>
<p className="text-2xl font-bold text-green-900">
<p className="text-sm text-neutral-500">Account Credits</p>
<p className="text-2xl font-bold text-neutral-900">
{formatCurrency(consumptionData.credits.creditAmount, consumptionData.credits.currency)}
</p>
</div>
</div>
<p className="text-xs text-green-700 mt-2">
<p className="text-xs text-neutral-500 mt-2">
Credits will be automatically applied to your upcoming invoices
</p>
</div>
apps/web/src/components/BillingInvoices.tsx
+4 -4
View File
@@ -90,16 +90,16 @@ export function BillingInvoices({projectId, hasSubscription, onManageBilling}: B
const getStatusBadge = (status: string, paid: boolean) => {
// Stripe invoices have status 'paid' when paid, or paid boolean is true
if (paid || status === 'paid') {
return <Badge variant="green">Paid</Badge>;
return <Badge variant="success">Paid</Badge>;
}
switch (status) {
case 'open':
return <Badge variant="orange">Unpaid</Badge>;
return <Badge variant="warning">Unpaid</Badge>;
case 'draft':
return <Badge variant="neutral">Draft</Badge>;
case 'uncollectible':
return <Badge variant="red">Uncollectible</Badge>;
return <Badge variant="destructive">Uncollectible</Badge>;
case 'void':
return <Badge variant="neutral">Void</Badge>;
default:
@@ -169,7 +169,7 @@ export function BillingInvoices({projectId, hasSubscription, onManageBilling}: B
<span className="font-medium">Total:</span>{' '}
{formatCurrency(invoice.total, invoice.currency)}
</p>
<p className="text-orange-600 font-medium">
<p className="text-amber-700 font-medium">
<span className="font-medium">Amount Due:</span>{' '}
{formatCurrency(invoice.amountDue, invoice.currency)}
</p>
apps/web/src/components/BillingLimits.tsx
+8 -8
View File
@@ -384,15 +384,15 @@ interface UsageDisplayProps {
const UsageDisplay = memo(function UsageDisplay({category, usage, currency}: UsageDisplayProps) {
const statusColor = useMemo(() => {
if (usage.isBlocked) return 'text-red-600';
if (usage.isWarning) return 'text-orange-600';
return 'text-green-600';
if (usage.isBlocked) return 'text-red-700';
if (usage.isWarning) return 'text-amber-700';
return 'text-neutral-600';
}, [usage.isBlocked, usage.isWarning]);
const progressColor = useMemo(() => {
if (usage.isBlocked) return 'bg-red-600';
if (usage.isWarning) return 'bg-orange-500';
return 'bg-green-600';
if (usage.isWarning) return 'bg-amber-500';
return 'bg-neutral-900';
}, [usage.isBlocked, usage.isWarning]);
const statusIcon = useMemo(() => {
@@ -440,10 +440,10 @@ const UsageDisplay = memo(function UsageDisplay({category, usage, currency}: Usa
<Progress value={Math.min(usage.percentage, 100)} className="h-2" indicatorClassName={progressColor} />
{usage.isBlocked && (
<Alert className="mt-3 bg-red-50 border-red-200 text-red-900">
<Alert variant="destructive" className="mt-3">
<AlertCircle className="h-4 w-4" />
<div className="ml-2">
<p className={'text-sm'}>
<p className="text-sm">
<strong>Limit reached:</strong> No more {category.toLowerCase()} emails can be sent this month.
</p>
</div>
@@ -451,7 +451,7 @@ const UsageDisplay = memo(function UsageDisplay({category, usage, currency}: Usa
)}
{usage.isWarning && !usage.isBlocked && (
<Alert className="mt-3 bg-orange-50 border-orange-200 text-orange-900">
<Alert variant="warning" className="mt-3">
<AlertTriangle className="h-4 w-4" />
<div className="ml-2">
<p className="text-sm">
apps/web/src/components/CampaignSelectionDialog.tsx
+9 -16
View File
@@ -12,6 +12,7 @@ import {
DialogDescription,
DialogHeader,
DialogTitle,
EmptyState,
Label,
Select,
SelectContent,
@@ -26,7 +27,6 @@ import type {PaginatedResponse} from '@plunk/types';
import {ArrowLeft, Calendar, Mail, Users} from 'lucide-react';
import {useState} from 'react';
import useSWR from 'swr';
import {EmptyState} from './EmptyState';
interface CampaignSelectionDialogProps {
open: boolean;
@@ -97,23 +97,16 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
};
const getStatusBadge = (status: CampaignStatus) => {
const variants: Record<
CampaignStatus,
{variant: 'default' | 'secondary' | 'destructive' | 'outline'; label: string; className?: string}
> = {
DRAFT: {variant: 'secondary', label: 'Draft', className: 'bg-neutral-100 text-neutral-700'},
SCHEDULED: {variant: 'default', label: 'Scheduled', className: 'bg-blue-100 text-blue-700'},
SENDING: {variant: 'default', label: 'Sending', className: 'bg-purple-100 text-purple-700'},
SENT: {variant: 'default', label: 'Sent', className: 'bg-green-100 text-green-700'},
CANCELLED: {variant: 'destructive', label: 'Cancelled', className: 'bg-red-100 text-red-700'},
const variants: Record<CampaignStatus, {variant: 'neutral' | 'default' | 'success'; label: string}> = {
DRAFT: {variant: 'neutral', label: 'Draft'},
SCHEDULED: {variant: 'default', label: 'Scheduled'},
SENDING: {variant: 'default', label: 'Sending'},
SENT: {variant: 'success', label: 'Sent'},
CANCELLED: {variant: 'neutral', label: 'Cancelled'},
};
const config = variants[status];
return (
<Badge variant={config.variant} className={config.className}>
{config.label}
</Badge>
);
return <Badge variant={config.variant}>{config.label}</Badge>;
};
const getAudienceLabel = (campaign: Campaign) => {
@@ -132,7 +125,7 @@ export function CampaignSelectionDialog({open, onOpenChange, onSelectCampaign}:
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
{step === 'configure' && (
<Button variant="ghost" size="sm" onClick={handleBack} className="h-8 w-8 p-0">
<Button variant="ghost" size="icon" onClick={handleBack}>
<ArrowLeft className="h-4 w-4" />
</Button>
)}
apps/web/src/components/DataManagementSettings.tsx
+1 -1
View File
@@ -14,6 +14,7 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
EmptyState,
Table,
TableBody,
TableCell,
@@ -23,7 +24,6 @@ import {
IconSpinner,
} from '@plunk/ui';
import {AlertCircle, Database, Trash2, Zap} from 'lucide-react';
import {EmptyState} from './EmptyState';
import {toast} from 'sonner';
import useSWR from 'swr';
import {useActiveProject} from '../lib/contexts/ActiveProjectProvider';
apps/web/src/components/DomainsSettings.tsx
+2 -3
View File
@@ -11,6 +11,7 @@ import {
CardHeader,
CardTitle,
ConfirmDialog,
EmptyState,
Form,
FormControl,
FormField,
@@ -22,7 +23,6 @@ import {
} from '@plunk/ui';
import {AnimatePresence, motion} from 'framer-motion';
import {Check, CheckCircle2, ChevronDown, Copy, Globe, RefreshCw, Trash2, XCircle} from 'lucide-react';
import {EmptyState} from './EmptyState';
import {useConfig} from '../lib/hooks/useConfig';
import {useAddDomain, useCheckDomainVerification, useDomains, useRemoveDomain} from '../lib/hooks/useDomains';
@@ -369,13 +369,12 @@ export function DomainsSettings({projectId}: DomainsSettingsProps) {
)}
</Button>
<Button
variant="ghost"
variant="destructiveGhost"
size="sm"
onClick={() => {
setDomainToRemove({id: domain.id, name: domain.domain});
setShowRemoveDialog(true);
}}
className="text-red-600 hover:text-red-700 hover:bg-red-50"
>
<Trash2 className="h-4 w-4" />
</Button>
apps/web/src/components/EmptyState.tsx
-23
View File
@@ -1,23 +0,0 @@
import type {LucideIcon} from 'lucide-react';
import type {ReactNode} from 'react';
interface EmptyStateProps {
icon: LucideIcon;
title: string;
description: string;
action?: ReactNode;
className?: string;
}
export function EmptyState({icon: Icon, title, description, action, className}: EmptyStateProps) {
return (
<div className={`text-center py-14 ${className ?? ''}`}>
<div className="inline-flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 bg-neutral-50 mb-4">
<Icon className="h-5 w-5 text-neutral-400" />
</div>
<h3 className="text-sm font-semibold text-neutral-900 mb-1">{title}</h3>
<p className="text-sm text-neutral-500 max-w-xs mx-auto leading-relaxed mb-5">{description}</p>
{action}
</div>
);
}
apps/web/src/components/KeyValueEditor.tsx
+1 -7
View File
@@ -114,13 +114,7 @@ export function KeyValueEditor({initialData, onChange}: KeyValueEditorProps) {
className="text-sm"
/>
</div>
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => removePair(pair.id)}
className="text-red-500 hover:text-red-700 hover:bg-red-50"
>
<Button type="button" variant="destructiveGhost" size="icon" onClick={() => removePair(pair.id)}>
<Trash2 className="h-4 w-4" />
</Button>
</div>
apps/web/src/components/SecuritySettings.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface SecuritySettingsProps {
const STATUS_CONFIG: Record<SecurityLevel, {color: string; icon: typeof CheckCircle; bg: string; label: string}> = {
healthy: {color: 'text-green-600', icon: CheckCircle, bg: 'bg-green-100', label: 'Healthy'},
warning: {color: 'text-orange-600', icon: AlertTriangle, bg: 'bg-orange-100', label: 'Warning'},
warning: {color: 'text-amber-700', icon: AlertTriangle, bg: 'bg-amber-100', label: 'Warning'},
critical: {color: 'text-red-600', icon: AlertCircle, bg: 'bg-red-100', label: 'Critical'},
};
apps/web/src/components/SegmentFilterBuilder.tsx
+7 -19
View File
@@ -528,13 +528,7 @@ const FilterRow = memo(function FilterRow({filter, onChange, onRemove, available
</div>
</div>
<Button
type="button"
variant="ghost"
size="sm"
onClick={onRemove}
className="mt-6 text-red-600 hover:text-red-700 hover:bg-red-50"
>
<Button type="button" variant="destructiveGhost" size="sm" onClick={onRemove} className="mt-6">
<Trash2 className="h-4 w-4" />
</Button>
</div>
@@ -603,12 +597,12 @@ function FilterGroupComponent({group, onChange, onRemove, depth = 0, availableFi
onChange(rest);
}, [group, onChange]);
const bgColors = ['bg-white', 'bg-blue-50/50', 'bg-purple-50/50', 'bg-green-50/50'];
const borderColors = ['border-neutral-300', 'border-blue-300', 'border-purple-300', 'border-green-300'];
const bgColors = ['bg-white', 'bg-neutral-50', 'bg-white', 'bg-neutral-50'];
const borderColors = ['border-neutral-200', 'border-neutral-200', 'border-neutral-300', 'border-neutral-300'];
return (
<div
className={`p-4 rounded-lg border-2 ${borderColors[depth % borderColors.length]} ${bgColors[depth % bgColors.length]}`}
className={`p-4 rounded-lg border ${borderColors[depth % borderColors.length]} ${bgColors[depth % bgColors.length]}`}
>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
@@ -616,13 +610,7 @@ function FilterGroupComponent({group, onChange, onRemove, depth = 0, availableFi
<span className="text-sm font-medium text-neutral-700">Filter Group {depth > 0 && `(Nested)`}</span>
</div>
{onRemove && (
<Button
type="button"
variant="ghost"
size="sm"
onClick={onRemove}
className="text-red-600 hover:text-red-700 hover:bg-red-50"
>
<Button type="button" variant="destructiveGhost" size="sm" onClick={onRemove}>
<Trash2 className="h-4 w-4" />
</Button>
)}
@@ -645,10 +633,10 @@ function FilterGroupComponent({group, onChange, onRemove, depth = 0, availableFi
<span className="text-xs font-medium text-neutral-600 uppercase tracking-wide">Nested Conditions</span>
<Button
type="button"
variant="ghost"
variant="destructiveGhost"
size="sm"
onClick={removeNestedCondition}
className="h-6 text-xs text-red-600 hover:text-red-700 hover:bg-red-50"
className="h-6 text-xs"
>
Remove nested
</Button>
apps/web/src/components/TemplateSelectionDialog.tsx
+4 -7
View File
@@ -12,6 +12,7 @@ import {
DialogDescription,
DialogHeader,
DialogTitle,
EmptyState,
IconSpinner,
Input,
Label,
@@ -21,7 +22,6 @@ import type {PaginatedResponse} from '@plunk/types';
import {ArrowLeft, FileText, Search} from 'lucide-react';
import {useState} from 'react';
import useSWR from 'swr';
import {EmptyState} from './EmptyState';
interface TemplateSelectionDialogProps {
open: boolean;
@@ -106,7 +106,7 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
{step === 'configure' && (
<Button variant="ghost" size="sm" onClick={handleBack} className="h-8 w-8 p-0">
<Button variant="ghost" size="icon" onClick={handleBack}>
<ArrowLeft className="h-4 w-4" />
</Button>
)}
@@ -228,7 +228,7 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<CardTitle className="text-base truncate">{template.name}</CardTitle>
<Badge className="capitalize" variant={template.type === 'MARKETING' ? 'info' : template.type === 'HEADLESS' ? 'warning' : 'success'}>
<Badge className="capitalize" variant="neutral">
{template.type.toLowerCase()}
</Badge>
</div>
@@ -285,10 +285,7 @@ export function TemplateSelectionDialog({open, onOpenChange, onSelectTemplate}:
<div className="pb-4 mb-1 border-b border-neutral-100">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-neutral-900">{selectedTemplate.name}</span>
<Badge
className="capitalize"
variant={selectedTemplate.type === 'MARKETING' ? 'info' : 'success'}
>
<Badge className="capitalize" variant="neutral">
{selectedTemplate.type.toLowerCase()}
</Badge>
</div>
apps/web/src/components/UnpaidInvoiceBanner.tsx
+1 -6
View File
@@ -73,12 +73,7 @@ export function UnpaidInvoiceBanner({projectId, hasSubscription}: UnpaidInvoiceB
Please pay your outstanding invoices to avoid service interruption.
</p>
</div>
<Button
variant="default"
size="sm"
onClick={handlePayNow}
className="ml-4 bg-red-600 hover:bg-red-700 text-white flex items-center gap-2"
>
<Button variant="destructive" size="sm" onClick={handlePayNow} className="ml-4">
Pay Now
<ExternalLink className="h-3 w-3" />
</Button>
apps/web/src/pages/activity/index.tsx
+8 -8
View File
@@ -42,32 +42,32 @@ export default function ActivityPage() {
value: stats?.totalEvents?.toLocaleString() || '0',
icon: Zap,
description: 'Last 30 days',
color: 'text-blue-600',
bgColor: 'bg-blue-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
},
{
name: 'Emails Sent',
value: stats?.totalEmailsSent?.toLocaleString() || '0',
icon: Send,
description: 'Last 30 days',
color: 'text-green-600',
bgColor: 'bg-green-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
},
{
name: 'Open Rate',
value: stats?.openRate ? `${stats.openRate.toFixed(1)}%` : '0%',
icon: Eye,
description: `${stats?.totalEmailsOpened?.toLocaleString() || '0'} opens`,
color: 'text-purple-600',
bgColor: 'bg-purple-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
},
{
name: 'Click Rate',
value: stats?.clickRate ? `${stats.clickRate.toFixed(1)}%` : '0%',
icon: MousePointerClick,
description: `${stats?.totalEmailsClicked?.toLocaleString() || '0'} clicks`,
color: 'text-orange-600',
bgColor: 'bg-orange-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
},
];
apps/web/src/pages/analytics/index.tsx
+23 -31
View File
@@ -17,8 +17,8 @@ import {
SelectTrigger,
SelectValue,
} from '@plunk/ui';
import {EmptyState} from '@plunk/ui';
import {DashboardLayout} from '../../components/DashboardLayout';
import {EmptyState} from '../../components/EmptyState';
import {useAnalytics} from '../../lib/hooks/useAnalytics';
import useSWR from 'swr';
import {
@@ -149,8 +149,8 @@ export default function AnalyticsPage() {
value: stats?.totalEmailsSent?.toLocaleString() || cumulativeTotals.emails.toLocaleString(),
icon: Send,
description: `Last ${days} days`,
color: 'text-blue-600',
bgColor: 'bg-blue-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
trend: stats?.totalEmailsSent ? (stats.totalEmailsSent > 0 ? 'positive' : 'neutral') : 'neutral',
},
{
@@ -158,8 +158,8 @@ export default function AnalyticsPage() {
value: stats?.openRate ? `${stats.openRate.toFixed(1)}%` : '0%',
icon: Eye,
description: `${stats?.totalEmailsOpened?.toLocaleString() || cumulativeTotals.opens.toLocaleString()} opens`,
color: 'text-green-600',
bgColor: 'bg-green-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
trend: stats?.openRate && stats.openRate > 20 ? 'positive' : 'neutral',
},
{
@@ -167,8 +167,8 @@ export default function AnalyticsPage() {
value: stats?.clickRate ? `${stats.clickRate.toFixed(1)}%` : '0%',
icon: MousePointerClick,
description: `${stats?.totalEmailsClicked?.toLocaleString() || cumulativeTotals.clicks.toLocaleString()} clicks`,
color: 'text-purple-600',
bgColor: 'bg-purple-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
trend: stats?.clickRate && stats.clickRate > 3 ? 'positive' : 'neutral',
},
{
@@ -176,8 +176,8 @@ export default function AnalyticsPage() {
value: campaignStats?.active?.toLocaleString() || '0',
icon: Megaphone,
description: `${campaignStats?.total || 0} total campaigns`,
color: 'text-indigo-600',
bgColor: 'bg-indigo-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
trend: campaignStats?.active ? 'positive' : 'neutral',
},
{
@@ -185,8 +185,8 @@ export default function AnalyticsPage() {
value: stats?.totalWorkflowsStarted?.toLocaleString() || '0',
icon: Activity,
description: 'Automations triggered',
color: 'text-cyan-600',
bgColor: 'bg-cyan-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
trend: stats?.totalWorkflowsStarted && stats.totalWorkflowsStarted > 0 ? 'positive' : 'neutral',
},
{
@@ -194,8 +194,8 @@ export default function AnalyticsPage() {
value: stats?.totalEvents?.toLocaleString() || '0',
icon: Zap,
description: 'Custom events tracked',
color: 'text-orange-600',
bgColor: 'bg-orange-100',
color: 'text-neutral-600',
bgColor: 'bg-neutral-100',
trend: stats?.totalEvents && stats.totalEvents > 0 ? 'positive' : 'neutral',
},
];
@@ -457,8 +457,8 @@ export default function AnalyticsPage() {
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-start gap-3">
<div className="h-8 w-8 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="h-4 w-4 text-green-600" />
<div className="h-8 w-8 rounded-lg bg-neutral-100 flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="h-4 w-4 text-neutral-600" />
</div>
<div>
<p className="text-sm font-medium text-neutral-900">Open Rate</p>
@@ -470,8 +470,8 @@ export default function AnalyticsPage() {
</div>
</div>
<div className="flex items-start gap-3">
<div className="h-8 w-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
<BarChart3 className="h-4 w-4 text-blue-600" />
<div className="h-8 w-8 rounded-lg bg-neutral-100 flex items-center justify-center flex-shrink-0">
<BarChart3 className="h-4 w-4 text-neutral-600" />
</div>
<div>
<p className="text-sm font-medium text-neutral-900">Click Rate</p>
@@ -483,8 +483,8 @@ export default function AnalyticsPage() {
</div>
</div>
<div className="flex items-start gap-3">
<div className="h-8 w-8 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
<Zap className="h-4 w-4 text-purple-600" />
<div className="h-8 w-8 rounded-lg bg-neutral-100 flex items-center justify-center flex-shrink-0">
<Zap className="h-4 w-4 text-neutral-600" />
</div>
<div>
<p className="text-sm font-medium text-neutral-900">Engagement</p>
@@ -509,8 +509,8 @@ export default function AnalyticsPage() {
<p className="text-2xl font-bold text-neutral-900">{stats?.totalEvents?.toLocaleString() || '0'}</p>
<p className="text-sm text-neutral-500">Total Events</p>
</div>
<div className="h-12 w-12 rounded-lg bg-orange-100 flex items-center justify-center">
<Zap className="h-6 w-6 text-orange-600" />
<div className="h-12 w-12 rounded-lg bg-neutral-100 flex items-center justify-center">
<Zap className="h-6 w-6 text-neutral-600" />
</div>
</div>
<div className="pt-4 border-t">
@@ -566,11 +566,7 @@ export default function AnalyticsPage() {
<td className="text-right py-3 px-4">
<span
className={`text-sm font-medium ${
campaign.openRate > 30
? 'text-green-600'
: campaign.openRate > 20
? 'text-blue-600'
: 'text-neutral-600'
campaign.openRate > 30 ? 'text-green-700' : 'text-neutral-700'
}`}
>
{campaign.openRate.toFixed(1)}%
@@ -579,11 +575,7 @@ export default function AnalyticsPage() {
<td className="text-right py-3 px-4">
<span
className={`text-sm font-medium ${
campaign.clickRate > 5
? 'text-green-600'
: campaign.clickRate > 3
? 'text-blue-600'
: 'text-neutral-600'
campaign.clickRate > 5 ? 'text-green-700' : 'text-neutral-700'
}`}
>
{campaign.clickRate.toFixed(1)}%
apps/web/src/pages/campaigns/index.tsx
+9 -9
View File
@@ -17,8 +17,8 @@ import {
import type {Campaign, Template} from '@plunk/db';
import {CampaignStatus} from '@plunk/db';
import type {PaginatedResponse} from '@plunk/types';
import {EmptyState} from '@plunk/ui';
import {DashboardLayout} from '../../components/DashboardLayout';
import {EmptyState} from '../../components/EmptyState';
import {TemplateSelectionDialog} from '../../components/TemplateSelectionDialog';
import {CampaignSelectionDialog} from '../../components/CampaignSelectionDialog';
import {network} from '../../lib/network';
@@ -49,15 +49,15 @@ export default function CampaignsPage() {
);
const getStatusBadge = (status: CampaignStatus) => {
const config: Record<CampaignStatus, {label: string; className: string}> = {
DRAFT: {label: 'Draft', className: 'bg-neutral-100 text-neutral-600 border-transparent'},
SCHEDULED: {label: 'Scheduled', className: 'bg-blue-100 text-blue-700 border-transparent'},
SENDING: {label: 'Sending', className: 'bg-purple-100 text-purple-700 border-transparent'},
SENT: {label: 'Sent', className: 'bg-green-100 text-green-700 border-transparent'},
CANCELLED: {label: 'Cancelled', className: 'bg-red-100 text-red-700 border-transparent'},
const config: Record<CampaignStatus, {label: string; variant: 'neutral' | 'default' | 'success'}> = {
DRAFT: {label: 'Draft', variant: 'neutral'},
SCHEDULED: {label: 'Scheduled', variant: 'default'},
SENDING: {label: 'Sending', variant: 'default'},
SENT: {label: 'Sent', variant: 'success'},
CANCELLED: {label: 'Cancelled', variant: 'neutral'},
};
const {label, className} = config[status];
return <Badge className={`${className} shrink-0`}>{label}</Badge>;
const {label, variant} = config[status];
return <Badge variant={variant} className="shrink-0">{label}</Badge>;
};
const handleCancel = async () => {
apps/web/src/pages/contacts/index.tsx
+1 -1
View File
@@ -19,8 +19,8 @@ import {
} from '@plunk/ui';
import type {Contact} from '@plunk/db';
import type {CursorPaginatedResponse} from '@plunk/types';
import {EmptyState} from '@plunk/ui';
import {DashboardLayout} from '../../components/DashboardLayout';
import {EmptyState} from '../../components/EmptyState';
import {KeyValueEditor} from '../../components/KeyValueEditor';
import {network} from '../../lib/network';
import {formatRelativeTime} from '../../lib/dateUtils';
apps/web/src/pages/index.tsx
+2 -5
View File
@@ -8,6 +8,7 @@ import {
CardDescription,
CardHeader,
CardTitle,
Skeleton,
} from '@plunk/ui';
import {AlertCircle, Mail, Send, TrendingUp, Users} from 'lucide-react';
import {NextSeo} from 'next-seo';
@@ -192,11 +193,7 @@ export default function Index() {
<Icon className="h-4 w-4 text-neutral-500" />
</div>
<CardTitle className="text-2xl tabular-nums">
{isLoading ? (
<div className="h-7 w-16 bg-neutral-100 rounded animate-pulse" />
) : (
stat.value
)}
{isLoading ? <Skeleton className="h-7 w-16" /> : stat.value}
</CardTitle>
</CardHeader>
</Card>
apps/web/src/pages/onboarding/developer.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import {Button} from '@plunk/ui';
import {Button, Skeleton} from '@plunk/ui';
import {motion} from 'framer-motion';
import {ArrowLeft, ArrowRight, KeyRound, Mail, ShieldCheck} from 'lucide-react';
import {NextSeo} from 'next-seo';
@@ -192,7 +192,7 @@ export default function OnboardingDeveloper() {
isSecret
/>
) : (
<div className="h-16 animate-pulse rounded-lg bg-neutral-100" />
<Skeleton className="h-16 rounded-lg" />
)}
</div>
)}
apps/web/src/pages/onboarding/workflows.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import {Button} from '@plunk/ui';
import {Button, Skeleton} from '@plunk/ui';
import {motion} from 'framer-motion';
import {ArrowLeft, ArrowRight, FileText, ShieldCheck, Workflow, Zap} from 'lucide-react';
import {NextSeo} from 'next-seo';
@@ -201,7 +201,7 @@ export default function OnboardingWorkflows() {
description="Use this key to track events from browsers or clients."
/>
) : (
<div className="h-16 animate-pulse rounded-lg bg-neutral-100" />
<Skeleton className="h-16 rounded-lg" />
)}
<div className="overflow-hidden rounded-lg border border-neutral-200">
<CodeTabs snippets={snippets} />
apps/web/src/pages/segments/[id].tsx
+5 -9
View File
@@ -1,4 +1,5 @@
import {
Badge,
Button,
Card,
CardContent,
@@ -219,14 +220,10 @@ export default function SegmentDetailPage() {
</Link>
<div>
<div className="flex items-center gap-2">
<h1 className="text-3xl font-bold text-neutral-900">{segment.name}</h1>
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
isStatic ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700'
}`}
>
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">{segment.name}</h1>
<Badge variant={isStatic ? 'neutral' : 'default'}>
{isStatic ? 'Static' : 'Dynamic'}
</span>
</Badge>
</div>
{segment.description && <p className="text-neutral-500 mt-1">{segment.description}</p>}
</div>
@@ -395,11 +392,10 @@ export default function SegmentDetailPage() {
</Link>
{isStatic && (
<Button
variant="ghost"
variant="destructiveGhost"
size="sm"
onClick={() => handleRemoveMember(contact.email)}
disabled={removingEmail === contact.email}
className="text-red-600 hover:text-red-700 hover:bg-red-50"
>
<UserMinus className="h-4 w-4" />
</Button>
apps/web/src/pages/segments/index.tsx
+2 -2
View File
@@ -11,8 +11,8 @@ import {
} from '@plunk/ui';
import type {Segment} from '@plunk/db';
import type {FilterCondition} from '@plunk/types';
import {EmptyState} from '@plunk/ui';
import {DashboardLayout} from '../../components/DashboardLayout';
import {EmptyState} from '../../components/EmptyState';
import {network} from '../../lib/network';
import {formatRelativeTime} from '../../lib/dateUtils';
import {AlertTriangle, Calendar, Edit, Filter, Plus, Search, Trash2, X} from 'lucide-react';
@@ -170,7 +170,7 @@ export default function SegmentsPage() {
>
<div className="flex items-start justify-between gap-3 mb-3">
<h3 className="font-semibold text-neutral-900 leading-snug">{segment.name}</h3>
<Badge variant={isDynamic ? 'info' : 'default'} className="shrink-0 mt-0.5">
<Badge variant={isDynamic ? 'default' : 'neutral'} className="shrink-0 mt-0.5">
{isDynamic ? 'Dynamic' : 'Static'}
</Badge>
</div>
apps/web/src/pages/segments/new.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ export default function NewSegmentPage() {
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold text-neutral-900">Create Segment</h1>
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Segment</h1>
<p className="text-neutral-500 mt-1">
{segmentType === 'DYNAMIC'
? 'Build complex audience filters with AND/OR logic'
apps/web/src/pages/settings/index.tsx
+12 -15
View File
@@ -375,7 +375,7 @@ export default function Settings() {
<div className="space-y-8">
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-neutral-900">Settings</h1>
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Settings</h1>
<p className="text-neutral-500 mt-2">Manage your project settings and preferences</p>
</div>
@@ -574,7 +574,7 @@ export default function Settings() {
<div className="flex items-start justify-between gap-4 p-5 rounded-lg border border-neutral-200 bg-white transition-all">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<Database className="h-4 w-4 text-orange-600" />
<Database className="h-4 w-4 text-amber-700" />
<h4 className="font-semibold text-neutral-900">Reset Project Data</h4>
</div>
<p className="text-sm text-neutral-600 mb-3">
@@ -586,12 +586,7 @@ export default function Settings() {
<span>API keys, domains, billing information</span>
</div>
</div>
<Button
type="button"
variant="outline"
onClick={() => setShowResetDialog(true)}
className="shrink-0 border-orange-300 text-orange-700 hover:bg-orange-50 hover:border-orange-400"
>
<Button type="button" variant="outline" onClick={() => setShowResetDialog(true)} className="shrink-0">
Reset Data
</Button>
</div>
@@ -823,7 +818,7 @@ export default function Settings() {
<DialogContent>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-orange-500" />
<AlertTriangle className="h-5 w-5 text-amber-600" />
Regenerate API Keys
</DialogTitle>
<DialogDescription className="space-y-3">
@@ -841,7 +836,7 @@ export default function Settings() {
<Button variant="outline" onClick={() => setShowRegenerateDialog(false)}>
Cancel
</Button>
<Button variant="default" onClick={handleRegenerateKeys} className="bg-orange-600 hover:bg-orange-700">
<Button variant="destructive" onClick={handleRegenerateKeys}>
Regenerate Keys
</Button>
</DialogFooter>
@@ -852,8 +847,8 @@ export default function Settings() {
<Dialog open={showResetDialog} onOpenChange={setShowResetDialog}>
<DialogContent className="sm:max-w-md">
<DialogHeader className="space-y-3">
<div className="mx-auto w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
<Database className="h-6 w-6 text-orange-600" />
<div className="mx-auto w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
<Database className="h-6 w-6 text-amber-700" />
</div>
<DialogTitle className="text-center text-xl">Reset Project Data?</DialogTitle>
<DialogDescription className="text-center text-base">
@@ -865,7 +860,7 @@ export default function Settings() {
<div className="py-4">
<label className="text-sm font-medium text-neutral-700 block mb-2 text-center">
Type{' '}
<span className="font-mono font-semibold text-orange-600 bg-orange-50 px-2 py-0.5 rounded">RESET</span>{' '}
<span className="font-mono font-semibold text-amber-700 bg-amber-50 px-2 py-0.5 rounded">RESET</span>{' '}
to confirm
</label>
<Input
@@ -889,9 +884,10 @@ export default function Settings() {
Cancel
</Button>
<Button
variant="destructive"
onClick={handleResetProject}
disabled={resetConfirmText !== 'RESET'}
className="w-full bg-orange-600 hover:bg-orange-700 disabled:opacity-50"
className="w-full"
>
Reset Data
</Button>
@@ -946,9 +942,10 @@ export default function Settings() {
Cancel
</Button>
<Button
variant="destructive"
onClick={handleDeleteProject}
disabled={deleteConfirmText !== 'DELETE'}
className="w-full bg-red-600 hover:bg-red-700 disabled:opacity-50"
className="w-full"
>
Delete Forever
</Button>
apps/web/src/pages/templates/index.tsx
+2 -2
View File
@@ -9,8 +9,8 @@ import {
} from '@plunk/ui';
import type {Template} from '@plunk/db';
import type {PaginatedResponse} from '@plunk/types';
import {EmptyState} from '@plunk/ui';
import {DashboardLayout} from '../../components/DashboardLayout';
import {EmptyState} from '../../components/EmptyState';
import {network} from '../../lib/network';
import {formatRelativeTime} from '../../lib/dateUtils';
import {Calendar, Copy, Edit, FileText, Plus, Search, Trash2, X} from 'lucide-react';
@@ -174,7 +174,7 @@ export default function TemplatesPage() {
<h3 className="font-semibold text-neutral-900 leading-snug">{template.name}</h3>
<Badge
className="capitalize shrink-0 mt-0.5"
variant={template.type === 'MARKETING' ? 'info' : template.type === 'HEADLESS' ? 'warning' : 'success'}
variant="neutral"
>
{template.type.toLowerCase()}
</Badge>
apps/web/src/pages/workflows/[id].tsx
+23 -21
View File
@@ -3,6 +3,7 @@ import {
Alert,
AlertDescription,
AlertTitle,
Badge,
Button,
Card,
CardContent,
@@ -18,6 +19,7 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
EmptyState,
Input,
Label,
Select,
@@ -36,7 +38,6 @@ import {
import type {Template, Workflow, WorkflowExecution, WorkflowStep, WorkflowTransition} from '@plunk/db';
import type {PaginatedResponse} from '@plunk/types';
import {DashboardLayout} from '../../components/DashboardLayout';
import {EmptyState} from '../../components/EmptyState';
import {network} from '../../lib/network';
import {
AlertTriangle,
@@ -659,23 +660,21 @@ export default function WorkflowEditorPage() {
{execution.contact.email}
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
<Badge
variant={
execution.status === 'COMPLETED'
? 'bg-green-100 text-green-800'
: execution.status === 'RUNNING'
? 'bg-blue-100 text-blue-800'
? 'success'
: execution.status === 'FAILED'
? 'destructive'
: execution.status === 'WAITING'
? 'bg-yellow-100 text-yellow-800'
: execution.status === 'FAILED'
? 'bg-red-100 text-red-800'
: execution.status === 'CANCELLED'
? 'bg-neutral-100 text-neutral-800'
: 'bg-neutral-100 text-neutral-800'
}`}
? 'warning'
: execution.status === 'RUNNING'
? 'default'
: 'neutral'
}
>
{execution.status}
</span>
</Badge>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-500">
{execution.currentStep?.name ?? '-'}
@@ -690,13 +689,14 @@ export default function WorkflowEditorPage() {
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
{(execution.status === 'RUNNING' || execution.status === 'WAITING') && (
<button
<Button
variant="destructiveGhost"
size="sm"
onClick={() => setExecutionToCancel(execution.id)}
className="text-red-600 hover:text-red-900 disabled:opacity-50"
disabled={isCancelling}
>
Cancel
</button>
</Button>
)}
</td>
</tr>
@@ -2471,13 +2471,15 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
<div className="flex items-center justify-between">
<span className="text-xs font-semibold text-neutral-500">Branch {idx + 1}</span>
{conditionBranches.length > 1 && (
<button
<Button
type="button"
variant="destructiveGhost"
size="icon"
className="h-7 w-7"
onClick={() => setConditionBranches(prev => prev.filter(b => b.id !== branch.id))}
className="text-xs text-red-500 hover:text-red-700"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</Button>
)}
</div>
@@ -2551,7 +2553,7 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
{id: crypto.randomUUID().slice(0, 8), name: '', operator: 'equals', value: ''},
])
}
className="flex items-center gap-1.5 text-sm text-purple-600 hover:text-purple-800 font-medium"
className="flex items-center gap-1.5 text-sm text-neutral-700 hover:text-neutral-900 font-medium"
>
<Plus className="h-3.5 w-3.5" />
Add Branch
apps/web/src/pages/workflows/index.tsx
+2 -2
View File
@@ -19,8 +19,8 @@ import {
} from '@plunk/ui';
import type {Workflow} from '@plunk/db';
import type {PaginatedResponse} from '@plunk/types';
import {EmptyState} from '@plunk/ui';
import {DashboardLayout} from '../../components/DashboardLayout';
import {EmptyState} from '../../components/EmptyState';
import {network} from '../../lib/network';
import {formatRelativeTime} from '../../lib/dateUtils';
import {Calendar, Edit, Plus, Power, PowerOff, Search, Trash2, Workflow as WorkflowIcon, X, Zap} from 'lucide-react';
@@ -165,7 +165,7 @@ export default function WorkflowsPage() {
>
<div className="flex items-start justify-between gap-3 mb-3">
<h3 className="font-semibold text-neutral-900 leading-snug">{workflow.name}</h3>
<Badge variant={workflow.enabled ? 'green' : 'neutral'} className="shrink-0 mt-0.5">
<Badge variant={workflow.enabled ? 'success' : 'neutral'} className="shrink-0 mt-0.5">
{workflow.enabled ? (
<><Power className="h-3 w-3 mr-1" />Active</>
) : (
packages/ui/src/components/atoms/Alert.tsx
+3 -2
View File
@@ -8,8 +8,9 @@ const alertVariants = cva(
variants: {
variant: {
default: 'bg-white text-neutral-950',
destructive: 'border-red-500/50 text-red-900 [&>svg]:text-red-900',
warning: 'bg-amber-50 border-amber-200 text-amber-900 [&>svg]:text-amber-600',
destructive: 'border-red-200 bg-red-50 text-red-900 [&>svg]:text-red-600',
warning: 'border-amber-200 bg-amber-50 text-amber-900 [&>svg]:text-amber-600',
success: 'border-green-200 bg-green-50 text-green-900 [&>svg]:text-green-600',
},
},
defaultVariants: {
packages/ui/src/components/atoms/Badge.tsx
+4 -9
View File
@@ -4,22 +4,17 @@ import * as React from 'react';
import {cn} from '../../lib';
const badgeVariants = cva(
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-2',
{
variants: {
variant: {
default: 'border-transparent bg-neutral-100 text-neutral-900',
secondary: 'border-transparent bg-neutral-100 text-neutral-900',
destructive: 'border-transparent bg-red-100 text-red-900',
outline: 'text-neutral-950',
success: 'border-transparent bg-green-100 text-green-900',
warning: 'border-transparent bg-yellow-100 text-yellow-900',
// Additional semantic variants for common use cases
info: 'border-transparent bg-blue-100 text-blue-900',
orange: 'border-transparent bg-orange-100 text-orange-800',
green: 'border-transparent bg-green-100 text-green-800',
red: 'border-transparent bg-red-100 text-red-800',
neutral: 'border-transparent bg-neutral-50 text-neutral-600',
destructive: 'border-transparent bg-red-100 text-red-900',
success: 'border-transparent bg-green-100 text-green-900',
warning: 'border-transparent bg-amber-100 text-amber-900',
},
},
defaultVariants: {
packages/ui/src/components/atoms/Button.tsx
+2 -1
View File
@@ -10,10 +10,11 @@ const buttonVariants = cva(
variants: {
variant: {
default: 'bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90',
destructive: 'bg-red-500 text-neutral-50 hover:bg-red-500/90',
destructive: 'bg-red-600 text-white hover:bg-red-600/90',
outline: 'border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-neutral-900',
secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80',
ghost: 'hover:bg-neutral-100 hover:text-neutral-900',
destructiveGhost: 'text-red-600 hover:text-red-700 hover:bg-red-50',
link: 'text-neutral-900 underline-offset-4 hover:underline',
},
size: {
packages/ui/src/components/atoms/Card.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import {cn} from '../../lib';
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (
<div
ref={ref}
className={cn('rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow-sm overflow-hidden', className)}
className={cn('rounded-lg border border-neutral-200 bg-white text-neutral-950 shadow-sm overflow-hidden', className)}
{...props}
/>
));
packages/ui/src/components/atoms/Checkbox.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-neutral-200 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50',
'peer h-4 w-4 shrink-0 rounded-sm border border-neutral-200 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50',
className,
)}
{...props}
packages/ui/src/components/atoms/Dialog.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-60 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 p-1.5">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-md opacity-60 ring-offset-white transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 p-1.5">
<X className="h-5 w-5 sm:h-5 sm:w-5" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
packages/ui/src/components/atoms/Form.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
}
return (
<p ref={ref} id={formMessageId} className={cn('text-[0.8rem] font-medium text-red-500', className)} {...props}>
<p ref={ref} id={formMessageId} className={cn('text-[0.8rem] font-medium text-red-600', className)} {...props}>
{body}
</p>
);
packages/ui/src/components/atoms/RadioGroup.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
'aspect-square h-4 w-4 rounded-full border border-neutral-200 text-neutral-900 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'aspect-square h-4 w-4 rounded-full border border-neutral-200 text-neutral-900 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
packages/ui/src/components/atoms/Select.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
'flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
'flex h-10 w-full items-center justify-between rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
className,
)}
{...props}
packages/ui/src/components/atoms/Switch.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const Switch = React.forwardRef<
>(({className, ...props}, ref) => (
<SwitchPrimitives.Root
className={cn(
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200',
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200',
className,
)}
{...props}
packages/ui/src/components/atoms/Tabs.tsx
+2 -2
View File
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow-sm',
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all hover:text-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow-sm',
className,
)}
{...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content
ref={ref}
className={cn(
'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2',
'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
className,
)}
{...props}
packages/ui/src/components/molecules/EmptyState.tsx
+10 -14
View File
@@ -1,31 +1,27 @@
import type {LucideIcon} from 'lucide-react';
import * as React from 'react';
import type {ReactNode} from 'react';
import {cn} from '../../lib';
import {Button} from '../atoms';
export interface EmptyStateProps {
icon: LucideIcon;
title: string;
description?: string;
action?: {
label: string;
onClick: () => void;
};
action?: ReactNode;
className?: string;
}
export function EmptyState({icon: Icon, title, description, action, className}: EmptyStateProps) {
return (
<div className={cn('text-center py-12', className)}>
<Icon className="h-12 w-12 mx-auto text-neutral-400 mb-4" />
<h3 className="text-lg font-medium text-neutral-900 mb-2">{title}</h3>
{description && <p className="text-sm text-neutral-500 mb-6 max-w-md mx-auto">{description}</p>}
{action && (
<Button onClick={action.onClick} variant="default">
{action.label}
</Button>
<div className={cn('text-center py-14', className)}>
<div className="inline-flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 bg-neutral-50 mb-4">
<Icon className="h-5 w-5 text-neutral-400" />
</div>
<h3 className="text-sm font-semibold text-neutral-900 mb-1">{title}</h3>
{description && (
<p className="text-sm text-neutral-500 max-w-xs mx-auto leading-relaxed mb-5">{description}</p>
)}
{action}
</div>
);
}