From bf16c0ca22ae869baa4882ee1ecbe74b77a3dd1d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 12 Oct 2021 16:21:08 +0700
Subject: [PATCH] added lab post lines

---
 src/components/lab/LabLine/index.tsx          | 14 ++++++++++++++
 src/components/lab/LabLine/styles.module.scss |  7 +++++++
 src/components/lab/LabNode/styles.module.scss |  1 +
 src/redux/node/constants.ts                   |  3 ++-
 src/utils/color.ts                            |  4 ++--
 src/utils/hooks/useColorGradientFromString.ts |  9 +++++++--
 6 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 src/components/lab/LabLine/index.tsx
 create mode 100644 src/components/lab/LabLine/styles.module.scss

diff --git a/src/components/lab/LabLine/index.tsx b/src/components/lab/LabLine/index.tsx
new file mode 100644
index 00000000..5c863b61
--- /dev/null
+++ b/src/components/lab/LabLine/index.tsx
@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { INodeComponentProps } from '~/redux/node/constants';
+import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
+
+interface Props extends INodeComponentProps {}
+
+const LabLine: FC<Props> = ({ node: { title } }) => {
+  const background = useColorGradientFromString(title, 5, 3, 270);
+
+  return <div className={styles.line} style={{ background }} />;
+};
+
+export { LabLine };
diff --git a/src/components/lab/LabLine/styles.module.scss b/src/components/lab/LabLine/styles.module.scss
new file mode 100644
index 00000000..1d185863
--- /dev/null
+++ b/src/components/lab/LabLine/styles.module.scss
@@ -0,0 +1,7 @@
+@import "~/styles/variables";
+
+.line {
+  height: 4px;
+  border-radius: $radius $radius 0 0;
+  width: 100%;
+}
diff --git a/src/components/lab/LabNode/styles.module.scss b/src/components/lab/LabNode/styles.module.scss
index 1130e194..cc757f7b 100644
--- a/src/components/lab/LabNode/styles.module.scss
+++ b/src/components/lab/LabNode/styles.module.scss
@@ -3,6 +3,7 @@
 .wrap {
   @include outer_shadow;
 
+  position: relative;
   background-color: $lab_post_bg;
   cursor: pointer;
 
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index fb380eff..177aef62 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -22,6 +22,7 @@ import { LabPad } from '~/components/lab/LabPad';
 import { LabDescription } from '~/components/lab/LabDescription';
 import { LabVideo } from '~/components/lab/LabVideo';
 import { LabAudio } from '~/components/lab/LabAudioBlock';
+import { LabLine } from '~/components/lab/LabLine';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -94,7 +95,7 @@ export const LAB_PREVIEW_LAYOUT: Record<string, FC<INodeComponentProps>[]> = {
   [NODE_TYPES.IMAGE]: [LabImage, LabPad, LabNodeTitle, LabDescription],
   [NODE_TYPES.VIDEO]: [LabVideo, LabPad, LabNodeTitle, LabDescription],
   [NODE_TYPES.AUDIO]: [LabPad, LabNodeTitle, LabPad, NodeAudioImageBlock, LabAudio, LabPad],
-  [NODE_TYPES.TEXT]: [LabPad, LabNodeTitle, LabPad, LabText, LabPad],
+  [NODE_TYPES.TEXT]: [LabLine, LabPad, LabNodeTitle, LabPad, LabText, LabPad],
 };
 
 export const NODE_HEADS: INodeComponents = {
diff --git a/src/utils/color.ts b/src/utils/color.ts
index eb05c27e..197056f8 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -10,6 +10,6 @@ export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnes
   const saturation = hsla[1];
   const lightness = hsla[2];
 
-  const desaturated = desaturate(color, saturation ** saturationExp);
-  return darken(desaturated, lightness ** lightnessExp);
+  const desaturated = saturationExp > 1 ? desaturate(color, saturation ** saturationExp) : color;
+  return lightnessExp > 1 ? darken(desaturated, lightness ** lightnessExp) : desaturated;
 };
diff --git a/src/utils/hooks/useColorGradientFromString.ts b/src/utils/hooks/useColorGradientFromString.ts
index a3a57720..06536d7f 100644
--- a/src/utils/hooks/useColorGradientFromString.ts
+++ b/src/utils/hooks/useColorGradientFromString.ts
@@ -3,7 +3,12 @@ import { adjustHue } from 'color2k';
 import { normalizeBrightColor } from '~/utils/color';
 import { stringToColour } from '~/utils/dom';
 
-export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) =>
+export const useColorGradientFromString = (
+  val?: string,
+  saturation = 3,
+  lightness = 3,
+  angle = 155
+) =>
   useMemo(() => {
     if (!val) {
       return '';
@@ -13,5 +18,5 @@ export const useColorGradientFromString = (val?: string, saturation = 3, lightne
     const second = normalizeBrightColor(adjustHue(color, 45), saturation, lightness);
     const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness);
 
-    return `linear-gradient(155deg, ${color}, ${second}, ${third})`;
+    return `linear-gradient(${angle}deg, ${color}, ${second}, ${third})`;
   }, [val]);