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 */}
{showCompose && (
<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 */}
<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>
<Button
variant="ghost"
@ -1089,7 +1089,6 @@ export default function MailPage() {
className="hover:bg-gray-100 rounded-full"
onClick={() => {
setShowCompose(false);
// Clear form
setComposeTo('');
setComposeCc('');
setComposeBcc('');
@ -1103,102 +1102,100 @@ export default function MailPage() {
</Button>
</div>
{/* Modal Body */}
<div className="flex-1 p-6 overflow-y-auto bg-white/95">
<div className="space-y-5">
{/* Modal Body - Make it scrollable */}
<div className="flex-1 overflow-y-auto">
<div className="p-6 space-y-4">
{/* To Field */}
<div className="space-y-2">
<div>
<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"
className="w-full mt-1 bg-white border-gray-300"
/>
</div>
{/* CC/BCC Toggle Buttons */}
<div className="flex items-center gap-3">
<Button
variant="ghost"
size="sm"
className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
<div className="flex items-center gap-4">
<button
type="button"
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
onClick={() => setShowCc(!showCc)}
>
{showCc ? 'Hide Cc' : 'Add Cc'}
</Button>
<Button
variant="ghost"
size="sm"
className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
</button>
<button
type="button"
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
onClick={() => setShowBcc(!showBcc)}
>
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
</Button>
</button>
</div>
{/* CC Field */}
{showCc && (
<div className="space-y-2">
<div>
<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"
className="w-full mt-1 bg-white border-gray-300"
/>
</div>
)}
{/* BCC Field */}
{showBcc && (
<div className="space-y-2">
<div>
<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"
className="w-full mt-1 bg-white border-gray-300"
/>
</div>
)}
{/* Subject Field */}
<div className="space-y-2">
<div>
<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"
className="w-full mt-1 bg-white border-gray-300"
/>
</div>
{/* Message Body */}
<div className="space-y-2">
<div>
<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-[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>
{/* Modal Footer */}
<div className="flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50">
{/* Modal Footer - Fixed at bottom */}
<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">
<Button
variant="outline"
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" />
</Button>
@ -1206,13 +1203,13 @@ export default function MailPage() {
<div className="flex items-center gap-3">
<Button
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)}
>
Cancel
</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 () => {
try {
await fetch('/api/mail/send', {