alma/NeahFront9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mail page ui correction maj compose 6

Browse Source
This commit is contained in:
alma 2025-04-16 12:15:52 +02:00
parent bc4e119d7e
commit 53ced596dc
1 changed files with 52 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
app/mail/page.tsx
View File

@ -1076,18 +1076,20 @@ export default function MailPage() {
</div>
</div>
{/* Compose Email Modal */}
{/* Compose Email Modal - Updated Design */}
{showCompose && (
<div className="fixed inset-0 bg-black/50 z-50">
<div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
<div className="flex items-center justify-between p-4 border-b border-gray-200">
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
<div className="w-full max-w-3xl bg-white rounded-xl shadow-xl flex flex-col mx-4 overflow-hidden">
{/* Modal Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-white">
<h3 className="text-lg font-semibold text-gray-900">New Message</h3>
<Button
variant="ghost"
size="icon"
className="hover:bg-gray-100 rounded-full"
onClick={() => {
setShowCompose(false);
// Clear form data
// Clear form
setComposeTo('');
setComposeCc('');
setComposeBcc('');
@ -1097,105 +1099,122 @@ export default function MailPage() {
setShowBcc(false);
}}
>
<X className="h-5 w-5" />
<X className="h-5 w-5 text-gray-500" />
</Button>
</div>
<div className="flex-1 p-4 overflow-y-auto">
<div className="space-y-4">
<div>
<Label htmlFor="to">To</Label>
{/* Modal Body */}
<div className="flex-1 p-6 overflow-y-auto bg-white/95">
<div className="space-y-5">
{/* To Field */}
<div className="space-y-2">
<Label htmlFor="to" className="text-sm font-medium text-gray-700">To</Label>
<Input
id="to"
value={composeTo}
onChange={(e) => setComposeTo(e.target.value)}
placeholder="recipient@example.com"
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
/>
</div>
<div className="flex items-center gap-2">
{/* CC/BCC Toggle Buttons */}
<div className="flex items-center gap-3">
<Button
variant="ghost"
size="sm"
className="text-gray-500"
className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
onClick={() => setShowCc(!showCc)}
>
{showCc ? 'Hide Cc' : 'Show Cc'}
{showCc ? 'Hide Cc' : 'Add Cc'}
</Button>
<Button
variant="ghost"
size="sm"
className="text-gray-500"
className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
onClick={() => setShowBcc(!showBcc)}
>
{showBcc ? 'Hide Bcc' : 'Show Bcc'}
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
</Button>
</div>
{/* CC Field */}
{showCc && (
<div>
<Label htmlFor="cc">Cc</Label>
<div className="space-y-2">
<Label htmlFor="cc" className="text-sm font-medium text-gray-700">Cc</Label>
<Input
id="cc"
value={composeCc}
onChange={(e) => setComposeCc(e.target.value)}
placeholder="cc@example.com"
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
/>
</div>
)}
{/* BCC Field */}
{showBcc && (
<div>
<Label htmlFor="bcc">Bcc</Label>
<div className="space-y-2">
<Label htmlFor="bcc" className="text-sm font-medium text-gray-700">Bcc</Label>
<Input
id="bcc"
value={composeBcc}
onChange={(e) => setComposeBcc(e.target.value)}
placeholder="bcc@example.com"
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
/>
</div>
)}
<div>
<Label htmlFor="subject">Subject</Label>
{/* Subject Field */}
<div className="space-y-2">
<Label htmlFor="subject" className="text-sm font-medium text-gray-700">Subject</Label>
<Input
id="subject"
value={composeSubject}
onChange={(e) => setComposeSubject(e.target.value)}
placeholder="Enter subject"
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
/>
</div>
<div>
<Label htmlFor="message">Message</Label>
{/* Message Body */}
<div className="space-y-2">
<Label htmlFor="message" className="text-sm font-medium text-gray-700">Message</Label>
<Textarea
id="message"
value={composeBody}
onChange={(e) => setComposeBody(e.target.value)}
placeholder="Write your message..."
className="min-h-[200px]"
className="min-h-[300px] w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md resize-none"
/>
</div>
</div>
</div>
<div className="flex items-center justify-between p-4 border-t border-gray-200">
<div className="flex items-center gap-2">
<Button variant="outline" size="icon">
<Paperclip className="h-4 w-4" />
</Button>
</div>
{/* Modal Footer */}
<div className="flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50">
<div className="flex items-center gap-2">
<Button
variant="outline"
size="icon"
className="rounded-full hover:bg-gray-100 border-gray-200"
>
<Paperclip className="h-4 w-4 text-gray-600" />
</Button>
</div>
<div className="flex items-center gap-3">
<Button
variant="ghost"
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100 px-4"
onClick={() => setShowCompose(false)}
>
Cancel
</Button>
<Button
className="bg-blue-600 text-white hover:bg-blue-700 px-4"
onClick={async () => {
try {
// Implement your send email logic here
await fetch('/api/mail/send', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },