refactored flow layout

src/components/flow/FlowGrid/index.tsx

@@ -1,14 +1,11 @@
 import React, { FC } from 'react';
 import { Cell } from '~/components/flow/Cell';
 
-import * as styles from './styles.scss';
 import { IFlowState } from '~/redux/flow/reducer';
 import { INode } from '~/redux/types';
 import { canEditNode } from '~/utils/node';
 import { IUser } from '~/redux/auth/types';
 import { flowSetCellView } from '~/redux/flow/actions';
-import { FlowHero } from '../FlowHero';
-import { FlowRecent } from '../FlowRecent';
 
 type IProps = Partial<IFlowState> & {
   user: Partial<IUser>;
@@ -16,34 +13,16 @@ type IProps = Partial<IFlowState> & {
   onChangeCellView: typeof flowSetCellView;
 };
 
-export const FlowGrid: FC<IProps> = ({
-  user,
-  nodes,
-  heroes,
-  recent,
-  updated,
-  onSelect,
-  onChangeCellView,
-}) => (
-  <div>
-    <div className={styles.grid_test}>
-      <div className={styles.hero}>
-        <FlowHero heroes={heroes} />
-      </div>
-
-      <div className={styles.stamp}>
-        <FlowRecent recent={recent} updated={updated} />
-      </div>
-
-      {nodes.map(node => (
-        <Cell
-          key={node.id}
-          node={node}
-          onSelect={onSelect}
-          can_edit={canEditNode(node, user)}
-          onChangeCellView={onChangeCellView}
-        />
-      ))}
-    </div>
-  </div>
+export const FlowGrid: FC<IProps> = ({ user, nodes, onSelect, onChangeCellView }) => (
+  <>
+    {nodes.map(node => (
+      <Cell
+        key={node.id}
+        node={node}
+        onSelect={onSelect}
+        can_edit={canEditNode(node, user)}
+        onChangeCellView={onChangeCellView}
+      />
+    ))}
+  </>
 );

src/components/flow/FlowGrid/styles.scss

@@ -2,11 +2,6 @@ $cols: $content_width / $cell;
 $stamp_color: $content_bg;
 
 .grid {
-  padding: $gap / 2;
-  margin: 0 (-$gap / 2);
-}
-
-.grid_test {
   display: grid;
 
   grid-template-columns: repeat(5, 1fr);
@@ -73,7 +68,7 @@ $stamp_color: $content_bg;
 
 .stamp {
   @include outer_shadow();
-  // grid-row: -1 / 3;
+
   grid-row-end: span 2;
   grid-column: -2 / -1;
   background: $stamp_color;
@@ -90,16 +85,13 @@ $stamp_color: $content_bg;
   position: relative;
 
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     height: 60px;
     width: 100%;
-    background: linear-gradient(
-      transparentize($stamp_color, 1),
-      $stamp_color 90%
-    );
+    background: linear-gradient(transparentize($stamp_color, 1), $stamp_color 90%);
     pointer-events: none;
     touch-action: none;
   }