ui/loader: transform to use css modules

pkgs/clan-app/ui/src/components/Loader/Loader.module.css

@@ -15,30 +15,30 @@
       background: #0051ff;
     }
   }
+}
 
-  & > div.wrapper {
+.wrapper {
   @apply absolute top-0 left-0 w-full h-full;
 
   transform: translate(0%, 0%) rotate(-45deg);
   animation: moveLoaderWrapper 1.8s ease-in-out infinite;
+}
 
-    & > div.parent {
+.parent {
   @apply absolute top-1/2 left-1/2;
   @apply w-2/3 h-2/3;
 
   border-radius: 50%;
   animation: moveLoaderParent 1.8s ease-in-out infinite;
   transform: translateX(-50%) translateY(-50%);
-    }
-  }
+}
 
-  & > .child {
+.child {
   @apply absolute z-10 top-1/2 left-1/2 w-1/2 h-1/2;
   border-radius: 50%;
 
   transform: translate(-50%, -50%);
   animation: moveLoaderChild 1.8s ease-in-out infinite;
-  }
 }
 
 @keyframes moveLoaderWrapper {

pkgs/clan-app/ui/src/components/Loader/Loader.tsx

@@ -1,4 +1,5 @@
-import "./Loader.css";
+// Loader.tsx
+import styles from "./Loader.module.css";
 import cx from "classnames";
 
 export type Hierarchy = "primary" | "secondary";
@@ -9,11 +10,11 @@ export interface LoaderProps {
 
 export const Loader = (props: LoaderProps) => {
   return (
-    <div class={cx("loader", props.hierarchy || "primary")}>
-      <div class="wrapper">
-        <div class="parent"></div>
+    <div class={cx(styles.loader, styles[props.hierarchy || "primary"])}>
+      <div class={styles.wrapper}>
+        <div class={styles.parent}></div>
       </div>
-      <div class="child"></div>
+      <div class={styles.child}></div>
     </div>
   );
 };