From a070fc74c186921b8638bf05780f2d5f8a73f787 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Wed, 30 Jul 2025 10:51:48 +0200
Subject: [PATCH] ui/loader: transform to use css modules

---
 .../Loader/{Loader.css => Loader.module.css}  | 36 +++++++++----------
 .../ui/src/components/Loader/Loader.tsx       | 11 +++---
 2 files changed, 24 insertions(+), 23 deletions(-)
 rename pkgs/clan-app/ui/src/components/Loader/{Loader.css => Loader.module.css} (72%)

diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.css b/pkgs/clan-app/ui/src/components/Loader/Loader.module.css
similarity index 72%
rename from pkgs/clan-app/ui/src/components/Loader/Loader.css
rename to pkgs/clan-app/ui/src/components/Loader/Loader.module.css
index c5a05e75b..068163192 100644
--- a/pkgs/clan-app/ui/src/components/Loader/Loader.css
+++ b/pkgs/clan-app/ui/src/components/Loader/Loader.module.css
@@ -15,30 +15,30 @@
       background: #0051ff;
     }
   }
+}
 
-  & > div.wrapper {
-    @apply absolute top-0 left-0 w-full h-full;
+.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;
+  transform: translate(0%, 0%) rotate(-45deg);
+  animation: moveLoaderWrapper 1.8s ease-in-out infinite;
+}
 
-    & > div.parent {
-      @apply absolute top-1/2 left-1/2;
-      @apply w-2/3 h-2/3;
+.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%);
-    }
-  }
+  border-radius: 50%;
+  animation: moveLoaderParent 1.8s ease-in-out infinite;
+  transform: translateX(-50%) translateY(-50%);
+}
 
-  & > .child {
-    @apply absolute z-10 top-1/2 left-1/2 w-1/2 h-1/2;
-    border-radius: 50%;
+.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;
-  }
+  transform: translate(-50%, -50%);
+  animation: moveLoaderChild 1.8s ease-in-out infinite;
 }
 
 @keyframes moveLoaderWrapper {
diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.tsx b/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
index 2f6ca5dd8..2e11e3f43 100644
--- a/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
+++ b/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>
   );
 };