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 && ( {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"