From a381ba6320e85c80751f0f2ea87526277e57cb05 Mon Sep 17 00:00:00 2001
From: Ed L <beartechtalks@gmail.com>
Date: Sat, 10 Sep 2022 20:08:09 +0100
Subject: [PATCH] feat: revamp onboarding

---
 .../components/legacy/Onboarding.module.scss  | 27 ++-----
 .../modals/components/legacy/Onboarding.tsx   | 81 ++++++++++---------
 .../legacy/assets/onboarding_background.svg   |  2 +
 3 files changed, 52 insertions(+), 58 deletions(-)
 create mode 100644 src/controllers/modals/components/legacy/assets/onboarding_background.svg

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 (
         <div className={styles.onboarding}>
-            <div className={styles.header}>
-                <h1>
-                    <Text id="app.special.modals.onboarding.welcome" />
-                    <br />
-                    <img src={wideSVG} loading="eager" />
-                </h1>
+            <div className={styles.container}>
+                <div className={styles.header}>
+                    <h1>{"Welcome to Revolt."}</h1>
+                </div>
+                <div className={styles.form}>
+                    {loading ? (
+                        <Preloader type="spinner" />
+                    ) : (
+                        <>
+                            <p>
+                                {"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={
+                                    handleSubmit(
+                                        onSubmit,
+                                    ) as unknown as JSX.GenericEventHandler<HTMLFormElement>
+                                }>
+                                <div>
+                                    <FormField
+                                        type="username"
+                                        register={register}
+                                        showOverline
+                                        error={error}
+                                    />
+                                </div>
+                                <Button palette="accent">
+                                    {"Looks good!"}
+                                </Button>
+                            </form>
+                        </>
+                    )}
+                </div>
             </div>
-            <div className={styles.form}>
-                {loading ? (
-                    <Preloader type="spinner" />
-                ) : (
-                    <>
-                        <p>
-                            <Text id="app.special.modals.onboarding.pick" />
-                        </p>
-                        <form
-                            onSubmit={
-                                handleSubmit(
-                                    onSubmit,
-                                ) as unknown as JSX.GenericEventHandler<HTMLFormElement>
-                            }>
-                            <div>
-                                <FormField
-                                    type="username"
-                                    register={register}
-                                    showOverline
-                                    error={error}
-                                />
-                            </div>
-                            <Button type="submit">
-                                <Text id="app.special.modals.actions.continue" />
-                            </Button>
-                        </form>
-                    </>
-                )}
-            </div>
-            <div />
+            <img src={background} />
         </div>
     );
 }
diff --git a/src/controllers/modals/components/legacy/assets/onboarding_background.svg b/src/controllers/modals/components/legacy/assets/onboarding_background.svg
new file mode 100644
index 00000000..45975c95
--- /dev/null
+++ b/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>