infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

Responsive design

Browse Source
This commit is contained in:
Dries Augustyns
2025-12-04 11:23:55 +01:00
parent 736672007b
commit 6fe3779fcb
20 changed files with 428 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/_document.tsx
+3
View File
@@ -4,6 +4,9 @@ function Document({locale}: {locale: string}) {
return (
<Html lang={locale}>
<Head>
{/* Viewport */}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
{/* Primary Meta Tags */}
<meta name="title" content="Plunk | Email Platform Dashboard" />
<meta
apps/web/src/pages/activity/index.tsx
+2 -2
View File
@@ -78,8 +78,8 @@ export default function ActivityPage() {
<div className="space-y-6">
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-neutral-900">Activity</h1>
<p className="text-neutral-500 mt-2">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Activity</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Real-time overview of events, emails, and workflow executions across your project.
</p>
</div>
apps/web/src/pages/analytics/index.tsx
+5 -5
View File
@@ -211,16 +211,16 @@ export default function AnalyticsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-start justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Analytics</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Analytics</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Comprehensive insights into your email performance, engagement metrics, and delivery statistics.
</p>
</div>
<div className="flex gap-3">
<Select value={dateRange} onValueChange={setDateRange}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-full sm:w-[180px]">
<SelectValue placeholder="Select period" />
</SelectTrigger>
<SelectContent>
apps/web/src/pages/auth/login.tsx
+1 -1
View File
@@ -294,7 +294,7 @@ export default function Login() {
}
}}
>
<DialogContent className="max-w-md">
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Reset your password</DialogTitle>
<DialogDescription>Enter your email to receive a password reset link.</DialogDescription>
apps/web/src/pages/campaigns/[id].tsx
+34 -28
View File
@@ -331,39 +331,42 @@ export default function CampaignDetailsPage() {
<DashboardLayout>
<form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/campaigns">
<Button type="button" variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold text-neutral-900">{c.name}</h1>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 sm:gap-3">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
<Badge variant="secondary">Draft</Badge>
</div>
<p className="text-neutral-500 mt-1">Make changes to your campaign before sending</p>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your campaign before sending</p>
</div>
</div>
<div className="flex items-center gap-3">
{!hasChanges && !isSubmitting && <span className="text-sm text-neutral-500">All changes saved</span>}
{hasChanges && !isSubmitting && <span className="text-sm text-amber-600">Unsaved changes</span>}
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="flex-1">
{!hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>}
{hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>}
</div>
<div className="flex gap-2">
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
<Trash2 className="h-4 w-4" />
Delete
<span className="hidden sm:inline">Delete</span>
</Button>
<Button type="submit" disabled={!hasChanges || isSubmitting} variant="outline">
<Button type="submit" disabled={!hasChanges || isSubmitting} variant="outline" className="flex-1 sm:flex-none">
<Save className="h-4 w-4" />
{isSubmitting ? 'Saving...' : 'Save'}
<span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save'}</span>
<span className="sm:hidden">Save</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button type="button">
<Button type="button" className="flex-1 sm:flex-none">
<Send className="h-4 w-4" />
Send
<ChevronDown className="h-4 w-4 ml-1" />
<span className="hidden sm:inline">Send</span>
<ChevronDown className="h-4 w-4 sm:ml-1" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@@ -553,7 +556,7 @@ export default function CampaignDetailsPage() {
{/* Test Email Dialog */}
<Dialog open={isTestEmailDialogOpen} onOpenChange={setIsTestEmailDialogOpen}>
<DialogContent className="max-w-lg">
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Send Test Email</DialogTitle>
<DialogDescription>
@@ -604,7 +607,7 @@ export default function CampaignDetailsPage() {
{/* Schedule Dialog */}
<Dialog open={isScheduleDialogOpen} onOpenChange={setIsScheduleDialogOpen}>
<DialogContent className="max-w-lg">
<DialogContent className="sm:max-w-lg">
<DialogHeader>
<DialogTitle>Schedule Campaign</DialogTitle>
<DialogDescription>
@@ -742,28 +745,31 @@ export default function CampaignDetailsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/campaigns">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<div className="flex items-center gap-3 mb-2">
<h1 className="text-3xl font-bold text-neutral-900">{c.name}</h1>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 sm:gap-3 mb-2">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
{getStatusBadge(c.status)}
</div>
{c.description && <p className="text-neutral-500">{c.description}</p>}
{c.description && <p className="text-neutral-500 text-sm sm:text-base">{c.description}</p>}
</div>
</div>
{/* Actions */}
{(c.status === CampaignStatus.SCHEDULED || c.status === CampaignStatus.SENDING) && (
<Button variant="destructive" onClick={() => setShowCancelDialog(true)}>
<XCircle className="h-4 w-4" />
Cancel Campaign
</Button>
<div className="flex justify-end">
<Button variant="destructive" onClick={() => setShowCancelDialog(true)} className="w-full sm:w-auto">
<XCircle className="h-4 w-4" />
<span className="hidden sm:inline">Cancel Campaign</span>
<span className="sm:hidden">Cancel</span>
</Button>
</div>
)}
</div>
apps/web/src/pages/campaigns/create.tsx
+9 -11
View File
@@ -96,17 +96,15 @@ export default function CreateCampaignPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Link href="/campaigns">
<Button variant="ghost" size="icon">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold text-neutral-900">Create Campaign</h1>
<p className="text-neutral-500 mt-1">Create a new email campaign to send to your contacts</p>
</div>
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/campaigns">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Campaign</h1>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Create a new email campaign to send to your contacts</p>
</div>
</div>
apps/web/src/pages/campaigns/index.tsx
+8 -7
View File
@@ -109,17 +109,18 @@ export default function CampaignsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Campaigns</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Campaigns</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Send one-time email broadcasts to your contacts. {data?.total ? `${data.total} total campaigns` : ''}
</p>
</div>
<Link href="/campaigns/create">
<Button>
<Link href="/campaigns/create" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Campaign
<span className="hidden sm:inline">Create Campaign</span>
<span className="sm:hidden">Create</span>
</Button>
</Link>
</div>
apps/web/src/pages/contacts/[id].tsx
+12 -9
View File
@@ -129,18 +129,18 @@ export default function ContactDetailPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/contacts">
<Button variant="outline" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold text-neutral-900">{contact.email}</h1>
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{contact.email}</h1>
<p className="text-neutral-500 mt-1">
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
className={`inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium ${
contact.subscribed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}`}
>
@@ -149,10 +149,13 @@ export default function ContactDetailPage() {
</p>
</div>
</div>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Trash2 className="h-4 w-4" />
Delete Contact
</Button>
<div className="flex justify-end">
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="w-full sm:w-auto">
<Trash2 className="h-4 w-4" />
<span className="hidden sm:inline">Delete Contact</span>
<span className="sm:hidden">Delete</span>
</Button>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
apps/web/src/pages/contacts/index.tsx
+79 -25
View File
@@ -133,23 +133,27 @@ export default function ContactsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Contacts</h1>
<p className="text-neutral-500 mt-2">
Manage your email subscribers and their data.{' '}
{totalCount > 0 ? `${totalCount.toLocaleString()} total contacts` : ''}
</p>
</div>
<div className="flex gap-2">
<Button variant="outline" onClick={() => setShowImportDialog(true)}>
<Upload className="h-4 w-4" />
Import CSV
</Button>
<Button onClick={() => setShowCreateDialog(true)}>
<Plus className="h-4 w-4" />
Add Contact
</Button>
<div className="space-y-4">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Contacts</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Manage your email subscribers and their data.{' '}
{totalCount > 0 ? `${totalCount.toLocaleString()} total contacts` : ''}
</p>
</div>
<div className="flex gap-2">
<Button variant="outline" onClick={() => setShowImportDialog(true)} className="flex-1 sm:flex-none">
<Upload className="h-4 w-4" />
<span className="hidden sm:inline">Import CSV</span>
<span className="sm:hidden">Import</span>
</Button>
<Button onClick={() => setShowCreateDialog(true)} className="flex-1 sm:flex-none">
<Plus className="h-4 w-4" />
<span className="hidden sm:inline">Add Contact</span>
<span className="sm:hidden">Add</span>
</Button>
</div>
</div>
</div>
@@ -233,7 +237,8 @@ export default function ContactsPage() {
</div>
) : (
<>
<div className="overflow-x-auto">
{/* Desktop Table View - Hidden on mobile */}
<div className="hidden md:block overflow-x-auto">
<table className="w-full">
<thead className="bg-neutral-50 border-b border-neutral-200">
<tr>
@@ -294,10 +299,53 @@ export default function ContactsPage() {
</table>
</div>
{/* Mobile Card View - Only visible on mobile */}
<div className="md:hidden space-y-3">
{contacts.map(contact => (
<div
key={contact.id}
className="border border-neutral-200 rounded-lg p-4 bg-white hover:bg-neutral-50 transition-colors"
>
<div className="flex items-start justify-between gap-3 mb-3">
<div className="flex items-center gap-2 flex-1 min-w-0">
{contact.subscribed ? (
<MailCheck className="h-4 w-4 text-green-600 flex-shrink-0" />
) : (
<MailX className="h-4 w-4 text-red-600 flex-shrink-0" />
)}
<span className="text-sm font-medium text-neutral-900 truncate">{contact.email}</span>
</div>
<span
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${
contact.subscribed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}`}
>
{contact.subscribed ? 'Subscribed' : 'Unsubscribed'}
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-neutral-500">
{new Date(contact.createdAt).toLocaleDateString()}
</span>
<div className="flex items-center gap-1">
<Link href={`/contacts/${contact.id}`}>
<Button variant="ghost" size="sm">
<Edit className="h-4 w-4" />
</Button>
</Link>
<Button variant="ghost" size="sm" onClick={() => promptDelete(contact.id)}>
<Trash2 className="h-4 w-4 text-red-600" />
</Button>
</div>
</div>
</div>
))}
</div>
{/* Pagination Controls */}
{(currentPage > 0 || data?.hasMore) && (
<div className="flex items-center justify-between mt-6 pt-6 border-t border-neutral-200">
<div className="text-sm text-neutral-600">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mt-6 pt-6 border-t border-neutral-200">
<div className="text-xs sm:text-sm text-neutral-600 text-center sm:text-left">
Showing <span className="font-medium text-neutral-900">{currentPage * pageSize + 1}</span> to{' '}
<span className="font-medium text-neutral-900">{currentPage * pageSize + contacts.length}</span>
{totalCount > 0 && (
@@ -307,17 +355,23 @@ export default function ContactsPage() {
</>
)}
</div>
<div className="flex gap-2">
<div className="flex gap-2 justify-center sm:justify-end">
<Button
variant="outline"
onClick={handlePreviousPage}
disabled={currentPage === 0 || isLoading}
className="flex-1 sm:flex-none"
>
<ChevronLeft className="h-4 w-4" />
Previous
<span className="hidden sm:inline">Previous</span>
</Button>
<Button variant="outline" onClick={handleNextPage} disabled={!data?.hasMore || isLoading}>
Next
<Button
variant="outline"
onClick={handleNextPage}
disabled={!data?.hasMore || isLoading}
className="flex-1 sm:flex-none"
>
<span className="hidden sm:inline">Next</span>
<ChevronRight className="h-4 w-4" />
</Button>
</div>
@@ -626,7 +680,7 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
return (
<>
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="max-w-2xl">
<DialogContent className="sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Import Contacts from CSV</DialogTitle>
</DialogHeader>
apps/web/src/pages/index.tsx
+5 -5
View File
@@ -70,10 +70,10 @@ export default function Index() {
<Alert variant="warning">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Upgrade to remove Plunk branding</AlertTitle>
<AlertDescription className="flex items-center justify-between">
<span>Your emails currently include Plunk branding. Upgrade to a subscription to remove it.</span>
<AlertDescription className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<span className="text-sm">Your emails currently include Plunk branding. Upgrade to a subscription to remove it.</span>
<Link href="/settings?tab=billing">
<Button size="sm">Upgrade Now</Button>
<Button size="sm" className="w-full sm:w-auto">Upgrade Now</Button>
</Link>
</AlertDescription>
</Alert>
@@ -81,8 +81,8 @@ export default function Index() {
{/* Header */}
<div>
<h1 className="text-3xl font-bold text-neutral-900">Dashboard</h1>
<p className="text-neutral-500 mt-2">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Dashboard</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Welcome back to {activeProject?.name || 'Plunk'}. Here&apos;s what&apos;s happening with your emails.
</p>
</div>
apps/web/src/pages/segments/index.tsx
+8 -7
View File
@@ -73,17 +73,18 @@ export default function SegmentsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Segments</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<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">
Create dynamic audience groups based on contact attributes and behaviors
</p>
</div>
<Link href="/segments/new">
<Button>
<Link href="/segments/new" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Segment
<span className="hidden sm:inline">Create Segment</span>
<span className="sm:hidden">Create</span>
</Button>
</Link>
</div>
apps/web/src/pages/templates/[id].tsx
+21 -16
View File
@@ -147,29 +147,34 @@ export default function TemplateEditorPage() {
<DashboardLayout>
<form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/templates">
<Button type="button" variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<h1 className="text-3xl font-bold text-neutral-900">Edit Template</h1>
<p className="text-neutral-500 mt-1">Make changes to your email template</p>
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your email template</p>
</div>
</div>
<div className="flex items-center gap-3">
{!hasChanges && !isSubmitting && <span className="text-sm text-neutral-500">All changes saved</span>}
{hasChanges && !isSubmitting && <span className="text-sm text-amber-600">Unsaved changes</span>}
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Trash2 className="h-4 w-4" />
Delete
</Button>
<Button type="submit" disabled={!hasChanges || isSubmitting}>
<Save className="h-4 w-4" />
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="flex-1">
{!hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>}
{hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>}
</div>
<div className="flex items-center gap-2">
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
<Trash2 className="h-4 w-4" />
<span className="hidden sm:inline">Delete</span>
</Button>
<Button type="submit" disabled={!hasChanges || isSubmitting} className="flex-1 sm:flex-none">
<Save className="h-4 w-4" />
<span className="hidden sm:inline">{isSubmitting ? 'Saving...' : 'Save Changes'}</span>
<span className="sm:hidden">{isSubmitting ? 'Saving...' : 'Save'}</span>
</Button>
</div>
</div>
</div>
apps/web/src/pages/templates/create.tsx
+17 -12
View File
@@ -77,20 +77,25 @@ export default function CreateTemplatePage() {
<DashboardLayout>
<div className="max-w-5xl mx-auto space-y-6">
{/* Header */}
<div className="flex items-center gap-4">
<Link href="/templates">
<Button variant="ghost" size="icon">
<ArrowLeft className="h-4 w-4" />
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/templates">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Template</h1>
<p className="text-neutral-500 mt-1 text-sm sm:text-base">Create a reusable email template for campaigns and workflows</p>
</div>
</div>
<div className="flex justify-end">
<Button onClick={handleSubmit} disabled={saving} className="w-full sm:w-auto">
<Save className="h-4 w-4" />
<span className="hidden sm:inline">{saving ? 'Creating...' : 'Create Template'}</span>
<span className="sm:hidden">{saving ? 'Creating...' : 'Create'}</span>
</Button>
</Link>
<div className="flex-1">
<h1 className="text-3xl font-bold text-neutral-900">Create Template</h1>
<p className="text-neutral-500 mt-1">Create a reusable email template for campaigns and workflows</p>
</div>
<Button onClick={handleSubmit} disabled={saving}>
<Save className="h-4 w-4" />
{saving ? 'Creating...' : 'Create Template'}
</Button>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
apps/web/src/pages/templates/index.tsx
+8 -7
View File
@@ -66,18 +66,19 @@ export default function TemplatesPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Email Templates</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Email Templates</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Create and manage reusable email templates for your campaigns and workflows.{' '}
{data?.total ? `${data.total} total templates` : ''}
</p>
</div>
<Link href="/templates/create">
<Button>
<Link href="/templates/create" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Template
<span className="hidden sm:inline">Create Template</span>
<span className="sm:hidden">Create</span>
</Button>
</Link>
</div>
apps/web/src/pages/workflows/[id].tsx
+23 -21
View File
@@ -383,56 +383,58 @@ export default function WorkflowEditorPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="space-y-4">
<div className="flex items-center gap-3 sm:gap-4">
<Link href="/workflows">
<Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div>
<div className="flex items-center gap-3">
<h1 className="text-3xl font-bold text-neutral-900">{workflow.name}</h1>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 sm:gap-3">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{workflow.name}</h1>
<span
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
className={`inline-flex items-center px-2 sm:px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${
workflow.enabled ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
}`}
>
{workflow.enabled ? (
<>
<Power className="h-3 w-3 mr-1" />
Active
<Power className="h-3 w-3 sm:mr-1" />
<span className="hidden sm:inline">Active</span>
</>
) : (
<>
<PowerOff className="h-3 w-3 mr-1" />
Disabled
<PowerOff className="h-3 w-3 sm:mr-1" />
<span className="hidden sm:inline">Disabled</span>
</>
)}
</span>
</div>
{workflow.description && <p className="text-neutral-500 mt-1">{workflow.description}</p>}
{workflow.description && <p className="text-neutral-500 mt-1 text-sm sm:text-base">{workflow.description}</p>}
</div>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)}>
<div className="flex flex-wrap items-center gap-2">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)} className="flex-1 sm:flex-none">
<Settings className="h-4 w-4" />
Settings
<span className="hidden sm:inline">Settings</span>
</Button>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)}>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
<Trash2 className="h-4 w-4" />
Delete
<span className="hidden sm:inline">Delete</span>
</Button>
<Button onClick={handleToggleEnabled}>
<Button onClick={handleToggleEnabled} className="flex-1 sm:flex-none">
{workflow.enabled ? (
<>
<PowerOff className="h-4 w-4" />
Disable
<span className="hidden sm:inline">Disable</span>
<span className="sm:hidden">Off</span>
</>
) : (
<>
<Power className="h-4 w-4" />
Enable
<span className="hidden sm:inline">Enable</span>
<span className="sm:hidden">On</span>
</>
)}
</Button>
@@ -1060,7 +1062,7 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Add Workflow Step</DialogTitle>
</DialogHeader>
@@ -1682,7 +1684,7 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Edit Step</DialogTitle>
<div className="flex items-center gap-2 mt-2">
apps/web/src/pages/workflows/index.tsx
+11 -10
View File
@@ -89,17 +89,18 @@ export default function WorkflowsPage() {
<DashboardLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-neutral-900">Workflows</h1>
<p className="text-neutral-500 mt-2">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1 min-w-0">
<h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Workflows</h1>
<p className="text-neutral-500 mt-2 text-sm sm:text-base">
Automate your email campaigns with powerful workflows.{' '}
{data?.total ? `${data.total} total workflows` : ''}
</p>
</div>
<Button onClick={() => setShowCreateDialog(true)}>
<Button onClick={() => setShowCreateDialog(true)} className="w-full sm:w-auto">
<Plus className="h-4 w-4" />
Create Workflow
<span className="hidden sm:inline">Create Workflow</span>
<span className="sm:hidden">Create</span>
</Button>
</div>
@@ -358,7 +359,7 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle>Create New Workflow</DialogTitle>
</DialogHeader>
@@ -438,11 +439,11 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
<DialogFooter className="flex-col sm:flex-row gap-2">
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting} className="w-full sm:w-auto">
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>
<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
{isSubmitting ? 'Creating...' : 'Create Workflow'}
</Button>
</DialogFooter>