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-end: span 2;
+  grid-row-start: 1;
+  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,7 +25,6 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
   const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
   return (
-    <div>
     <div className={style.container}>
       <Logo />
 
@@ -52,7 +51,6 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
         </Group>
       )}
     </div>
-    </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}>
+    <div className={styles.content}>
       <Header />
 
-    <div className={styles.content}>
       {children}
     </div>
   </div>