From 86038e089ca9fd18463b129f81c8eb010c5bf537 Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@tlon.io>
Date: Tue, 21 Sep 2021 21:53:39 -0500
Subject: [PATCH] color: fixing color normalization and adding to avatars

---
 pkg/grid/src/components/Avatar.tsx |  3 ++-
 pkg/grid/src/state/docket.ts       |  8 ++------
 pkg/grid/src/state/util.ts         | 11 +++++++++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/pkg/grid/src/components/Avatar.tsx b/pkg/grid/src/components/Avatar.tsx
index f0d0462d46..48cd76c721 100644
--- a/pkg/grid/src/components/Avatar.tsx
+++ b/pkg/grid/src/components/Avatar.tsx
@@ -4,6 +4,7 @@ import { sigil, reactRenderer } from '@tlon/sigil-js';
 import { deSig, Contact } from '@urbit/api';
 import { darken, lighten, parseToHsla } from 'color2k';
 import { useCurrentTheme } from '../state/local';
+import { normalizeUrbitColor } from '../state/util';
 
 export type AvatarSizes = 'xs' | 'small' | 'default';
 
@@ -66,7 +67,7 @@ export const Avatar = ({ size, className, ...ship }: AvatarProps) => {
   const currentTheme = useCurrentTheme();
   const { shipName, color, avatar } = { ...emptyContact, ...ship };
   const { classes, size: sigilSize } = sizeMap[size];
-  const adjustedColor = themeAdjustColor(color, currentTheme);
+  const adjustedColor = themeAdjustColor(normalizeUrbitColor(color), currentTheme);
   const foregroundColor = foregroundFromBackground(adjustedColor);
   const sigilElement = useMemo(() => {
     if (shipName.match(/[_^]/)) {
diff --git a/pkg/grid/src/state/docket.ts b/pkg/grid/src/state/docket.ts
index aeaeab57be..7610339a1e 100644
--- a/pkg/grid/src/state/docket.ts
+++ b/pkg/grid/src/state/docket.ts
@@ -23,7 +23,7 @@ import {
 } from '@urbit/api';
 import api from './api';
 import { mockAllies, mockCharges, mockTreaties } from './mock-data';
-import { fakeRequest, useMockData } from './util';
+import { fakeRequest, normalizeUrbitColor, useMockData } from './util';
 
 export interface ChargeWithDesk extends Charge {
   desk: string;
@@ -155,14 +155,10 @@ const useDocketState = create<DocketState>((set, get) => ({
 }));
 
 function normalizeDocket<T extends Docket>(docket: T, desk: string): T {
-  const color = docket?.color?.startsWith('#')
-    ? docket.color
-    : `#${docket.color.slice(2).replace('.', '')}`.toUpperCase();
-
   return {
     ...docket,
     desk,
-    color
+    color: normalizeUrbitColor(docket.color)
   };
 }
 
diff --git a/pkg/grid/src/state/util.ts b/pkg/grid/src/state/util.ts
index 8f738275c3..787cd83389 100644
--- a/pkg/grid/src/state/util.ts
+++ b/pkg/grid/src/state/util.ts
@@ -1,5 +1,6 @@
 import { DocketHref } from '@urbit/api/docket';
 import { hsla, parseToHsla } from 'color2k';
+import _ from 'lodash';
 
 export const useMockData = import.meta.env.MODE === 'mock';
 
@@ -35,6 +36,16 @@ export function deSig(ship: string): string {
   return ship.replace('~', '');
 }
 
+export function normalizeUrbitColor(color: string): string {
+  if (color.startsWith('#')) {
+    return color;
+  }
+
+  const colorString = color.slice(2).replace('.', '').toUpperCase();
+  const lengthAdjustedColor = _.padEnd(colorString, 6, _.last(colorString));
+  return `#${lengthAdjustedColor}`;
+}
+
 export function getDarkColor(color: string): string {
   const hslaColor = parseToHsla(color);
   return hsla(hslaColor[0], hslaColor[1], 1 - hslaColor[2], 1);