mail page custum 12
This commit is contained in:
parent
9f94584ddb
commit
ba0a5873b2
@ -670,7 +670,7 @@ export default function MailPage() {
|
|||||||
{composeOpen && (
|
{composeOpen && (
|
||||||
<div className="fixed inset-0 bg-black/25 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
<div className="fixed inset-0 bg-black/25 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||||
<Card className="w-full max-w-2xl bg-white max-h-[90vh] flex flex-col">
|
<Card className="w-full max-w-2xl bg-white max-h-[90vh] flex flex-col">
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3 border-b">
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 border-b">
|
||||||
<CardTitle className="text-xl">New Message</CardTitle>
|
<CardTitle className="text-xl">New Message</CardTitle>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@ -681,11 +681,11 @@ export default function MailPage() {
|
|||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4 overflow-y-auto flex-1">
|
<CardContent className="space-y-3 overflow-y-auto flex-1 pt-2">
|
||||||
<div className="space-y-4 border-b border-gray-100 pb-4">
|
<div className="space-y-2 border-b border-gray-100 pb-3">
|
||||||
<div>
|
<div>
|
||||||
<Label className="text-sm text-gray-700">From</Label>
|
<Label className="text-sm text-gray-700 mb-0.5">From</Label>
|
||||||
<select className="w-full mt-1 bg-white border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
<select className="w-full bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
||||||
{accounts.map(account => (
|
{accounts.map(account => (
|
||||||
<option key={account.id} value={account.id}>
|
<option key={account.id} value={account.id}>
|
||||||
{account.name} ({account.email})
|
{account.name} ({account.email})
|
||||||
@ -694,14 +694,14 @@ export default function MailPage() {
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between mb-0.5">
|
||||||
<Label className="text-sm text-gray-700">To</Label>
|
<Label className="text-sm text-gray-700">To</Label>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{!showCc && (
|
{!showCc && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="text-xs text-gray-500 hover:text-gray-700"
|
className="h-6 text-xs text-gray-500 hover:text-gray-700"
|
||||||
onClick={() => setShowCc(true)}
|
onClick={() => setShowCc(true)}
|
||||||
>
|
>
|
||||||
Add Cc
|
Add Cc
|
||||||
@ -711,7 +711,7 @@ export default function MailPage() {
|
|||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="text-xs text-gray-500 hover:text-gray-700"
|
className="h-6 text-xs text-gray-500 hover:text-gray-700"
|
||||||
onClick={() => setShowBcc(true)}
|
onClick={() => setShowBcc(true)}
|
||||||
>
|
>
|
||||||
Add Bcc
|
Add Bcc
|
||||||
@ -722,17 +722,17 @@ export default function MailPage() {
|
|||||||
<Input
|
<Input
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="email@example.com"
|
placeholder="email@example.com"
|
||||||
className="mt-1 bg-white border-gray-200"
|
className="bg-white border-gray-200 py-1.5"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{showCc && (
|
{showCc && (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between mb-0.5">
|
||||||
<Label className="text-sm text-gray-700">Cc</Label>
|
<Label className="text-sm text-gray-700">Cc</Label>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="text-xs text-gray-500 hover:text-gray-700"
|
className="h-6 text-xs text-gray-500 hover:text-gray-700"
|
||||||
onClick={() => setShowCc(false)}
|
onClick={() => setShowCc(false)}
|
||||||
>
|
>
|
||||||
Remove
|
Remove
|
||||||
@ -741,18 +741,18 @@ export default function MailPage() {
|
|||||||
<Input
|
<Input
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="cc@example.com"
|
placeholder="cc@example.com"
|
||||||
className="mt-1 bg-white border-gray-200"
|
className="bg-white border-gray-200 py-1.5"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{showBcc && (
|
{showBcc && (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between mb-0.5">
|
||||||
<Label className="text-sm text-gray-700">Bcc</Label>
|
<Label className="text-sm text-gray-700">Bcc</Label>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="text-xs text-gray-500 hover:text-gray-700"
|
className="h-6 text-xs text-gray-500 hover:text-gray-700"
|
||||||
onClick={() => setShowBcc(false)}
|
onClick={() => setShowBcc(false)}
|
||||||
>
|
>
|
||||||
Remove
|
Remove
|
||||||
@ -761,30 +761,30 @@ export default function MailPage() {
|
|||||||
<Input
|
<Input
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="bcc@example.com"
|
placeholder="bcc@example.com"
|
||||||
className="mt-1 bg-white border-gray-200"
|
className="bg-white border-gray-200 py-1.5"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div>
|
<div>
|
||||||
<Label className="text-sm text-gray-700">Subject</Label>
|
<Label className="text-sm text-gray-700 mb-0.5">Subject</Label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Subject"
|
placeholder="Subject"
|
||||||
className="mt-1 bg-white border-gray-200"
|
className="bg-white border-gray-200 py-1.5"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="flex-1">
|
||||||
<Label className="text-sm text-gray-700">Message</Label>
|
<Label className="text-sm text-gray-700 mb-0.5">Message</Label>
|
||||||
<Textarea
|
<Textarea
|
||||||
className="mt-1 h-48 bg-white border-gray-200 resize-none"
|
className="mt-0.5 h-[calc(100%-1.5rem)] min-h-[200px] bg-white border-gray-200 resize-none"
|
||||||
placeholder="Write your message here..."
|
placeholder="Write your message here..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* File Attachment Section */}
|
{/* File Attachment Section */}
|
||||||
<div className="border-t border-gray-100 pt-4">
|
<div className="border-t border-gray-100 pt-3">
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@ -809,7 +809,7 @@ export default function MailPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-end gap-3 pt-4 border-t border-gray-100">
|
<div className="flex justify-end gap-3 pt-3 border-t border-gray-100">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="border border-gray-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
className="border border-gray-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user