lost page

src/components/containers/BlurWrapper/styles.scss

@@ -3,6 +3,10 @@
   transition: filter 0.25s;
   will-change: filter;
   padding-top: 100px + $gap;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  min-height: 100vh;
 
   @include tablet {
     padding-top: 72px + $gap;

src/components/main/GodRays/index.tsx

@@ -26,13 +26,11 @@ export class GodRays extends React.Component<IGodRaysProps> {
   };
 
   draw = () => {
-    if ((this.props.raised) || !this.canvas) {
+    if (this.props.raised || !this.canvas) {
       return setTimeout(() => window.requestAnimationFrame(this.draw), 1000);
     }
 
-    const {
+    const { width, height, rays, particles } = this.state;
-      width, height, rays, particles
-    } = this.state;
 
     const ctx = this.canvas.getContext('2d');
 
@@ -40,9 +38,7 @@ export class GodRays extends React.Component<IGodRaysProps> {
     ctx.clearRect(0, 0, width, height + 100); // clear canvas
     ctx.save();
 
-    rays.map(({
+    rays.map(({ angle, iterator, weight, speed, pulsar, opacity }, index) => {
-      angle, iterator, weight, speed, pulsar, opacity
-    }, index) => {
       const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3);
       gradient.addColorStop(0.2, `rgba(255, 60, 40, ${opacity * 0.1})`);
       gradient.addColorStop(1, 'rgba(255, 60, 40, 0)');
@@ -58,19 +54,19 @@ export class GodRays extends React.Component<IGodRaysProps> {
 
       ctx.beginPath();
       ctx.fillStyle = gradient;
-      ctx.moveTo(((width / 2) - (weight / 2)), -900);
+      ctx.moveTo(width / 2 - weight / 2, -900);
-      ctx.lineTo(((width / 2) + (weight / 2)), -900);
+      ctx.lineTo(width / 2 + weight / 2, -900);
-      ctx.lineTo(((width / 2) + (weight / 2 + 300)), height * 1.4);
+      ctx.lineTo(width / 2 + (weight / 2 + 300), height * 1.4);
-      ctx.lineTo(((width / 2) - (weight / 2 + 300)), height * 1.4);
+      ctx.lineTo(width / 2 - (weight / 2 + 300), height * 1.4);
       ctx.fill();
       ctx.closePath();
 
       ctx.beginPath();
       ctx.fillStyle = gradient2;
-      ctx.moveTo(((width / 2) - (weight / 6)), -900);
+      ctx.moveTo(width / 2 - weight / 6, -900);
-      ctx.lineTo(((width / 2) + (weight / 6)), -900);
+      ctx.lineTo(width / 2 + weight / 6, -900);
-      ctx.lineTo(((width / 2) + (weight / 6 + 50)), height * 1.4);
+      ctx.lineTo(width / 2 + (weight / 6 + 50), height * 1.4);
-      ctx.lineTo(((width / 2) - (weight / 6 + 250)), height * 1.4);
+      ctx.lineTo(width / 2 - (weight / 6 + 250), height * 1.4);
       ctx.fill();
       ctx.closePath();
 
@@ -114,13 +110,14 @@ export class GodRays extends React.Component<IGodRaysProps> {
     const { width, height } = this.state;
 
     return (
-      <div style={{
+      <div
+        style={{
           position: 'fixed',
           top: 0,
           left: 0,
           width: '100%',
           height: '100%',
-        zIndex: -1,
+          zIndex: 0,
           opacity: 1,
           pointerEvents: 'none',
         }}
@@ -133,7 +130,9 @@ export class GodRays extends React.Component<IGodRaysProps> {
             position: 'relative',
             top: -100,
           }}
-          ref={(el) => { this.canvas = el; }}
+          ref={el => {
+            this.canvas = el;
+          }}
         />
       </div>
     );

src/containers/main/MainLayout/styles.scss

@@ -6,7 +6,7 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
-  min-height: 100vh;
+  flex: 1;
 
   @include tablet {
     padding: 0;

src/containers/pages/ErrorNotFound/index.tsx

@@ -1,16 +1,16 @@
 import React, { FC } from 'react';
 import styles from './styles.scss';
+import { createPortal } from 'react-dom';
+import { GodRays } from '~/components/main/GodRays';
 
-interface IProps {}
+const ErrorNotFound: FC<{}> = () =>
-
+  createPortal(
-const ErrorNotFound: FC<IProps> = ({}) => (
     <div className={styles.wrap}>
-    <div className={styles.content}>
+      <GodRays />
-      <div className={styles.sign}>НЕ НАЙДЕН</div>
+      <h2 className={styles.sign}>Страница утеряна</h2>
-      <div>Нам очень жаль.</div>
+      <div>Нам очень жаль</div>
-    </div>
+    </div>,
-    <div className={styles.image} />
+    document.body
-  </div>
+  );
-);
 
 export { ErrorNotFound };

src/containers/pages/ErrorNotFound/styles.scss

@@ -3,25 +3,24 @@
 
   flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
   background: $content_bg;
   border-radius: $radius;
-}
+  position: absolute;
-
+  width: 100%;
-.content {
+  height: 100%;
-  flex: 2;
+  top: 0;
-  padding: $gap * 4;
+  left: 0;
-}
+  padding-top: 120px;
-
-.image {
-  flex: 1 1;
-  // background: red;
   display: flex;
-  border-radius: 0 $radius $radius 0;
+  align-items: center;
-}
+  justify-content: center;
+  box-sizing: border-box;
 
-.sign {
+  h2 {
-  // font: $font_24_semibold;
+    text-transform: uppercase;
-  // font-size: 72px;
+    margin-bottom: $gap;
+  }
 }