return to fixed flow

src/components/flow/TestGrid/styles.scss

@@ -8,6 +8,7 @@ $cols: $content_width / $cell;
 .grid_test {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-rows: 360px;
   grid-auto-rows: 256px;
   grid-auto-flow: row dense;
   grid-column-gap: $grid_line;
@@ -19,13 +20,13 @@ $cols: $content_width / $cell;
 }
 
 .hero {
-  grid-row-start: 0;
+  grid-row-start: 1;
-  grid-row-end: span 2;
+  grid-row-end: span 1;
   grid-column-start: 0;
   grid-column-end: span 4;
   // gridRow: "1 / 2",
   // gridColumn: "1 / -1",
-  background: #222222;
+  background: darken($content_bg, 2%);
   border-radius: $radius;
   // height: 33vh;
   display: flex;
@@ -38,7 +39,7 @@ $cols: $content_width / $cell;
   // grid-row: -1 / 3;
   grid-row-end: span 3;
   grid-column: -2 / -1;
-  background: #090909;
+  background: darken($content_bg, 8%);
   border-radius: $radius;
   padding: $gap;
   display: flex;

src/components/main/Header/index.tsx

@@ -25,33 +25,31 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
   const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
   return (
-    <div>
+    <div className={style.container}>
-      <div className={style.container}>
+      <Logo />
-        <Logo />
 
-        <Filler />
+      <Filler />
 
-        <div className={style.plugs}>
+      <div className={style.plugs}>
-          <Link to="/">flow</Link>
+        <Link to="/">flow</Link>
-          <Link to="/examples/image">image</Link>
+        <Link to="/examples/image">image</Link>
-          <div onClick={onOpenEditor}>editor</div>
+        <div onClick={onOpenEditor}>editor</div>
-        </div>
-
-        <Filler />
-
-        {is_user && (
-          <Group horizontal className={style.user_button}>
-            <div>{username}</div>
-            <div className={style.user_avatar} />
-          </Group>
-        )}
-
-        {!is_user && (
-          <Group horizontal className={style.user_button} onClick={onLogin}>
-            <div>ВДОХ</div>
-          </Group>
-        )}
       </div>
+
+      <Filler />
+
+      {is_user && (
+        <Group horizontal className={style.user_button}>
+          <div>{username}</div>
+          <div className={style.user_avatar} />
+        </Group>
+      )}
+
+      {!is_user && (
+        <Group horizontal className={style.user_button} onClick={onLogin}>
+          <div>ВДОХ</div>
+        </Group>
+      )}
     </div>
   );
 };

src/containers/App.tsx

@@ -27,10 +27,11 @@ const Component: FC<IProps> = ({ is_shown }) => (
       <Sprites />
 
       <Switch>
-        <Route exact path={URLS.BASE} component={FlowLayout} />
+
 
         <MainLayout>
           <Switch>
+            <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} />

src/containers/flow/FlowLayout/index.tsx

@@ -4,8 +4,5 @@ import * as styles from './styles.scss';
 import { Header } from '~/components/main/Header';
 
 export const FlowLayout = () => (
-  <div className={styles.wrap}>
-    <Header />
     <TestGrid />
-  </div>
 );

src/containers/main/MainLayout/index.tsx

@@ -5,9 +5,9 @@ import { Header } from '~/components/main/Header';
 
 export const MainLayout = ({ children }) => (
   <div className={styles.wrapper}>
-    <Header />
-
     <div className={styles.content}>
+      <Header />
+
       {children}
     </div>
   </div>