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 (
-
{letter}
+
+ {letter}
+
);
}
}
return (
-
+
{fill()}
);
@@ -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(
-
+
-
+
@@ -34,8 +34,8 @@ const Avatar = require('ui/avatar');
module.exports = () => {
return (
-
-
+
+
);
}
```
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;