From 95166a427fc2ec042f46f6e83cb9b35c395f0793 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 16 Jul 2022 15:48:57 +0700
Subject: [PATCH] fixed flow cell angle

---
 src/components/flow/CellShade/index.tsx |  9 ++++++---
 src/components/flow/FlowCell/index.tsx  | 18 ++++++++++++++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/flow/CellShade/index.tsx b/src/components/flow/CellShade/index.tsx
index b259dbe7..32ac90b2 100644
--- a/src/components/flow/CellShade/index.tsx
+++ b/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 *
-      5}px)`;
+    return `linear-gradient(${angle}deg, ${normalized} ${size}px, ${transparentize(
+      normalized,
+      1
+    )} ${size * 5}px)`;
   }, [color, size]);
 
   return (
diff --git a/src/components/flow/FlowCell/index.tsx b/src/components/flow/FlowCell/index.tsx
index d1add9f3..99c1e255 100644
--- a/src/components/flow/FlowCell/index.tsx
+++ b/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}>