Add glassmorphism effects

frontend/src/core/components/StyledDialog.tsx

@@ -8,6 +8,7 @@ interface StyledDialogProps {
     children: ReactNode;
     onBackdropClick?: () => void;
     className?: string;
+    afterChildren?: ReactNode;
 }
 
 export function StyledDialog({ 
@@ -15,7 +16,8 @@ export function StyledDialog({
     onOpenChange, 
     children, 
     onBackdropClick,
-    className = ""
+    className = "",
+    afterChildren
 }: StyledDialogProps) {
     const transition: Transition = { duration: 0.3, type: "tween", ease: "easeInOut" };
 
@@ -60,6 +62,7 @@ export function StyledDialog({
                         <div className="styled-dialog-content">
                             {children}
                         </div>
+                        {afterChildren}
                     </motion.div>
                 </motion.div>
             )}

frontend/src/core/components/css/_styled-dialog.scss

@@ -2,6 +2,9 @@
 @use "../../../css/material" as *;
 @use "sass:color";
 
+// Dialog padding variable
+$dialog-padding: 30px;
+
 // Base Styled Dialog Styles
 .styled-dialog-backdrop {
     position: fixed;
@@ -15,14 +18,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 30px;
+    padding: $dialog-padding;
     box-sizing: border-box;
 
     .styled-dialog {
         width: 100%;
         max-width: 500px;
-        max-height: calc(100vh - 60px);
-        background: $color-dark-surface-container;
+        max-height: calc(100vh - $dialog-padding * 2);
+        background: rgba($color-dark-surface-container, 0.75);
+        border: 1px solid rgba($color-dark-outline-variant, 0.3);
         border-radius: 16px;
         box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
                     0 9px 46px 8px rgba(0, 0, 0, 0.12),
@@ -30,8 +34,7 @@
         overflow: hidden;
         display: flex;
         flex-direction: column;
-        // Framer Motion handles all animations
-        // Removed CSS transitions to prevent interference
+        position: relative;
     
         .styled-dialog-content {
             flex: 1;