Implement tabbed calendar management modal with improved styling
- Replace separate Create Calendar and External Calendar modals with unified tabbed interface - Redesign modal styling with less rounded corners and cleaner appearance - Significantly increase padding throughout modal components for better spacing - Fix CSS variable self-references (control-padding, standard-transition) - Improve button styling with better padding (0.875rem 2rem) and colors - Enhance form elements with generous padding (1rem) and improved focus states - Redesign tab bar with segmented control appearance and proper active states - Update context menus with modern glassmorphism styling and smooth animations - Consolidate calendar management functionality into single reusable component 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
@@ -33,12 +33,12 @@
|
||||
|
||||
/* Standard Control Dimensions */
|
||||
--control-height: 40px;
|
||||
--control-padding: var(--control-padding);
|
||||
--control-padding: 0.875rem;
|
||||
--control-padding-sm: 0.5rem;
|
||||
--control-margin: 1rem;
|
||||
|
||||
/* Common Transition */
|
||||
--standard-transition: var(--standard-transition);
|
||||
--standard-transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -265,14 +265,14 @@ body {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background: white;
|
||||
border-radius: var(--border-radius-medium);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 6px;
|
||||
min-width: 120px;
|
||||
gap: 0.75rem;
|
||||
min-width: 160px;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
@@ -1178,6 +1178,103 @@ body {
|
||||
background: var(--primary-color, #5a6fd8);
|
||||
}
|
||||
|
||||
/* Calendar Management Modal */
|
||||
.calendar-management-modal {
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.calendar-management-modal .modal-header {
|
||||
padding: 2rem 2.5rem 0;
|
||||
border-bottom: none;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.calendar-management-modal .modal-body {
|
||||
padding: 0 2.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.calendar-management-tabs {
|
||||
display: flex;
|
||||
margin: 1.5rem 0 0 0;
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
padding: 1.25rem 2rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-button:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: white;
|
||||
color: #2563eb;
|
||||
box-shadow: inset 0 -2px 0 #2563eb,
|
||||
0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.calendar-management-modal .modal-body form {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
/* Generic modal footer for calendar management */
|
||||
.calendar-management-modal .modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
padding: 2rem 2.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
background: #fafafa;
|
||||
margin: 0 -2.5rem -2.5rem;
|
||||
}
|
||||
|
||||
/* Add Calendar Button */
|
||||
.add-calendar-button {
|
||||
background: var(--glass-bg-light);
|
||||
border: 1px solid var(--glass-border-light);
|
||||
color: white;
|
||||
padding: var(--control-padding) 1rem;
|
||||
border-radius: var(--border-radius-medium);
|
||||
cursor: pointer;
|
||||
transition: var(--standard-transition);
|
||||
margin-bottom: var(--control-margin);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-calendar-button:hover {
|
||||
background: var(--glass-bg-lighter);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.add-calendar-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
.weekday-header {
|
||||
background: #f8f9fa;
|
||||
@@ -1372,14 +1469,16 @@ body {
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12),
|
||||
0 8px 16px rgba(0, 0, 0, 0.08),
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
max-width: 900px;
|
||||
width: 95%;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
animation: modalAppear 0.2s ease-out;
|
||||
animation: modalAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes modalAppear {
|
||||
@@ -1397,8 +1496,9 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 3rem 1.5rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
padding: 2rem 2.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
@@ -1599,33 +1699,34 @@ body {
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: var(--control-padding);
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: var(--border-radius-medium);
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-group input:disabled,
|
||||
@@ -1692,34 +1793,42 @@ body {
|
||||
|
||||
.cancel-button,
|
||||
.create-button {
|
||||
padding: var(--control-padding) 1.5rem;
|
||||
border-radius: var(--border-radius-medium);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
padding: 0.875rem 2rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: var(--standard-transition);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: none;
|
||||
min-width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: #f8f9fa;
|
||||
color: #6c757d;
|
||||
border: 1px solid #ced4da;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.cancel-button:hover:not(:disabled) {
|
||||
background: #e9ecef;
|
||||
color: #495057;
|
||||
background: #f3f4f6;
|
||||
color: #111827;
|
||||
border-color: #9ca3af;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.create-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.create-button:hover:not(:disabled) {
|
||||
background: #1d4ed8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.cancel-button:disabled,
|
||||
@@ -1743,18 +1852,22 @@ body {
|
||||
/* Context Menu */
|
||||
.context-menu {
|
||||
background: white;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: var(--border-radius-medium);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
min-width: 160px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
|
||||
min-width: 180px;
|
||||
overflow: hidden;
|
||||
animation: contextMenuSlideIn 0.15s ease;
|
||||
animation: contextMenuSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
@keyframes contextMenuSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-5px);
|
||||
transform: scale(0.92) translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -1765,33 +1878,51 @@ body {
|
||||
.context-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--control-padding) 1rem;
|
||||
color: #495057;
|
||||
padding: 0.75rem 1.25rem;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.context-menu-item:first-child {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.context-menu-item:last-child {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
color: #1f2937;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.context-menu-delete {
|
||||
color: #dc3545;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.context-menu-delete:hover {
|
||||
background-color: #f8f9fa;
|
||||
color: #dc3545;
|
||||
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.context-menu-icon {
|
||||
margin-right: 0.5rem;
|
||||
margin-right: 0.75rem;
|
||||
font-size: 1rem;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.context-menu-item:hover .context-menu-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Prevent text selection on context menu items */
|
||||
|
||||
Reference in New Issue
Block a user