From 9ef663c35ec18a4076a583fbcd3e0e54f7e66883 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 16 Apr 2025 12:20:23 +0200
Subject: [PATCH] mail page ui correction maj compose 7

---
 app/mail/page.tsx | 61 ++++++++++++++++++++++-------------------------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 81d302c..f515192 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -1079,9 +1079,9 @@ export default function MailPage() {
       {/* Compose Email Modal - Updated Design */}
       {showCompose && (
         <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-3xl bg-white rounded-xl shadow-xl flex flex-col mx-4 overflow-hidden">
+          <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
             {/* Modal Header */}
-            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-white">
+            <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
               <h3 className="text-lg font-semibold text-gray-900">New Message</h3>
               <Button
                 variant="ghost"
@@ -1089,7 +1089,6 @@ export default function MailPage() {
                 className="hover:bg-gray-100 rounded-full"
                 onClick={() => {
                   setShowCompose(false);
-                  // Clear form
                   setComposeTo('');
                   setComposeCc('');
                   setComposeBcc('');
@@ -1103,102 +1102,100 @@ export default function MailPage() {
               </Button>
             </div>
 
-            {/* Modal Body */}
-            <div className="flex-1 p-6 overflow-y-auto bg-white/95">
-              <div className="space-y-5">
+            {/* Modal Body - Make it scrollable */}
+            <div className="flex-1 overflow-y-auto">
+              <div className="p-6 space-y-4">
                 {/* To Field */}
-                <div className="space-y-2">
+                <div>
                   <Label htmlFor="to" className="text-sm font-medium text-gray-700">To</Label>
                   <Input
                     id="to"
                     value={composeTo}
                     onChange={(e) => setComposeTo(e.target.value)}
                     placeholder="recipient@example.com"
-                    className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
+                    className="w-full mt-1 bg-white border-gray-300"
                   />
                 </div>
 
                 {/* CC/BCC Toggle Buttons */}
-                <div className="flex items-center gap-3">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
+                <div className="flex items-center gap-4">
+                  <button
+                    type="button"
+                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                     onClick={() => setShowCc(!showCc)}
                   >
                     {showCc ? 'Hide Cc' : 'Add Cc'}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
+                  </button>
+                  <button
+                    type="button"
+                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                     onClick={() => setShowBcc(!showBcc)}
                   >
                     {showBcc ? 'Hide Bcc' : 'Add Bcc'}
-                  </Button>
+                  </button>
                 </div>
 
                 {/* CC Field */}
                 {showCc && (
-                  <div className="space-y-2">
+                  <div>
                     <Label htmlFor="cc" className="text-sm font-medium text-gray-700">Cc</Label>
                     <Input
                       id="cc"
                       value={composeCc}
                       onChange={(e) => setComposeCc(e.target.value)}
                       placeholder="cc@example.com"
-                      className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
+                      className="w-full mt-1 bg-white border-gray-300"
                     />
                   </div>
                 )}
 
                 {/* BCC Field */}
                 {showBcc && (
-                  <div className="space-y-2">
+                  <div>
                     <Label htmlFor="bcc" className="text-sm font-medium text-gray-700">Bcc</Label>
                     <Input
                       id="bcc"
                       value={composeBcc}
                       onChange={(e) => setComposeBcc(e.target.value)}
                       placeholder="bcc@example.com"
-                      className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
+                      className="w-full mt-1 bg-white border-gray-300"
                     />
                   </div>
                 )}
 
                 {/* Subject Field */}
-                <div className="space-y-2">
+                <div>
                   <Label htmlFor="subject" className="text-sm font-medium text-gray-700">Subject</Label>
                   <Input
                     id="subject"
                     value={composeSubject}
                     onChange={(e) => setComposeSubject(e.target.value)}
                     placeholder="Enter subject"
-                    className="w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
+                    className="w-full mt-1 bg-white border-gray-300"
                   />
                 </div>
 
                 {/* Message Body */}
-                <div className="space-y-2">
+                <div>
                   <Label htmlFor="message" className="text-sm font-medium text-gray-700">Message</Label>
                   <Textarea
                     id="message"
                     value={composeBody}
                     onChange={(e) => setComposeBody(e.target.value)}
                     placeholder="Write your message..."
-                    className="min-h-[300px] w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md resize-none"
+                    className="w-full mt-1 min-h-[200px] bg-white border-gray-300 resize-none"
                   />
                 </div>
               </div>
             </div>
 
-            {/* Modal Footer */}
-            <div className="flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50">
+            {/* Modal Footer - Fixed at bottom */}
+            <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
               <div className="flex items-center gap-2">
                 <Button 
                   variant="outline" 
                   size="icon"
-                  className="rounded-full hover:bg-gray-100 border-gray-200"
+                  className="rounded-full hover:bg-gray-100 border-gray-300"
                 >
                   <Paperclip className="h-4 w-4 text-gray-600" />
                 </Button>
@@ -1206,13 +1203,13 @@ export default function MailPage() {
               <div className="flex items-center gap-3">
                 <Button 
                   variant="ghost"
-                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100 px-4"
+                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
                   onClick={() => setShowCompose(false)}
                 >
                   Cancel
                 </Button>
                 <Button
-                  className="bg-blue-600 text-white hover:bg-blue-700 px-4"
+                  className="bg-blue-600 text-white hover:bg-blue-700"
                   onClick={async () => {
                     try {
                       await fetch('/api/mail/send', {