F41/404

app/src/App.js

@@ -5,7 +5,7 @@ import Login from "./views/login/Login";
 import Register from "./views/login/Login";
 import Welcom from "./views/login/Login";
 import Dashboard from "./views/dashboard/Dashboard";
-import NotFound from './components/404/404';
+import NotFound from './views/404/404';
 
 import { createBrowserHistory } from "history";
 import Analitic from "./helper/analitics";

app/src/views/404/404.js

@@ -0,0 +1,45 @@
+import React from "react";
+import style from "./style.module.scss";
+import { Button } from "antd";
+
+class NotFound extends React.Component {
+  render() 
+  {
+    return(
+        <div className={style.container}>
+          <div className={style.massage}>  
+            <div className={style.number}>#404</div>
+            <div className={style.oops}>УУУПС!</div>
+            <div className={style.text}>
+              Мы не можем найти эту страницу, зато мы нашли студента,
+              который прогулял вашу пару :)
+            </div>
+            <div className={style.buttons}>
+            <Button 
+              type="primary" 
+              shape="round" 
+              icon="left"
+              size="large"
+              className={style.button}
+              onClick={this.props.history.goBack}
+              >
+                Назад     
+              </Button>
+            <Button
+                type="primary"
+                shape="round"
+                icon="home"
+                size="large"
+                className={style.button}
+                onClick={() => this.props.history.push("/")}
+              >
+                Главная
+              </Button>
+            </div>
+          </div>
+        </div>          
+    );
+  }
+}
+
+export default NotFound;

app/src/views/404/style.module.scss

@@ -0,0 +1,108 @@
+//midle text
+$text-size: 20px;
+$text-color: Black;
+$text-width: 430px;
+$text-weight: 700;
+$text-top:150px;
+// #404
+$size404:40px;
+// oops
+$oops-size:120px;
+$oops-color: white;
+//buttons
+$margin-to-buttons: 40px;
+
+
+.container
+{
+    height: 100%;
+    width: 100%;
+    background:url(../../assets/img/child.png) repeat-x#00d8ff;
+    -moz-background-size: 100%;
+    -webkit-background-size: 100%; 
+    -o-background-size: 100%; 
+    background-size: 100%; 
+    background-position: bottom left 250px;
+}
+
+.massage
+{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: $text-color;
+    font-weight: $text-weight;
+    height: 100%;
+    min-width: $text-width + 70px;
+    width : 50%;
+    padding-top: $text-top;
+}
+
+.number
+{
+    font-size: $size404;
+    text-align: center;
+    width: $text-width;
+}
+
+.oops
+{
+    font-size: $oops-size;
+    color: $oops-color;
+    height: $oops-size * 0.75;
+    line-height: 0.6;
+}
+
+.text
+{
+    text-align: center;
+    font-size: $text-size;
+    width: $text-width - 10px;
+    padding-bottom: $margin-to-buttons;
+}
+
+.buttons
+{
+    width: $text-width;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+.button
+{
+    background:white;
+    color: black;
+    font-weight: $text-weight;
+}
+
+@media screen and (max-width : 720px)
+{
+    .container
+    {
+        background: url(../../assets/img/child.png) no-repeat  #00d8ff;
+        background-position: bottom;
+        background-size: 100%; 
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .massage
+    {
+        min-width: 320px;
+        padding-top: 40px;
+    }
+
+    .number , .massage , .buttons , .text , .oops
+    {
+        width: 320px;
+    }
+
+    .oops
+    {
+        font-size: 80px;
+        text-align: center;
+    }
+
+}

app/src/views/dashboard/Dashboard.jsx

@@ -2,7 +2,7 @@ import Menu from "../../components/menu/Menu";
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 import Request from "../../components/request/Request";
-import NotFound from '../../components/404/404';
+import NotFound from '../404/404';
 
 class Dashboard extends React.Component {
   render() {