login: made scene static

src/components/auth/login/LoginAnimatedScene/index.tsx

@@ -1,6 +1,6 @@
 import { FC, memo, useCallback, useEffect, useRef, useState } from 'react';
 
-import { debounce, throttle } from 'throttle-debounce';
+import { throttle } from 'throttle-debounce';
 
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
 
@@ -48,7 +48,7 @@ const layers: Layer[] = [
   },
 ];
 
-const LoginScene: FC<LoginSceneProps> = memo(() => {
+const LoginAnimatedScene: FC<LoginSceneProps> = memo(() => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [loaded, setLoaded] = useState(false);
   const imageRefs = useRef<Array<SVGImageElement | null>>([]);
@@ -73,9 +73,9 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
         const target = imageRefs.current[index];
 
         if (target) {
-          target.style.transform = `translate(${shift *
+          target.style.transform = `translate(${
-            it.velocity *
+            shift * it.velocity * 200
-            200}px, 0)`;
+          }px, 0)`;
         }
       });
     },
@@ -124,9 +124,9 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
           fill="url(#fallbackGradient)"
         />
 
-        {layers.map(it => (
+        {layers.map((it) => (
           <image
-            ref={it => imageRefs.current.push(it)}
+            ref={(it) => imageRefs.current.push(it)}
             key={it.src}
             href={it.src}
             width={it.width}
@@ -143,4 +143,4 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
   );
 });
 
-export { LoginScene };
+export { LoginAnimatedScene };

src/components/auth/login/LoginStaticScene/index.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+import styles from './styles.module.scss';
+
+interface LoginStaticSceneProps {}
+
+const LoginStaticScene: FC<LoginStaticSceneProps> = () => (
+  <div className={styles.scene} />
+);
+
+export { LoginStaticScene };

src/components/auth/login/LoginStaticScene/styles.module.scss

@@ -0,0 +1,9 @@
+@import 'src/styles/mixins';
+
+.scene {
+  position: absolute;
+  inset: 0;
+
+  background: url('/images/clouds.svg') no-repeat 50% 50%;
+  background-size: cover;
+}

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback } from 'react';
+import { FC, useCallback } from 'react';
 
 import { LoginDialogButtons } from '~/components/auth/login/LoginDialogButtons';
-import { LoginScene } from '~/components/auth/login/LoginScene';
+import { LoginStaticScene } from '~/components/auth/login/LoginStaticScene';
 import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
 import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
@@ -27,7 +27,7 @@ const LoginDialog: FC<LoginDialogProps> = ({ onRequestClose }) => {
   const { openOauthWindow } = useOAuth();
   const showRestoreDialog = useShowModal(Dialog.RestoreRequest);
   const onRestoreRequest = useCallback(
-    event => {
+    (event) => {
       event.preventDefault();
       showRestoreDialog({});
     },
@@ -46,7 +46,7 @@ const LoginDialog: FC<LoginDialogProps> = ({ onRequestClose }) => {
           width={300}
           onClose={onRequestClose}
           footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
-          backdrop={<LoginScene />}
+          backdrop={<LoginStaticScene />}
         >
           <Padder>
             <div className={styles.wrap}>