From 189dd32f8ca3e7855ed48807c05816c472024846 Mon Sep 17 00:00:00 2001
From: Connor Johnstone <connor.johnstone@arcfield.com>
Date: Wed, 3 Sep 2025 19:52:09 -0400
Subject: [PATCH] Improve external calendar modal UI and remove emojis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix modal backdrop and centering by using proper modal-backdrop class
- Make color picker more compact (80px width instead of 100%)
- Add Outlook 365 setup instructions with step-by-step guide
- Remove calendar emojis from button and sidebar indicators for cleaner design

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/components/external_calendar_modal.rs  | 18 ++++++++++++++++--
 frontend/src/components/sidebar.rs             |  2 +-
 frontend/styles.css                            |  4 ++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/external_calendar_modal.rs b/frontend/src/components/external_calendar_modal.rs
index 430afa6..a0dd646 100644
--- a/frontend/src/components/external_calendar_modal.rs
+++ b/frontend/src/components/external_calendar_modal.rs
@@ -103,8 +103,8 @@ pub fn external_calendar_modal(props: &ExternalCalendarModalProps) -> Html {
     }
 
     html! {
-        <div class="modal-overlay" onclick={on_cancel_clone}>
-            <div class="modal-content" onclick={Callback::from(|e: MouseEvent| e.stop_propagation())}>
+        <div class="modal-backdrop" onclick={on_cancel_clone}>
+            <div class="external-calendar-modal" onclick={Callback::from(|e: MouseEvent| e.stop_propagation())}>
                 <div class="modal-header">
                     <h3>{"Add External Calendar"}</h3>
                     <button class="modal-close" onclick={on_cancel.clone()}>{"×"}</button>
@@ -124,6 +124,20 @@ pub fn external_calendar_modal(props: &ExternalCalendarModalProps) -> Html {
                             }
                         }
                         
+                        <div class="form-help" style="margin-bottom: 1.5rem; padding: 1rem; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #007bff;">
+                            <h4 style="margin: 0 0 0.5rem 0; font-size: 0.9rem; color: #495057;">{"Setting up Outlook 365 Calendar"}</h4>
+                            <p style="margin: 0 0 0.5rem 0; font-size: 0.8rem; line-height: 1.4;">
+                                {"Currently tested with Outlook 365 calendars. To get your calendar link:"}
+                            </p>
+                            <ol style="margin: 0; padding-left: 1.2rem; font-size: 0.8rem; line-height: 1.4;">
+                                <li>{"Go to Outlook Settings"}</li>
+                                <li>{"Navigate to Calendar → Shared Calendars"}</li>
+                                <li>{"Click \"Publish a calendar\""}</li>
+                                <li>{"Select your calendar and choose \"Can view all details\""}</li>
+                                <li>{"Copy the ICS link and paste it below"}</li>
+                            </ol>
+                        </div>
+                        
                         <div class="form-group">
                             <label for="external-calendar-name">{"Calendar Name"}</label>
                             <input
diff --git a/frontend/src/components/sidebar.rs b/frontend/src/components/sidebar.rs
index afb367c..a7d265d 100644
--- a/frontend/src/components/sidebar.rs
+++ b/frontend/src/components/sidebar.rs
@@ -275,7 +275,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                                                         style={format!("background-color: {}", cal.color)}
                                                     />
                                                     <span class="external-calendar-name">{&cal.name}</span>
-                                                    <span class="external-calendar-indicator">{"📅"}</span>
+                                                    <span class="external-calendar-indicator"></span>
                                                 </div>
                                                 {
                                                     if *external_context_menu_open == Some(cal.id) {
diff --git a/frontend/styles.css b/frontend/styles.css
index 44544bd..d053dcb 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -3840,7 +3840,7 @@ body {
 }
 
 .create-external-calendar-button::before {
-    content: "📅";
+    content: "";
     position: absolute;
     left: 1rem;
     font-size: 0.8rem;
@@ -3953,7 +3953,7 @@ body {
 }
 
 .external-calendar-modal .form-group input[type="color"] {
-    width: 100%;
+    width: 80px;
     height: 40px;
     padding: 0;
     border: 1px solid #ced4da;