From 17e3f211ef7a569446ac00f6d46d2f1d29b53227 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 8 Oct 2021 11:16:20 +0700
Subject: [PATCH] fixed lab color gradients calculation

---
 src/utils/color.ts                            | 2 +-
 src/utils/hooks/useColorGradientFromString.ts | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/utils/color.ts b/src/utils/color.ts
index 2d2a2c4b..eb05c27e 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -3,7 +3,7 @@ import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
 
 export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnessExp = 3) => {
   if (!color) {
-    return undefined;
+    return '';
   }
 
   const hsla = parseToHsla(color || DEFAULT_DOMINANT_COLOR);
diff --git a/src/utils/hooks/useColorGradientFromString.ts b/src/utils/hooks/useColorGradientFromString.ts
index bce55ced..a3a57720 100644
--- a/src/utils/hooks/useColorGradientFromString.ts
+++ b/src/utils/hooks/useColorGradientFromString.ts
@@ -1,18 +1,17 @@
 import { useMemo } from 'react';
 import { adjustHue } from 'color2k';
-import { useColorFromString } from '~/utils/hooks/useColorFromString';
 import { normalizeBrightColor } from '~/utils/color';
+import { stringToColour } from '~/utils/dom';
 
-export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) => {
-  return useMemo(() => {
+export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) =>
+  useMemo(() => {
     if (!val) {
       return '';
     }
 
-    const color = useColorFromString(val, saturation, lightness);
+    const color = normalizeBrightColor(stringToColour(val), saturation, lightness);
     const second = normalizeBrightColor(adjustHue(color, 45), saturation, lightness);
     const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness);
 
     return `linear-gradient(155deg, ${color}, ${second}, ${third})`;
   }, [val]);
-};