my-app/src/components/BookingModal.jsx

@@ -87,8 +87,8 @@ export function BookingModal({
 	
 
 	return (
-		<Modal isDismissable className={className}>
-			<Dialog>
+		<Modal isDismissable className={className} style={{borderRadius: '0.4rem', overflow: 'hidden'}}>
+			<Dialog style={{overflow: 'hidden'}}>
 				<form>
 					<Heading slot="title">{booking.title == "" ? "Jacobs bokning" : booking.title}</Heading>
 					<p>{convertDateObjectToString(booking.selectedDate)}</p>

my-app/src/components/BookingModal.module.css

@@ -98,9 +98,17 @@
 }
 
 .modalContainer {
-    background-color: white;
+    background-color: transparent;
     width: 85%;
     max-width: 400px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.18) !important;
+    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.12), 
+                0 16px 32px rgba(0, 0, 0, 0.08),
+                0 8px 16px rgba(0, 0, 0, 0.04),
+                inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
+    backdrop-filter: blur(20px) saturate(140%) !important;
+    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
 }
 
 /* Ensure modal appears above header and handles overflow */
@@ -112,12 +120,16 @@
     justify-content: center !important;
     padding: 2rem 1rem !important;
     box-sizing: border-box !important;
+    background: rgba(0, 0, 0, 0.25) !important;
+    backdrop-filter: blur(12px) saturate(150%) !important;
+    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
 }
 
-:global(.react-aria-ModalOverlay .react-aria-Modal) {
+:global(.react-aria-ModalOverlay .react-aria-Modal.react-aria-Modal) {
     max-height: calc(100vh - 4rem) !important;
     max-width: 90vw !important;
     overflow-y: auto !important;
+    background: rgba(255, 255, 255, 0.85) !important;
 }
 
 /* New time display styles */
@@ -194,5 +206,4 @@
 .disabledButton:active {
     background-color: #f8f9fa !important;
     transform: none !important;
-}
-
+}

my-app/src/react-aria-starter/src/Modal.css

@@ -25,7 +25,6 @@
 
 .react-aria-Modal {
   box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
-  border-radius: 6px;
   background: var(--overlay-background);
   color: var(--text-color);
   border: 1px solid var(--gray-400);