Avatar - Adding custom color and style to avatar component

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

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' />
   );
 }
 ```

ui/src/components/avatar/style.css

@@ -1,5 +1,4 @@
 .avatar {
-  background: red;
   border-radius: 50%;
   height: remCalc(50);
   overflow: hidden;