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 {
-      width, height, rays, particles
-    } = this.state;
+    const { 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(({
-      angle, iterator, weight, speed, pulsar, opacity
-    }, index) => {
+    rays.map(({ 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.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.moveTo(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.fill();
       ctx.closePath();
 
       ctx.beginPath();
       ctx.fillStyle = gradient2;
-      ctx.moveTo(((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 + 250)), height * 1.4);
+      ctx.moveTo(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 + 250), height * 1.4);
       ctx.fill();
       ctx.closePath();
 
@@ -114,16 +110,17 @@ export class GodRays extends React.Component<IGodRaysProps> {
     const { width, height } = this.state;
 
     return (
-      <div style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: -1,
-        opacity: 1,
-        pointerEvents: 'none',
-      }}
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          zIndex: 0,
+          opacity: 1,
+          pointerEvents: 'none',
+        }}
       >
         <canvas
           width={width}
@@ -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<IProps> = ({}) => (
-  <div className={styles.wrap}>
-    <div className={styles.content}>
-      <div className={styles.sign}>НЕ НАЙДЕН</div>
-      <div>Нам очень жаль.</div>
-    </div>
-    <div className={styles.image} />
-  </div>
-);
+const ErrorNotFound: FC<{}> = () =>
+  createPortal(
+    <div className={styles.wrap}>
+      <GodRays />
+      <h2 className={styles.sign}>Страница утеряна</h2>
+      <div>Нам очень жаль</div>
+    </div>,
+    document.body
+  );
 
 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;
-}
-
-.content {
-  flex: 2;
-  padding: $gap * 4;
-}
-
-.image {
-  flex: 1 1;
-  // background: red;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding-top: 120px;
   display: flex;
-  border-radius: 0 $radius $radius 0;
-}
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
 
-.sign {
-  // font: $font_24_semibold;
-  // font-size: 72px;
+  h2 {
+    text-transform: uppercase;
+    margin-bottom: $gap;
+  }
 }