mail page custum 12

This commit is contained in:
alma 2025-04-15 19:53:14 +02:00
parent 9f94584ddb
commit ba0a5873b2

View File

@ -670,7 +670,7 @@ export default function MailPage() {
{composeOpen && (
<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">
<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>
<Button
variant="ghost"
@ -681,11 +681,11 @@ export default function MailPage() {
<X className="h-4 w-4" />
</Button>
</CardHeader>
<CardContent className="space-y-4 overflow-y-auto flex-1">
<div className="space-y-4 border-b border-gray-100 pb-4">
<CardContent className="space-y-3 overflow-y-auto flex-1 pt-2">
<div className="space-y-2 border-b border-gray-100 pb-3">
<div>
<Label className="text-sm text-gray-700">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">
<Label className="text-sm text-gray-700 mb-0.5">From</Label>
<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 => (
<option key={account.id} value={account.id}>
{account.name} ({account.email})
@ -694,14 +694,14 @@ export default function MailPage() {
</select>
</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>
<div className="flex items-center gap-2">
{!showCc && (
<Button
variant="ghost"
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)}
>
Add Cc
@ -711,7 +711,7 @@ export default function MailPage() {
<Button
variant="ghost"
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)}
>
Add Bcc
@ -722,17 +722,17 @@ export default function MailPage() {
<Input
type="email"
placeholder="email@example.com"
className="mt-1 bg-white border-gray-200"
className="bg-white border-gray-200 py-1.5"
/>
</div>
{showCc && (
<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>
<Button
variant="ghost"
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)}
>
Remove
@ -741,18 +741,18 @@ export default function MailPage() {
<Input
type="email"
placeholder="cc@example.com"
className="mt-1 bg-white border-gray-200"
className="bg-white border-gray-200 py-1.5"
/>
</div>
)}
{showBcc && (
<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>
<Button
variant="ghost"
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)}
>
Remove
@ -761,30 +761,30 @@ export default function MailPage() {
<Input
type="email"
placeholder="bcc@example.com"
className="mt-1 bg-white border-gray-200"
className="bg-white border-gray-200 py-1.5"
/>
</div>
)}
<div>
<Label className="text-sm text-gray-700">Subject</Label>
<Label className="text-sm text-gray-700 mb-0.5">Subject</Label>
<Input
type="text"
placeholder="Subject"
className="mt-1 bg-white border-gray-200"
className="bg-white border-gray-200 py-1.5"
/>
</div>
</div>
<div>
<Label className="text-sm text-gray-700">Message</Label>
<div className="flex-1">
<Label className="text-sm text-gray-700 mb-0.5">Message</Label>
<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..."
/>
</div>
{/* 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">
<Button
variant="ghost"
@ -809,7 +809,7 @@ export default function MailPage() {
/>
</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
variant="ghost"
className="border border-gray-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"