feat: revamp onboarding

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%;
             }

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,12 +37,9 @@ export function OnboardingModal({
 
     return (
         <div className={styles.onboarding}>
+            <div className={styles.container}>
                 <div className={styles.header}>
-                <h1>
-                    <Text id="app.special.modals.onboarding.welcome" />
-                    <br />
-                    <img src={wideSVG} loading="eager" />
-                </h1>
+                    <h1>{"Welcome to Revolt."}</h1>
                 </div>
                 <div className={styles.form}>
                     {loading ? (
@@ -49,7 +47,15 @@ export function OnboardingModal({
                     ) : (
                         <>
                             <p>
-                            <Text id="app.special.modals.onboarding.pick" />
+                                {"It's time to choose a username."}
+                                <br />
+                                {
+                                    "Others will be able to find, recognise and mention you with this name, so choose wisely."
+                                }
+                                <br />
+                                {
+                                    "You can change it at any time in your User Settings."
+                                }
                             </p>
                             <form
                                 onSubmit={
@@ -65,14 +71,15 @@ export function OnboardingModal({
                                         error={error}
                                     />
                                 </div>
-                            <Button type="submit">
-                                <Text id="app.special.modals.actions.continue" />
+                                <Button palette="accent">
+                                    {"Looks good!"}
                                 </Button>
                             </form>
                         </>
                     )}
                 </div>
-            <div />
+            </div>
+            <img src={background} />
         </div>
     );
 }

src/controllers/modals/components/legacy/assets/onboarding_background.svg

@@ -0,0 +1,2 @@
+<!-- The following background was created by Infi -->
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1921.2435514377348" xmlns="http://www.w3.org/2000/svg" height="421.46138650693956" id="screenshot-f4de8581-11da-11ed-b308-1b06919bb1d2" viewBox="-5 687.5386134930604 1921.2435514377348 421.46138650693956" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-f4de8581-11da-11ed-b308-1b06919bb1d2"><g id="fills-f4de8581-11da-11ed-b308-1b06919bb1d2"><path rx="0" ry="0" d="M-5,906C-5,906,339,692,620,741C901,790,1313,868,1482,763C1651,658,1850,681,1899,722C1948,763,1877,1109,1877,1109L-5,1109L-5,906Z" style="fill: rgb(45, 45, 45); fill-opacity: 1;"/></g></g></svg>