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/lab/LabImage/index.tsx

@@ -23,7 +23,6 @@ interface IProps extends INodeComponentProps {}
 
 const breakpoints: SwiperOptions['breakpoints'] = {
   599: {
-    spaceBetween: 20,
     navigation: true,
   },
 };
@@ -64,7 +63,6 @@ const LabImage: FC<IProps> = ({ node, isLoading }) => {
           initialSlide={0}
           slidesPerView={images.length > 1 ? 1.1 : 1}
           onSwiper={setControlledSwiper}
-          spaceBetween={10}
           grabCursor
           autoHeight
           breakpoints={breakpoints}

src/components/lab/LabImage/styles.module.scss

@@ -28,7 +28,6 @@
   text-transform: uppercase;
   font: $font_32_bold;
   display: flex;
-  border-radius: $radius;
   align-items: center;
   justify-content: center;
   width: auto;
@@ -51,7 +50,6 @@
 .image {
   max-height: calc(100vh - 70px - 70px);
   max-width: 100%;
-  border-radius: $radius;
   transition: box-shadow 1s;
   box-shadow: transparentize(black, 0.7) 0 3px 5px;
 

src/components/lab/LabNode/index.tsx

@@ -5,6 +5,7 @@ import styles from './styles.module.scss';
 import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
 import { isAfter, parseISO } from 'date-fns';
 import classNames from 'classnames';
+import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
 
 interface IProps {
   node: INode;
@@ -22,8 +23,10 @@ const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
     [node.commented_at, lastSeen]
   );
 
+  const background = useColorGradientFromString(node.title, 3, 2);
+
   return (
-    <div className={classNames(styles.wrap, { [styles.heroic]: node.is_heroic })}>
+    <div className={classNames(styles.wrap)} style={{ background }}>
       {lab}
       <LabBottomPanel
         node={node}