From 80c596db66dfdd9eae0e0c2edfacce9e860d2567 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 28 Oct 2016 11:21:46 +0100
Subject: [PATCH] Avatar - Adding custom color and style to avatar component

---
 ui/src/components/avatar/index.js  | 19 ++++++++++++++++---
 ui/src/components/avatar/readme.md |  8 ++++----
 ui/src/components/avatar/style.css |  1 -
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js
index 320a347e..903caf0d 100644
--- a/ui/src/components/avatar/index.js
+++ b/ui/src/components/avatar/index.js
@@ -5,6 +5,7 @@ const React = require('react');
 const styles = require('./style.css');
 
 const Avatar = ({
+  color,
   image,
   name,
   className,
@@ -16,6 +17,11 @@ const Avatar = ({
     styles.avatar
   );
 
+  style = {
+    ...style,
+    background: color
+  }
+
   const fill = () => {
     if ( image ) {
       return (
@@ -23,18 +29,24 @@ const Avatar = ({
           alt={name}
           className={styles.picture}
           src={image}
-          />
+          style={style}
+        />
       );
     } else {
       const letter = name.split('')[0];
       return (
-          <p className={styles.letter}>{letter}</p>
+        <p
+          className={styles.letter}
+          style={style}
+        >
+        {letter}
+      </p>
       );
     }
   }
 
   return (
-    <div className={cn}>
+    <div className={cn} style={style}>
       {fill()}
     </div>
   );
@@ -42,6 +54,7 @@ const Avatar = ({
 
 Avatar.propTypes = {
   className: React.PropTypes.string,
+  color: React.PropTypes.string,
   image: React.PropTypes.string,
   name: React.PropTypes.string,
   style: React.PropTypes.object
diff --git a/ui/src/components/avatar/readme.md b/ui/src/components/avatar/readme.md
index c7520bdd..38f58712 100644
--- a/ui/src/components/avatar/readme.md
+++ b/ui/src/components/avatar/readme.md
@@ -16,10 +16,10 @@ nmodule.exports = ReactDOM.renderToString(
   <Base>
     <Row>
       <Column>
-        <Avatar name='Alex' />
+        <Avatar color='#35a8c0' name='Alex' />
       </Column>
       <Column>
-        <Avatar name='Alex' image='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
+        <Avatar color='#ef6176' name='Alex' image='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
       </Column>
     </Row>
   </Base>
@@ -34,8 +34,8 @@ const Avatar = require('ui/avatar');
 
 module.exports = () => {
   return (
-    <Avatar name='Alex' />
-    <Avatar name='Alex' image='path/to/image.png' />
+    <Avatar color='#35a8c0' name='Alex' />
+    <Avatar color='#ef6176' name='Alex' image='path/to/image.png' />
   );
 }
 ```
diff --git a/ui/src/components/avatar/style.css b/ui/src/components/avatar/style.css
index 0816e095..7683e0d5 100644
--- a/ui/src/components/avatar/style.css
+++ b/ui/src/components/avatar/style.css
@@ -1,5 +1,4 @@
 .avatar {
-  background: red;
   border-radius: 50%;
   height: remCalc(50);
   overflow: hidden;