From b0d9e8f8ba976a064bed8c9c14a2b29db6517080 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 7 Apr 2023 20:32:50 +0600
Subject: [PATCH] login: made scene static

---
 .../{LoginScene => LoginAnimatedScene}/index.tsx | 16 ++++++++--------
 .../styles.module.scss                           |  0
 .../auth/login/LoginStaticScene/index.tsx        | 11 +++++++++++
 .../login/LoginStaticScene/styles.module.scss    |  9 +++++++++
 src/containers/dialogs/LoginDialog/index.tsx     |  8 ++++----
 5 files changed, 32 insertions(+), 12 deletions(-)
 rename src/components/auth/login/{LoginScene => LoginAnimatedScene}/index.tsx (90%)
 rename src/components/auth/login/{LoginScene => LoginAnimatedScene}/styles.module.scss (100%)
 create mode 100644 src/components/auth/login/LoginStaticScene/index.tsx
 create mode 100644 src/components/auth/login/LoginStaticScene/styles.module.scss

diff --git a/src/components/auth/login/LoginScene/index.tsx b/src/components/auth/login/LoginAnimatedScene/index.tsx
similarity index 90%
rename from src/components/auth/login/LoginScene/index.tsx
rename to src/components/auth/login/LoginAnimatedScene/index.tsx
index f03417af..f2638034 100644
--- a/src/components/auth/login/LoginScene/index.tsx
+++ b/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 *
-            it.velocity *
-            200}px, 0)`;
+          target.style.transform = `translate(${
+            shift * it.velocity * 200
+          }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 };
diff --git a/src/components/auth/login/LoginScene/styles.module.scss b/src/components/auth/login/LoginAnimatedScene/styles.module.scss
similarity index 100%
rename from src/components/auth/login/LoginScene/styles.module.scss
rename to src/components/auth/login/LoginAnimatedScene/styles.module.scss
diff --git a/src/components/auth/login/LoginStaticScene/index.tsx b/src/components/auth/login/LoginStaticScene/index.tsx
new file mode 100644
index 00000000..55145ed4
--- /dev/null
+++ b/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 };
diff --git a/src/components/auth/login/LoginStaticScene/styles.module.scss b/src/components/auth/login/LoginStaticScene/styles.module.scss
new file mode 100644
index 00000000..f168dc5b
--- /dev/null
+++ b/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;
+}
diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx
index 3a01902b..3a8337b2 100644
--- a/src/containers/dialogs/LoginDialog/index.tsx
+++ b/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}>