made colorfull lab nodes

src/components/lab/LabNode/index.tsx

@@ -5,6 +5,7 @@ import styles from './styles.module.scss';
 import { LabBottomPanel } from '~/components/lab/LabBottomPanel';
 import { isAfter, parseISO } from 'date-fns';
 import classNames from 'classnames';
+import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
 
 interface IProps {
   node: INode;
@@ -22,8 +23,10 @@ const LabNode: FC<IProps> = ({ node, isLoading, lastSeen, commentCount }) => {
     [node.commented_at, lastSeen]
   );
 
+  const background = useColorGradientFromString(node.is_heroic ? node.title : '', 3, 2);
+
   return (
-    <div className={classNames(styles.wrap, { [styles.heroic]: node.is_heroic })}>
+    <div className={classNames(styles.wrap)} style={{ background }}>
       {lab}
       <LabBottomPanel
         node={node}

src/components/node/NodeRelatedItem/index.tsx

@@ -6,6 +6,9 @@ import { PRESETS, URLS } from '~/constants/urls';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { getURL, stringToColour } from '~/utils/dom';
 import { Avatar } from '~/components/common/Avatar';
+import { normalizeBrightColor } from '~/utils/color';
+import { adjustHue } from 'color2k';
+import { useColorGradientFromString } from '~/utils/hooks/useColorGradientFromString';
 
 type IProps = RouteComponentProps & {
   item: Partial<INode>;
@@ -37,10 +40,8 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
     () => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''),
     [item]
   );
-  const backgroundColor = useMemo(
+
-    () => (!thumb && item.title && stringToColour(item.title)) || '',
+  const background = useColorGradientFromString(!thumb ? item.title : '');
-    []
-  );
 
   useEffect(() => {
     if (!ref.current) return;
@@ -76,13 +77,13 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item, history }) => {
       />
 
       {!item.thumbnail && size === 'small' && (
-        <div className={styles.letters} style={{ backgroundColor }}>
+        <div className={styles.letters} style={{ background }}>
           {getTitleLetters(item.title)}
         </div>
       )}
 
       {!item.thumbnail && size !== 'small' && (
-        <div className={styles.title} style={{ backgroundColor }}>
+        <div className={styles.title} style={{ background }}>
           {item.title}
         </div>
       )}

src/components/node/NodeRelatedItem/styles.module.scss

@@ -43,11 +43,6 @@ div.thumb {
   font: $font_24_semibold;
   color: transparentize(white, 0.5);
   border-radius: $cell_radius;
-  background-image: linear-gradient(
-    180deg,
-    transparentize($content_bg, 0.4),
-    transparentize($content_bg, 0.4)
-  );
 }
 
 .title {

src/utils/color.ts

@@ -1,7 +1,7 @@
 import { darken, desaturate, parseToHsla } from 'color2k';
 import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
 
-export const normalizeBrightColor = (color?: string) => {
+export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnessExp = 3) => {
   if (!color) {
     return undefined;
   }
@@ -10,6 +10,6 @@ export const normalizeBrightColor = (color?: string) => {
   const saturation = hsla[1];
   const lightness = hsla[2];
 
-  const desaturated = desaturate(color, saturation ** 3);
+  const desaturated = desaturate(color, saturation ** saturationExp);
-  return darken(desaturated, lightness ** 3);
+  return darken(desaturated, lightness ** lightnessExp);
 };

src/utils/hooks/useColorFromString.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { normalizeBrightColor } from '~/utils/color';
+import { stringToColour } from '~/utils/dom';
+
+export const useColorFromString = (val?: string, saturation = 3, lightness = 3) => {
+  return useMemo(
+    () => (val && normalizeBrightColor(stringToColour(val), saturation, lightness)) || '',
+    []
+  );
+};

src/utils/hooks/useColorGradientFromString.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { adjustHue } from 'color2k';
+import { useColorFromString } from '~/utils/hooks/useColorFromString';
+import { normalizeBrightColor } from '~/utils/color';
+
+export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) => {
+  const color = useColorFromString(val, saturation, lightness);
+  return useMemo(
+    () =>
+      val
+        ? `linear-gradient(155deg, ${color}, ${normalizeBrightColor(
+            adjustHue(color, 80),
+            saturation,
+            lightness
+          )})`
+        : '',
+    [color]
+  );
+};