cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 07:00:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat: revamp onboarding

Browse source
This commit is contained in:
Ed L 2022-09-10 20:08:09 +01:00 committed by Paul Makles
parent 4f2fc267f9
commit a381ba6320
3 changed files with 52 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/controllers/modals/components/legacy/Onboarding.module.scss
View file

@ -12,34 +12,19 @@
flex-direction: column; flex-direction: column;
div { div {
flex: 1; &.container {
max-width: 750px;
flex-grow: 1;
align-items: left;
}
&.header { &.header {
gap: 8px; gap: 8px;
padding: 3em; padding-top: 5em;
display: flex; display: flex;
text-align: center;
h1 {
margin: 0;
}
img {
max-height: 80px;
}
} }
&.form { &.form {
flex-grow: 1;
max-width: 420px;
img {
margin: auto;
display: block;
max-height: 420px;
border-radius: var(--border-radius);
}
input { input {
width: 100%; width: 100%;
} }

81
src/controllers/modals/components/legacy/Onboarding.tsx
View file

@ -6,7 +6,8 @@ import { useState } from "preact/hooks";
import { Button, Preloader } from "@revoltchat/ui"; 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 FormField from "../../../../pages/login/FormField";
import { takeError } from "../../../client/jsx/error"; import { takeError } from "../../../client/jsx/error";
@ -36,43 +37,49 @@ export function OnboardingModal({
return ( return (
<div className={styles.onboarding}> <div className={styles.onboarding}>
<div className={styles.header}> <div className={styles.container}>
<h1> <div className={styles.header}>
<Text id="app.special.modals.onboarding.welcome" /> <h1>{"Welcome to Revolt."}</h1>
<br /> </div>
<img src={wideSVG} loading="eager" /> <div className={styles.form}>
</h1> {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>
<div className={styles.form}> <img src={background} />
{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 />
</div> </div>
); );
} }

2
src/controllers/modals/components/legacy/assets/onboarding_background.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 702 B