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

mail page ui correction maj compose 7

Browse Source
This commit is contained in:
alma 2025-04-16 12:20:23 +02:00
parent 53ced596dc
commit 9ef663c35e
1 changed files with 29 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/mail/page.tsx
View File

@ -1079,9 +1079,9 @@ export default function MailPage() {
{/* Compose Email Modal - Updated Design */} {/* Compose Email Modal - Updated Design */}
{showCompose && ( {showCompose && (
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center"> <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"> <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
{/* Modal Header */} {/* Modal Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-white"> <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900">New Message</h3> <h3 className="text-lg font-semibold text-gray-900">New Message</h3>
<Button <Button
variant="ghost" variant="ghost"
@ -1089,7 +1089,6 @@ export default function MailPage() {
className="hover:bg-gray-100 rounded-full" className="hover:bg-gray-100 rounded-full"
onClick={() => { onClick={() => {
setShowCompose(false); setShowCompose(false);
// Clear form
setComposeTo(''); setComposeTo('');
setComposeCc(''); setComposeCc('');
setComposeBcc(''); setComposeBcc('');
@ -1103,102 +1102,100 @@ export default function MailPage() {
</Button> </Button>
</div> </div>
{/* Modal Body */} {/* Modal Body - Make it scrollable */}
<div className="flex-1 p-6 overflow-y-auto bg-white/95"> <div className="flex-1 overflow-y-auto">
<div className="space-y-5"> <div className="p-6 space-y-4">
{/* To Field */} {/* To Field */}
<div className="space-y-2"> <div>
<Label htmlFor="to" className="text-sm font-medium text-gray-700">To</Label> <Label htmlFor="to" className="text-sm font-medium text-gray-700">To</Label>
<Input <Input
id="to" id="to"
value={composeTo} value={composeTo}
onChange={(e) => setComposeTo(e.target.value)} onChange={(e) => setComposeTo(e.target.value)}
placeholder="recipient@example.com" placeholder="recipient@example.com"
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md" className="w-full mt-1 bg-white border-gray-300"
/> />
</div> </div>
{/* CC/BCC Toggle Buttons */} {/* CC/BCC Toggle Buttons */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-4">
<Button <button
variant="ghost" type="button"
size="sm" className="text-blue-600 hover:text-blue-700 text-sm font-medium"
className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
onClick={() => setShowCc(!showCc)} onClick={() => setShowCc(!showCc)}
> >
{showCc ? 'Hide Cc' : 'Add Cc'} {showCc ? 'Hide Cc' : 'Add Cc'}
</Button> </button>
<Button <button
variant="ghost" type="button"
size="sm" className="text-blue-600 hover:text-blue-700 text-sm font-medium"
className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
onClick={() => setShowBcc(!showBcc)} onClick={() => setShowBcc(!showBcc)}
> >
{showBcc ? 'Hide Bcc' : 'Add Bcc'} {showBcc ? 'Hide Bcc' : 'Add Bcc'}
</Button> </button>
</div> </div>
{/* CC Field */} {/* CC Field */}
{showCc && ( {showCc && (
<div className="space-y-2"> <div>
<Label htmlFor="cc" className="text-sm font-medium text-gray-700">Cc</Label> <Label htmlFor="cc" className="text-sm font-medium text-gray-700">Cc</Label>
<Input <Input
id="cc" id="cc"
value={composeCc} value={composeCc}
onChange={(e) => setComposeCc(e.target.value)} onChange={(e) => setComposeCc(e.target.value)}
placeholder="cc@example.com" placeholder="cc@example.com"
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md" className="w-full mt-1 bg-white border-gray-300"
/> />
</div> </div>
)} )}
{/* BCC Field */} {/* BCC Field */}
{showBcc && ( {showBcc && (
<div className="space-y-2"> <div>
<Label htmlFor="bcc" className="text-sm font-medium text-gray-700">Bcc</Label> <Label htmlFor="bcc" className="text-sm font-medium text-gray-700">Bcc</Label>
<Input <Input
id="bcc" id="bcc"
value={composeBcc} value={composeBcc}
onChange={(e) => setComposeBcc(e.target.value)} onChange={(e) => setComposeBcc(e.target.value)}
placeholder="bcc@example.com" placeholder="bcc@example.com"
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md" className="w-full mt-1 bg-white border-gray-300"
/> />
</div> </div>
)} )}
{/* Subject Field */} {/* Subject Field */}
<div className="space-y-2"> <div>
<Label htmlFor="subject" className="text-sm font-medium text-gray-700">Subject</Label> <Label htmlFor="subject" className="text-sm font-medium text-gray-700">Subject</Label>
<Input <Input
id="subject" id="subject"
value={composeSubject} value={composeSubject}
onChange={(e) => setComposeSubject(e.target.value)} onChange={(e) => setComposeSubject(e.target.value)}
placeholder="Enter subject" placeholder="Enter subject"
className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md" className="w-full mt-1 bg-white border-gray-300"
/> />
</div> </div>
{/* Message Body */} {/* Message Body */}
<div className="space-y-2"> <div>
<Label htmlFor="message" className="text-sm font-medium text-gray-700">Message</Label> <Label htmlFor="message" className="text-sm font-medium text-gray-700">Message</Label>
<Textarea <Textarea
id="message" id="message"
value={composeBody} value={composeBody}
onChange={(e) => setComposeBody(e.target.value)} onChange={(e) => setComposeBody(e.target.value)}
placeholder="Write your message..." placeholder="Write your message..."
className="min-h-[300px] w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md resize-none" className="w-full mt-1 min-h-[200px] bg-white border-gray-300 resize-none"
/> />
</div> </div>
</div> </div>
</div> </div>
{/* Modal Footer */} {/* Modal Footer - Fixed at bottom */}
<div className="flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50"> <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
className="rounded-full hover:bg-gray-100 border-gray-200" className="rounded-full hover:bg-gray-100 border-gray-300"
> >
<Paperclip className="h-4 w-4 text-gray-600" /> <Paperclip className="h-4 w-4 text-gray-600" />
</Button> </Button>
@ -1206,13 +1203,13 @@ export default function MailPage() {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button <Button
variant="ghost" variant="ghost"
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100 px-4" className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
onClick={() => setShowCompose(false)} onClick={() => setShowCompose(false)}
> >
Cancel Cancel
</Button> </Button>
<Button <Button
className="bg-blue-600 text-white hover:bg-blue-700 px-4" className="bg-blue-600 text-white hover:bg-blue-700"
onClick={async () => { onClick={async () => {
try { try {
await fetch('/api/mail/send', { await fetch('/api/mail/send', {