added flow shade

src/components/flow/Cell/index.tsx

@@ -9,6 +9,7 @@ import { Icon } from '~/components/input/Icon';
 import { PRESETS } from '~/constants/urls';
 import { NODE_TYPES } from '~/redux/node/constants';
 import { Link } from 'react-router-dom';
+import { CellShade } from '~/components/flow/CellShade';
 
 const THUMBNAIL_SIZES = {
   horizontal: PRESETS.small_hero,
@@ -26,7 +27,6 @@ interface IProps {
 const Cell: FC<IProps> = ({
   node: { id, title, thumbnail, type, flow, description },
   can_edit,
-  onSelect,
   onChangeCellView,
 }) => {
   const ref = useRef(null);
@@ -112,6 +112,8 @@ const Cell: FC<IProps> = ({
           )}
 
           <Link className={classNames(styles.face)} to={`/post${id}`}>
+            <CellShade color={flow.dominant_color} />
+
             <div className={styles.face_content}>
               {!text && <div className={classNames(styles.title, titleSize)}>{title || '...'}</div>}
 

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

@@ -195,7 +195,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(5deg, transparentize($content_bg, 0), transparentize($content_bg, 1));
   z-index: 2;
   border-radius: $cell_radius;
   padding: $gap / 2;

src/components/flow/CellShade/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC, useMemo } from 'react';
+import styles from './styles.module.scss';
+import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
+import { convertHexToRGBA } from '~/utils/color';
+import { DivProps } from '~/utils/types';
+import classNames from 'classnames';
+
+interface Props extends DivProps {
+  color?: string;
+}
+
+const CellShade: FC<Props> = ({ color, ...rest }) => {
+  const background = useMemo(() => {
+    if (!color || color === DEFAULT_DOMINANT_COLOR) {
+      return undefined;
+    }
+
+    return `linear-gradient(10deg, ${color} 30px, ${convertHexToRGBA(color, 0.2)} 200px)`;
+  }, [color]);
+
+  return (
+    <div {...rest} className={classNames(rest.className, styles.shade)} style={{ background }} />
+  );
+};
+
+export { CellShade };

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

@@ -0,0 +1,12 @@
+@import "~/styles/variables";
+
+.shade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(5deg, transparentize($content_bg, 0), transparentize($content_bg, 1));
+  pointer-events: none;
+  touch-action: none;
+}

src/constants/node.ts

@@ -0,0 +1 @@
+export const DEFAULT_DOMINANT_COLOR = '#000000';

src/redux/types.ts

@@ -133,6 +133,7 @@ export interface INode {
   flow: {
     display: 'single' | 'vertical' | 'horizontal' | 'quadro';
     show_description: boolean;
+    dominant_color?: string;
   };
 
   tags: ITag[];

src/utils/color.ts

@@ -0,0 +1,13 @@
+export const convertHexToRGBA = (hexCode, opacity) => {
+  let hex = hexCode.replace('#', '');
+
+  if (hex.length === 3) {
+    hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+  }
+
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  return `rgba(${r},${g},${b},${opacity})`;
+};