added flow shade

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