put in the user initials on the activity item.

resources/frontend_client/app/home/components/Activity.react.js

@@ -19,6 +19,10 @@ export default class Activity extends Component {
         this.styles = {
             modelLink: {
                 borderWidth: "2px"
+            },
+
+            initials: {
+                borderStyle: "none"
             }
         }
     }
@@ -31,6 +35,20 @@ export default class Activity extends Component {
         }
     }
 
+    userInitials(user) {
+        let initials = '??';
+
+        if (user.first_name !== 'undefined') {
+            initials = user.first_name.substring(0, 1);
+        }
+
+        if (user.last_name !== 'undefined') {
+            initials = initials + user.last_name.substring(0, 1);
+        }
+
+        return initials;
+    }
+
     activityDescription(item) {
         switch (item.topic) {
             case "card-create":
@@ -112,7 +130,9 @@ export default class Activity extends Component {
                 {activity.map(item =>
                     <li key={item.id} className="flex pt2">
                         <div className="mr3">
-                            <Icon name={'filter'} width={36} height={36}></Icon>
+                            <span styles={this.styles.initials} className="UserNick">
+                                <span className="UserInitials NavItem-text">{this.userInitials(item.user)}</span>
+                            </span>
                         </div>
                         <ActivityDescription item={item} description={this.activityDescription(item)}></ActivityDescription>
                     </li>

resources/frontend_client/app/home/components/ActivityDescription.react.js

@@ -22,7 +22,7 @@ export default class ActivityDescription extends Component {
             <div className="flex-full">
                 <div className="">
                     <div className="float-left text-grey-4">
-                        <span className="text-dark">{item.user.common_name}</span>
+                        <span className="text-dark">{item.user.first_name}</span>
                         &nbsp;{description.subject}&nbsp;
                         { description.subjectRefLink ?
                             <a className="link text-dark" href={description.subjectRefLink}>{description.subjectRefName}</a>