feat: dark mode for all pages, calendar view for events
This commit is contained in:
@@ -66,8 +66,8 @@ export default function EmailsPage() {
|
||||
<div className="max-w-4xl mx-auto space-y-5 animate-fade-in">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Emails</h1>
|
||||
<p className="text-slate-500 text-sm mt-1">AI-generated emails for your network</p>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Emails</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1">AI-generated emails for your network</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCompose(true)}
|
||||
@@ -87,8 +87,8 @@ export default function EmailsPage() {
|
||||
className={cn(
|
||||
'px-3 py-1.5 rounded-full text-sm font-medium transition-colors',
|
||||
statusFilter === key
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300'
|
||||
: 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600'
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
@@ -107,22 +107,22 @@ export default function EmailsPage() {
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{filtered.map((email) => (
|
||||
<div key={email.id} className="bg-white border border-slate-200 rounded-xl p-5">
|
||||
<div key={email.id} className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5">
|
||||
{editingEmail === email.id ? (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
value={editSubject}
|
||||
onChange={(e) => setEditSubject(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg text-sm font-medium text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<textarea
|
||||
value={editContent}
|
||||
onChange={(e) => setEditContent(e.target.value)}
|
||||
rows={8}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
|
||||
/>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button onClick={() => setEditingEmail(null)} className="px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100 rounded-lg">Cancel</button>
|
||||
<button onClick={() => setEditingEmail(null)} className="px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg">Cancel</button>
|
||||
<button onClick={saveEdit} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,28 +133,28 @@ export default function EmailsPage() {
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<EmailStatusBadge status={email.status} />
|
||||
{email.client && (
|
||||
<span className="text-xs text-slate-500">
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
To: {email.client.firstName} {email.client.lastName}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-slate-400">{formatDate(email.createdAt)}</span>
|
||||
<span className="text-xs text-slate-400 dark:text-slate-500">{formatDate(email.createdAt)}</span>
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-900 mb-2">{email.subject}</h3>
|
||||
<p className="text-sm text-slate-600 whitespace-pre-wrap line-clamp-4">{email.content}</p>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-2">{email.subject}</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-300 whitespace-pre-wrap line-clamp-4">{email.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4 pt-3 border-t border-slate-100">
|
||||
<div className="flex gap-2 mt-4 pt-3 border-t border-slate-100 dark:border-slate-700">
|
||||
{email.status === 'draft' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => startEdit(email)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
|
||||
>
|
||||
<Edit3 className="w-3.5 h-3.5" /> Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => { await sendEmail(email.id); }}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-50 text-blue-700 hover:bg-blue-100 rounded-lg transition-colors"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50 rounded-lg transition-colors"
|
||||
>
|
||||
<Send className="w-3.5 h-3.5" /> Send
|
||||
</button>
|
||||
@@ -162,7 +162,7 @@ export default function EmailsPage() {
|
||||
)}
|
||||
<button
|
||||
onClick={async () => { if (confirm('Delete this email?')) await deleteEmail(email.id); }}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors ml-auto"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-slate-400 dark:text-slate-500 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors ml-auto"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" /> Delete
|
||||
</button>
|
||||
@@ -178,11 +178,11 @@ export default function EmailsPage() {
|
||||
<Modal isOpen={showCompose} onClose={() => setShowCompose(false)} title="Generate Email" size="md">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Client *</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Client *</label>
|
||||
<select
|
||||
value={composeForm.clientId}
|
||||
onChange={(e) => setComposeForm({ ...composeForm, clientId: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select a client...</option>
|
||||
{clients.map((c) => (
|
||||
@@ -191,21 +191,21 @@ export default function EmailsPage() {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Purpose</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Purpose</label>
|
||||
<textarea
|
||||
value={composeForm.purpose}
|
||||
onChange={(e) => setComposeForm({ ...composeForm, purpose: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="What's this email about?"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Provider</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Provider</label>
|
||||
<select
|
||||
value={composeForm.provider}
|
||||
onChange={(e) => setComposeForm({ ...composeForm, provider: e.target.value as any })}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="anthropic">Anthropic (Claude)</option>
|
||||
<option value="openai">OpenAI (GPT)</option>
|
||||
@@ -223,7 +223,7 @@ export default function EmailsPage() {
|
||||
<button
|
||||
onClick={handleGenerateBirthday}
|
||||
disabled={!composeForm.clientId || isGenerating}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-pink-50 text-pink-700 rounded-lg text-sm font-medium hover:bg-pink-100 disabled:opacity-50 transition-colors"
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-pink-50 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300 rounded-lg text-sm font-medium hover:bg-pink-100 dark:hover:bg-pink-900/50 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
<Gift className="w-4 h-4" />
|
||||
Birthday
|
||||
|
||||
Reference in New Issue
Block a user