Merge pull request 'ui/loader: transform to use css modules' (#4530) from ui-css into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4530

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;
+  @apply absolute top-0 left-0 w-full h-full;
 
-    transform: translate(0%, 0%) rotate(-45deg);
+  transform: translate(0%, 0%) rotate(-45deg);
-    animation: moveLoaderWrapper 1.8s ease-in-out infinite;
+  animation: moveLoaderWrapper 1.8s ease-in-out infinite;
+}
 
-    & > div.parent {
+.parent {
-      @apply absolute top-1/2 left-1/2;
+  @apply absolute top-1/2 left-1/2;
-      @apply w-2/3 h-2/3;
+  @apply w-2/3 h-2/3;
 
-      border-radius: 50%;
+  border-radius: 50%;
-      animation: moveLoaderParent 1.8s ease-in-out infinite;
+  animation: moveLoaderParent 1.8s ease-in-out infinite;
-      transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
-    }
+}
-  }
 
-  & > .child {
+.child {
-    @apply absolute z-10 top-1/2 left-1/2 w-1/2 h-1/2;
+  @apply absolute z-10 top-1/2 left-1/2 w-1/2 h-1/2;
-    border-radius: 50%;
+  border-radius: 50%;
 
-    transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
-    animation: moveLoaderChild 1.8s ease-in-out infinite;
+  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={cx(styles.loader, styles[props.hierarchy || "primary"])}>
-      <div class="wrapper">
+      <div class={styles.wrapper}>
-        <div class="parent"></div>
+        <div class={styles.parent}></div>
       </div>
-      <div class="child"></div>
+      <div class={styles.child}></div>
     </div>
   );
 };

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -220,36 +220,6 @@ const ClanSceneController = (props: RouteSectionProps) => {
                 }}
               />
             </Show>
-            <div
-              class="flex flex-row"
-              style={{ position: "absolute", top: "10px", left: "10px" }}
-            >
-              <Button
-                ghost
-                onClick={() => {
-                  setStore(
-                    produce((s) => {
-                      for (const machineId in s.sceneData[clanURI]) {
-                        // Reset the position of each machine to [0, 0]
-                        s.sceneData[clanURI] = {};
-                      }
-                    }),
-                  );
-                }}
-              >
-                Reset Store
-              </Button>
-              <Button
-                ghost
-                onClick={() => {
-                  console.log("Refetching API");
-                  machinesQuery.refetch();
-                }}
-              >
-                Refetch API
-              </Button>
-            </div>
-            {/* TODO: Add minimal display time */}
             <div
               class={cx({
                 "fade-out": !machinesQuery.isLoading && loadingCooldown(),

pkgs/clan-app/ui/src/scene/splash.module.css

@@ -1,4 +1,4 @@
-#splash {
+.splash {
   position: fixed;
   inset: 0;
   background: linear-gradient(to top, #e3e7e7, #edf1f1);
@@ -9,17 +9,17 @@
   pointer-events: none;
 }
 
-#splash .content {
+.splash_content {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.title {
+.splash_title {
   @apply h-8 mb-8;
 }
 
-.loader {
+.loading_bar {
   @apply h-3 w-60 mb-3;
   width: 18rem;
   background: repeating-linear-gradient(

pkgs/clan-app/ui/src/scene/splash.tsx

@@ -1,14 +1,14 @@
 import Logo from "@/logos/darknet-builder-logo.svg";
-import "./splash.css";
+import styles from "./splash.module.css";
 import { Typography } from "../components/Typography/Typography";
 
 export const Splash = () => (
-  <div id="splash">
+  <div class={styles.splash}>
-    <div class="content">
+    <div class={styles.splash_content}>
-      <span class="title">
+      <span class={styles.splash_title}>
         <Logo />
       </span>
-      <div class="loader"></div>
+      <div class={styles.loading_bar} />
 
       <Typography hierarchy="label" size="xs" weight="medium">
         Loading new Clan