diff --git a/src/controllers/modals/components/legacy/Onboarding.module.scss b/src/controllers/modals/components/legacy/Onboarding.module.scss index 42ebfbdd..87a63c10 100644 --- a/src/controllers/modals/components/legacy/Onboarding.module.scss +++ b/src/controllers/modals/components/legacy/Onboarding.module.scss @@ -12,34 +12,19 @@ flex-direction: column; div { - flex: 1; + &.container { + max-width: 750px; + flex-grow: 1; + align-items: left; + } &.header { gap: 8px; - padding: 3em; + padding-top: 5em; display: flex; - text-align: center; - - h1 { - margin: 0; - } - - img { - max-height: 80px; - } } &.form { - flex-grow: 1; - max-width: 420px; - - img { - margin: auto; - display: block; - max-height: 420px; - border-radius: var(--border-radius); - } - input { width: 100%; } diff --git a/src/controllers/modals/components/legacy/Onboarding.tsx b/src/controllers/modals/components/legacy/Onboarding.tsx index bc3f22c3..eb726801 100644 --- a/src/controllers/modals/components/legacy/Onboarding.tsx +++ b/src/controllers/modals/components/legacy/Onboarding.tsx @@ -6,7 +6,8 @@ import { useState } from "preact/hooks"; import { Button, Preloader } from "@revoltchat/ui"; -import wideSVG from "/assets/wide.svg"; +// import wideSVG from "/assets/wide.svg"; +import background from "./assets/onboarding_background.svg"; import FormField from "../../../../pages/login/FormField"; import { takeError } from "../../../client/jsx/error"; @@ -36,43 +37,49 @@ export function OnboardingModal({ return (
+ {"It's time to choose a username."}
+
+ {
+ "Others will be able to find, recognise and mention you with this name, so choose wisely."
+ }
+
+ {
+ "You can change it at any time in your User Settings."
+ }
+
-