added login scene as backdrop component

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

@@ -0,0 +1,57 @@
+import React, { FC, useState } from "react";
+
+import styles from "./styles.module.scss";
+
+interface LoginSceneProps {}
+
+const LoginScene: FC<LoginSceneProps> = () => {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <div className={styles.scene}>
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 1920 1080"
+        preserveAspectRatio="xMidYMid slice"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <linearGradient id="fallbackGradient" x1={0} x2={0} y1={1} y2={0}>
+            <stop style={{ stopColor: "#ffccaa", stopOpacity: 1 }} offset="0" />
+            <stop
+              style={{ stopColor: "#fff6d5", stopOpacity: 1 }}
+              offset="0.34655526"
+            />
+            <stop
+              style={{ stopColor: "#afc6e9", stopOpacity: 1 }}
+              offset="0.765342"
+            />
+            <stop style={{ stopColor: "#879fde", stopOpacity: 1 }} offset="1" />
+          </linearGradient>
+        </defs>
+
+        <rect
+          width={1920}
+          height={1080}
+          x={0}
+          y={0}
+          fill="url(#fallbackGradient)"
+        />
+
+        <image
+          href="/images/clouds.svg"
+          width={1920}
+          height={1080}
+          x={0}
+          y={0}
+          opacity={loaded ? 1 : 0}
+          onLoad={() => setLoaded(true)}
+          className={styles.image}
+        />
+      </svg>
+    </div>
+  );
+};
+
+export { LoginScene };

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

@@ -0,0 +1,17 @@
+@import "src/styles/mixins";
+
+.scene {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.image {
+  transition: opacity 1s;
+
+  @include tablet {
+    display: none;
+  }
+}

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useCallback } from "react";
 
 import { LoginDialogButtons } from "~/components/auth/login/LoginDialogButtons";
+import { LoginScene } from "~/components/auth/login/LoginScene";
 import { Group } from "~/components/containers/Group";
 import { Padder } from "~/components/containers/Padder";
 import { BetterScrollDialog } from "~/components/dialogs/BetterScrollDialog";
@@ -45,7 +46,7 @@ const LoginDialog: FC<LoginDialogProps> = ({ onRequestClose }) => {
           width={300}
           onClose={onRequestClose}
           footer={<LoginDialogButtons openOauthWindow={openOauthWindow} />}
-          backdrop={<div className={styles.backdrop} />}
+          backdrop={<LoginScene />}
         >
           <Padder>
             <div className={styles.wrap}>

src/containers/dialogs/LoginDialog/styles.module.scss

@@ -46,13 +46,3 @@ $vk_color: $secondary_color;
     color: lighten($content_bg, 40%);
   }
 }
-
-.backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url(/images/clouds.svg) 50% 50%;
-  background-size: cover;
-}