abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-09 18:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(login): new login screen design

Browse Source
This commit is contained in:
trashtemp
2021-12-25 16:01:19 +01:00
parent d7f52fb6f4
commit 5c59f187bd
9 changed files with 300 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/pages/login/Login.tsx
View File

@@ -1,3 +1,4 @@
import { Twitter, Github, Mastodon } from "@styled-icons/boxicons-logos";
import { observer } from "mobx-react-lite";
import { Helmet } from "react-helmet";
import { Route, Switch } from "react-router-dom";
@@ -8,6 +9,7 @@ import { Text } from "preact-i18n";
import { useApplicationState } from "../../mobx/State";
import wideSVG from "../../../public/assets/wide.svg";
import LocaleSelector from "../../components/common/LocaleSelector";
import background from "./background.jpg";
@@ -36,14 +38,104 @@ export default observer(() => {
/>
</Helmet>
<div className={styles.content}>
<div className={styles.attribution}>
<div className={styles.nav}>
<a className={styles.logo}>
<img
src="https://app.revolt.chat/assets/wide.fe712d4a.svg"
draggable={false}
/>
</a>
<LocaleSelector />
</div>
{/*<div className={styles.middle}>*/}
<div className={styles.form}>
{/*<div style={styles.version}>
API: <code>{configuration?.revolt ?? "???"}</code>{" "}
&middot; revolt.js: <code>{LIBRARY_VERSION}</code>{" "}
&middot; App: <code>{APP_VERSION}</code>
</div>*/}
<Switch>
<Route path="/login/create">
<FormCreate />
</Route>
<Route path="/login/resend">
<FormResend />
</Route>
<Route path="/login/verify/:token">
<FormVerify />
</Route>
<Route path="/login/reset/:token">
<FormReset />
</Route>
<Route path="/login/reset">
<FormSendReset />
</Route>
<Route path="/">
<FormLogin />
</Route>
</Switch>
</div>
{/*<div className={styles.loginQR}></div>*/}
{/*</div>*/}
<div className={styles.bottom}>
<div className={styles.links}>
<div className={styles.socials}>
<a
href="https://github.com/revoltchat"
target="_blank">
<Github size={24} />
</a>
<a
href="https://twitter.com/revoltchat"
target="_blank">
<Twitter size={24} />
</a>
<a
href="https://mastodon.social/@revoltchat"
target="_blank">
<Mastodon size={24} />
</a>
</div>
<div className={styles.bullet} />
<div className={styles.revolt}>
<a
href="https://revolt.chat/about"
target="_blank"
rel="noreferrer">
<Text id="general.about" />
</a>
<a
href="https://revolt.chat/terms"
target="_blank"
rel="noreferrer">
<Text id="general.tos" />
</a>
<a
href="https://revolt.chat/privacy"
target="_blank"
rel="noreferrer">
<Text id="general.privacy" />
</a>
</div>
</div>
<a
className={styles.attribution}
href="https://unsplash.com/@fakurian"
target="_blank">
<Text id="general.image_by" /> &lrm;@fakurian &rlm;·
unsplash.com
</a>
</div>
{/*<div className={styles.attribution}>
<span>
API: <code>{configuration?.revolt ?? "???"}</code>{" "}
&middot; revolt.js: <code>{LIBRARY_VERSION}</code>{" "}
&middot; App: <code>{APP_VERSION}</code>
</span>
<span>
<LocaleSelector />
</span>
</div>
<div className={styles.modal}>
@@ -67,18 +159,8 @@ export default observer(() => {
<FormLogin />
</Route>
</Switch>
</div>
<div className={styles.attribution}>
<span>
<Text id="general.image_by" /> &lrm;@lorenzoherrera
&rlm;· unsplash.com
</span>
</div>
</div>*/}
</div>
<div
className={styles.bg}
style={{ background: `url('${background}')` }}
/>
</div>
</>
);