ui/onboarding: use css modules

pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css

@@ -1,70 +0,0 @@
-main#welcome {
-  @apply absolute top-0 left-0;
-  @apply flex items-center justify-center;
-  @apply min-h-screen w-full;
-
-  div.background {
-    .layer-1 {
-      @apply -z-30;
-      background:
-        url("./background.png") 0 -69.032px / 100% 119.049% no-repeat,
-        url("./background.png") 50% / cover no-repeat;
-    }
-
-    .layer-2 {
-      @apply -z-20;
-      background: #103131;
-      mix-blend-mode: screen;
-    }
-
-    .layer-3 {
-      @apply -z-10;
-      background: #749095;
-      mix-blend-mode: soft-light;
-    }
-
-    .layer-1,
-    .layer-2,
-    .layer-3 {
-      @apply absolute top-0 left-0 w-full h-full;
-    }
-
-    svg[data-logo-name="Clan"] {
-      @apply w-16;
-      @apply absolute bottom-28 left-1/2 transform -translate-x-1/2;
-    }
-
-    button.list-clans {
-      @apply absolute bottom-28 right-0 transform -translate-x-1/2;
-    }
-  }
-
-  & > div.container {
-    @apply flex flex-col items-center justify-evenly gap-y-20 size-fit;
-
-    & > div.welcome {
-      @apply flex flex-col w-80 gap-y-6;
-
-      & > div.separator {
-        @apply grid grid-cols-3 grid-rows-1 gap-x-4 items-center;
-      }
-    }
-
-    & > div.setup {
-      @apply flex flex-col w-[33rem] gap-y-5;
-      @apply pt-10 px-8 pb-8 bg-def-1 rounded-lg;
-
-      & > div.header {
-        @apply flex items-center justify-start gap-x-2;
-      }
-
-      form {
-        @apply flex flex-col gap-y-5;
-
-        & > div.form-controls {
-          @apply flex justify-end pt-6;
-        }
-      }
-    }
-  }
-}

pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.module.css

@@ -0,0 +1,67 @@
+.onboarding {
+  @apply absolute top-0 left-0;
+  @apply flex items-center justify-center;
+  @apply min-h-screen w-full;
+}
+
+.background {
+  svg[data-logo-name="Clan"] {
+    @apply w-16;
+    @apply absolute bottom-28 left-1/2 transform -translate-x-1/2;
+  }
+}
+
+.backgroundLayer1 {
+  @apply -z-30;
+  background:
+    url("./background.png") 0 -69.032px / 100% 119.049% no-repeat,
+    url("./background.png") 50% / cover no-repeat;
+}
+
+.backgroundLayer2 {
+  @apply -z-20;
+  background: #103131;
+  mix-blend-mode: screen;
+}
+
+.backgroundLayer3 {
+  @apply -z-10;
+  background: #749095;
+  mix-blend-mode: soft-light;
+}
+
+.backgroundLayer1,
+.backgroundLayer2,
+.backgroundLayer3 {
+  @apply absolute top-0 left-0 w-full h-full;
+}
+
+.listClans {
+  @apply absolute bottom-28 right-0 transform -translate-x-1/2;
+}
+
+.container {
+  @apply flex flex-col items-center justify-evenly gap-y-20 size-fit;
+}
+
+.welcome {
+  @apply flex flex-col w-80 gap-y-6;
+}
+.welcomeSeparator {
+  @apply grid grid-cols-3 grid-rows-1 gap-x-4 items-center;
+}
+
+.setup {
+  @apply flex flex-col w-[33rem] gap-y-5;
+  @apply pt-10 px-8 pb-8 bg-def-1 rounded-lg;
+
+  form {
+    @apply flex flex-col gap-y-5;
+  }
+}
+.setupHeader {
+  @apply flex items-center justify-start gap-x-2;
+}
+.setupFormControls {
+  @apply flex justify-end pt-6;
+}

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

@@ -12,7 +12,7 @@ import {
   useNavigate,
   useSearchParams,
 } from "@solidjs/router";
-import "./Onboarding.css";
+import styles from "./Onboarding.module.css";
 import { Typography } from "@/src/components/Typography/Typography";
 import { Button } from "@/src/components/Button/Button";
 import { Alert } from "@/src/components/Alert/Alert";
@@ -66,13 +66,13 @@ const background = (props: { state: State; form: FormStore<SetupForm> }) => {
   const [showModal, setShowModal] = createSignal(false);
 
   return (
-    <div class="background">
+    <div class={styles.background}>
-      <div class="layer-1" />
+      <div class={styles.backgroundLayer1} />
-      <div class="layer-2" />
+      <div class={styles.backgroundLayer2} />
-      <div class="layer-3" />
+      <div class={styles.backgroundLayer3} />
       <Logo variant="Clan" inverted />
       <Button
-        class="list-clans"
+        class={styles.listClans}
         hierarchy="primary"
         ghost
         size="s"
@@ -113,7 +113,7 @@ const welcome = (props: {
   };
 
   return (
-    <div class="welcome">
+    <div class={styles.welcome}>
       <Typography
         hierarchy="headline"
         size="xxl"
@@ -144,7 +144,7 @@ const welcome = (props: {
       >
         Start building
       </Button>
-      <div class="separator">
+      <div class={styles.welcomeSeparator}>
         <Divider orientation="horizontal" />
         <Typography
           hierarchy="body"
@@ -285,9 +285,9 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
   };
 
   return (
-    <main id="welcome">
+    <main class={styles.onboarding}>
       {background({ form: setupForm, state: state() })}
-      <div class="container">
+      <div class={styles.container}>
         <Switch>
           <Match when={state() === "welcome"}>
             {welcome({
@@ -298,8 +298,8 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
           </Match>
 
           <Match when={state() === "setup"}>
-            <div class="setup">
+            <div class={styles.setup}>
-              <div class="header">
+              <div class={styles.setupHeader}>
                 <Button
                   hierarchy="secondary"
                   ghost={true}
@@ -377,7 +377,7 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
                   </Field>
                 </Fieldset>
 
-                <div class="form-controls">
+                <div class={styles.setupFormControls}>
                   <Button
                     type="submit"
                     hierarchy="primary"