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

mail page fix design dang

Browse Source
This commit is contained in:
alma 2025-04-21 22:29:12 +02:00
parent 6e1fa0ddec
commit 8747c1cab6
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/ComposeEmail.tsx
View File

@ -185,9 +185,9 @@ export default function ComposeEmail({
return ( return (
<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-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4"> <div className="w-full max-w-2xl h-[90vh] 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-3 border-b border-gray-200"> <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900"> <h3 className="text-lg font-semibold text-gray-900">
{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'} {replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
</h3> </h3>
@ -203,9 +203,9 @@ export default function ComposeEmail({
{/* Modal Body */} {/* Modal Body */}
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-hidden">
<div className="p-6 space-y-4 h-full flex flex-col"> <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
{/* To Field */} {/* To Field */}
<div> <div className="flex-none">
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label> <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
<Input <Input
id="to" id="to"
@ -217,7 +217,7 @@ export default function ComposeEmail({
</div> </div>
{/* CC/BCC Toggle Buttons */} {/* CC/BCC Toggle Buttons */}
<div className="flex items-center gap-4"> <div className="flex-none flex items-center gap-4">
<button <button
type="button" type="button"
className="text-blue-600 hover:text-blue-700 text-sm font-medium" className="text-blue-600 hover:text-blue-700 text-sm font-medium"
@ -236,7 +236,7 @@ export default function ComposeEmail({
{/* CC Field */} {/* CC Field */}
{showCc && ( {showCc && (
<div> <div className="flex-none">
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label> <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
<Input <Input
id="cc" id="cc"
@ -250,7 +250,7 @@ export default function ComposeEmail({
{/* BCC Field */} {/* BCC Field */}
{showBcc && ( {showBcc && (
<div> <div className="flex-none">
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label> <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
<Input <Input
id="bcc" id="bcc"
@ -263,7 +263,7 @@ export default function ComposeEmail({
)} )}
{/* Subject Field */} {/* Subject Field */}
<div> <div className="flex-none">
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label> <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
<Input <Input
id="subject" id="subject"
@ -274,9 +274,9 @@ export default function ComposeEmail({
/> />
</div> </div>
{/* Original Email Content Preview */} {/* Original Email Content Preview - Move it above the message body */}
{(replyTo || forwardFrom) && ( {(replyTo || forwardFrom) && (
<div className="border rounded-md p-4 bg-gray-50"> <div className="flex-none border rounded-md p-4 bg-gray-50">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h4 className="text-sm font-medium text-gray-700"> <h4 className="text-sm font-medium text-gray-700">
{forwardFrom ? 'Forwarded Message' : 'Original Message'} {forwardFrom ? 'Forwarded Message' : 'Original Message'}
@ -290,26 +290,26 @@ export default function ComposeEmail({
)} )}
{/* Message Body */} {/* Message Body */}
<div className="flex-1"> <div className="flex-1 min-h-[200px] flex flex-col">
<Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label> <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
<div <div
ref={composeBodyRef} ref={composeBodyRef}
contentEditable contentEditable
onInput={handleInput} onInput={handleInput}
className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto" className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
style={{ style={{ direction: 'ltr' }}
minHeight: '200px',
direction: 'ltr'
}}
dir="ltr" dir="ltr"
spellCheck="true" spellCheck="true"
role="textbox"
aria-multiline="true"
tabIndex={0}
/> />
</div> </div>
</div> </div>
</div> </div>
{/* Modal Footer */} {/* Modal Footer */}
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white"> <div className="flex-none 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">
{/* File Input for Attachments */} {/* File Input for Attachments */}
<input <input