Add size prop to UserPicture component

resource/js/components/User/UserPicture.js

@@ -13,6 +13,15 @@ export default class UserPicture extends React.Component {
     }
   }
 
+  getClassName() {
+    let className = ['picture', 'picture-rounded'];
+    if (this.props.size) {
+      className.push('picture-' + this.props.size);
+    }
+
+    return className.join(' ');
+  }
+
   render() {
     const user = this.props.user;
 
@@ -20,7 +29,7 @@ export default class UserPicture extends React.Component {
       <img
         src={this.getUserPicture(user)}
         alt={user.username}
-        className="picture picture-rounded"
+        className={this.getClassName()}
         />
     );
   }
@@ -28,8 +37,10 @@ export default class UserPicture extends React.Component {
 
 UserPicture.propTypes = {
   user: React.PropTypes.object.isRequired,
+  size: React.PropTypes.string,
 };
 
 UserPicture.defaultProps = {
   user: {},
+  size: null,
 };

resource/js/components/UserList.js

@@ -7,7 +7,7 @@ export default class UserList extends React.Component {
     const users = this.props.users.map((user) => {
       return (
         <a data-user-id={user._id} href={'/user/' + user.username} title={user.name}>
-          <UserPicture user={user} />
+          <UserPicture user={user} size="xs" />
         </a>
       );
     });