added 404 page

src/constants/urls.ts

@@ -1,5 +1,6 @@
 export const URLS = {
   BASE: '/',
+  BORIS: '/boris',
   AUTH: {
     LOGIN: '/auth/login',
   },
@@ -7,6 +8,10 @@ export const URLS = {
     EDITOR: '/examples/edit',
     IMAGE: '/examples/image',
   },
+  ERRORS: {
+    NOT_FOUND: '/lost',
+    BACKEND_DOWN: '/oopsie',
+  },
   NODE_URL: (id: number | string) => `/post${id}`,
 };
 

src/containers/App.tsx

@@ -18,6 +18,7 @@ import { PageCover } from '~/components/containers/PageCover';
 import { NodeLayout } from './node/NodeLayout';
 import { BottomContainer } from '~/containers/main/BottomContainer';
 import { BorisLayout } from './node/BorisLayout';
+import { ErrorNotFound } from './pages/ErrorNotFound';
 
 const mapStateToProps = state => ({
   modal: selectModal(state),
@@ -40,9 +41,9 @@ const Component: FC<IProps> = ({ modal: { is_shown } }) => {
               <Route exact path={URLS.BASE} component={FlowLayout} />
               <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
               <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
-              <Route path="/examples/horizontal" component={HorizontalExample} />
+              <Route path={URLS.NODE_URL(':id')} component={NodeLayout} />
-              <Route path="/post:id" component={NodeLayout} />
+              <Route path={URLS.BORIS} component={BorisLayout} />
-              <Route path="/boris" component={BorisLayout} />
+              <Route path={URLS.ERRORS.NOT_FOUND} component={ErrorNotFound} />
 
               <Redirect to="/" />
             </Switch>

src/containers/main/MainLayout/styles.scss

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

src/containers/pages/ErrorNotFound/index.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import styles from './styles.scss';
+
+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>
+);
+
+export { ErrorNotFound };

src/containers/pages/ErrorNotFound/styles.scss

@@ -0,0 +1,27 @@
+.wrap {
+  @include outer_shadow();
+
+  flex: 1;
+  display: flex;
+  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;
+  display: flex;
+  border-radius: 0 $radius $radius 0;
+}
+
+.sign {
+  font: $font_24_semibold;
+  font-size: 72px;
+}