jare2473/studentportalen-prototyping
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new-modal #4

Merged
jare2473 merged 18 commits from new-modal into main 2025-09-10 10:01:30 +02:00
Conversation 0 Commits 18 Files Changed 47 +105 -113
4 changed files with 105 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2215bf9585 - Show all commits

151
my-app/src/components/booking/InlineBookingForm.module.css
View File

@@ -1,10 +1,10 @@
.inlineForm {
background: white;
border: 1px solid #D1D5DB;
border-radius: 0.5rem;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
background: var(--modal-bg);
border: 1px solid var(--border-light);
border-radius: var(--border-radius-lg);
padding: var(--spacing-2xl);
margin: var(--spacing-lg) 0;
box-shadow: var(--shadow-lg);
animation: slideDown 0.2s ease-out;
width: 100%;
flex-basis: 100%;
@@ -22,7 +22,7 @@
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #D1D5DB;
border-bottom: 8px solid var(--border-light);
}
.arrowLeft::after {
@@ -34,7 +34,7 @@
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid white;
border-bottom: 7px solid var(--modal-bg);
}
/* Arrow pointing to right card */
@@ -47,7 +47,7 @@
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #D1D5DB;
border-bottom: 8px solid var(--border-light);
}
.arrowRight::after {
@@ -59,18 +59,18 @@
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid white;
border-bottom: 7px solid var(--modal-bg);
}
.formHeader {
text-align: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #E5E7EB;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--border-light);
}
.section {
margin-bottom: 1.5rem;
margin-bottom: var(--spacing-2xl);
}
.section:last-of-type {
@@ -78,86 +78,87 @@
}
.formHeader h3 {
margin: 0 0 0.5rem 0;
font-size: 1.25rem;
font-weight: 700;
color: #111827;
margin: 0 0 var(--spacing-sm) 0;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
}
.dateText {
margin: 0;
color: #6B7280;
font-size: 0.875rem;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.timeDisplay {
margin-bottom: 1rem;
margin-bottom: var(--spacing-lg);
}
.timeRange {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem;
background: #F9FAFB;
border-radius: 0.375rem;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--modal-display-bg);
border: 1px solid var(--modal-display-border);
border-radius: var(--border-radius-md);
}
.timeItem {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
gap: var(--spacing-xs);
}
.timeItem label {
font-size: 0.75rem;
color: #6B7280;
font-weight: 500;
font-size: var(--font-size-xs);
color: var(--text-secondary);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.timeValue {
font-size: 1.25rem;
font-weight: 600;
color: #111827;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.timeValue.placeholder {
color: #9CA3AF;
color: var(--text-tertiary);
font-style: italic;
}
.timeSeparator {
font-size: 1.5rem;
color: #6B7280;
font-weight: 300;
font-size: var(--font-size-4xl);
color: var(--text-secondary);
font-weight: var(--font-weight-light);
}
.formField {
margin-bottom: 1rem;
margin-bottom: var(--spacing-lg);
}
.formField label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
margin-bottom: var(--spacing-sm);
}
.sectionWithTitle {
padding-top: 1rem;
padding-top: var(--spacing-lg);
display: flex;
flex-direction: column;
width: fit-content;
}
.sectionWithTitle label {
font-size: 0.8rem;
color: #717171;
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.sectionWithTitle p {
@@ -166,77 +167,77 @@
.formActions {
display: flex;
gap: 1rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #E5E7EB;
gap: var(--spacing-lg);
margin-top: var(--spacing-3xl);
padding-top: var(--spacing-2xl);
border-top: 1px solid var(--border-light);
}
.cancelButton {
flex: 1;
background-color: white;
background-color: var(--modal-cancel-bg);
height: 2.75rem;
color: #374151;
font-weight: 600;
border: 2px solid #d1d5db;
border-radius: 0.375rem;
transition: all 0.2s ease;
color: var(--modal-cancel-text);
font-weight: var(--font-weight-semibold);
border: 2px solid var(--modal-cancel-border);
border-radius: var(--border-radius-md);
transition: var(--transition-medium);
cursor: pointer;
font-size: 0.875rem;
font-size: var(--font-size-sm);
}
.cancelButton:hover {
background-color: #f9fafb;
border-color: #9ca3af;
background-color: var(--modal-cancel-hover-bg);
border-color: var(--modal-cancel-hover-border);
}
.cancelButton:active {
background-color: #e5e7eb;
background-color: var(--modal-cancel-active-bg);
transform: translateY(1px);
}
.saveButton {
flex: 2;
background-color: #059669;
color: white;
background-color: var(--modal-save-bg);
color: var(--modal-save-text);
height: 2.75rem;
font-weight: 600;
font-size: 0.875rem;
border: 2px solid #047857;
border-radius: 0.375rem;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
border: 2px solid var(--modal-save-border);
border-radius: var(--border-radius-md);
transition: var(--transition-medium);
box-shadow: var(--modal-save-shadow);
cursor: pointer;
}
.saveButton:hover {
background-color: #047857;
box-shadow: 0 4px 8px rgba(5, 150, 105, 0.3);
background-color: var(--modal-save-hover-bg);
box-shadow: var(--modal-save-hover-shadow);
}
.saveButton:active {
background-color: #065f46;
background-color: var(--modal-save-active-bg);
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
box-shadow: var(--modal-save-active-shadow);
}
.disabledButton {
background-color: #f8f9fa !important;
color: #adb5bd !important;
border: 2px dashed #dee2e6 !important;
background-color: var(--button-disabled-bg) !important;
color: var(--button-disabled-text) !important;
border: 2px dashed var(--button-disabled-border) !important;
opacity: 0.6 !important;
box-shadow: none !important;
cursor: default !important;
}
.disabledButton:hover {
background-color: #f8f9fa !important;
background-color: var(--button-disabled-bg) !important;
transform: none !important;
box-shadow: none !important;
}
.disabledButton:active {
background-color: #f8f9fa !important;
background-color: var(--button-disabled-bg) !important;
transform: none !important;
}

49
my-app/src/react-aria-starter/src/DatePicker.css
View File

@@ -7,7 +7,7 @@
@import "./theme.css";
.react-aria-DatePicker {
color: var(--text-color);
color: var(--text-primary);
background-color: var(--bg-secondary);
padding: var(--spacing-md);
border: 1px solid var(--border-light);
@@ -39,38 +39,34 @@
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s, opacity 0.2s, color 0.2s;
color: var(--chevron-button-color);
color: var(--text-primary);
}
.chevron-button:hover:not(:disabled) {
background-color: var(--highlight-hover);
background-color: var(--bg-muted);
}
.chevron-button:active:not(:disabled) {
background-color: var(--highlight-pressed);
background-color: var(--bg-tertiary);
}
.chevron-button:disabled {
cursor: default;
color: var(--chevron-button-disabled-color);
color: var(--text-disabled);
opacity: 0.4;
}
.chevron-button:focus-visible {
outline: 2px solid var(--focus-ring-color);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.react-aria-Button {
/*background: var(--highlight-background);*/
/*color: var(--highlight-foreground);*/
border: 2px solid var(--field-background);
background: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: 1px solid var(--border-light);
forced-color-adjust: none;
border-radius: 4px;
/*border: none;*/
border: 1px solid var(--border-color);
/*width: 1.429rem;*/
/*height: 1.429rem;*/
border-radius: var(--border-radius-sm);
width: fit-content;
padding: 0.5rem 1rem;
font-size: 1rem;
@@ -78,12 +74,11 @@
&[data-pressed] {
box-shadow: none;
/*background: var(--highlight-background);*/
background: var(--button-background-pressed);
background: var(--button-secondary-hover-bg);
}
&[data-focus-visible] {
outline: 2px solid var(--focus-ring-color);
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@@ -95,12 +90,12 @@
justify-content: space-between !important;
gap: 0.75rem !important;
cursor: pointer !important;
background: var(--field-background) !important;
border: 1px solid var(--border-color) !important;
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-weight: 500 !important;
color: var(--field-text-color) !important;
color: var(--input-text) !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
white-space: nowrap !important;
@@ -113,21 +108,21 @@
}
.calendar-button:hover {
border-color: var(--border-color-hover) !important;
border-color: var(--color-primary) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.calendar-button[data-pressed] {
background: var(--button-background-pressed) !important;
border-color: var(--border-color-pressed) !important;
background: var(--button-secondary-hover-bg) !important;
border-color: var(--color-primary) !important;
transform: translateY(1px) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.calendar-button[data-focus-visible] {
outline: 2px solid var(--focus-ring-color) !important;
outline: 2px solid var(--color-primary) !important;
outline-offset: 2px !important;
border-color: var(--focus-ring-color) !important;
border-color: var(--color-primary) !important;
}
.calendar-date {
@@ -144,8 +139,6 @@
.react-aria-Popover[data-trigger=DatePicker] {
max-width: unset;
transform: translateX(-50%);
left: 50% !important;
}
.react-aria-DatePicker {
@@ -161,7 +154,7 @@
.react-aria-FieldError {
font-size: 12px;
color: var(--invalid-color);
color: var(--notification-error-title);
}
[slot=description] {

2
my-app/src/react-aria-starter/src/DatePicker.tsx
View File

@@ -90,7 +90,7 @@ export function DatePicker<T extends DateValue>(
</Group>
{description && <Text slot="description">{description}</Text>}
<FieldError>{errorMessage}</FieldError>
<Popover>
<Popover placement="bottom" crossOffset={0}>
<Dialog>
<Calendar firstDayOfWeek={firstDayOfWeek}>
<header>

16
my-app/src/react-aria-starter/src/Popover.css
View File

@@ -4,21 +4,19 @@
@import "./theme.css";
.react-aria-Popover {
--background-color: var(--overlay-background);
border: 1px solid var(--border-color);
box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
border-radius: 6px;
background: var(--background-color);
color: var(--text-color);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-xl);
border-radius: var(--border-radius-md);
background: var(--bg-primary);
color: var(--text-primary);
outline: none;
max-width: 250px;
transition: transform 200ms, opacity 200ms;
.react-aria-OverlayArrow svg {
display: block;
fill: var(--background-color);
stroke: var(--border-color);
fill: var(--bg-primary);
stroke: var(--border-light);
stroke-width: 1px;
}