fluid flow

src/containers/App.tsx

@@ -1,11 +1,8 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 import { hot } from 'react-hot-loader';
 import { ConnectedRouter } from 'connected-react-router';
-import {
-  NavLink, Switch, Route, Redirect
-} from 'react-router-dom';
+import { Switch, Route, Redirect } from 'react-router-dom';
 import { history } from '~/redux/store';
 import { FlowLayout } from '~/containers/flow/FlowLayout';
 import { MainLayout } from '~/containers/main/MainLayout';
@@ -23,29 +20,28 @@ const mapDispatchToProps = {};
 
 type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {};
 
-class Component extends React.Component<IProps, {}> {
-  render() {
-    return (
-      <ConnectedRouter history={history}>
-        <BlurWrapper is_blurred={this.props.is_shown}>
-          <MainLayout>
-            <Modal />
-            <Sprites />
+const Component: FC<IProps> = ({ is_shown }) => (
+  <ConnectedRouter history={history}>
+    <BlurWrapper is_blurred={is_shown}>
+      <Modal />
+      <Sprites />
 
-            <Switch>
-              <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
-              <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
-              <Route path="/examples/horizontal" component={HorizontalExample} />
-              <Route exact path={URLS.BASE} component={FlowLayout} />
+      <Switch>
+        <Route exact path={URLS.BASE} component={FlowLayout} />
 
-              <Redirect to="/" />
-            </Switch>
-          </MainLayout>
-        </BlurWrapper>
-      </ConnectedRouter>
-    );
-  }
-}
+        <MainLayout>
+          <Switch>
+            <Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
+            <Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
+            <Route path="/examples/horizontal" component={HorizontalExample} />
+
+            <Redirect to="/" />
+          </Switch>
+        </MainLayout>
+      </Switch>
+    </BlurWrapper>
+  </ConnectedRouter>
+);
 
 export default connect(
   mapStateToProps,

src/containers/examples/ImageExample/index.tsx

@@ -10,17 +10,16 @@ import { NodeRelated } from '~/components/node/NodeRelated';
 import { Tags } from '~/components/node/Tags';
 import { MenuButton } from '~/components/node/MenuButton';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { InputText } from '~/components/input/InputText';
 
 interface IProps {}
 
 const ImageExample: FC<IProps> = () => (
   <Card className={styles.node} seamless>
-    <InputText />
     <div className={styles.image_container}>
       <img
         className={styles.image}
         src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg"
+        alt=""
       />
     </div>
 
@@ -41,11 +40,7 @@ const ImageExample: FC<IProps> = () => (
             <Group style={{ flex: 1 }}>
               <Padder className={styles.buttons}>
                 <Group>
-                  <MenuButton
-                    title="На главной"
-                    description="плывет по течению"
-                    icon="star"
-                  />
+                  <MenuButton title="На главной" description="плывет по течению" icon="star" />
 
                   <MenuButton title="Видно всем" icon="star" />
 
@@ -59,7 +54,7 @@ const ImageExample: FC<IProps> = () => (
                   { title: 'Плейлист', feature: 'green' },
                   { title: 'Просто' },
                   { title: '+ фото', feature: 'black' },
-                  { title: '+ с музыкой', feature: 'black' }
+                  { title: '+ с музыкой', feature: 'black' },
                 ]}
               />
 

src/containers/flow/FlowLayout/index.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { TestGrid } from '~/components/flow/TestGrid';
+import * as styles from './styles.scss';
+import { Header } from '~/components/main/Header';
 
 export const FlowLayout = () => (
-  <div className="default_container content_container">
+  <div className={styles.wrap}>
+    <Header />
     <TestGrid />
   </div>
 );

src/containers/flow/FlowLayout/styles.scss

@@ -0,0 +1,6 @@
+.wrap {
+  max-width: 2000px;
+  padding: 0 40px 40px 40px;
+  display: flex;
+  flex-direction: column;
+}