wip

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

@@ -27,17 +27,29 @@ main#welcome {
             @apply absolute top-0 left-0 w-full h-full;
         }
 
-        svg[data-logo-name="Clan"], svg[data-logo-name="Darknet"] {
-            @apply h-5;
-        }
-
         svg[data-logo-name="Darknet"] {
+            @apply w-52;
             @apply absolute top-28 left-1/2 transform -translate-x-1/2;
         }
 
         svg[data-logo-name="Clan"] {
+            @apply w-16;
             @apply absolute bottom-28 left-1/2 transform -translate-x-1/2;
         }
+
+
+        div.darknet-info {
+            @apply absolute bottom-[6.5rem] left-12;
+            @apply flex flex-col gap-y-2;
+
+            span.darknet-label {
+                color: theme(colors.off.darknet_label);
+            }
+
+            span.darknet-name {
+                color: theme(colors.off.darknet_name);
+            }
+        }
     }
 
     & > div.container {

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

@@ -1,4 +1,4 @@
-import { Component, createSignal, Match, Switch } from "solid-js";
+import { Component, createSignal, Match, Show, Switch } from "solid-js";
 import { RouteSectionProps, useNavigate } from "@solidjs/router";
 import "./Onboarding.css";
 import { Typography } from "@/src/components/Typography/Typography";
@@ -7,24 +7,18 @@ import { Divider } from "@/src/components/Divider/Divider";
 import { Logo } from "@/src/components/Logo/Logo";
 import { navigateToClan, selectClanFolder } from "@/src/hooks/clan";
 import { activeClanURI } from "@/src/stores/clan";
-import { createForm, valiForm } from "@modular-forms/solid";
+import { createForm, getValue, valiForm } from "@modular-forms/solid";
 import { TextInput } from "@/src/components/Form/TextInput";
 import { TextArea } from "@/src/components/Form/TextArea";
 import { Fieldset } from "@/src/components/Form/Fieldset";
-import * as v from 'valibot';
+import * as v from "valibot";
 
 type State = "welcome" | "setup";
 
 const SetupSchema = v.object({
-  name: v.pipe(
-    v.string(),
-    v.nonEmpty("Please enter a name.")
-  ),
-  description: v.pipe(
-    v.string(),
-    v.nonEmpty("Please describe your Clan.")
-  )
-})
+  name: v.pipe(v.string(), v.nonEmpty("Please enter a name.")),
+  description: v.pipe(v.string(), v.nonEmpty("Please describe your Clan.")),
+});
 
 type SetupForm = v.InferInput<typeof SetupSchema>;
 
@@ -43,10 +37,11 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
     navigateToClan(navigate, uri);
   };
 
-  const [state, setState] = createSignal<State>("welcome");
+  const [state, setState] = createSignal<State>("setup");
+  const [darknetName, setDarknetName] = createSignal("");
 
   const [setupForm, { Form, Field }] = createForm<SetupForm>({
-    validate: valiForm(SetupSchema)
+    validate: valiForm(SetupSchema),
   });
 
   return (
@@ -57,11 +52,34 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
         <div class="layer-3" />
         <Logo variant="Darknet" inverted={true} />
         <Logo variant="Clan" inverted={true} />
+        <Show when={state() === "setup"}>
+          <div class="darknet-info">
+            <Typography
+              class="darknet-label"
+              hierarchy="label"
+              family="mono"
+              size="default"
+              color="inherit"
+              weight="medium"
+              inverted={true}
+            >
+              Your Darknet:
+            </Typography>
+            <Typography
+              class="darknet-name"
+              hierarchy="teaser"
+              size="default"
+              color="inherit"
+              weight="medium"
+              inverted={true}
+            >
+              {getValue(setupForm, "name")}
+            </Typography>
+          </div>
+        </Show>
       </div>
 
       <div class="container">
-
-
         <Switch>
           <Match when={state() === "welcome"}>
             <div class="welcome">
@@ -112,7 +130,7 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
               </div>
               <Form>
                 <Field name="name">
-                  {(field, input) =>
+                  {(field, input) => (
                     <Fieldset error={field.error}>
                       <TextInput
                         {...input}
@@ -120,13 +138,16 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
                         value={field.value}
                         required
                         orientation="horizontal"
-                        input={{...input, placeholder: "Name your Clan"}}
+                        input={{
+                          ...input,
+                          placeholder: "Name your Clan",
+                        }}
                       />
                     </Fieldset>
-                  }
+                  )}
                 </Field>
                 <Field name="description">
-                  {(field, input) =>
+                  {(field, input) => (
                     <Fieldset error={field.error}>
                       <TextArea
                         {...input}
@@ -137,11 +158,15 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
                         input={input}
                       />
                     </Fieldset>
-                  }
+                  )}
                 </Field>
 
                 <div class="form-controls">
-                  <Button type="submit" hierarchy="primary" endIcon="ArrowRight">
+                  <Button
+                    type="submit"
+                    hierarchy="primary"
+                    endIcon="ArrowRight"
+                  >
                     Next
                   </Button>
                 </div>
@@ -149,7 +174,6 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
             </div>
           </Match>
         </Switch>
-
       </div>
     </main>
   );

pkgs/clan-app/ui/tailwind/core-plugin.ts

@@ -11,6 +11,8 @@ const primaries = {
   off: {
     white: toRGB("#ffffff"),
     black: toRGB("#000000"),
+    darknet_name: toRGB("#00ff57"),
+    darknet_label: toRGB("#2cff74"),
   },
   primary: {
     50: toRGB("#f4f9f9"),