courrier preview
This commit is contained in:
parent
022d37f1be
commit
d6e3acd17a
@ -195,53 +195,53 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full max-h-[80vh]">
|
||||
<div className="flex flex-col h-full max-h-[80vh] bg-white border rounded-md shadow-md">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h2 className="text-lg font-medium">{getComposeTitle()}</h2>
|
||||
<div className="flex items-center justify-between p-4 border-b bg-gray-50">
|
||||
<h2 className="text-lg font-medium text-gray-800">{getComposeTitle()}</h2>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<X className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Email Form */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="flex-1 overflow-y-auto bg-white">
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Recipients */}
|
||||
<div className="border-b pb-2">
|
||||
<div className="flex items-center mb-2">
|
||||
<span className="w-16 text-gray-500">To:</span>
|
||||
<span className="w-16 text-gray-700 font-medium">To:</span>
|
||||
<Input
|
||||
type="text"
|
||||
value={to}
|
||||
onChange={(e) => setTo(e.target.value)}
|
||||
placeholder="recipient@example.com"
|
||||
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
|
||||
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showCc && (
|
||||
<div className="flex items-center mb-2">
|
||||
<span className="w-16 text-gray-500">Cc:</span>
|
||||
<span className="w-16 text-gray-700 font-medium">Cc:</span>
|
||||
<Input
|
||||
type="text"
|
||||
value={cc}
|
||||
onChange={(e) => setCc(e.target.value)}
|
||||
placeholder="cc@example.com"
|
||||
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
|
||||
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showBcc && (
|
||||
<div className="flex items-center mb-2">
|
||||
<span className="w-16 text-gray-500">Bcc:</span>
|
||||
<span className="w-16 text-gray-700 font-medium">Bcc:</span>
|
||||
<Input
|
||||
type="text"
|
||||
value={bcc}
|
||||
onChange={(e) => setBcc(e.target.value)}
|
||||
placeholder="bcc@example.com"
|
||||
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
|
||||
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -250,7 +250,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
<div className="flex gap-3 ml-16 mb-1">
|
||||
{!showCc && (
|
||||
<button
|
||||
className="text-blue-600 text-sm"
|
||||
className="text-blue-600 text-sm hover:underline"
|
||||
onClick={() => setShowCc(true)}
|
||||
>
|
||||
Add Cc
|
||||
@ -259,7 +259,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
|
||||
{!showBcc && (
|
||||
<button
|
||||
className="text-blue-600 text-sm"
|
||||
className="text-blue-600 text-sm hover:underline"
|
||||
onClick={() => setShowBcc(true)}
|
||||
>
|
||||
Add Bcc
|
||||
@ -271,13 +271,13 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
{/* Subject */}
|
||||
<div className="border-b pb-2">
|
||||
<div className="flex items-center">
|
||||
<span className="w-16 text-gray-500">Subject:</span>
|
||||
<span className="w-16 text-gray-700 font-medium">Subject:</span>
|
||||
<Input
|
||||
type="text"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
placeholder="Subject"
|
||||
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
|
||||
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -285,7 +285,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
{/* Message Body */}
|
||||
<div
|
||||
ref={editorRef}
|
||||
className="min-h-[300px] outline-none p-2"
|
||||
className="min-h-[300px] outline-none p-2 border rounded-md bg-white text-gray-800"
|
||||
contentEditable={true}
|
||||
dangerouslySetInnerHTML={{ __html: emailContent }}
|
||||
onInput={(e) => setEmailContent(e.currentTarget.innerHTML)}
|
||||
@ -293,10 +293,11 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="p-2 border rounded-md">
|
||||
<div className="p-2 border rounded-md bg-gray-50">
|
||||
<div className="text-sm font-medium mb-1 text-gray-700">Attachments:</div>
|
||||
{attachments.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between text-sm py-1">
|
||||
<span className="truncate mr-2">{file.name}</span>
|
||||
<span className="truncate mr-2 text-gray-800">{file.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@ -313,7 +314,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t p-3 flex items-center justify-between">
|
||||
<div className="border-t p-3 flex items-center justify-between bg-gray-50">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* File Input for Attachments */}
|
||||
<input
|
||||
@ -327,13 +328,14 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="file-attachment">
|
||||
<label htmlFor="file-attachment" className="flex items-center cursor-pointer">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<Paperclip className="h-4 w-4" />
|
||||
<span>Attach</span>
|
||||
</Button>
|
||||
</label>
|
||||
</div>
|
||||
@ -342,6 +344,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
className="border-gray-300 text-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
@ -350,14 +353,19 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
variant="default"
|
||||
onClick={handleSend}
|
||||
disabled={sending}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
{sending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Sending
|
||||
</>
|
||||
) : 'Send'}
|
||||
) : (
|
||||
<>
|
||||
<SendHorizontal className="h-4 w-4" />
|
||||
Send
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -372,6 +380,8 @@ export default function ComposeEmail(props: ComposeEmailProps) {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[contenteditable]:focus {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user