user avatar component and activity styling

resources/frontend_client/app/components/ProfileLink.react.js

@@ -4,6 +4,7 @@ import React, { Component, PropTypes } from 'react';
 import OnClickOut from 'react-onclickout';
 import cx from 'classnames';
 
+import UserAvatar from './UserAvatar.react';
 import Icon from './Icon.react';
 
 export default class ProfileLink extends Component {
@@ -22,20 +23,6 @@ export default class ProfileLink extends Component {
         this.setState({ dropdownOpen: false });
     }
 
-    displayInitials() {
-        let initials = '??';
-        const { user } = this.props;
-
-        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;
-    }
-
     render() {
         const { user, context } = this.props;
 
@@ -52,9 +39,7 @@ export default class ProfileLink extends Component {
                     <a className="NavDropdown-button NavItem flex align-center p2" onClick={this.toggleDropdown}>
                         <div className="NavDropdown-button-layer">
                             <div className="flex align-center">
-                                <span className="UserNick">
-                                    <span className="UserInitials NavItem-text">{this.displayInitials()}</span>
-                                </span>
+                                <UserAvatar user={user} text={'text-white'} />
                                 <Icon name="chevrondown" className="Dropdown-chevron ml1" width="8px" height="8px" />
                             </div>
                         </div>

resources/frontend_client/app/css/admin.css

@@ -50,17 +50,6 @@
     transition: background .2s linear;
 }
 
-.UserNick {
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 99px;
-    width: 2rem;
-    height: 2rem; /* set an explicit height since we want it to be square */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 .AdminNav .UserNick {
     color: #fff;
     border-color: #fff;
@@ -72,13 +61,6 @@
     color: #fff;
 }
 
-.UserInitials,
-.UserInitials:hover {
-    font-size: 0.85rem;
-    color: currentColor;
-    cursor: pointer;
-}
-
 .Actions {
     background-color: rgba(243,243,243,0.46);
     border: 1px solid #E0E0E0;

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

@@ -141,13 +141,8 @@ export default class Activity extends Component {
         if (user) {
             const userColorIndex = userColors[user.id];
             const colorCssClass = this.colorClasses[userColorIndex];
-            const cssClasses = {
-                'UserNick': true,
-                'text-white': true
-            };
-            cssClasses[colorCssClass] = true;
 
-            return cx(cssClasses);
+            return colorCssClass;
         } else {
             return cx({
                 'UserNick': true,

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

 'use strict';
 
 import React, { Component } from 'react';
-
 import Icon from 'metabase/components/Icon.react';
-
+import IconBorder from '../../query_builder/IconBorder.react';
+import UserAvatar from 'metabase/components/UserAvatar.react';
 
 export default class ActivityItem extends Component {
 
     constructor(props) {
         super(props);
-
-        this.styles = {
-            initials: {
-                borderWidth: 0,
-            }
-        };
-    }
-
-    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;
     }
 
     render() {
         const { item, description, userColors } = this.props;
 
         return (
-            <div className="flex align-center">
-                { item.user ?
-                    <span styles={this.styles.initials} className={userColors}>
-                        <span className="UserInitials">{this.userInitials(item.user)}</span>
-                    </span>
-                :
-                    <span styles={this.styles.initials} className={userColors}>
-                        <span className="UserInitials"><Icon name='sync' width={16} height={16} /></span>
-                    </span>
-                }
-
-                <div className="ml2 full flex align-center">
+            <div className="ml1 flex align-center">
+                <span>
+                    { item.user ?
+                        <UserAvatar user={item.user} background={userColors} style={{color: '#fff', borderWidth: '0'}}/>
+                    :
+                        <IconBorder style={{color: '#B8C0C8'}}>
+                            <Icon name='sync' width={16} height={16} />
+                        </IconBorder>
+                    }
+                </span>
+
+                <div className="ml2 full flex align-center" style={{fontSize: '1rem'}}>
                     <div className="text-grey-4">
                         <span className="text-dark">{description.userName}</span>
 

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

@@ -2,16 +2,15 @@
 
 import React, { Component } from 'react';
 
-
 export default class ActivityStory extends Component {
 
     constructor(props) {
         super(props);
 
         this.styles = {
-            modelLink: {
-                borderWidth: "2px"
-            },
+            borderWidth: '2px',
+            fontSize: '1.08rem',
+            borderColor: '#DFE8EA',
         }
     }
 
@@ -23,8 +22,8 @@ export default class ActivityStory extends Component {
         }
 
         return (
-            <div className="ml2 mt1 border-left flex" style={{borderWidth: '3px'}}>
-                <div style={this.styles.modelLink} className="flex full ml4 bordered rounded p2">
+            <div className="mt1 border-left flex" style={{borderWidth: '3px', marginLeft: '22px', borderColor: '#F2F5F6'}}>
+                <div className="flex full ml4 bordered rounded p2" style={this.styles}>
                     { story.bodyLink ?
                         <a className="link" href={story.bodyLink}>{story.body}</a>
                     :

resources/frontend_client/app/query_builder/IconBorder.react.js

 'use strict';
 
+import React, { Component } from 'react';
 import cx from "classnames";
 
-var IconBorder = React.createClass({
-    displayName: 'IconBorder',
-    getDefaultProps: function () {
-          return {
-              borderWidth: '1px',
-              borderStyle: 'solid',
-              borderColor: 'currentcolor',
-              rounded: true
-          }
-    },
-    computeSize: function () {
-        var width = parseInt(this.props.children.props.width, 10);
+export default class IconBorder extends Component {
+    constructor() {
+        super();
+        this.state = {}
+    }
+    componentDidMount() {
+        this.setState({
+            childWidth: React.findDOMNode(this.refs.child).offsetWidth
+        })
+    }
+    computeSize () {
+        let width = parseInt(this.state.childWidth, 10);
         return width * 2;
-    },
-    render: function () {
-        var classes = cx({
+    }
+
+    render() {
+        const classes = cx({
             'flex': true,
             'layout-centered': true
         });
 
-        var styles = {
+        const styles = {
             width: this.computeSize(),
             height: this.computeSize(),
             borderWidth: this.props.borderWidth,
             borderStyle: this.props.borderStyle,
-            borderColor: this.props.borderColor
+            borderColor: this.props.borderColor,
+            lineHeight: '1px', /* HACK this is dumb but it centers the icon in the border */
         }
 
         if (this.props.borderRadius) {
@@ -37,11 +40,17 @@ var IconBorder = React.createClass({
         }
 
         return (
-            <span className={classes + ' ' + this.props.className} style={styles}>
-                {this.props.children}
+            <span className={classes + ' ' + this.props.className} style={Object.assign(styles, this.props.style)}>
+                <span ref="child">{this.props.children}</span>
             </span>
         );
     }
-});
+}
 
-export default IconBorder;
+IconBorder.defaultProps = {
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'currentcolor',
+    rounded: true,
+    style: {},
+}