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/home/snow.scss b/src/pages/home/snow.scss index 4df53e93..00ed4814 100644 --- a/src/pages/home/snow.scss +++ b/src/pages/home/snow.scss @@ -46,7 +46,13 @@ $fontSize: 40px; @while ($count > 0) { $left: random(100); $deltaLeft: random(2 * $windNoise * 10) / 10 - $windNoise + $windSpeed; + /*$deltaLeft: math.div(random(2 * $windNoise * 10), 10) - + $windNoise + + $windSpeed;*/ $scale: 1 + (random(2 * $sizeNoise * 10) / 10 - $sizeNoise) / 100; + /*$scale: 1 + + (math.div(random(2 * $sizeNoise * 10), 10) - $sizeNoise) / + 100;*/ .snowflake:nth-child(#{$count}) { animation: animation-snowflake-#{$count} linear infinite; diff --git a/src/pages/login/Login.module.scss b/src/pages/login/Login.module.scss index 27bd99ba..06ef06ba 100644 --- a/src/pages/login/Login.module.scss +++ b/src/pages/login/Login.module.scss @@ -1,126 +1,330 @@ +// Pure CSS hand wave - by https://jarv.is/notes/css-waving-hand-emoji/ +@keyframes wave-animation { + 0% { + transform: rotate(0deg); + } + 10% { + transform: rotate(14deg); + } /* The following five values can be played with to make the waving more or less extreme */ + 20% { + transform: rotate(-8deg); + } + 30% { + transform: rotate(14deg); + } + 40% { + transform: rotate(-4deg); + } + 50% { + transform: rotate(10deg); + } + 60% { + transform: rotate(0deg); + } /* Reset for the last half to pause */ + 100% { + transform: rotate(0deg); + } +} + +/*@keyframes shrink { + 0% { + background-size: 140% 140%; + } + 10% { + background-size: 150% 150%; + } + 100% { + background-size: 100% 100%; + } +}*/ + .login { width: 100%; height: 100%; - + padding: 40px 35px; display: flex; - flex-direction: row; + user-select: none; + background: url("/src/pages/login/background.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + /*animation: shrink 5s normal forwards;*/ - svg { - margin: auto; - } + .nav { + display: flex; + align-items: center; - > div { - flex: 1; + .logo { + flex-grow: 1; + > img { + height: 24px; + } + } } .content { display: flex; flex-direction: column; - justify-content: space-between; + flex-grow: 1; + } - .attribution { - color: var(--tertiary-background); - font-size: 12px; - line-height: 12px; - margin: 8px; + select { + max-width: 180px; + padding: 4px; + height: fit-content; + background-color: rgba(36, 36, 36, 0.75); + border: 2px solid rgba(128, 128, 128, 0.15); + backdrop-filter: blur(20px); + font-size: 13px; + } - display: flex; - flex-direction: row; - justify-content: space-between; - } + .middle { + display: flex; + gap: 50px; - .modal { - display: flex; - flex-direction: row; - - justify-content: center; + .loginQR { + background-color: rgba(36, 36, 36, 0.75); + border: 2px solid rgba(128, 128, 128, 0.15); + border-radius: 8px; + width: 330px; } } - .bg { - background-size: cover !important; - } -} + .form { + background-color: rgba(36, 36, 36, 0.75); + border: 2px solid rgba(128, 128, 128, 0.15); + backdrop-filter: blur(20px); + max-width: 360px; + max-height: 600px; + padding: 30px 25px; + border-radius: 8px; + margin-inline-start: 50px; + margin-top: 20px; + margin-bottom: 20px; + box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%); -.form { - display: flex; - flex-direction: column; - font-size: 14px; + .captcha { + display: flex; + flex-direction: column; + gap: 10px; + font-size: 13px; - img { - width: 260px; - margin: auto; + .title { + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; + } + + .checkbox { + display: flex; + align-items: center; + justify-content: center; + } + + a { + cursor: pointer; + color: var(--accent); + } + } + + .formModal { + display: flex; + flex-direction: column; + gap: 10px; + + > span { + font-size: 13px; + word-break: keep-all; + + a { + color: var(--accent); + white-space: nowrap; + } + } + + .welcome { + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; + + .title { + display: flex; + align-items: center; + gap: 4px; + + img { + animation-name: wave-animation; + animation-duration: 2.5s; + animation-iteration-count: 1; + transform-origin: 70% 70%; + height: 28px; + } + } + } + + .subtitle { + display: flex; + align-items: center; + gap: 6px; + font-weight: 400; + font-size: 14px; + + > div { + display: none; + margin-top: 1px; + font-size: 11px; + color: var(--secondary-foreground); + } + } + + form { + display: flex; + flex-direction: column; + gap: 10px; + + > div { + margin: 0; + margin-bottom: -4px; + font-size: 12px; + color: var(--secondary-foreground); + } + + input { + background: var(--secondary-background); + /*border: 2px solid rgba(128, 128, 128, 0.15);*/ + } + + button { + padding: 8px; + background: var(--secondary-background); + margin-bottom: 15px; + } + } + } } a { - margin-top: 4px; - } + color: white; - form { - margin: 1em 0; - display: flex; - flex-direction: column; - - button { - margin-top: 24px; + &:hover { + text-decoration: underline; } } - .create { - text-align: center; - color: var(--tertiary-foreground); + .bottom { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; - a { - margin: 0 4px; + .links { + display: flex; + align-items: center; + gap: 15px; + + .socials { + display: flex; + gap: 10px; + + a { + transition: opacity 0.2s ease-in-out; + &:hover { + opacity: 0.7; + } + &:active { + opacity: 0.5; + } + } + } + + .bullet { + height: 5px; + width: 5px; + background: grey; + border-radius: 50%; + } + + .revolt { + display: flex; + gap: 10px; + + a { + color: white !important; + } + } } } } .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; } -} - -.footer { - margin-top: 12px; - text-align: center; - color: var(--tertiary6); a { - color: var(--tertiary-background) !important; - cursor: pointer; - margin: 0 2px; - - &:hover { - color: var(--tertiary-foreground) !important; - } + font-size: 13px; + color: var(--accent); } } @media only screen and (max-width: 768px) { - .bg { - display: none; + .login { + padding: 30px 20px; + background-image: unset; + background-color: var(--primary-background); + + .content { + .nav { + .logo { + img { + height: 24px; + } + } + } + + .bottom { + flex-direction: column; + + .links { + flex-direction: column; + gap: 10px; + } + + .bullet, + .attribution { + display: none; + } + } + } + + .form { + border: unset; + margin-inline-start: 0; + padding: 0; + max-width: unset; + box-shadow: unset; + } + + .loginQR { + display: none; + } } } diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index bd3187d2..34253823 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -1,18 +1,17 @@ +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"; -import { LIBRARY_VERSION } from "revolt.js"; import styles from "./Login.module.scss"; 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"; import { Titlebar } from "../../components/native/Titlebar"; -import { APP_VERSION } from "../../version"; import { FormCreate } from "./forms/FormCreate"; import { FormLogin } from "./forms/FormLogin"; import { FormReset, FormSendReset } from "./forms/FormReset"; @@ -36,17 +35,20 @@ export default observer(() => { />
-
- +
+ + {/*TOFIX: Hide logo if on Desktop Native*/} + + + +
+ {/*
*/} +
+ {/*
API: {configuration?.revolt ?? "???"}{" "} · revolt.js: {LIBRARY_VERSION}{" "} · App: {APP_VERSION} - - - - -
-
+
*/} @@ -68,17 +70,58 @@ export default observer(() => {
-
- - ‎@lorenzoherrera - ‏· unsplash.com - + {/*
*/} + {/*
*/} +
+
-
); diff --git a/src/pages/login/background-old.jpg b/src/pages/login/background-old.jpg new file mode 100644 index 00000000..44254ed7 Binary files /dev/null and b/src/pages/login/background-old.jpg differ diff --git a/src/pages/login/background.jpg b/src/pages/login/background.jpg index 44254ed7..c3a50362 100644 Binary files a/src/pages/login/background.jpg and b/src/pages/login/background.jpg differ 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 35a6e14e..3d3dfcc0 100644 --- a/src/pages/login/forms/Form.tsx +++ b/src/pages/login/forms/Form.tsx @@ -15,10 +15,10 @@ import wideSVG from "../../../../public/assets/wide.svg"; import Button from "../../../components/ui/Button"; import Overline from "../../../components/ui/Overline"; import Preloader from "../../../components/ui/Preloader"; +import WaveSVG from "../../settings/assets/wave.svg"; import FormField from "../FormField"; import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock"; -import { Legal } from "./Legal"; import { MailProvider } from "./MailProvider"; interface Props { @@ -112,30 +112,28 @@ export function Form({ page, callback }: Props) {
{configuration?.features.email ? ( <> - -

- -

-

- -

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

+
-

+
)} - - - - - - - + + + + +
); } @@ -144,8 +142,18 @@ export function Form({ page, callback }: Props) { if (loading) return ; return ( -
- +
+
+
+ + +
+
+ +
(app.revolt.chat)
+
+
+ {/* Preact / React typing incompatabilities */}
- + {" "} - + {" "} @@ -219,13 +227,13 @@ export function Form({ page, callback }: Props) { {page === "login" && ( <> - + {" "} - + {" "} @@ -243,7 +251,6 @@ export function Form({ page, callback }: Props) { )} -
); } diff --git a/src/pages/login/forms/Legal.tsx b/src/pages/login/forms/Legal.tsx deleted file mode 100644 index bb0ef4ea..00000000 --- a/src/pages/login/forms/Legal.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import styles from "../Login.module.scss"; -import { Text } from "preact-i18n"; - -export function Legal() { - return ( - - - - - · - - - - · - - - - - ); -} diff --git a/src/pages/settings/assets/wave.svg b/src/pages/settings/assets/wave.svg new file mode 100644 index 00000000..89f51bb0 --- /dev/null +++ b/src/pages/settings/assets/wave.svg @@ -0,0 +1,32 @@ + + + + + + + + Mutant Standard emoji 2020.04 + + + + + Dzuk + http://mutant.tech/ + + + + + + + + + + + + + + + diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx index 9086e5fb..28141891 100644 --- a/src/pages/settings/server/Overview.tsx +++ b/src/pages/settings/server/Overview.tsx @@ -126,6 +126,7 @@ export const Overview = observer(({ server }: Props) => { alignItems: "center", }}> {i18n} + Sends a message when someone joins your server