refactored flow cells, added colors for lab (#78)

* made better flow cells

* made cubical desaturation

* made colorfull lab nodes

* colorful lab nodes for all text ones

* all lab nodes are colorful

* disabled lazy loading on heroes

* fixed color calculation hook

* fixed lab color gradients calculation

* fixed cell text on flow

src/components/flow/FlowCell/index.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { NavLink } from 'react-router-dom';
+import { CellShade } from '~/components/flow/CellShade';
+import { FlowCellImage } from '~/components/flow/FlowCellImage';
+import { FlowDisplayVariant } from '~/redux/types';
+import { FlowCellText } from '~/components/flow/FlowCellText';
+import classNames from 'classnames';
+
+interface Props {
+  to: string;
+  title: string;
+  image?: string;
+  color?: string;
+  text?: string;
+  display?: FlowDisplayVariant;
+}
+
+const FlowCell: FC<Props> = ({ color, to, image, display = 'single', text, title }) => {
+  const withText = ((!!display && display !== 'single') || !image) && !!text;
+
+  return (
+    <NavLink className={classNames(styles.cell, styles[display || 'single'])} to={to}>
+      {withText && (
+        <FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>
+          {text!}
+        </FlowCellText>
+      )}
+
+      {image && (
+        <FlowCellImage
+          src={image}
+          height={400}
+          className={styles.thumb}
+          style={{ backgroundColor: color }}
+        />
+      )}
+
+      <CellShade color={color} className={styles.shade} size={withText ? 15 : 50} />
+
+      {!withText && (
+        <div className={styles.title_wrapper}>
+          <h4 className={styles.title}>{title}</h4>
+        </div>
+      )}
+    </NavLink>
+  );
+};
+
+export { FlowCell };