fixed flow cell angle

src/components/flow/CellShade/index.tsx

@@ -12,9 +12,10 @@ import styles from './styles.module.scss';
 interface Props extends DivProps {
   color?: string;
   size?: number;
+  angle?: number;
 }
 
-const CellShade: FC<Props> = ({ color, size = 50, ...rest }) => {
+const CellShade: FC<Props> = ({ color, size = 50, angle = 7, ...rest }) => {
   const background = useMemo(() => {
     const normalized = normalizeBrightColor(color);
 
@@ -22,8 +23,10 @@ const CellShade: FC<Props> = ({ color, size = 50, ...rest }) => {
       return undefined;
     }
 
-    return `linear-gradient(7deg, ${normalized} ${size}px, ${transparentize(normalized, 1)} ${size *
+    return `linear-gradient(${angle}deg, ${normalized} ${size}px, ${transparentize(
-      5}px)`;
+      normalized,
+      1
+    )} ${size * 5}px)`;
   }, [color, size]);
 
   return (

src/components/flow/FlowCell/index.tsx

@@ -55,11 +55,23 @@ const FlowCell: FC<Props> = ({
 
   const shadeSize = useMemo(() => {
     const min = isMobile ? 10 : 15;
-    const max = isMobile ? 20 : 50;
+    const max = isMobile ? 20 : 40;
 
     return withText ? min : max;
   }, [withText, isMobile]);
 
+  const shadeAngle = useMemo(() => {
+    if (flow.display === 'vertical') {
+      return 9;
+    }
+
+    if (flow.display === 'horizontal') {
+      return 15;
+    }
+
+    return 7;
+  }, [flow.display]);
+
   return (
     <div className={classNames(styles.cell, styles[flow.display || 'single'])} ref={ref as any}>
       {canEdit && !isMenuActive && (
@@ -100,7 +112,9 @@ const FlowCell: FC<Props> = ({
           />
         )}
 
-        <CellShade color={color} className={styles.shade} size={shadeSize} />
+        {!!title && (
+          <CellShade color={color} className={styles.shade} size={shadeSize} angle={shadeAngle} />
+        )}
 
         {!withText && (
           <div className={styles.title_wrapper}>