mail page fix design dang
This commit is contained in:
parent
6e1fa0ddec
commit
8747c1cab6
@ -185,9 +185,9 @@ export default function ComposeEmail({
|
||||
|
||||
return (
|
||||
<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 */}
|
||||
<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">
|
||||
{replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
|
||||
</h3>
|
||||
@ -203,9 +203,9 @@ export default function ComposeEmail({
|
||||
|
||||
{/* Modal Body */}
|
||||
<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 */}
|
||||
<div>
|
||||
<div className="flex-none">
|
||||
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
||||
<Input
|
||||
id="to"
|
||||
@ -217,7 +217,7 @@ export default function ComposeEmail({
|
||||
</div>
|
||||
|
||||
{/* CC/BCC Toggle Buttons */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex-none flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||
@ -236,7 +236,7 @@ export default function ComposeEmail({
|
||||
|
||||
{/* CC Field */}
|
||||
{showCc && (
|
||||
<div>
|
||||
<div className="flex-none">
|
||||
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
||||
<Input
|
||||
id="cc"
|
||||
@ -250,7 +250,7 @@ export default function ComposeEmail({
|
||||
|
||||
{/* BCC Field */}
|
||||
{showBcc && (
|
||||
<div>
|
||||
<div className="flex-none">
|
||||
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
|
||||
<Input
|
||||
id="bcc"
|
||||
@ -263,7 +263,7 @@ export default function ComposeEmail({
|
||||
)}
|
||||
|
||||
{/* Subject Field */}
|
||||
<div>
|
||||
<div className="flex-none">
|
||||
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
|
||||
<Input
|
||||
id="subject"
|
||||
@ -274,9 +274,9 @@ export default function ComposeEmail({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Original Email Content Preview */}
|
||||
{/* Original Email Content Preview - Move it above the message body */}
|
||||
{(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">
|
||||
<h4 className="text-sm font-medium text-gray-700">
|
||||
{forwardFrom ? 'Forwarded Message' : 'Original Message'}
|
||||
@ -290,26 +290,26 @@ export default function ComposeEmail({
|
||||
)}
|
||||
|
||||
{/* Message Body */}
|
||||
<div className="flex-1">
|
||||
<Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
|
||||
<div className="flex-1 min-h-[200px] flex flex-col">
|
||||
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
|
||||
<div
|
||||
ref={composeBodyRef}
|
||||
contentEditable
|
||||
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"
|
||||
style={{
|
||||
minHeight: '200px',
|
||||
direction: 'ltr'
|
||||
}}
|
||||
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={{ direction: 'ltr' }}
|
||||
dir="ltr"
|
||||
spellCheck="true"
|
||||
role="textbox"
|
||||
aria-multiline="true"
|
||||
tabIndex={0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{/* File Input for Attachments */}
|
||||
<input
|
||||
|
||||
Loading…
Reference in New Issue
Block a user