diff --git a/pkgs/clan-app/ui/logos/clan.svg b/pkgs/clan-app/ui/logos/clan.svg index eececd71b..47e68cb68 100644 --- a/pkgs/clan-app/ui/logos/clan.svg +++ b/pkgs/clan-app/ui/logos/clan.svg @@ -1,12 +1,5 @@ - - - - - - - - - - + + + \ No newline at end of file diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css index 1b7f2a35e..023c19a2f 100644 --- a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css +++ b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css @@ -1,23 +1,24 @@ - main#welcome { - @apply absolute top-0 left-0 flex items-center justify-center min-h-screen w-full; + @apply absolute top-0 left-0; + @apply flex items-center justify-center; + @apply min-h-screen w-full; div.background { .layer-1 { - @apply z-0; + @apply -z-30; background: url('./background.jpg') 0 -69.032px / 100% 119.049% no-repeat, url('./background.jpg') 50% / cover no-repeat; } .layer-2 { - @apply z-10; + @apply -z-20; background: #103131; mix-blend-mode: screen; } .layer-3 { - @apply z-20; + @apply -z-10; background: #749095; mix-blend-mode: soft-light; } @@ -25,11 +26,23 @@ main#welcome { .layer-1, .layer-2, .layer-3 { @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 absolute top-28 left-1/2 transform -translate-x-1/2; + } + + svg[data-logo-name="Clan"] { + @apply absolute bottom-28 left-1/2 transform -translate-x-1/2; + } } & > div.container { - @apply absolute top-0 left-0 z-30; - @apply flex flex-col items-center justify-evenly gap-y-20 w-full h-full; + @apply flex flex-col items-center justify-evenly gap-y-20; + @apply size-fit; & > div.welcome { @apply flex flex-col min-w-80 gap-y-6; @@ -56,12 +69,7 @@ main#welcome { } } - svg[data-logo-name="Clan"], svg[data-logo-name="Darknet"] { - @apply h-5; - } + } - - -} - +} \ No newline at end of file diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx index e65ad2b49..451233a79 100644 --- a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx +++ b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx @@ -43,7 +43,7 @@ export const Onboarding: Component = (props) => { navigateToClan(navigate, uri); }; - const [state, setState] = createSignal("setup"); + const [state, setState] = createSignal("welcome"); const [setupForm, { Form, Field }] = createForm({ validate: valiForm(SetupSchema) @@ -55,10 +55,12 @@ export const Onboarding: Component = (props) => {
+ +
- + @@ -118,7 +120,7 @@ export const Onboarding: Component = (props) => { value={field.value} required orientation="horizontal" - input={input} + input={{...input, placeholder: "Name your Clan"}} /> } @@ -148,7 +150,6 @@ export const Onboarding: Component = (props) => { -
);