Remove all user-facing emojis and improve modal styling
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
@@ -41,7 +41,6 @@ pub fn context_menu(props: &ContextMenuProps) -> Html {
|
||||
style={style}
|
||||
>
|
||||
<div class="context-menu-item context-menu-delete" onclick={on_delete_click}>
|
||||
<span class="context-menu-icon">{"🗑️"}</span>
|
||||
{"Delete Calendar"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -604,7 +604,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
Callback::from(move |_| switch_to_tab.emit(ModalTab::BasicDetails))
|
||||
}
|
||||
>
|
||||
{"📅 Basic Details"}
|
||||
{"Basic Details"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -614,7 +614,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
Callback::from(move |_| switch_to_tab.emit(ModalTab::Advanced))
|
||||
}
|
||||
>
|
||||
{"⚙️ Advanced"}
|
||||
{"Advanced"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -624,7 +624,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
Callback::from(move |_| switch_to_tab.emit(ModalTab::People))
|
||||
}
|
||||
>
|
||||
{"👥 People"}
|
||||
{"People"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -634,7 +634,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
Callback::from(move |_| switch_to_tab.emit(ModalTab::Categories))
|
||||
}
|
||||
>
|
||||
{"🏷️ Categories"}
|
||||
{"Categories"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -644,7 +644,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
Callback::from(move |_| switch_to_tab.emit(ModalTab::Location))
|
||||
}
|
||||
>
|
||||
{"📍 Location"}
|
||||
{"Location"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -654,7 +654,7 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
Callback::from(move |_| switch_to_tab.emit(ModalTab::Reminders))
|
||||
}
|
||||
>
|
||||
{"🔔 Reminders"}
|
||||
{"Reminders"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -726,6 +726,38 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
</label>
|
||||
</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-group">
|
||||
<label for="start-date">{"Start Date *"}</label>
|
||||
@@ -792,38 +824,6 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
/>
|
||||
</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
|
||||
if matches!(data.recurrence, RecurrenceType::Weekly) {
|
||||
<div class="form-group">
|
||||
@@ -1367,19 +1367,19 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
<h5>{"Reminder & Alarm Types"}</h5>
|
||||
<div class="alarm-examples">
|
||||
<div class="alarm-type">
|
||||
<strong>{"🔔 Display Alarm"}</strong>
|
||||
<strong>{"Display Alarm"}</strong>
|
||||
<p>{"Pop-up notification on your device"}</p>
|
||||
</div>
|
||||
<div class="alarm-type">
|
||||
<strong>{"📧 Email Reminder"}</strong>
|
||||
<strong>{"Email Reminder"}</strong>
|
||||
<p>{"Email notification sent to your address"}</p>
|
||||
</div>
|
||||
<div class="alarm-type">
|
||||
<strong>{"🔊 Audio Alert"}</strong>
|
||||
<strong>{"Audio Alert"}</strong>
|
||||
<p>{"Sound notification with custom audio"}</p>
|
||||
</div>
|
||||
<div class="alarm-type">
|
||||
<strong>{"📱 SMS/Text"}</strong>
|
||||
<strong>{"SMS/Text"}</strong>
|
||||
<p>{"Text message reminder (enterprise feature)"}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1401,19 +1401,19 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
<p>{"Future attachment features will include:"}</p>
|
||||
<div class="attachment-features">
|
||||
<div class="attachment-type">
|
||||
<strong>{"📎 File Uploads:"}</strong>
|
||||
<strong>{"File Uploads:"}</strong>
|
||||
<span>{"Documents, images, presentations"}</span>
|
||||
</div>
|
||||
<div class="attachment-type">
|
||||
<strong>{"🔗 URL Links:"}</strong>
|
||||
<strong>{"URL Links:"}</strong>
|
||||
<span>{"Web resources and reference materials"}</span>
|
||||
</div>
|
||||
<div class="attachment-type">
|
||||
<strong>{"💾 Cloud Storage:"}</strong>
|
||||
<strong>{"Cloud Storage:"}</strong>
|
||||
<span>{"Google Drive, Dropbox, OneDrive integration"}</span>
|
||||
</div>
|
||||
<div class="attachment-type">
|
||||
<strong>{"📝 Meeting Notes:"}</strong>
|
||||
<strong>{"Meeting Notes:"}</strong>
|
||||
<span>{"Collaborative note-taking and agenda items"}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1424,19 +1424,19 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
<h5>{"Common Reminder Patterns"}</h5>
|
||||
<div class="pattern-examples">
|
||||
<div class="pattern-item">
|
||||
<strong>{"📅 Meetings:"}</strong>
|
||||
<strong>{"Meetings:"}</strong>
|
||||
<span>{"15 minutes before (preparation time)"}</span>
|
||||
</div>
|
||||
<div class="pattern-item">
|
||||
<strong>{"✈️ Travel Events:"}</strong>
|
||||
<strong>{"Travel Events:"}</strong>
|
||||
<span>{"2 hours before (traffic and check-in)"}</span>
|
||||
</div>
|
||||
<div class="pattern-item">
|
||||
<strong>{"🎂 Personal Events:"}</strong>
|
||||
<strong>{"Personal Events:"}</strong>
|
||||
<span>{"1 day before (preparation and gifts)"}</span>
|
||||
</div>
|
||||
<div class="pattern-item">
|
||||
<strong>{"📋 Deadlines:"}</strong>
|
||||
<strong>{"Deadlines:"}</strong>
|
||||
<span>{"1 week before (completion buffer)"}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1467,32 +1467,32 @@ pub fn create_event_modal(props: &CreateEventModalProps) -> Html {
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="feature-summary">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -63,7 +63,6 @@ pub fn event_context_menu(props: &EventContextMenuProps) -> Html {
|
||||
style={style}
|
||||
>
|
||||
<div class="context-menu-item" onclick={on_edit_click}>
|
||||
<span class="context-menu-icon">{"✏️"}</span>
|
||||
{"Edit Event"}
|
||||
</div>
|
||||
{
|
||||
@@ -71,24 +70,20 @@ pub fn event_context_menu(props: &EventContextMenuProps) -> Html {
|
||||
html! {
|
||||
<>
|
||||
<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 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 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>
|
||||
</>
|
||||
}
|
||||
} else {
|
||||
html! {
|
||||
<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>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -177,14 +177,14 @@ pub fn sidebar(props: &SidebarProps) -> Html {
|
||||
|
||||
<div class="theme-selector">
|
||||
<select class="theme-selector-dropdown" onchange={on_theme_change}>
|
||||
<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="forest" selected={matches!(props.current_theme, Theme::Forest)}>{"🌲 Forest"}</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="dark" selected={matches!(props.current_theme, Theme::Dark)}>{"🌙 Dark"}</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="default" selected={matches!(props.current_theme, Theme::Default)}>{"Default"}</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="sunset" selected={matches!(props.current_theme, Theme::Sunset)}>{"Sunset"}</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="rose" selected={matches!(props.current_theme, Theme::Rose)}>{"Rose"}</option>
|
||||
<option value="mint" selected={matches!(props.current_theme, Theme::Mint)}>{"Mint"}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1042,9 +1042,9 @@ body {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
max-width: 900px;
|
||||
width: 95%;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
animation: modalAppear 0.2s ease-out;
|
||||
@@ -1065,7 +1065,7 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 2rem 1rem;
|
||||
padding: 2rem 3rem 1.5rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
@@ -1100,7 +1100,7 @@ body {
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem 2rem 2rem;
|
||||
padding: 0.25rem 1.0rem 0rem;
|
||||
}
|
||||
|
||||
.event-detail {
|
||||
@@ -1260,7 +1260,7 @@ body {
|
||||
}
|
||||
|
||||
.modal-header, .modal-body {
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.event-detail {
|
||||
@@ -1662,7 +1662,8 @@ body {
|
||||
|
||||
/* Event Creation Modal Styles */
|
||||
.create-event-modal {
|
||||
max-width: 600px;
|
||||
min-width: 750px;
|
||||
max-width: 900px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@@ -1700,6 +1701,14 @@ body {
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -1947,7 +1956,7 @@ body {
|
||||
min-height: 300px;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.5rem;
|
||||
padding: 1rem 2rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
@@ -1983,6 +1992,7 @@ body {
|
||||
.tab-content {
|
||||
min-height: 250px;
|
||||
max-height: 45vh;
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user