Refactor Gradio UI layout and improve CSS styles for better responsiveness and aesthetics

job_writer_ui/app.py

@@ -36,9 +36,10 @@ with gr.Blocks(title="Job Application Assistant") as demo:
     # Phase 1: Form Interface
     # ========================================================================
     with gr.Group(visible=True) as form_phase:
-        with gr.Row(elem_classes=["container", "section"]):
-            with gr.Column(scale=1, elem_classes=["form-container", "card"]):
-                gr.Markdown(
+        with gr.Row(
+            variant="panel",
+            elem_classes=["container", "section"]):
+            gr.Markdown(
                     """
                     <div class="page-header">
                       <h1 class="page-title">Job Application Writer</h1>
@@ -49,54 +50,71 @@ with gr.Blocks(title="Job Application Assistant") as demo:
                     </div>
                     """
                 )
-                job_url = gr.Textbox(
-                    label="Job Posting URL",
-                    placeholder="https://example.com/job-posting",
-                    lines=1,
-                )
-                email = gr.Textbox(
-                    label="Email ID",
-                    placeholder="you@example.com",
-                    lines=1,
-                )
-                resume_url = gr.Textbox(
-                    label="Resume File URL",
-                    placeholder="https://example.com/resume.pdf",
-                    lines=1,
-                    info=(
-                        "URL where your resume has been uploaded "
-                        "(optional - uses default if empty)"
-                    ),
-                )
-                content_type = gr.Dropdown(
-                    choices=["cover_letter", "bullets", "linkedin_note"],
-                    value=None,
-                    label="Content Type",
-                    info="Select the type of content to generate",
-                )
-                form_error = gr.Markdown("", elem_classes=["form-error"])
-                generate_btn = gr.Button(
-                    "Generate Content",
-                    variant="primary",
-                    size="lg",
-                    elem_classes=["btn-primary"],
-                    interactive=False,
-                )
+        with gr.Row(
+            variant="panel",
+            elem_classes=["container", "section"]):
+                with gr.Column(scale=1, elem_classes=["form-container", "card"]):
+                    job_url = gr.Textbox(
+                        label="Job Posting URL",
+                        placeholder="https://example.com/job-posting",
+                        lines=1,
+                    )
+                    email = gr.Textbox(
+                        label="Email ID",
+                        placeholder="you@example.com",
+                        lines=1,
+                    )
+                    resume_url = gr.Textbox(
+                        label="Resume File URL",
+                        placeholder="https://example.com/resume.pdf",
+                        lines=1,
+                        info=(
+                            "URL where your resume has been uploaded "
+                            "(optional - uses default if empty)"
+                        ),
+                    )
+                    content_type = gr.Dropdown(
+                        choices=["cover_letter", "bullets", "linkedin_note"],
+                        value=None,
+                        label="Content Type",
+                        info="Select the type of content to generate",
+                    )
+                    form_error = gr.Markdown("", elem_classes=["form-error"])
+                    generate_btn = gr.Button(
+                        "Generate Content",
+                        variant="primary",
+                        size="lg",
+                        elem_classes=["btn-primary"],
+                        interactive=False,
+                    )
 
     # ========================================================================
     # Phase 2: Chat Interface
     # ========================================================================
     with gr.Group(visible=False) as chat_phase:
+        with gr.Row(
+            variant="panel",
+            elem_classes=["container", "section"]):
+            gr.Markdown(
+                    (
+                        "<div class='chat-page-header'>"
+                        "<h1 class='page-title'>Job Application Writer</h1>"
+                        "</div>"
+                    ),
+                    elem_classes=["chat-title"],
+                    padding=True,
+
+            )
         with gr.Row(elem_classes=["container", "section"]):
             with gr.Column(elem_classes=["chat-phase-container", "card"]):
                 with gr.Row(elem_classes=["chat-header-row"]):
-                    gr.Markdown(
-                        (
-                            "<div class='chat-page-header'>"
-                            "<h1 class='page-title'>Job Application Writer</h1>"
-                            "</div>"
-                        ),
-                        elem_classes=["chat-title"],
+                    cancel_run_btn = gr.Button(
+                        "⏹",
+                        variant="stop",
+                        size="sm",
+                        elem_classes=["stop-button"],
+                        min_width=40,
+                        visible=False,
                     )
                     new_session_btn = gr.Button(
                         "+",
@@ -113,34 +131,37 @@ with gr.Blocks(title="Job Application Assistant") as demo:
                     show_label=False,
                     allow_file_downloads=False,
                     line_breaks=False,
-                    buttons=[],
+                    buttons=['copy'],
                 )
 
                 with gr.Group(
-                    visible=True, elem_classes=["section"]
+                    visible=True, elem_classes=["section", "feedback-section"]
                 ) as feedback_section:
-                    cancel_run_btn = gr.Button(
-                        "Cancel Run",
-                        variant="stop",
-                        size="sm",
-                        elem_classes=["btn-secondary"],
-                        visible=False,  # Hidden by default, shown when run is active
-                    )
-                    feedback_input = gr.Textbox(
-                        label="Your Feedback",
-                        placeholder=(
-                            "Provide feedback to improve the content, "
-                            "or leave empty to approve..."
-                        ),
-                        lines=3,
-                    )
-                    with gr.Row():
+                    with gr.Row(elem_classes=["feedback-row"], scale=1):
+                        upload_btn = gr.UploadButton(
+                            "📎",
+                            file_types=[".pdf", ".docx", ".txt"],
+                            file_count="single",
+                            elem_classes=["upload-button"],
+                            min_width=40,
+                            variant="primary",
+                            size="lg"
+                        )
+                        feedback_input = gr.Textbox(
+                            placeholder="Type your feedback or leave empty to approve...",
+                            lines=1,
+                            show_label=False,
+                            elem_classes=["feedback-input"],
+                            scale=4,
+                        )
                         send_btn = gr.Button(
-                            "Send Feedback",
+                            "➤",
                             variant="primary",
-                            elem_classes=["btn-primary"],
+                            elem_classes=["send-button"],
                             interactive=False,
+                            min_width=40,
                         )
+                    with gr.Row():
                         approve_btn = gr.Button(
                             "Approve Final Version",
                             variant="secondary",
@@ -253,7 +274,7 @@ if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=settings.app_port,
-        theme=gr.themes.Ocean(),
+        theme=gr.themes.Glass(),
         css_paths=[_css_path],
         share=True,
     )

job_writer_ui/static/custom.css

@@ -22,11 +22,11 @@ body {
 }
 
 .gradio-container {
-    min-height: 100vh !important;
-    width: 100vw !important;
-    background-color: var(--bg-page) !important;
-    margin: 0 !important;
-    padding: 0 !important;
+    min-height: 100vh;
+    width: 100vw;
+    background-color: var(--bg-page);
+    margin: 0;
+    padding: 0;
 }
 
 .container {
@@ -36,13 +36,17 @@ body {
 }
 
 .page-header {
-    padding: 0.75rem 0 1rem;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 2.5rem;
+    font-style: normal;
+    text-align: center;
+    padding: 0rem 0 0rem;
 }
 
 .chat-page-header {
     width: 100%;
     text-align: center;
-    padding: 0;
+    padding: 5px;
     margin: 0 0 0.5rem;
 }
 
@@ -66,11 +70,11 @@ body {
 
 .container.section,
 .section:first-of-type {
-    margin-top: 0 !important;
+    margin-top: 0;
 }
 
 .container.section + .container.section {
-    margin-top: 2rem !important;
+    margin-top: 2rem;
 }
 
 .section-title {
@@ -107,19 +111,19 @@ body {
 .gradio-chatbot .copy-btn-wrapper,
 .gradio-chatbot .copy-btn-wrapper button,
 .gradio-chatbot button.copy-message-btn {
-    display: none !important;
+    display: none;
 }
 
 .btn-primary button {
-    background: var(--brand) !important;
-    color: #FFFFFF !important;
-    border-color: var(--brand) !important;
+    background: var(--brand);
+    color: #FFFFFF;
+    border-color: var(--brand);
 }
 
 .btn-secondary button {
-    background: transparent !important;
-    color: var(--brand) !important;
-    border-color: var(--brand) !important;
+    background: transparent;
+    color: var(--brand);
+    border-color: var(--brand);
 }
 
 @media (max-width: 768px) {
@@ -139,10 +143,6 @@ body {
     }
 }
 
-* {
-    font-family: 'Inter', sans-serif;
-}
-
 .form-container {
     max-width: 800px !important;
     width: 90% !important;
@@ -161,22 +161,22 @@ body {
 }
 
 .chat-phase-container {
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: flex-start !important;
-    min-height: auto !important;
-    padding: 0.75rem 0 1.25rem !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    min-height: auto;
+    padding: 0.75rem 0 1.25rem;
 }
 
 [data-testid="bot"] .markdown,
 [data-testid="user"] .markdown,
 .message-wrap .markdown {
-    padding: 0.5rem !important;
-    margin: 0.25rem 0 !important;
+    padding: 0.5rem;
+    margin: 0.25rem 0;
 }
 
 .gradio-chatbot {
-    margin: 0 !important;
+    margin: 0;
 }
 
 .primary-button {
@@ -201,11 +201,11 @@ body {
 
 
 .chat-header-row {
-    display: flex !important;
-    justify-content: space-between !important;
-    align-items: center !important;
-    margin-bottom: 0.5rem !important;
-    gap: 0.75rem !important;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2.5rem;
+    gap: 0.75rem;
 }
 
 .chat-title {
@@ -243,4 +243,128 @@ body {
     background-color: #4338ca !important;
 }
 
+/* Stop button - circular red */
+.stop-button button {
+    min-width: 40px !important;
+    min-height: 40px !important;
+    max-width: 40px !important;
+    max-height: 40px !important;
+    width: 40px !important;
+    height: 40px !important;
+    padding: 0 !important;
+    border-radius: 9999px !important;
+    background-color: #EF4444 !important;
+    color: white !important;
+    border: none !important;
+    font-size: 1rem !important;
+    font-weight: 500 !important;
+    line-height: 1 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    transition: background-color 0.2s ease !important;
+    flex-shrink: 0 !important;
+    flex-grow: 0 !important;
+    box-sizing: border-box !important;
+}
+
+.stop-button button:hover {
+    background-color: #DC2626 !important;
+}
+
+/* Send button - circular */
+.send-button button {
+    min-width: 40px !important;
+    min-height: 40px !important;
+    max-width: 40px !important;
+    max-height: 40px !important;
+    width: 40px !important;
+    height: 40px !important;
+    padding: 0 !important;
+    border-radius: 9999px !important;
+    background-color: var(--brand) !important;
+    color: white !important;
+    border: none !important;
+    font-size: 1.25rem !important;
+    line-height: 1 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    transition: background-color 0.2s ease !important;
+    flex-shrink: 0 !important;
+}
+
+.send-button button:hover {
+    background-color: #4338ca !important;
+}
+
+.send-button button:disabled {
+    background-color: #9CA3AF !important;
+    cursor: not-allowed !important;
+}
 
+/* Feedback input row - modern chat bar style */
+.feedback-row {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+    padding: 0.5rem !important;
+    border: 1px solid #E5E7EB !important;
+    border-radius: 24px !important;
+    background: #FFFFFF !important;
+}
+
+/* Upload button - compact circular */
+.upload-button {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.upload-button button:hover {
+    background-color: #F3F4F6 !important;
+}
+
+.feedback-input textarea {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    resize: none !important;
+    padding: 0.5rem 1rem !important;
+}
+
+.feedback-input textarea:focus {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.feedback-section {
+    margin-top: 1rem !important;
+}
+
+/* Tighter message spacing in chatbot */
+.chat-container .message-wrap {
+    padding: 0.25rem 0 !important;
+}
+
+.chat-container [data-testid="bot"],
+.chat-container [data-testid="user"] {
+    padding: 0.25rem 0 !important;
+}
+
+/* Reduce section margin */
+.section {
+    margin-top: 1rem !important;
+}
+
+/* Header row alignment */
+.chat-header-row {
+    display: flex !important;
+    justify-content: flex-end !important;
+    align-items: center !important;
+    margin-bottom: 0.5rem !important;
+    gap: 0.5rem !important;
+}