Updated avatar colors and events table.

src/components/common/Avatar.tsx

@@ -1,71 +1,23 @@
-import md5 from 'md5';
-import { colord, extend } from 'colord';
-import harmoniesPlugin from 'colord/plugins/harmonies';
-import mixPlugin from 'colord/plugins/mix';
+import { useMemo } from 'react';
+import { createAvatar } from '@dicebear/core';
+import { lorelei } from '@dicebear/collection';
+import { getColor, getPastel } from 'lib/colors';
 
-extend([harmoniesPlugin, mixPlugin]);
+const lib = lorelei;
 
-const harmonies = [
-  //'analogous',
-  //'complementary',
-  'double-split-complementary',
-  //'rectangle',
-  'split-complementary',
-  'tetradic',
-  //'triadic',
-];
+function Avatar({ seed, size = 128, ...props }: { seed: string; size?: number }) {
+  const backgroundColor = getPastel(getColor(seed), 4);
 
-const color = (value: string, invert: boolean = false) => {
-  const c = colord(value.startsWith('#') ? value : `#${value}`);
+  const avatar = useMemo(() => {
+    return createAvatar(lib, {
+      ...props,
+      seed,
+      size,
+      backgroundColor: [backgroundColor],
+    }).toDataUri();
+  }, []);
 
-  if (invert && c.isDark()) {
-    return c.invert();
-  }
-
-  return c;
-};
-
-const remix = (hash: string) => {
-  const a = hash.substring(0, 6);
-  const b = hash.substring(6, 12);
-  const c = hash.substring(12, 18);
-  const d = hash.substring(18, 24);
-  const e = hash.substring(24, 30);
-  const f = hash.substring(30, 32);
-
-  const base = [b, c, d, e]
-    .reduce((acc, val) => {
-      return acc.mix(color(val), 0.05);
-    }, color(a))
-    .saturate(0.1)
-    .toHex();
-
-  const harmony = pick(parseInt(f, 16), harmonies);
-
-  return color(base, true)
-    .harmonies(harmony)
-    .map(c => c.toHex());
-};
-
-const pick = (num: number, arr: any[]) => {
-  return arr[num % arr.length];
-};
-
-export function Avatar({ value }: { value: string }) {
-  const hash = md5(value);
-  const colors = remix(hash);
-
-  return (
-    <svg viewBox="0 0 100 100">
-      <defs>
-        <linearGradient id={`color-${hash}`} gradientTransform="rotate(90)">
-          <stop offset="0%" stopColor={colors[1]} />
-          <stop offset="100%" stopColor={colors[2]} />
-        </linearGradient>
-      </defs>
-      <circle cx="50" cy="50" r="50" fill={`url(#color-${hash})`} />
-    </svg>
-  );
+  return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%' }} />;
 }
 
 export default Avatar;

src/components/common/Profile.tsx

@@ -1,41 +0,0 @@
-import { useMemo } from 'react';
-import { createAvatar } from '@dicebear/core';
-import { lorelei } from '@dicebear/collection';
-import md5 from 'md5';
-
-const lib = lorelei;
-
-function convertToPastel(hexColor: string, pastelFactor: number = 0.5) {
-  // Remove the # if present
-  hexColor = hexColor.replace(/^#/, '');
-
-  // Convert hex to RGB
-  let r = parseInt(hexColor.substring(0, 2), 16);
-  let g = parseInt(hexColor.substring(2, 4), 16);
-  let b = parseInt(hexColor.substring(4, 6), 16);
-
-  // Calculate pastel version (mix with white)
-  //const pastelFactor = 0.5; // Adjust this value to control pastel intensity
-
-  r = Math.floor((r + 255 * pastelFactor) / (1 + pastelFactor));
-  g = Math.floor((g + 255 * pastelFactor) / (1 + pastelFactor));
-  b = Math.floor((b + 255 * pastelFactor) / (1 + pastelFactor));
-
-  // Convert back to hex
-  return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1)}`;
-}
-
-function Profile({ seed, size = 128, ...props }: { seed: string; size?: number }) {
-  const avatar = useMemo(() => {
-    return createAvatar(lib, {
-      ...props,
-      seed,
-      size,
-      backgroundColor: [convertToPastel(md5(seed).substring(0, 6), 2).replace(/^#/, '')],
-    }).toDataUri();
-  }, []);
-
-  return <img src={avatar} alt="Avatar" style={{ borderRadius: '100%' }} />;
-}
-
-export default Profile;