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 {