updated UI code ✅✅

mediSync/app.py

@@ -698,7 +698,7 @@ def create_interface():
 
     with gr.Blocks(
         title="MediSync: Multi-Modal Medical Analysis System",
-        theme=gr.themes.Default(),  # Use Default for HuggingFace dark/light support
+        theme=gr.themes.Default(),
         css="""
         /* Modern neumorphic card style for all result containers */
         .medisync-card {
@@ -730,7 +730,10 @@ def create_interface():
         .gr-button, .end-consultation-btn {
             border-radius: 8px !important;
             font-weight: 600 !important;
-            font-size: 1.08rem !important;
+            font-size: 1rem !important;
+            padding: 8px 18px !important;
+            min-width: 120px !important;
+            min-height: 38px !important;
             transition: background 0.2s, color 0.2s;
         }
         .end-consultation-btn {
@@ -738,6 +741,10 @@ def create_interface():
             border: none !important;
             color: #fff !important;
             box-shadow: 0 2px 8px 0 rgba(220,53,69,0.10);
+            font-size: 1.05rem !important;
+            padding: 10px 24px !important;
+            min-width: 160px !important;
+            min-height: 40px !important;
         }
         .end-consultation-btn:hover {
             background: linear-gradient(90deg, #c82333 60%, #ff7675 100%) !important;
@@ -779,6 +786,29 @@ def create_interface():
         html[data-theme="dark"] #end_consultation_status, html[data-theme="dark"] #end_consultation_status * {
             color: #f8fafc !important;
         }
+        /* Style for the popup/status after end consultation for visibility */
+        #end_consultation_status, #end_consultation_status * {
+            font-size: 1.08rem !important;
+            font-weight: 500 !important;
+        }
+        html[data-theme="dark"] #end_consultation_status, html[data-theme="dark"] #end_consultation_status * {
+            color: #f8fafc !important;
+        }
+        /* Style the buttons inside the end consultation status popup */
+        #end_consultation_status button {
+            font-size: 1rem !important;
+            font-weight: 600 !important;
+            border-radius: 6px !important;
+            padding: 8px 18px !important;
+            margin-top: 8px !important;
+            margin-bottom: 4px !important;
+            min-width: 120px !important;
+            min-height: 36px !important;
+            box-shadow: 0 1.5px 4px 0 rgba(0,191,174,0.08);
+        }
+        #end_consultation_status button:active, #end_consultation_status button:focus {
+            outline: 2px solid #00bfae !important;
+        }
         """
     ) as interface:
         gr.Markdown(
@@ -829,7 +859,7 @@ def create_interface():
             with gr.Row():
                 with gr.Column():
                     multi_img_input = gr.Image(label="Upload X-ray Image", type="pil", elem_id="multi_img_input")
-                    multi_img_enhance = gr.Button("Enhance Image", icon="✨")
+                    multi_img_enhance = gr.Button("Enhance Image")
                     multi_text_input = gr.Textbox(
                         label="Enter Medical Report Text",
                         placeholder="Enter the radiologist's report text here...",
@@ -837,7 +867,7 @@ def create_interface():
                         value=example_report if sample_image_path is None else None,
                         elem_id="multi_text_input"
                     )
-                    multi_analyze_btn = gr.Button("Analyze Image & Text", variant="primary", icon="🔎")
+                    multi_analyze_btn = gr.Button("Analyze Image & Text", variant="primary")
                 with gr.Column():
                     multi_results = gr.HTML(label="Analysis Results", elem_id="multi_results")
                     multi_plot = gr.HTML(label="Visualization", elem_id="multi_plot")
@@ -852,8 +882,8 @@ def create_interface():
             with gr.Row():
                 with gr.Column():
                     img_input = gr.Image(label="Upload X-ray Image", type="pil", elem_id="img_input")
-                    img_enhance = gr.Button("Enhance Image", icon="✨")
-                    img_analyze_btn = gr.Button("Analyze Image", variant="primary", icon="🔎")
+                    img_enhance = gr.Button("Enhance Image")
+                    img_analyze_btn = gr.Button("Analyze Image", variant="primary")
                 with gr.Column():
                     img_output = gr.Image(label="Processed Image", elem_id="img_output")
                     img_results = gr.HTML(label="Analysis Results", elem_id="img_results")
@@ -875,7 +905,7 @@ def create_interface():
                         value=example_report,
                         elem_id="text_input"
                     )
-                    text_analyze_btn = gr.Button("Analyze Text", variant="primary", icon="🔎")
+                    text_analyze_btn = gr.Button("Analyze Text", variant="primary")
                 with gr.Column():
                     text_output = gr.Textbox(label="Processed Text", elem_id="text_output")
                     text_results = gr.HTML(label="Analysis Results", elem_id="text_results")
@@ -892,8 +922,7 @@ def create_interface():
                     "End Consultation",
                     variant="stop",
                     size="lg",
-                    elem_classes=["end-consultation-btn"],
-                    icon="🛑"
+                    elem_classes=["end-consultation-btn"]
                 )
                 end_consultation_status = gr.HTML(label="Status", elem_id="end_consultation_status")
 
@@ -952,16 +981,16 @@ def create_interface():
             if result["status"] == "success":
                 doctors_urls = get_doctors_page_urls()
                 html_response = f"""
-                <div class='medisync-force-text' style='color: #28a745; padding: 15px; background-color: #e6ffe6; border-radius: 5px; margin: 10px 0;'>
-                    <h3>✅ Consultation Completed Successfully!</h3>
-                    <p>{result['message']}</p>
-                    <p>Your appointment has been marked as completed.</p>
+                <div class='medisync-force-text' style='color: #28a745; padding: 15px; background-color: #e6ffe6; border-radius: 5px; margin: 10px 0;">
+                    <h3 style="color: #28a745;">✅ Consultation Completed Successfully!</h3>
+                    <p style="color: var(--body-text-color, #222);">{result['message']}</p>
+                    <p style="color: var(--body-text-color, #222);">Your appointment has been marked as completed.</p>
                     <button onclick="window.open('{doctors_urls['local']}', '_blank')" 
-                            style="background-color: #00bfae; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px;">
+                            style="background-color: #00bfae; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px;">
                         Return to Doctors Page (Local)
                     </button>
                     <button onclick="window.open('{doctors_urls['production']}', '_blank')" 
-                            style="background-color: #6c63ff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; margin-left: 10px;">
+                            style="background-color: #6c63ff; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px; margin-left: 10px;">
                         Return to Doctors Page (Production)
                     </button>
                 </div>
@@ -969,27 +998,27 @@ def create_interface():
             else:
                 if "Cannot connect to Flask app" in result['message']:
                     html_response = f"""
-                    <div class='medisync-force-text' style='color: #ff9800; padding: 15px; background-color: #fff3cd; border-radius: 5px; margin: 10px 0;'>
-                        <h3>⚠️ Consultation Ready to Complete</h3>
-                        <p>Your consultation analysis is complete! However, we cannot automatically mark your appointment as completed because the Flask app is not accessible from this environment.</p>
-                        <p><strong>Appointment ID:</strong> {appointment_id.strip()}</p>
-                        <p><strong>Next Steps:</strong></p>
+                    <div class='medisync-force-text' style='color: #ff9800; padding: 15px; background-color: #fff3cd; border-radius: 5px; margin: 10px 0;">
+                        <h3 style="color: #ff9800;">⚠️ Consultation Ready to Complete</h3>
+                        <p style="color: var(--body-text-color, #222);">Your consultation analysis is complete! However, we cannot automatically mark your appointment as completed because the Flask app is not accessible from this environment.</p>
+                        <p style="color: var(--body-text-color, #222);"><strong>Appointment ID:</strong> {appointment_id.strip()}</p>
+                        <p style="color: var(--body-text-color, #222);"><strong>Next Steps:</strong></p>
                         <ol>
-                            <li>Copy your appointment ID: <code>{appointment_id.strip()}</code></li>
-                            <li>Return to your Flask app (doctors page)</li>
-                            <li>Manually complete the appointment using the appointment ID</li>
+                            <li style="color: var(--body-text-color, #222);">Copy your appointment ID: <code>{appointment_id.strip()}</code></li>
+                            <li style="color: var(--body-text-color, #222);">Return to your Flask app (doctors page)</li>
+                            <li style="color: var(--body-text-color, #222);">Manually complete the appointment using the appointment ID</li>
                         </ol>
                         <div style="margin-top: 15px;">
                             <button onclick="window.open('http://127.0.0.1:600/complete_appointment_manual?appointment_id={appointment_id.strip()}', '_blank')" 
-                                    style="background-color: #00bfae; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;">
+                                    style="background-color: #00bfae; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; margin-right: 10px;">
                                 Complete Appointment
                             </button>
                             <button onclick="window.open('http://127.0.0.1:600/doctors', '_blank')" 
-                                    style="background-color: #6c63ff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;">
+                                    style="background-color: #6c63ff; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; margin-right: 10px;">
                                 Return to Doctors Page
                             </button>
                             <button onclick="navigator.clipboard.writeText('{appointment_id.strip()}')" 
-                                    style="background-color: #23272f; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
+                                    style="background-color: #23272f; color: white; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer;">
                                 Copy Appointment ID
                             </button>
                         </div>
@@ -997,10 +1026,10 @@ def create_interface():
                     """
                 else:
                     html_response = f"""
-                    <div class='medisync-force-text' style='color: #dc3545; padding: 15px; background-color: #ffe6e6; border-radius: 5px; margin: 10px 0;'>
-                        <h3>❌ Error Completing Consultation</h3>
-                        <p>{result['message']}</p>
-                        <p>Please try again or contact support if the problem persists.</p>
+                    <div class='medisync-force-text' style='color: #dc3545; padding: 15px; background-color: #ffe6e6; border-radius: 5px; margin: 10px 0;">
+                        <h3 style="color: #dc3545;">❌ Error Completing Consultation</h3>
+                        <p style="color: var(--body-text-color, #222);">{result['message']}</p>
+                        <p style="color: var(--body-text-color, #222);">Please try again or contact support if the problem persists.</p>
                     </div>
                     """
             return html_response