connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve external calendar modal UI and remove emojis

Browse Source 
- 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>
This commit is contained in:
Connor Johnstone
2025-09-03 19:52:09 -04:00
parent 7461e8b123
commit 189dd32f8c
3 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/external_calendar_modal.rs
View File

@@ -103,8 +103,8 @@ pub fn external_calendar_modal(props: &ExternalCalendarModalProps) -> Html {
} }
html! { html! {
<div class="modal-overlay" onclick={on_cancel_clone}> <div class="modal-backdrop" onclick={on_cancel_clone}>
<div class="modal-content" onclick={Callback::from(|e: MouseEvent| e.stop_propagation())}> <div class="external-calendar-modal" onclick={Callback::from(|e: MouseEvent| e.stop_propagation())}>
<div class="modal-header"> <div class="modal-header">
<h3>{"Add External Calendar"}</h3> <h3>{"Add External Calendar"}</h3>
<button class="modal-close" onclick={on_cancel.clone()}>{"×"}</button> <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"> <div class="form-group">
<label for="external-calendar-name">{"Calendar Name"}</label> <label for="external-calendar-name">{"Calendar Name"}</label>
<input <input

2
frontend/src/components/sidebar.rs
View File

@@ -275,7 +275,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
style={format!("background-color: {}", cal.color)} style={format!("background-color: {}", cal.color)}
/> />
<span class="external-calendar-name">{&cal.name}</span> <span class="external-calendar-name">{&cal.name}</span>
<span class="external-calendar-indicator">{"📅"}</span> <span class="external-calendar-indicator"></span>
</div> </div>
{ {
if *external_context_menu_open == Some(cal.id) { if *external_context_menu_open == Some(cal.id) {

4
frontend/styles.css
View File

@@ -3840,7 +3840,7 @@ body {
} }
.create-external-calendar-button::before { .create-external-calendar-button::before {
content: "📅"; content: "";
position: absolute; position: absolute;
left: 1rem; left: 1rem;
font-size: 0.8rem; font-size: 0.8rem;
@@ -3953,7 +3953,7 @@ body {
} }
.external-calendar-modal .form-group input[type="color"] { .external-calendar-modal .form-group input[type="color"] {
width: 100%; width: 80px;
height: 40px; height: 40px;
padding: 0; padding: 0;
border: 1px solid #ced4da; border: 1px solid #ced4da;