added lab post lines

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

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

src/components/lab/LabNode/styles.module.scss

@@ -3,6 +3,7 @@
 .wrap {
   @include outer_shadow;
 
+  position: relative;
   background-color: $lab_post_bg;
   cursor: pointer;
 

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 = {

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);
+  const desaturated = saturationExp > 1 ? desaturate(color, saturation ** saturationExp) : color;
-  return darken(desaturated, lightness ** lightnessExp);
+  return lightnessExp > 1 ? darken(desaturated, lightness ** lightnessExp) : desaturated;
 };

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]);