vynte-infra/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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/components/DashboardLayout.tsx
+170 -124
View File
@@ -10,11 +10,13 @@ import {
LayoutDashboard, LayoutDashboard,
LogOut, LogOut,
Megaphone, Megaphone,
Menu,
Plus, Plus,
Settings, Settings,
User, User,
Users, Users,
Workflow, Workflow,
X,
} from 'lucide-react'; } from 'lucide-react';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
@@ -65,6 +67,7 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
const {activeProject, availableProjects, setActiveProject} = useActiveProject(); const {activeProject, availableProjects, setActiveProject} = useActiveProject();
const [showProjectMenu, setShowProjectMenu] = useState(false); const [showProjectMenu, setShowProjectMenu] = useState(false);
const [showUserMenu, setShowUserMenu] = useState(false); const [showUserMenu, setShowUserMenu] = useState(false);
const [showMobileMenu, setShowMobileMenu] = useState(false);
const projectMenuRef = useRef<HTMLDivElement>(null); const projectMenuRef = useRef<HTMLDivElement>(null);
const userMenuRef = useRef<HTMLDivElement>(null); const userMenuRef = useRef<HTMLDivElement>(null);
@@ -128,142 +131,185 @@ export function DashboardLayout({children}: DashboardLayoutProps) {
void handleLogout(); void handleLogout();
}, [handleLogout]); }, [handleLogout]);
// Sidebar content (reusable for both desktop and mobile)
const SidebarContent = () => (
<>
{/* Logo */}
<div className="h-16 flex items-center gap-2 px-6 border-b border-neutral-200">
<Image src="/assets/logo.png" alt="Plunk" width={28} height={28} className="rounded" />
<h1 className="text-xl font-bold text-neutral-900">Plunk</h1>
</div>
{/* Project Switcher */}
<div className="p-4 border-b border-neutral-200">
<div className="relative" ref={projectMenuRef}>
<button
onClick={handleToggleProjectMenu}
className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-neutral-50 transition-colors"
>
<div className="flex items-center gap-2 flex-1 min-w-0">
<div className="h-8 w-8 rounded-lg bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
{activeProject?.name.charAt(0).toUpperCase() || 'P'}
</div>
<span className="font-medium text-neutral-900 truncate">{activeProject?.name || 'Select project'}</span>
</div>
<ChevronDown className="h-4 w-4 text-neutral-500 flex-shrink-0" />
</button>
{/* Project Dropdown */}
{showProjectMenu && (
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
{availableProjects.map(project => (
<button
key={project.id}
onClick={() => {
setActiveProject(project);
setShowProjectMenu(false);
}}
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors"
>
<div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium">
{project.name.charAt(0).toUpperCase()}
</div>
<span className="text-neutral-900">{project.name}</span>
{activeProject?.id === project.id && (
<div className="ml-auto h-1.5 w-1.5 rounded-full bg-neutral-900" />
)}
</button>
))}
<div className="border-t border-neutral-200 my-1" />
<Link
href="/projects/create"
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700"
>
<Plus className="h-4 w-4" />
<span>Create project</span>
</Link>
</div>
)}
</div>
</div>
{/* Navigation */}
<nav className="flex-1 px-3 py-4 overflow-y-auto">
{navigation.map((section, sectionIndex) => (
<div key={sectionIndex} className={sectionIndex > 0 ? 'mt-6' : ''}>
{section.title && (
<p className="px-3 mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider">
{section.title}
</p>
)}
<div className="space-y-1">
{section.items.map(item => {
const isActive = router.pathname === item.href;
const Icon = item.icon;
return (
<Link
key={item.name}
href={item.href}
onClick={() => setShowMobileMenu(false)}
className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 ${
isActive ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
}`}
>
<Icon className="h-5 w-5" />
{item.name}
</Link>
);
})}
</div>
</div>
))}
</nav>
{/* Settings & User Menu */}
<div className="border-t border-neutral-200 p-3 space-y-1">
<Link
href="/settings"
onClick={() => setShowMobileMenu(false)}
className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 ${
router.pathname.startsWith('/settings') ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
}`}
>
<Settings className="h-5 w-5" />
Settings
</Link>
<div className="relative" ref={userMenuRef}>
<button
onClick={handleToggleUserMenu}
className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
>
<User className="h-5 w-5" />
<span className="flex-1 text-left truncate">{user?.email}</span>
<ChevronDown className="h-4 w-4 text-neutral-500" />
</button>
{/* User Dropdown */}
{showUserMenu && (
<div className="absolute bottom-full left-0 right-0 mb-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
<button
onClick={handleLogoutClick}
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-red-600"
>
<LogOut className="h-4 w-4" />
<span>Log out</span>
</button>
</div>
)}
</div>
</div>
</>
);
return ( return (
<div className="flex h-screen bg-neutral-50"> <div className="flex h-screen bg-neutral-50">
{/* Sidebar */} {/* Desktop Sidebar - Hidden on mobile */}
<div className="w-64 bg-white border-r border-neutral-200 flex flex-col"> <div className="hidden lg:flex w-64 bg-white border-r border-neutral-200 flex-col">
{/* Logo */} <SidebarContent />
<div className="h-16 flex items-center gap-2 px-6 border-b border-neutral-200"> </div>
<Image src="/assets/logo.png" alt="Plunk" width={28} height={28} className="rounded" />
<h1 className="text-xl font-bold text-neutral-900">Plunk</h1> {/* Mobile Sidebar Overlay */}
{showMobileMenu && (
<div
className="fixed inset-0 z-40 lg:hidden"
onClick={() => setShowMobileMenu(false)}
>
<div className="absolute inset-0 bg-black/50" />
</div> </div>
)}
{/* Project Switcher */} {/* Mobile Sidebar */}
<div className="p-4 border-b border-neutral-200"> <div
<div className="relative" ref={projectMenuRef}> className={`fixed inset-y-0 left-0 z-50 w-64 bg-white transform transition-transform duration-300 ease-in-out lg:hidden ${
<button showMobileMenu ? 'translate-x-0' : '-translate-x-full'
onClick={handleToggleProjectMenu} }`}
className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-neutral-50 transition-colors" >
> <div className="flex flex-col h-full">
<div className="flex items-center gap-2 flex-1 min-w-0"> <SidebarContent />
<div className="h-8 w-8 rounded-lg bg-neutral-900 text-white flex items-center justify-center text-xs font-medium flex-shrink-0">
{activeProject?.name.charAt(0).toUpperCase() || 'P'}
</div>
<span className="font-medium text-neutral-900 truncate">{activeProject?.name || 'Select project'}</span>
</div>
<ChevronDown className="h-4 w-4 text-neutral-500 flex-shrink-0" />
</button>
{/* Project Dropdown */}
{showProjectMenu && (
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
{availableProjects.map(project => (
<button
key={project.id}
onClick={() => {
setActiveProject(project);
setShowProjectMenu(false);
}}
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors"
>
<div className="h-6 w-6 rounded bg-neutral-900 text-white flex items-center justify-center text-xs font-medium">
{project.name.charAt(0).toUpperCase()}
</div>
<span className="text-neutral-900">{project.name}</span>
{activeProject?.id === project.id && (
<div className="ml-auto h-1.5 w-1.5 rounded-full bg-neutral-900" />
)}
</button>
))}
<div className="border-t border-neutral-200 my-1" />
<Link
href="/projects/create"
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-neutral-700"
>
<Plus className="h-4 w-4" />
<span>Create project</span>
</Link>
</div>
)}
</div>
</div>
{/* Navigation */}
<nav className="flex-1 px-3 py-4 overflow-y-auto">
{navigation.map((section, sectionIndex) => (
<div key={sectionIndex} className={sectionIndex > 0 ? 'mt-6' : ''}>
{section.title && (
<p className="px-3 mb-2 text-xs font-semibold text-neutral-500 uppercase tracking-wider">
{section.title}
</p>
)}
<div className="space-y-1">
{section.items.map(item => {
const isActive = router.pathname === item.href;
const Icon = item.icon;
return (
<Link
key={item.name}
href={item.href}
className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 ${
isActive ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
}`}
>
<Icon className="h-5 w-5" />
{item.name}
</Link>
);
})}
</div>
</div>
))}
</nav>
{/* Settings & User Menu */}
<div className="border-t border-neutral-200 p-3 space-y-1">
<Link
href="/settings"
className={`flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-neutral-700 ${
router.pathname.startsWith('/settings') ? 'bg-neutral-100' : 'hover:bg-neutral-50 hover:text-neutral-900'
}`}
>
<Settings className="h-5 w-5" />
Settings
</Link>
<div className="relative" ref={userMenuRef}>
<button
onClick={handleToggleUserMenu}
className="w-full flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 transition-colors"
>
<User className="h-5 w-5" />
<span className="flex-1 text-left truncate">{user?.email}</span>
<ChevronDown className="h-4 w-4 text-neutral-500" />
</button>
{/* User Dropdown */}
{showUserMenu && (
<div className="absolute bottom-full left-0 right-0 mb-1 bg-white border border-neutral-200 rounded-lg shadow-lg z-50 py-1">
<button
onClick={handleLogoutClick}
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-neutral-50 transition-colors text-red-600"
>
<LogOut className="h-4 w-4" />
<span>Log out</span>
</button>
</div>
)}
</div>
</div> </div>
</div> </div>
{/* Main Content */} {/* Main Content */}
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 flex flex-col overflow-hidden">
{/* Header */} {/* Mobile Header - Only visible on mobile */}
<div className="lg:hidden h-16 bg-white border-b border-neutral-200 flex items-center px-4">
<button
onClick={() => setShowMobileMenu(true)}
className="p-2 rounded-lg hover:bg-neutral-100 transition-colors"
aria-label="Open menu"
>
<Menu className="h-6 w-6 text-neutral-900" />
</button>
<div className="flex items-center gap-2 ml-4">
<Image src="/assets/logo.png" alt="Plunk" width={24} height={24} className="rounded" />
<h1 className="text-lg font-bold text-neutral-900">Plunk</h1>
</div>
</div>
{/* Page Content */} {/* Page Content */}
<main className="flex-1 overflow-y-auto"> <main className="flex-1 overflow-y-auto">
<div className="max-w-7xl mx-auto p-8">{children}</div> <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">{children}</div>
</main> </main>
</div> </div>
</div> </div>
apps/web/src/components/EmailEditor/EmailEditor.tsx
+7 -7
View File
@@ -396,7 +396,7 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
return ( return (
<div className="border border-neutral-200 rounded-lg bg-white"> <div className="border border-neutral-200 rounded-lg bg-white">
{/* Mode toggle */} {/* Mode toggle */}
<div className="border-b border-neutral-200 bg-neutral-50 p-2 flex justify-between items-center"> <div className="border-b border-neutral-200 bg-neutral-50 p-2 flex flex-col sm:flex-row justify-between sm:items-center gap-2">
<div className="flex gap-1"> <div className="flex gap-1">
<Button <Button
type="button" type="button"
@@ -404,8 +404,8 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
size="sm" size="sm"
onClick={() => mode === 'html' && handleModeToggle()} onClick={() => mode === 'html' && handleModeToggle()}
> >
<Eye className="h-4 w-4 mr-2" /> <Eye className="h-4 w-4 sm:mr-2" />
Visual <span className="hidden sm:inline">Visual</span>
</Button> </Button>
<Button <Button
type="button" type="button"
@@ -413,11 +413,11 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
size="sm" size="sm"
onClick={() => mode === 'visual' && handleModeToggle()} onClick={() => mode === 'visual' && handleModeToggle()}
> >
<Code2 className="h-4 w-4 mr-2" /> <Code2 className="h-4 w-4 sm:mr-2" />
HTML <span className="hidden sm:inline">HTML</span>
</Button> </Button>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 flex-1 sm:flex-none">
<Label htmlFor="preview-contact" className="text-xs text-neutral-600 whitespace-nowrap"> <Label htmlFor="preview-contact" className="text-xs text-neutral-600 whitespace-nowrap">
Preview as: Preview as:
</Label> </Label>
@@ -425,7 +425,7 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
value={selectedContactId || 'none'} value={selectedContactId || 'none'}
onValueChange={val => setSelectedContactId(val === 'none' ? '' : val)} onValueChange={val => setSelectedContactId(val === 'none' ? '' : val)}
> >
<SelectTrigger id="preview-contact" className="h-8 w-[200px] text-xs"> <SelectTrigger id="preview-contact" className="h-8 w-full sm:w-[200px] text-xs">
<SelectValue placeholder="Select contact..." /> <SelectValue placeholder="Select contact..." />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
apps/web/src/pages/_document.tsx
+3
View File
@@ -4,6 +4,9 @@ function Document({locale}: {locale: string}) {
return ( return (
<Html lang={locale}> <Html lang={locale}>
<Head> <Head>
{/* Viewport */}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
{/* Primary Meta Tags */} {/* Primary Meta Tags */}
<meta name="title" content="Plunk | Email Platform Dashboard" /> <meta name="title" content="Plunk | Email Platform Dashboard" />
<meta <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"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div> <div>
<h1 className="text-3xl font-bold text-neutral-900">Activity</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Activity</h1>
<p className="text-neutral-500 mt-2"> <p className="text-neutral-500 mt-2 text-sm sm:text-base">
Real-time overview of events, emails, and workflow executions across your project. Real-time overview of events, emails, and workflow executions across your project.
</p> </p>
</div> </div>
apps/web/src/pages/analytics/index.tsx
+5 -5
View File
@@ -211,16 +211,16 @@ export default function AnalyticsPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-start justify-between"> <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div> <div className="flex-1 min-w-0">
<h1 className="text-3xl font-bold text-neutral-900">Analytics</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Analytics</h1>
<p className="text-neutral-500 mt-2"> <p className="text-neutral-500 mt-2 text-sm sm:text-base">
Comprehensive insights into your email performance, engagement metrics, and delivery statistics. Comprehensive insights into your email performance, engagement metrics, and delivery statistics.
</p> </p>
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
<Select value={dateRange} onValueChange={setDateRange}> <Select value={dateRange} onValueChange={setDateRange}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-full sm:w-[180px]">
<SelectValue placeholder="Select period" /> <SelectValue placeholder="Select period" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <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> <DialogHeader>
<DialogTitle>Reset your password</DialogTitle> <DialogTitle>Reset your password</DialogTitle>
<DialogDescription>Enter your email to receive a password reset link.</DialogDescription> <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> <DashboardLayout>
<form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}> <form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="space-y-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<Link href="/campaigns"> <Link href="/campaigns">
<Button type="button" variant="ghost" size="sm"> <Button type="button" variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<div> <div className="flex-1 min-w-0">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3">
<h1 className="text-3xl font-bold text-neutral-900">{c.name}</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
<Badge variant="secondary">Draft</Badge> <Badge variant="secondary">Draft</Badge>
</div> </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> </div>
<div className="flex items-center gap-3"> <div className="flex flex-col sm:flex-row sm:items-center gap-3">
{!hasChanges && !isSubmitting && <span className="text-sm text-neutral-500">All changes saved</span>} <div className="flex-1">
{hasChanges && !isSubmitting && <span className="text-sm text-amber-600">Unsaved changes</span>} {!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"> <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" /> <Trash2 className="h-4 w-4" />
Delete <span className="hidden sm:inline">Delete</span>
</Button> </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" /> <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> </Button>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button type="button"> <Button type="button" className="flex-1 sm:flex-none">
<Send className="h-4 w-4" /> <Send className="h-4 w-4" />
Send <span className="hidden sm:inline">Send</span>
<ChevronDown className="h-4 w-4 ml-1" /> <ChevronDown className="h-4 w-4 sm:ml-1" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
@@ -553,7 +556,7 @@ export default function CampaignDetailsPage() {
{/* Test Email Dialog */} {/* Test Email Dialog */}
<Dialog open={isTestEmailDialogOpen} onOpenChange={setIsTestEmailDialogOpen}> <Dialog open={isTestEmailDialogOpen} onOpenChange={setIsTestEmailDialogOpen}>
<DialogContent className="max-w-lg"> <DialogContent className="sm:max-w-lg">
<DialogHeader> <DialogHeader>
<DialogTitle>Send Test Email</DialogTitle> <DialogTitle>Send Test Email</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -604,7 +607,7 @@ export default function CampaignDetailsPage() {
{/* Schedule Dialog */} {/* Schedule Dialog */}
<Dialog open={isScheduleDialogOpen} onOpenChange={setIsScheduleDialogOpen}> <Dialog open={isScheduleDialogOpen} onOpenChange={setIsScheduleDialogOpen}>
<DialogContent className="max-w-lg"> <DialogContent className="sm:max-w-lg">
<DialogHeader> <DialogHeader>
<DialogTitle>Schedule Campaign</DialogTitle> <DialogTitle>Schedule Campaign</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -742,28 +745,31 @@ export default function CampaignDetailsPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="space-y-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<Link href="/campaigns"> <Link href="/campaigns">
<Button variant="ghost" size="sm"> <Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<div> <div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-2 sm:gap-3 mb-2">
<h1 className="text-3xl font-bold text-neutral-900">{c.name}</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{c.name}</h1>
{getStatusBadge(c.status)} {getStatusBadge(c.status)}
</div> </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>
</div> </div>
{/* Actions */} {/* Actions */}
{(c.status === CampaignStatus.SCHEDULED || c.status === CampaignStatus.SENDING) && ( {(c.status === CampaignStatus.SCHEDULED || c.status === CampaignStatus.SENDING) && (
<Button variant="destructive" onClick={() => setShowCancelDialog(true)}> <div className="flex justify-end">
<XCircle className="h-4 w-4" /> <Button variant="destructive" onClick={() => setShowCancelDialog(true)} className="w-full sm:w-auto">
Cancel Campaign <XCircle className="h-4 w-4" />
</Button> <span className="hidden sm:inline">Cancel Campaign</span>
<span className="sm:hidden">Cancel</span>
</Button>
</div>
)} )}
</div> </div>
apps/web/src/pages/campaigns/create.tsx
+9 -11
View File
@@ -96,17 +96,15 @@ export default function CreateCampaignPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center gap-3 sm:gap-4">
<div className="flex items-center gap-4"> <Link href="/campaigns">
<Link href="/campaigns"> <Button variant="ghost" size="sm">
<Button variant="ghost" size="icon"> <ArrowLeft className="h-4 w-4" />
<ArrowLeft className="h-4 w-4" /> </Button>
</Button> </Link>
</Link> <div className="flex-1 min-w-0">
<div> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Create Campaign</h1>
<h1 className="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>
<p className="text-neutral-500 mt-1">Create a new email campaign to send to your contacts</p>
</div>
</div> </div>
</div> </div>
apps/web/src/pages/campaigns/index.tsx
+8 -7
View File
@@ -109,17 +109,18 @@ export default function CampaignsPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div className="flex-1 min-w-0">
<h1 className="text-3xl font-bold text-neutral-900">Campaigns</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Campaigns</h1>
<p className="text-neutral-500 mt-2"> <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` : ''} Send one-time email broadcasts to your contacts. {data?.total ? `${data.total} total campaigns` : ''}
</p> </p>
</div> </div>
<Link href="/campaigns/create"> <Link href="/campaigns/create" className="w-full sm:w-auto">
<Button> <Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Create Campaign <span className="hidden sm:inline">Create Campaign</span>
<span className="sm:hidden">Create</span>
</Button> </Button>
</Link> </Link>
</div> </div>
apps/web/src/pages/contacts/[id].tsx
+12 -9
View File
@@ -129,18 +129,18 @@ export default function ContactDetailPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="space-y-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<Link href="/contacts"> <Link href="/contacts">
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<div> <div className="flex-1 min-w-0">
<h1 className="text-3xl font-bold text-neutral-900">{contact.email}</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{contact.email}</h1>
<p className="text-neutral-500 mt-1"> <p className="text-neutral-500 mt-1">
<span <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' contact.subscribed ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
}`} }`}
> >
@@ -149,10 +149,13 @@ export default function ContactDetailPage() {
</p> </p>
</div> </div>
</div> </div>
<Button variant="destructive" onClick={() => setShowDeleteDialog(true)}> <div className="flex justify-end">
<Trash2 className="h-4 w-4" /> <Button variant="destructive" onClick={() => setShowDeleteDialog(true)} className="w-full sm:w-auto">
Delete Contact <Trash2 className="h-4 w-4" />
</Button> <span className="hidden sm:inline">Delete Contact</span>
<span className="sm:hidden">Delete</span>
</Button>
</div>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <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> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="space-y-4">
<div> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<h1 className="text-3xl font-bold text-neutral-900">Contacts</h1> <div>
<p className="text-neutral-500 mt-2"> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Contacts</h1>
Manage your email subscribers and their data.{' '} <p className="text-neutral-500 mt-2 text-sm sm:text-base">
{totalCount > 0 ? `${totalCount.toLocaleString()} total contacts` : ''} Manage your email subscribers and their data.{' '}
</p> {totalCount > 0 ? `${totalCount.toLocaleString()} total contacts` : ''}
</div> </p>
<div className="flex gap-2"> </div>
<Button variant="outline" onClick={() => setShowImportDialog(true)}> <div className="flex gap-2">
<Upload className="h-4 w-4" /> <Button variant="outline" onClick={() => setShowImportDialog(true)} className="flex-1 sm:flex-none">
Import CSV <Upload className="h-4 w-4" />
</Button> <span className="hidden sm:inline">Import CSV</span>
<Button onClick={() => setShowCreateDialog(true)}> <span className="sm:hidden">Import</span>
<Plus className="h-4 w-4" /> </Button>
Add Contact <Button onClick={() => setShowCreateDialog(true)} className="flex-1 sm:flex-none">
</Button> <Plus className="h-4 w-4" />
<span className="hidden sm:inline">Add Contact</span>
<span className="sm:hidden">Add</span>
</Button>
</div>
</div> </div>
</div> </div>
@@ -233,7 +237,8 @@ export default function ContactsPage() {
</div> </div>
) : ( ) : (
<> <>
<div className="overflow-x-auto"> {/* Desktop Table View - Hidden on mobile */}
<div className="hidden md:block overflow-x-auto">
<table className="w-full"> <table className="w-full">
<thead className="bg-neutral-50 border-b border-neutral-200"> <thead className="bg-neutral-50 border-b border-neutral-200">
<tr> <tr>
@@ -294,10 +299,53 @@ export default function ContactsPage() {
</table> </table>
</div> </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 */} {/* Pagination Controls */}
{(currentPage > 0 || data?.hasMore) && ( {(currentPage > 0 || data?.hasMore) && (
<div className="flex items-center justify-between mt-6 pt-6 border-t border-neutral-200"> <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-sm text-neutral-600"> <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{' '} 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> <span className="font-medium text-neutral-900">{currentPage * pageSize + contacts.length}</span>
{totalCount > 0 && ( {totalCount > 0 && (
@@ -307,17 +355,23 @@ export default function ContactsPage() {
</> </>
)} )}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2 justify-center sm:justify-end">
<Button <Button
variant="outline" variant="outline"
onClick={handlePreviousPage} onClick={handlePreviousPage}
disabled={currentPage === 0 || isLoading} disabled={currentPage === 0 || isLoading}
className="flex-1 sm:flex-none"
> >
<ChevronLeft className="h-4 w-4" /> <ChevronLeft className="h-4 w-4" />
Previous <span className="hidden sm:inline">Previous</span>
</Button> </Button>
<Button variant="outline" onClick={handleNextPage} disabled={!data?.hasMore || isLoading}> <Button
Next 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" /> <ChevronRight className="h-4 w-4" />
</Button> </Button>
</div> </div>
@@ -626,7 +680,7 @@ function ImportContactsDialog({open, onOpenChange, onSuccess}: ImportContactsDia
return ( return (
<> <>
<Dialog open={open} onOpenChange={handleClose}> <Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="max-w-2xl"> <DialogContent className="sm:max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle>Import Contacts from CSV</DialogTitle> <DialogTitle>Import Contacts from CSV</DialogTitle>
</DialogHeader> </DialogHeader>
apps/web/src/pages/index.tsx
+5 -5
View File
@@ -70,10 +70,10 @@ export default function Index() {
<Alert variant="warning"> <Alert variant="warning">
<AlertCircle className="h-4 w-4" /> <AlertCircle className="h-4 w-4" />
<AlertTitle>Upgrade to remove Plunk branding</AlertTitle> <AlertTitle>Upgrade to remove Plunk branding</AlertTitle>
<AlertDescription className="flex items-center justify-between"> <AlertDescription className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<span>Your emails currently include Plunk branding. Upgrade to a subscription to remove it.</span> <span className="text-sm">Your emails currently include Plunk branding. Upgrade to a subscription to remove it.</span>
<Link href="/settings?tab=billing"> <Link href="/settings?tab=billing">
<Button size="sm">Upgrade Now</Button> <Button size="sm" className="w-full sm:w-auto">Upgrade Now</Button>
</Link> </Link>
</AlertDescription> </AlertDescription>
</Alert> </Alert>
@@ -81,8 +81,8 @@ export default function Index() {
{/* Header */} {/* Header */}
<div> <div>
<h1 className="text-3xl font-bold text-neutral-900">Dashboard</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Dashboard</h1>
<p className="text-neutral-500 mt-2"> <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. Welcome back to {activeProject?.name || 'Plunk'}. Here&apos;s what&apos;s happening with your emails.
</p> </p>
</div> </div>
apps/web/src/pages/segments/index.tsx
+8 -7
View File
@@ -73,17 +73,18 @@ export default function SegmentsPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div className="flex-1 min-w-0">
<h1 className="text-3xl font-bold text-neutral-900">Segments</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Segments</h1>
<p className="text-neutral-500 mt-2"> <p className="text-neutral-500 mt-2 text-sm sm:text-base">
Create dynamic audience groups based on contact attributes and behaviors Create dynamic audience groups based on contact attributes and behaviors
</p> </p>
</div> </div>
<Link href="/segments/new"> <Link href="/segments/new" className="w-full sm:w-auto">
<Button> <Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Create Segment <span className="hidden sm:inline">Create Segment</span>
<span className="sm:hidden">Create</span>
</Button> </Button>
</Link> </Link>
</div> </div>
apps/web/src/pages/templates/[id].tsx
+21 -16
View File
@@ -147,29 +147,34 @@ export default function TemplateEditorPage() {
<DashboardLayout> <DashboardLayout>
<form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}> <form onSubmit={handleSave} className={`space-y-6 ${hasChanges ? 'pb-32' : ''}`}>
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="space-y-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<Link href="/templates"> <Link href="/templates">
<Button type="button" variant="ghost" size="sm"> <Button type="button" variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<div> <div className="flex-1 min-w-0">
<h1 className="text-3xl font-bold text-neutral-900">Edit Template</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Edit Template</h1>
<p className="text-neutral-500 mt-1">Make changes to your email template</p> <p className="text-neutral-500 mt-1 text-sm sm:text-base">Make changes to your email template</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex flex-col sm:flex-row sm:items-center gap-3">
{!hasChanges && !isSubmitting && <span className="text-sm text-neutral-500">All changes saved</span>} <div className="flex-1">
{hasChanges && !isSubmitting && <span className="text-sm text-amber-600">Unsaved changes</span>} {!hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-neutral-500">All changes saved</span>}
<Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)}> {hasChanges && !isSubmitting && <span className="text-xs sm:text-sm text-amber-600">Unsaved changes</span>}
<Trash2 className="h-4 w-4" /> </div>
Delete <div className="flex items-center gap-2">
</Button> <Button type="button" variant="destructive" onClick={() => setShowDeleteDialog(true)} className="flex-1 sm:flex-none">
<Button type="submit" disabled={!hasChanges || isSubmitting}> <Trash2 className="h-4 w-4" />
<Save className="h-4 w-4" /> <span className="hidden sm:inline">Delete</span>
{isSubmitting ? 'Saving...' : 'Save Changes'} </Button>
</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>
</div> </div>
apps/web/src/pages/templates/create.tsx
+17 -12
View File
@@ -77,20 +77,25 @@ export default function CreateTemplatePage() {
<DashboardLayout> <DashboardLayout>
<div className="max-w-5xl mx-auto space-y-6"> <div className="max-w-5xl mx-auto space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center gap-4"> <div className="space-y-4">
<Link href="/templates"> <div className="flex items-center gap-3 sm:gap-4">
<Button variant="ghost" size="icon"> <Link href="/templates">
<ArrowLeft className="h-4 w-4" /> <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> </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> </div>
<Button onClick={handleSubmit} disabled={saving}>
<Save className="h-4 w-4" />
{saving ? 'Creating...' : 'Create Template'}
</Button>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-6"> <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> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div className="flex-1 min-w-0">
<h1 className="text-3xl font-bold text-neutral-900">Email Templates</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Email Templates</h1>
<p className="text-neutral-500 mt-2"> <p className="text-neutral-500 mt-2 text-sm sm:text-base">
Create and manage reusable email templates for your campaigns and workflows.{' '} Create and manage reusable email templates for your campaigns and workflows.{' '}
{data?.total ? `${data.total} total templates` : ''} {data?.total ? `${data.total} total templates` : ''}
</p> </p>
</div> </div>
<Link href="/templates/create"> <Link href="/templates/create" className="w-full sm:w-auto">
<Button> <Button className="w-full sm:w-auto">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Create Template <span className="hidden sm:inline">Create Template</span>
<span className="sm:hidden">Create</span>
</Button> </Button>
</Link> </Link>
</div> </div>
apps/web/src/pages/workflows/[id].tsx
+23 -21
View File
@@ -383,56 +383,58 @@ export default function WorkflowEditorPage() {
<DashboardLayout> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="space-y-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3 sm:gap-4">
<Link href="/workflows"> <Link href="/workflows">
<Button variant="ghost" size="sm"> <Button variant="ghost" size="sm">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<div> <div className="flex-1 min-w-0">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3">
<h1 className="text-3xl font-bold text-neutral-900">{workflow.name}</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900 truncate">{workflow.name}</h1>
<span <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 ? 'bg-green-100 text-green-800' : 'bg-neutral-100 text-neutral-800'
}`} }`}
> >
{workflow.enabled ? ( {workflow.enabled ? (
<> <>
<Power className="h-3 w-3 mr-1" /> <Power className="h-3 w-3 sm:mr-1" />
Active <span className="hidden sm:inline">Active</span>
</> </>
) : ( ) : (
<> <>
<PowerOff className="h-3 w-3 mr-1" /> <PowerOff className="h-3 w-3 sm:mr-1" />
Disabled <span className="hidden sm:inline">Disabled</span>
</> </>
)} )}
</span> </span>
</div> </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> </div>
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Button variant="outline" onClick={() => setShowSettingsDialog(true)}> <Button variant="outline" onClick={() => setShowSettingsDialog(true)} className="flex-1 sm:flex-none">
<Settings className="h-4 w-4" /> <Settings className="h-4 w-4" />
Settings <span className="hidden sm:inline">Settings</span>
</Button> </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" /> <Trash2 className="h-4 w-4" />
Delete <span className="hidden sm:inline">Delete</span>
</Button> </Button>
<Button onClick={handleToggleEnabled}> <Button onClick={handleToggleEnabled} className="flex-1 sm:flex-none">
{workflow.enabled ? ( {workflow.enabled ? (
<> <>
<PowerOff className="h-4 w-4" /> <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" /> <Power className="h-4 w-4" />
Enable <span className="hidden sm:inline">Enable</span>
<span className="sm:hidden">On</span>
</> </>
)} )}
</Button> </Button>
@@ -1060,7 +1062,7 @@ function AddStepDialog({open, onOpenChange, workflowId, onSuccess}: AddStepDialo
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <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> <DialogHeader>
<DialogTitle>Add Workflow Step</DialogTitle> <DialogTitle>Add Workflow Step</DialogTitle>
</DialogHeader> </DialogHeader>
@@ -1682,7 +1684,7 @@ function EditStepDialog({step, workflowId, open, onOpenChange, onSuccess}: EditS
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <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> <DialogHeader>
<DialogTitle>Edit Step</DialogTitle> <DialogTitle>Edit Step</DialogTitle>
<div className="flex items-center gap-2 mt-2"> <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> <DashboardLayout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div className="flex-1 min-w-0">
<h1 className="text-3xl font-bold text-neutral-900">Workflows</h1> <h1 className="text-2xl sm:text-3xl font-bold text-neutral-900">Workflows</h1>
<p className="text-neutral-500 mt-2"> <p className="text-neutral-500 mt-2 text-sm sm:text-base">
Automate your email campaigns with powerful workflows.{' '} Automate your email campaigns with powerful workflows.{' '}
{data?.total ? `${data.total} total workflows` : ''} {data?.total ? `${data.total} total workflows` : ''}
</p> </p>
</div> </div>
<Button onClick={() => setShowCreateDialog(true)}> <Button onClick={() => setShowCreateDialog(true)} className="w-full sm:w-auto">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Create Workflow <span className="hidden sm:inline">Create Workflow</span>
<span className="sm:hidden">Create</span>
</Button> </Button>
</div> </div>
@@ -358,7 +359,7 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent className="sm:max-w-[500px]">
<DialogHeader> <DialogHeader>
<DialogTitle>Create New Workflow</DialogTitle> <DialogTitle>Create New Workflow</DialogTitle>
</DialogHeader> </DialogHeader>
@@ -438,11 +439,11 @@ function CreateWorkflowDialog({open, onOpenChange, onSuccess}: CreateWorkflowDia
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter className="flex-col sm:flex-row gap-2">
<Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}> <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting} className="w-full sm:w-auto">
Cancel Cancel
</Button> </Button>
<Button type="submit" disabled={isSubmitting}> <Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
{isSubmitting ? 'Creating...' : 'Create Workflow'} {isSubmitting ? 'Creating...' : 'Create Workflow'}
</Button> </Button>
</DialogFooter> </DialogFooter>
packages/ui/src/components/atoms/Dialog.tsx
+3 -3
View File
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg', 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg max-h-[90vh] overflow-y-auto mx-4 sm:mx-0',
className, className,
)} )}
{...props} {...props}
> >
{children} {children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 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"> <DialogPrimitive.Close className="absolute right-3 top-3 sm:right-4 sm:top-4 rounded-sm opacity-70 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 sm:p-0">
<X className="h-4 w-4" /> <X className="h-5 w-5 sm:h-4 sm:w-4" />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>
packages/ui/src/components/atoms/Select.tsx
+2 -1
View File
@@ -72,6 +72,7 @@ const SelectContent = React.forwardRef<
className, className,
)} )}
position={position} position={position}
sideOffset={4}
{...props} {...props}
> >
<SelectScrollUpButton /> <SelectScrollUpButton />
@@ -79,7 +80,7 @@ const SelectContent = React.forwardRef<
className={cn( className={cn(
'p-1', 'p-1',
position === 'popper' && position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]', 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] max-w-[calc(100vw-2rem)]',
)} )}
> >
{children} {children}