ui/splashscreen: transform to use css modules

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="content">
-      <span class="title">
+  <div class={styles.splash}>
+    <div class={styles.splash_content}>
+      <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