Migrate to SCSS modules

frontend/src/core/components/SearchBar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import "./css/searchBar.scss";
+import styles from "./css/searchBar.module.scss";
 import { MaterialIcon } from "@/utils/material";
 
 interface SearchBarProps {
@@ -69,47 +69,47 @@ export default function SearchBar({
     return (
         <div
             ref={parentContainerRef}
-            className="search-parent"
+            className={styles.searchParent}
         >
             <div
                 ref={searchContainerRef}
-                className={`search-bar-container ${isExpanded ? "expanded" : "collapsed"}`}
+                className={`${styles.searchBarContainer} ${isExpanded ? styles.expanded : styles.collapsed}`}
                 style={{ height: dynamicHeight }}
                 onClick={!isExpanded ? handleToggle : undefined}
             >
                 {/* Single Search Bar Element */}
-                <div className="search-bar">
+                <div className={styles.searchBar}>
                     {/* Left Icon */}
-                    <div className="search-icon">
+                    <div className={styles.searchIcon}>
                         {renderIcon(leftIcon, "search--outlined")}
                     </div>
 
                     {/* Input/Placeholder */}
-                    <div className="search-input-container">
+                    <div className={styles.searchInputContainer}>
                         {isExpanded ? (
                             <input
                                 ref={inputRef}
                                 type="text"
                                 placeholder={placeholder}
-                                className="search-input"
+                                className={styles.searchInput}
                                 value={searchQuery}
                                 onChange={handleQueryChange}
                                 onClick={(e) => e.stopPropagation()}
                             />
                         ) : (
-                            <span className="search-placeholder">{placeholder}</span>
+                            <span className={styles.searchPlaceholder}>{placeholder}</span>
                         )}
                     </div>
 
                     {/* Right Icon */}
-                    <div className="search-clear">
+                    <div className={styles.searchClear}>
                         {renderIcon(rightIcon)}
                     </div>
                 </div>
 
                 {/* Results Section - Only visible when expanded */}
                 {isExpanded && (
-                    <div className="search-results">
+                    <div className={styles.searchResults}>
                         {children}
                     </div>
                 )}

frontend/src/core/components/StyledDialog.tsx

@@ -1,6 +1,7 @@
 import { createPortal } from "react-dom";
 import { useEffect, type ReactNode } from "react";
 import { motion, AnimatePresence, type Transition } from "motion/react";
+import styles from "./css/styled-dialog.module.scss";
 
 interface StyledDialogProps {
     open: boolean;
@@ -8,6 +9,7 @@ interface StyledDialogProps {
     children: ReactNode;
     onBackdropClick?: () => void;
     className?: string;
+    contentClassName?: string;
     afterChildren?: ReactNode;
 }
 
@@ -17,6 +19,7 @@ export function StyledDialog({
     children, 
     onBackdropClick,
     className = "",
+    contentClassName = "",
     afterChildren
 }: StyledDialogProps) {
     const transition: Transition = { duration: 0.3, type: "tween", ease: "easeInOut" };
@@ -39,7 +42,7 @@ export function StyledDialog({
         <AnimatePresence>
             {open && (
                 <motion.div
-                    className={`styled-dialog-backdrop ${className}`}
+                    className={styles.styledDialogBackdrop}
                     onClick={(e) => {
                         if (e.target === e.currentTarget) {
                             if (onBackdropClick) {
@@ -54,12 +57,12 @@ export function StyledDialog({
                     exit={{ opacity: 0 }}
                     transition={transition}>
                     <motion.div
-                        className={`styled-dialog ${className}`}
+                        className={`${styles.styledDialog} ${className}`}
                         initial={{ scale: 0.9, opacity: 0 }}
                         animate={{ scale: 1, opacity: 1 }}
                         exit={{ scale: 0.9, opacity: 0 }}
                         transition={transition}>
-                        <div className="styled-dialog-content">
+                        <div className={`${styles.styledDialogContent} ${contentClassName}`}>
                             {children}
                         </div>
                         {afterChildren}

frontend/src/core/components/css/searchBar.module.scss

@@ -3,17 +3,19 @@
 $font-size: 16px;
 
 // Search container
-.search-parent {
+.searchParent {
     position: relative;
     height: 100%;
     width: 100%;
 }
 
 // SearchBar component styles
-.search-bar-container {
+.searchBarContainer {
     position: absolute;
     z-index: 1001;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
     // All properties animate together simultaneously
     transition:
@@ -47,7 +49,7 @@ $font-size: 16px;
     }
 
     // Single search bar element
-    .search-bar {
+    .searchBar {
         display: flex;
         align-items: center;
         padding: 0 16px;
@@ -55,7 +57,7 @@ $font-size: 16px;
         gap: 12px;
         cursor: pointer;
 
-        .search-icon {
+        .searchIcon {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -69,18 +71,18 @@ $font-size: 16px;
             }
         }
 
-        .search-input-container {
+        .searchInputContainer {
             flex: 1;
             display: flex;
             align-items: center;
 
-            .search-placeholder {
+            .searchPlaceholder {
                 color: $color-dark-on-surface-variant;
                 font-size: $font-size;
                 pointer-events: none;
             }
 
-            .search-input {
+            .searchInput {
                 flex: 1;
                 border: none;
                 outline: none;
@@ -96,7 +98,7 @@ $font-size: 16px;
             }
         }
 
-        .search-clear {
+        .searchClear {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -112,43 +114,9 @@ $font-size: 16px;
     }
 
     // Results section
-    .search-results {
+    .searchResults {
         flex: 1;
         overflow-y: auto;
-
-        .search-loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 12px;
-            padding: 32px;
-            color: $color-dark-on-surface-variant;
-
-            mdui-circular-progress {
-                --mdui-circular-progress-color: $color-dark-primary;
-            }
-        }
-
-        .search-empty,
-        .search-hint {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 32px;
-            color: $color-dark-on-surface-variant;
-            text-align: center;
-        }
-
-        // Custom styling for search result images
-        mdui-list-item {
-            img[slot="icon"] {
-                $size: 48px;
-
-                width: $size;
-                height: $size;
-                border-radius: 50%;
-                object-fit: cover;
-            }
-        }
     }
 }
+

frontend/src/core/components/css/styled-dialog.module.scss

@@ -6,7 +6,7 @@
 $dialog-padding: 30px;
 
 // Base Styled Dialog Styles
-.styled-dialog-backdrop {
+.styledDialogBackdrop {
     position: fixed;
     top: 0;
     left: 0;
@@ -21,10 +21,10 @@ $dialog-padding: 30px;
     padding: $dialog-padding;
     box-sizing: border-box;
 
-    .styled-dialog {
+    .styledDialog {
         width: 100%;
         max-width: 500px;
-        max-height: calc(100vh - $dialog-padding * 2);
+        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;
@@ -35,8 +35,8 @@ $dialog-padding: 30px;
         display: flex;
         flex-direction: column;
         position: relative;
-    
-        .styled-dialog-content {
+
+        .styledDialogContent {
             flex: 1;
             overflow-y: auto;
             display: flex;