From a07a17d892c1a114bade003e7f41e0cfc222e1bf Mon Sep 17 00:00:00 2001 From: trashtemp <96388163+trashtemp@users.noreply.github.com> Date: Sat, 25 Dec 2021 19:48:48 +0100 Subject: [PATCH] fix(login): finished new login screen --- disabled-js.svg | 6 +++ index.html | 63 ++++++++++++++++++++++++ src/components/ui/Preloader.tsx | 5 +- src/pages/login/Login.module.scss | 68 ++++++++++++++++++++------ src/pages/login/forms/CaptchaBlock.tsx | 20 ++++---- src/pages/login/forms/Form.tsx | 33 ++++++------- 6 files changed, 152 insertions(+), 43 deletions(-) create mode 100644 disabled-js.svg diff --git a/disabled-js.svg b/disabled-js.svg new file mode 100644 index 00000000..6921adca --- /dev/null +++ b/disabled-js.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/index.html b/index.html index ec592bdd..877dc722 100644 --- a/index.html +++ b/index.html @@ -72,9 +72,72 @@ media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> + + +
+ diff --git a/src/components/ui/Preloader.tsx b/src/components/ui/Preloader.tsx index 4cb45c3d..18174afe 100644 --- a/src/components/ui/Preloader.tsx +++ b/src/components/ui/Preloader.tsx @@ -24,8 +24,9 @@ const PreloaderBase = styled.div` width: 100%; height: 100%; - display: grid; - place-items: center; + display: flex; + align-items: center; + justify-content: center; .spinner { width: 58px; diff --git a/src/pages/login/Login.module.scss b/src/pages/login/Login.module.scss index 5762a104..e2400dac 100644 --- a/src/pages/login/Login.module.scss +++ b/src/pages/login/Login.module.scss @@ -55,7 +55,7 @@ background-color: rgba(36, 36, 36, 0.75); border: 2px solid rgba(128, 128, 128, 0.15); backdrop-filter: blur(20px); - max-width: 330px; + max-width: 360px; max-height: 600px; padding: 30px 25px; border-radius: 8px; @@ -64,6 +64,29 @@ margin-bottom: 20px; box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%); + .captcha { + display: flex; + flex-direction: column; + gap: 10px; + font-size: 13px; + + .title { + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; + } + + .checkbox { + display: flex; + align-items: center; + justify-content: center; + } + + a { + cursor: pointer; + } + } + .formModal { display: flex; flex-direction: column; @@ -71,10 +94,15 @@ > span { font-size: 13px; + word-break: keep-all; b { font-weight: 600; } + + a { + white-space: nowrap; + } } .welcome { @@ -84,8 +112,17 @@ } .subtitle { + display: flex; + align-items: center; + gap: 6px; font-weight: 400; font-size: 14px; + + > div { + margin-top: 1px; + font-size: 11px; + color: var(--secondary-foreground); + } } form { @@ -169,27 +206,28 @@ .success { display: flex; - align-items: center; flex-direction: column; + gap: 10px; - .note { - color: var(--tertiary-foreground); + .title { + font-size: 20px; + font-weight: 600; } - .mailProvider { - padding: 24px 0; - } - - * { - margin: 0; - } - - h1 { + .subtitle { font-weight: 400; + font-size: 14px; + margin-bottom: 10px; } - h2 { - font-weight: 300; + button { + width: 100%; + background: var(--secondary-background); + margin-bottom: 8px; + } + + a { + font-size: 13px; } } diff --git a/src/pages/login/forms/CaptchaBlock.tsx b/src/pages/login/forms/CaptchaBlock.tsx index 09addd16..91124b38 100644 --- a/src/pages/login/forms/CaptchaBlock.tsx +++ b/src/pages/login/forms/CaptchaBlock.tsx @@ -27,16 +27,18 @@ export const CaptchaBlock = observer((props: CaptchaProps) => { return ; return ( -
- props.onSuccess(token)} - /> -
- - - +
+
Are you human?
+
+ props.onSuccess(token)} + />
+ + +
); }); diff --git a/src/pages/login/forms/Form.tsx b/src/pages/login/forms/Form.tsx index cd67c32b..99c40d20 100644 --- a/src/pages/login/forms/Form.tsx +++ b/src/pages/login/forms/Form.tsx @@ -111,30 +111,28 @@ export function Form({ page, callback }: Props) {
{configuration?.features.email ? ( <> - -

- -

-

- -

+
+
+ +
+
+ +
+
) : ( <> - -

+
-

+
)} - - - - - - - + + + + +
); } @@ -150,6 +148,7 @@ export function Form({ page, callback }: Props) {
+
(app.revolt.chat)