mail page ui correction maj compose 4

app/mail/page.tsx

@@ -1067,36 +1067,36 @@ export default function MailPage() {
       {showCompose && (
         <div className="fixed inset-0 bg-black/50 z-50">
           <div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
-            <div className="flex items-center justify-between p-4 border-b">
+            <div className="flex items-center justify-between p-4 border-b border-gray-200">
-              <h2 className="text-lg font-semibold">
+              <h3 className="text-lg font-semibold text-gray-900">
                 {composeSubject.startsWith('Re:') ? 'Reply' : 
                  composeSubject.startsWith('Fwd:') ? 'Forward' : 
                  'New Message'}
-              </h2>
+              </h3>
               <Button
                 variant="ghost"
                 size="icon"
                 onClick={() => {
                   setShowCompose(false);
                   setComposeTo('');
+                  setComposeCc('');
+                  setComposeBcc('');
                   setComposeSubject('');
                   setComposeBody('');
                   setShowCc(false);
-                  setComposeCc('');
+                  setShowBcc(false);
-                  setComposeBcc('');
                 }}
               >
-                <X className="h-4 w-4" />
+                <X className="h-5 w-5" />
               </Button>
             </div>
             
-            <div className="p-4 flex-1 overflow-y-auto">
+            <div className="flex-1 p-4 overflow-y-auto">
               <div className="space-y-4">
                 <div>
                   <Label htmlFor="to">To</Label>
                   <Input
                     id="to"
-                    type="email"
                     value={composeTo}
                     onChange={(e) => setComposeTo(e.target.value)}
                     placeholder="recipient@example.com"
@@ -1105,39 +1105,45 @@ export default function MailPage() {
                 
                 <div className="flex items-center gap-2">
                   <Button
-                    type="button"
                     variant="ghost"
                     size="sm"
-                    onClick={() => setShowCc(!showCc)}
                     className="text-gray-500"
+                    onClick={() => setShowCc(!showCc)}
                   >
-                    {showCc ? 'Hide' : 'Show'} CC/BCC
+                    {showCc ? 'Hide Cc' : 'Show Cc'}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-500"
+                    onClick={() => setShowBcc(!showBcc)}
+                  >
+                    {showBcc ? 'Hide Bcc' : 'Show Bcc'}
                   </Button>
                 </div>
 
                 {showCc && (
-                  <>
                   <div>
-                      <Label htmlFor="cc">CC</Label>
+                    <Label htmlFor="cc">Cc</Label>
                     <Input
                       id="cc"
-                        type="email"
                       value={composeCc}
                       onChange={(e) => setComposeCc(e.target.value)}
                       placeholder="cc@example.com"
                     />
                   </div>
+                )}
+
+                {showBcc && (
                   <div>
-                      <Label htmlFor="bcc">BCC</Label>
+                    <Label htmlFor="bcc">Bcc</Label>
                     <Input
                       id="bcc"
-                        type="email"
                       value={composeBcc}
                       onChange={(e) => setComposeBcc(e.target.value)}
                       placeholder="bcc@example.com"
                     />
                   </div>
-                  </>
                 )}
 
                 <div>
@@ -1146,96 +1152,59 @@ export default function MailPage() {
                     id="subject"
                     value={composeSubject}
                     onChange={(e) => setComposeSubject(e.target.value)}
-                    placeholder="Email subject"
+                    placeholder="Enter subject"
                   />
                 </div>
 
                 <div>
-                  <Label htmlFor="body">Message</Label>
+                  <Label htmlFor="message">Message</Label>
                   <Textarea
-                    id="body"
+                    id="message"
                     value={composeBody}
                     onChange={(e) => setComposeBody(e.target.value)}
-                    className="min-h-[300px] font-mono"
+                    placeholder="Write your message..."
-                    placeholder="Write your message here..."
+                    className="min-h-[200px]"
                   />
                 </div>
+              </div>
+            </div>
 
-                <div>
+            <div className="flex items-center justify-between p-4 border-t border-gray-200">
-                  <Label>Attachments</Label>
+              <div className="flex items-center gap-2">
-                  <div className="mt-2 flex items-center gap-2">
+                <Button variant="outline" size="icon">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      className="flex items-center gap-2"
-                      onClick={() => {
-                        const input = document.createElement('input');
-                        input.type = 'file';
-                        input.multiple = true;
-                        input.click();
-                        input.onchange = (e) => {
-                          const files = (e.target as HTMLInputElement).files;
-                          if (files) {
-                            // Handle file attachments
-                            console.log('Files selected:', files);
-                          }
-                        };
-                      }}
-                    >
                   <Paperclip className="h-4 w-4" />
-                      Attach Files
                 </Button>
               </div>
-                </div>
+              <div className="flex items-center gap-2">
-              </div>
+                <Button variant="outline" onClick={() => setShowCompose(false)}>
-            </div>
-
-            <div className="p-4 border-t flex justify-end gap-2">
-              <Button 
-                variant="outline" 
-                onClick={() => {
-                  setShowCompose(false);
-                  setComposeTo('');
-                  setComposeSubject('');
-                  setComposeBody('');
-                  setShowCc(false);
-                  setComposeCc('');
-                  setComposeBcc('');
-                }}
-              >
                   Cancel
                 </Button>
                 <Button
                   onClick={async () => {
                     try {
-                    const response = await fetch('/api/mail/send', {
+                      // Implement your send email logic here
+                      await fetch('/api/mail/send', {
                         method: 'POST',
-                      headers: {
+                        headers: { 'Content-Type': 'application/json' },
-                        'Content-Type': 'application/json',
-                      },
                         body: JSON.stringify({
                           to: composeTo,
                           cc: composeCc,
                           bcc: composeBcc,
                           subject: composeSubject,
-                        body: composeBody,
+                          body: composeBody
-                      }),
+                        })
                       });
-
-                    if (!response.ok) {
-                      throw new Error('Failed to send email');
-                    }
-
                       setShowCompose(false);
+                      // Clear form
                       setComposeTo('');
+                      setComposeCc('');
+                      setComposeBcc('');
                       setComposeSubject('');
                       setComposeBody('');
                       setShowCc(false);
-                    setComposeCc('');
+                      setShowBcc(false);
-                    setComposeBcc('');
                     } catch (error) {
                       console.error('Error sending email:', error);
-                    // Show error message to user
                     }
                   }}
                 >
@@ -1244,29 +1213,21 @@ export default function MailPage() {
               </div>
             </div>
           </div>
+        </div>
       )}
 
       {/* Delete Confirmation Dialog */}
       <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-              {deleteType === 'email' ? 'Delete Email' : 
-               deleteType === 'emails' ? 'Delete Selected Emails' : 
-               'Delete Account'}
-            </AlertDialogTitle>
             <AlertDialogDescription>
-              This action cannot be undone. Are you sure you want to proceed?
+              This action cannot be undone. This will permanently delete the selected {deleteType}.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction 
+            <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
-              onClick={handleDeleteConfirm}
-              className="bg-red-600 text-white hover:bg-red-700"
-            >
-              Delete
-            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>