From 70486e7da2afe896c9dcd79ce8ab6973333af2a4 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 8 Dec 2017 18:54:47 +0000
Subject: [PATCH] Improve address book look.

---
 src/AddressBook.tsx | 51 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/AddressBook.tsx b/src/AddressBook.tsx
index dd829d4..35c287f 100644
--- a/src/AddressBook.tsx
+++ b/src/AddressBook.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
+import Avatar from 'material-ui/Avatar';
 import { List, ListItem } from 'material-ui/List';
 
+import * as colors from 'material-ui/styles/colors';
+
 import { ContactType } from './pim-types';
 
 class AddressBook extends React.Component {
@@ -23,12 +26,56 @@ class AddressBook extends React.Component {
       }
     });
 
-    let itemList = entries.map((entry) => {
+    function nameToColor(name: string) {
+      const colorOptions = [
+        colors.red500,
+        colors.pink500,
+        colors.purple500,
+        colors.deepPurple500,
+        colors.indigo500,
+        colors.blue500,
+        colors.lightBlue500,
+        colors.cyan500,
+        colors.teal500,
+        colors.green500,
+        colors.lightGreen500,
+        colors.lime500,
+        colors.yellow500,
+        colors.amber500,
+        colors.orange500,
+        colors.deepOrange500,
+      ];
+
+      let sum = 0;
+      for (let i = 0 ; i < name.length ; i++) {
+        sum += name.charCodeAt(i);
+      }
+
+      return colorOptions[sum % colorOptions.length];
+    }
+
+    let itemList = entries.map((entry, idx, array) => {
       const uid = entry.uid;
       const name = entry.fn;
 
+      let itemProps: any = {
+        leftAvatar: (
+          <Avatar
+            backgroundColor={nameToColor(name)}
+            style={{left: 8}}
+          >
+          {name[0].toUpperCase()}
+          </Avatar>
+        ),
+      };
+
       return (
-        <ListItem key={uid} primaryText={name} onClick={() => (this.props.onItemClick(entry))} />
+        <ListItem
+          key={uid}
+          primaryText={name}
+          onClick={() => (this.props.onItemClick(entry))}
+          {...itemProps}
+        />
       );
     });