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 };

src/components/flow/FlowCell/styles.module.scss

@@ -0,0 +1,97 @@
+@import "~/styles/variables";
+
+.cell {
+  @include inner_shadow;
+
+  position: relative;
+  overflow: hidden;
+  border-radius: $radius;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background: $content_bg;
+  flex-direction: row;
+  color: inherit;
+  text-decoration: inherit;
+  font: inherit;
+  line-height: inherit;
+
+  &.vertical {
+    flex-direction: column-reverse;
+  }
+}
+
+.thumb {
+  @include outer_shadow;
+
+  border-radius: $radius;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+
+.shade {
+  @include outer_shadow;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+.text {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  z-index: 1;
+  overflow: hidden;
+  border-radius: $radius;
+  max-height: calc(100% - 10px);
+  max-width: calc(100% - 10px);
+  box-sizing: border-box;
+  font: $font_16_regular;
+
+  @include tablet {
+    font: $font_14_regular;
+    left: 5px;
+    bottom: 5px;
+  }
+
+  & :global(.grey) {
+    color: inherit;
+    opacity: 0.5;
+  }
+
+  .quadro &,
+  .horizontal & {
+    max-width: calc(50% - 15px);
+    @include blur(transparentize($content_bg, 0), 10px, 0.5)
+  }
+
+  .quadro &,
+  .vertical & {
+    max-height: calc(50% - 15px);
+    @include blur(transparentize($content_bg, 0), 10px, 0.5)
+  }
+}
+
+.title_wrapper {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  padding: $gap;
+  position: absolute;
+}
+
+.title {
+  font: $font_cell_title;
+  text-transform: uppercase;
+  word-break: break-word;
+
+  @include tablet {
+    font: $font_18_semibold;
+  }
+}