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

Remove all user-facing emojis and improve modal styling

Browse Source 
This commit enhances the professional appearance of the calendar application by removing all user-facing emojis while preserving debug logging functionality. Additionally, includes modal layout and styling improvements for better usability.

## Changes Made:

### Emoji Removal:
- **Event creation modal tabs**: Removed emojis from all 6 tab buttons (📅 Basic Details → Basic Details, etc.)
- **Modal content**: Removed emojis from alarm types, attachment types, pattern examples, and completion status
- **Theme picker**: Removed emojis from all 8 theme options (🌊 Ocean → Ocean, etc.)
- **Context menus**: Removed emojis from event context menu (edit/delete actions) and calendar context menu

### Modal Styling Improvements:
- **Width expansion**: Increased modal max-width from 500px to 900px (80% wider)
- **Enhanced padding**: Added more padding to modal header (2rem 3rem 1.5rem) and tab content areas
- **Responsive design**: Improved mobile adjustments while maintaining desktop experience
- **Checkbox fix**: Override width inheritance for "All Day" checkbox with auto width and inline-block display

### Form Layout Enhancement:
- **Field reordering**: Moved Repeat and Reminder options above date/time pickers for better workflow
- **Visual consistency**: Maintained clean, professional appearance throughout the interface

The application now presents a clean, professional interface suitable for business environments while retaining full functionality. Debug logging with emojis is preserved for development purposes.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-30 22:45:10 -04:00
parent 0babfc90f4
commit 75eddcf85d
5 changed files with 88 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/context_menu.rs
View File

@@ -41,7 +41,6 @@ pub fn context_menu(props: &ContextMenuProps) -> Html {
style={style} style={style}
> >
<div class="context-menu-item context-menu-delete" onclick={on_delete_click}> <div class="context-menu-item context-menu-delete" onclick={on_delete_click}>
<span class="context-menu-icon">{"🗑️"}</span>
{"Delete Calendar"} {"Delete Calendar"}
</div> </div>
</div> </div>

114
frontend/src/components/create_event_modal.rs
View File

@@ -604,7 +604,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
Callback::from(move |_| switch_to_tab.emit(ModalTab::BasicDetails)) Callback::from(move |_| switch_to_tab.emit(ModalTab::BasicDetails))
} }
> >
{"📅 Basic Details"} {"Basic Details"}
</button> </button>
<button <button
type="button" type="button"
@@ -614,7 +614,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
Callback::from(move |_| switch_to_tab.emit(ModalTab::Advanced)) Callback::from(move |_| switch_to_tab.emit(ModalTab::Advanced))
} }
> >
{"⚙️ Advanced"} {"Advanced"}
</button> </button>
<button <button
type="button" type="button"
@@ -624,7 +624,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
Callback::from(move |_| switch_to_tab.emit(ModalTab::People)) Callback::from(move |_| switch_to_tab.emit(ModalTab::People))
} }
> >
{"👥 People"} {"People"}
</button> </button>
<button <button
type="button" type="button"
@@ -634,7 +634,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
Callback::from(move |_| switch_to_tab.emit(ModalTab::Categories)) Callback::from(move |_| switch_to_tab.emit(ModalTab::Categories))
} }
> >
{"🏷️ Categories"} {"Categories"}
</button> </button>
<button <button
type="button" type="button"
@@ -644,7 +644,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
Callback::from(move |_| switch_to_tab.emit(ModalTab::Location)) Callback::from(move |_| switch_to_tab.emit(ModalTab::Location))
} }
> >
{"📍 Location"} {"Location"}
</button> </button>
<button <button
type="button" type="button"
@@ -654,7 +654,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
Callback::from(move |_| switch_to_tab.emit(ModalTab::Reminders)) Callback::from(move |_| switch_to_tab.emit(ModalTab::Reminders))
} }
> >
{"🔔 Reminders"} {"Reminders"}
</button> </button>
</div> </div>
</div> </div>
@@ -726,6 +726,38 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
</label> </label>
</div> </div>
<div class="form-row">
<div class="form-group">
<label for="event-recurrence-basic">{"Repeat"}</label>
<select
id="event-recurrence-basic"
class="form-input"
onchange={on_recurrence_change}
>
<option value="none" selected={matches!(data.recurrence, RecurrenceType::None)}>{"Does not repeat"}</option>
<option value="daily" selected={matches!(data.recurrence, RecurrenceType::Daily)}>{"Daily"}</option>
<option value="weekly" selected={matches!(data.recurrence, RecurrenceType::Weekly)}>{"Weekly"}</option>
<option value="monthly" selected={matches!(data.recurrence, RecurrenceType::Monthly)}>{"Monthly"}</option>
<option value="yearly" selected={matches!(data.recurrence, RecurrenceType::Yearly)}>{"Yearly"}</option>
</select>
</div>
<div class="form-group">
<label for="event-reminder-basic">{"Reminder"}</label>
<select
id="event-reminder-basic"
class="form-input"
onchange={on_reminder_change}
>
<option value="none" selected={matches!(data.reminder, ReminderType::None)}>{"None"}</option>
<option value="15min" selected={matches!(data.reminder, ReminderType::Minutes15)}>{"15 minutes before"}</option>
<option value="30min" selected={matches!(data.reminder, ReminderType::Minutes30)}>{"30 minutes before"}</option>
<option value="1hour" selected={matches!(data.reminder, ReminderType::Hour1)}>{"1 hour before"}</option>
<option value="1day" selected={matches!(data.reminder, ReminderType::Day1)}>{"1 day before"}</option>
</select>
</div>
</div>
<div class="form-row"> <div class="form-row">
<div class="form-group"> <div class="form-group">
<label for="start-date">{"Start Date *"}</label> <label for="start-date">{"Start Date *"}</label>
@@ -792,38 +824,6 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
/> />
</div> </div>
<div class="form-row">
<div class="form-group">
<label for="event-recurrence-basic">{"Repeat"}</label>
<select
id="event-recurrence-basic"
class="form-input"
onchange={on_recurrence_change}
>
<option value="none" selected={matches!(data.recurrence, RecurrenceType::None)}>{"Does not repeat"}</option>
<option value="daily" selected={matches!(data.recurrence, RecurrenceType::Daily)}>{"Daily"}</option>
<option value="weekly" selected={matches!(data.recurrence, RecurrenceType::Weekly)}>{"Weekly"}</option>
<option value="monthly" selected={matches!(data.recurrence, RecurrenceType::Monthly)}>{"Monthly"}</option>
<option value="yearly" selected={matches!(data.recurrence, RecurrenceType::Yearly)}>{"Yearly"}</option>
</select>
</div>
<div class="form-group">
<label for="event-reminder-basic">{"Reminder"}</label>
<select
id="event-reminder-basic"
class="form-input"
onchange={on_reminder_change}
>
<option value="none" selected={matches!(data.reminder, ReminderType::None)}>{"None"}</option>
<option value="15min" selected={matches!(data.reminder, ReminderType::Minutes15)}>{"15 minutes before"}</option>
<option value="30min" selected={matches!(data.reminder, ReminderType::Minutes30)}>{"30 minutes before"}</option>
<option value="1hour" selected={matches!(data.reminder, ReminderType::Hour1)}>{"1 hour before"}</option>
<option value="1day" selected={matches!(data.reminder, ReminderType::Day1)}>{"1 day before"}</option>
</select>
</div>
</div>
// Show weekday selection only when weekly recurrence is selected // Show weekday selection only when weekly recurrence is selected
if matches!(data.recurrence, RecurrenceType::Weekly) { if matches!(data.recurrence, RecurrenceType::Weekly) {
<div class="form-group"> <div class="form-group">
@@ -1367,19 +1367,19 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
<h5>{"Reminder & Alarm Types"}</h5> <h5>{"Reminder & Alarm Types"}</h5>
<div class="alarm-examples"> <div class="alarm-examples">
<div class="alarm-type"> <div class="alarm-type">
<strong>{"🔔 Display Alarm"}</strong> <strong>{"Display Alarm"}</strong>
<p>{"Pop-up notification on your device"}</p> <p>{"Pop-up notification on your device"}</p>
</div> </div>
<div class="alarm-type"> <div class="alarm-type">
<strong>{"📧 Email Reminder"}</strong> <strong>{"Email Reminder"}</strong>
<p>{"Email notification sent to your address"}</p> <p>{"Email notification sent to your address"}</p>
</div> </div>
<div class="alarm-type"> <div class="alarm-type">
<strong>{"🔊 Audio Alert"}</strong> <strong>{"Audio Alert"}</strong>
<p>{"Sound notification with custom audio"}</p> <p>{"Sound notification with custom audio"}</p>
</div> </div>
<div class="alarm-type"> <div class="alarm-type">
<strong>{"📱 SMS/Text"}</strong> <strong>{"SMS/Text"}</strong>
<p>{"Text message reminder (enterprise feature)"}</p> <p>{"Text message reminder (enterprise feature)"}</p>
</div> </div>
</div> </div>
@@ -1401,19 +1401,19 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
<p>{"Future attachment features will include:"}</p> <p>{"Future attachment features will include:"}</p>
<div class="attachment-features"> <div class="attachment-features">
<div class="attachment-type"> <div class="attachment-type">
<strong>{"📎 File Uploads:"}</strong> <strong>{"File Uploads:"}</strong>
<span>{"Documents, images, presentations"}</span> <span>{"Documents, images, presentations"}</span>
</div> </div>
<div class="attachment-type"> <div class="attachment-type">
<strong>{"🔗 URL Links:"}</strong> <strong>{"URL Links:"}</strong>
<span>{"Web resources and reference materials"}</span> <span>{"Web resources and reference materials"}</span>
</div> </div>
<div class="attachment-type"> <div class="attachment-type">
<strong>{"💾 Cloud Storage:"}</strong> <strong>{"Cloud Storage:"}</strong>
<span>{"Google Drive, Dropbox, OneDrive integration"}</span> <span>{"Google Drive, Dropbox, OneDrive integration"}</span>
</div> </div>
<div class="attachment-type"> <div class="attachment-type">
<strong>{"📝 Meeting Notes:"}</strong> <strong>{"Meeting Notes:"}</strong>
<span>{"Collaborative note-taking and agenda items"}</span> <span>{"Collaborative note-taking and agenda items"}</span>
</div> </div>
</div> </div>
@@ -1424,19 +1424,19 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
<h5>{"Common Reminder Patterns"}</h5> <h5>{"Common Reminder Patterns"}</h5>
<div class="pattern-examples"> <div class="pattern-examples">
<div class="pattern-item"> <div class="pattern-item">
<strong>{"📅 Meetings:"}</strong> <strong>{"Meetings:"}</strong>
<span>{"15 minutes before (preparation time)"}</span> <span>{"15 minutes before (preparation time)"}</span>
</div> </div>
<div class="pattern-item"> <div class="pattern-item">
<strong>{"✈️ Travel Events:"}</strong> <strong>{"Travel Events:"}</strong>
<span>{"2 hours before (traffic and check-in)"}</span> <span>{"2 hours before (traffic and check-in)"}</span>
</div> </div>
<div class="pattern-item"> <div class="pattern-item">
<strong>{"🎂 Personal Events:"}</strong> <strong>{"Personal Events:"}</strong>
<span>{"1 day before (preparation and gifts)"}</span> <span>{"1 day before (preparation and gifts)"}</span>
</div> </div>
<div class="pattern-item"> <div class="pattern-item">
<strong>{"📋 Deadlines:"}</strong> <strong>{"Deadlines:"}</strong>
<span>{"1 week before (completion buffer)"}</span> <span>{"1 week before (completion buffer)"}</span>
</div> </div>
</div> </div>
@@ -1467,32 +1467,32 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
</div> </div>
<div class="completion-status"> <div class="completion-status">
<h5>{"🎉 Modal Complete!"}</h5> <h5>{"Modal Complete!"}</h5>
<p>{"You've reached the final tab of the comprehensive event creation interface. This modal now provides access to all major VEvent properties following RFC 5545 standards."}</p> <p>{"You've reached the final tab of the comprehensive event creation interface. This modal now provides access to all major VEvent properties following RFC 5545 standards."}</p>
<div class="feature-summary"> <div class="feature-summary">
<div class="summary-row"> <div class="summary-row">
<span class="tab-name">{"✅ Basic Details"}</span> <span class="tab-name">{"Basic Details"}</span>
<span class="tab-desc">{"Title, calendar, dates, location, basic recurrence"}</span> <span class="tab-desc">{"Title, calendar, dates, location, basic recurrence"}</span>
</div> </div>
<div class="summary-row"> <div class="summary-row">
<span class="tab-name">{"✅ Advanced"}</span> <span class="tab-name">{"Advanced"}</span>
<span class="tab-desc">{"Status, priority, classification, advanced options"}</span> <span class="tab-desc">{"Status, priority, classification, advanced options"}</span>
</div> </div>
<div class="summary-row"> <div class="summary-row">
<span class="tab-name">{"✅ People"}</span> <span class="tab-name">{"People"}</span>
<span class="tab-desc">{"Organizer, attendees, invitation management"}</span> <span class="tab-desc">{"Organizer, attendees, invitation management"}</span>
</div> </div>
<div class="summary-row"> <div class="summary-row">
<span class="tab-name">{"✅ Categories"}</span> <span class="tab-name">{"Categories"}</span>
<span class="tab-desc">{"Event tagging and organizational features"}</span> <span class="tab-desc">{"Event tagging and organizational features"}</span>
</div> </div>
<div class="summary-row"> <div class="summary-row">
<span class="tab-name">{"✅ Location"}</span> <span class="tab-name">{"Location"}</span>
<span class="tab-desc">{"Physical and virtual location management"}</span> <span class="tab-desc">{"Physical and virtual location management"}</span>
</div> </div>
<div class="summary-row"> <div class="summary-row">
<span class="tab-name">{"✅ Reminders"}</span> <span class="tab-name">{"Reminders"}</span>
<span class="tab-desc">{"Alarm configuration and future attachments"}</span> <span class="tab-desc">{"Alarm configuration and future attachments"}</span>
</div> </div>
</div> </div>

13
frontend/src/components/event_context_menu.rs
View File

@@ -63,7 +63,6 @@ pub fn event_context_menu(props: &EventContextMenuProps) -> Html {
style={style} style={style}
> >
<div class="context-menu-item" onclick={on_edit_click}> <div class="context-menu-item" onclick={on_edit_click}>
<span class="context-menu-icon">{"✏️"}</span>
{"Edit Event"} {"Edit Event"}
</div> </div>
{ {
@@ -71,24 +70,20 @@ pub fn event_context_menu(props: &EventContextMenuProps) -> Html {
html! { html! {
<> <>
<div class="context-menu-item context-menu-delete" onclick={create_delete_callback(DeleteAction::DeleteThis)}> <div class="context-menu-item context-menu-delete" onclick={create_delete_callback(DeleteAction::DeleteThis)}>
<span class="context-menu-icon">{"🗑️"}</span> {"Delete This Event"}
{"Delete This Event"}
</div> </div>
<div class="context-menu-item context-menu-delete" onclick={create_delete_callback(DeleteAction::DeleteFollowing)}> <div class="context-menu-item context-menu-delete" onclick={create_delete_callback(DeleteAction::DeleteFollowing)}>
<span class="context-menu-icon">{"🗑️"}</span> {"Delete Following Events"}
{"Delete Following Events"}
</div> </div>
<div class="context-menu-item context-menu-delete" onclick={create_delete_callback(DeleteAction::DeleteSeries)}> <div class="context-menu-item context-menu-delete" onclick={create_delete_callback(DeleteAction::DeleteSeries)}>
<span class="context-menu-icon">{"🗑️"}</span> {"Delete Entire Series"}
{"Delete Entire Series"}
</div> </div>
</> </>
} }
} else { } else {
html! { html! {
<div class="context-menu-item context-menu-delete" onclick={create_delete_callback(DeleteAction::DeleteThis)}> <div class="context-menu-item context-menu-delete" onclick={create_delete_callback(DeleteAction::DeleteThis)}>
<span class="context-menu-icon">{"🗑️"}</span> {"Delete Event"}
{"Delete Event"}
</div> </div>
} }
} }

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

@@ -177,14 +177,14 @@ pub fn sidebar(props: &SidebarProps) -> Html {
<div class="theme-selector"> <div class="theme-selector">
<select class="theme-selector-dropdown" onchange={on_theme_change}> <select class="theme-selector-dropdown" onchange={on_theme_change}>
<option value="default" selected={matches!(props.current_theme, Theme::Default)}>{"🎨 Default"}</option> <option value="default" selected={matches!(props.current_theme, Theme::Default)}>{"Default"}</option>
<option value="ocean" selected={matches!(props.current_theme, Theme::Ocean)}>{"🌊 Ocean"}</option> <option value="ocean" selected={matches!(props.current_theme, Theme::Ocean)}>{"Ocean"}</option>
<option value="forest" selected={matches!(props.current_theme, Theme::Forest)}>{"🌲 Forest"}</option> <option value="forest" selected={matches!(props.current_theme, Theme::Forest)}>{"Forest"}</option>
<option value="sunset" selected={matches!(props.current_theme, Theme::Sunset)}>{"🌅 Sunset"}</option> <option value="sunset" selected={matches!(props.current_theme, Theme::Sunset)}>{"Sunset"}</option>
<option value="purple" selected={matches!(props.current_theme, Theme::Purple)}>{"💜 Purple"}</option> <option value="purple" selected={matches!(props.current_theme, Theme::Purple)}>{"Purple"}</option>
<option value="dark" selected={matches!(props.current_theme, Theme::Dark)}>{"🌙 Dark"}</option> <option value="dark" selected={matches!(props.current_theme, Theme::Dark)}>{"Dark"}</option>
<option value="rose" selected={matches!(props.current_theme, Theme::Rose)}>{"🌹 Rose"}</option> <option value="rose" selected={matches!(props.current_theme, Theme::Rose)}>{"Rose"}</option>
<option value="mint" selected={matches!(props.current_theme, Theme::Mint)}>{"🍃 Mint"}</option> <option value="mint" selected={matches!(props.current_theme, Theme::Mint)}>{"Mint"}</option>
</select> </select>
</div> </div>

28
frontend/styles.css
View File

@@ -1042,9 +1042,9 @@ body {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
max-width: 500px; max-width: 900px;
width: 90%; width: 95%;
max-height: 80vh; max-height: 85vh;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
animation: modalAppear 0.2s ease-out; animation: modalAppear 0.2s ease-out;
@@ -1065,7 +1065,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 1.5rem 2rem 1rem; padding: 2rem 3rem 1.5rem;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
} }
@@ -1100,7 +1100,7 @@ body {
} }
.modal-body { .modal-body {
padding: 1.5rem 2rem 2rem; padding: 0.25rem 1.0rem 0rem;
} }
.event-detail { .event-detail {
@@ -1260,7 +1260,7 @@ body {
} }
.modal-header, .modal-body { .modal-header, .modal-body {
padding: 1rem 1.5rem; padding: 1.5rem 2rem;
} }
.event-detail { .event-detail {
@@ -1662,7 +1662,8 @@ body {
/* Event Creation Modal Styles */ /* Event Creation Modal Styles */
.create-event-modal { .create-event-modal {
max-width: 600px; min-width: 750px;
max-width: 900px;
width: 95%; width: 95%;
} }
@@ -1700,6 +1701,14 @@ body {
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
} }
/* Checkbox specific styling override */
.create-event-modal input[type="checkbox"] {
width: auto;
display: inline-block;
margin-right: 0.5rem;
vertical-align: middle;
}
.create-event-modal .form-row { .create-event-modal .form-row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -1947,7 +1956,7 @@ body {
min-height: 300px; min-height: 300px;
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
padding-right: 0.5rem; padding: 1rem 2rem 2rem 2rem;
} }
.tab-panel { .tab-panel {
@@ -1983,6 +1992,7 @@ body {
.tab-content { .tab-content {
min-height: 250px; min-height: 250px;
max-height: 45vh; max-height: 45vh;
padding: 1rem 1.5rem 1.5rem 1.5rem;
} }
} }
@@ -3316,4 +3326,4 @@ body {
[data-theme="mint"] .app-sidebar { [data-theme="mint"] .app-sidebar {
background: var(--sidebar-bg); background: var(--sidebar-bg);
} }