Improved how user lists look, added follow button to them

3 files changed, 56 insertions, 26 deletions

diff --git a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
index aebe36230..c46b82534 100644
--- a/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
+++ b/app/assets/javascripts/components/features/compose/components/suggestions_box.jsx
@@ -109,7 +109,7 @@ const SuggestionsBox = React.createClass({
             <Link key={account.get('id')} style={itemStyle} to={`/accounts/${account.get('id')}`}>
               <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
               <strong style={displayNameStyle}>{displayName}</strong>
-              <span style={acctStyle}>{account.get('acct')}</span>
+              <span style={acctStyle}>@{account.get('acct')}</span>
             </Link>
           )
         })}
diff --git a/app/assets/javascripts/components/features/followers/components/account.jsx b/app/assets/javascripts/components/features/followers/components/account.jsx
index 1aa3ce511..27f34c477 100644
--- a/app/assets/javascripts/components/features/followers/components/account.jsx
+++ b/app/assets/javascripts/components/features/followers/components/account.jsx
@@ -1,62 +1,82 @@
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar             from '../../../components/avatar';
+import DisplayName        from '../../../components/display_name';
 import { Link }           from 'react-router';
+import IconButton         from '../../../components/icon_button';
 
 const outerStyle = {
-  padding: '10px'
+  padding: '10px',
+  borderBottom: '1px solid #363c4b'
 };
 
-const displayNameStyle = {
+const itemStyle = {
+  flex: '1 1 auto',
   display: 'block',
-  fontWeight: '500',
+  color: '#9baec8',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  color: '#fff'
+  textDecoration: 'none',
+  fontSize: '14px'
 };
 
-const acctStyle = {
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
+const noteStyle = {
+  paddingTop: '5px',
+  fontSize: '12px',
+  color: '#616b86'
 };
 
-const itemStyle = {
-  display: 'block',
-  color: '#9baec8',
-  overflow: 'hidden',
-  textDecoration: 'none'
+const buttonsStyle = {
+  padding: '10px'
 };
 
 const Account = React.createClass({
 
   propTypes: {
     account: ImmutablePropTypes.map.isRequired,
-    me: React.PropTypes.number.isRequired
+    me: React.PropTypes.number.isRequired,
+    onFollow: React.PropTypes.func.isRequired,
+    withNote: React.PropTypes.bool
   },
 
   mixins: [PureRenderMixin],
 
+  handleFollow () {
+    this.props.onFollow(this.props.account);
+  },
+
   render () {
-    const { account } = this.props;
+    const { account, me } = this.props;
 
     if (!account) {
       return <div />;
     }
 
-    let displayName = account.get('display_name');
+    let note, buttons;
 
-    if (displayName.length === 0) {
-      displayName = account.get('username');
+    if (account.get('note').length > 0) {
+      note = <div style={noteStyle}>{account.get('note')}</div>;
+    }
+
+    if (account.get('id') !== me) {
+      buttons = (
+        <div style={buttonsStyle}>
+          <IconButton icon='user-plus' title='Follow' onClick={this.handleFollow} active={account.getIn(['relationship', 'following'])} />
+        </div>
+      );
     }
 
     return (
       <div style={outerStyle}>
-        <Link key={account.get('id')} style={itemStyle} to={`/accounts/${account.get('id')}`}>
-          <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
-          <strong style={displayNameStyle}>{displayName}</strong>
-          <span style={acctStyle}>{account.get('acct')}</span>
-        </Link>
+        <div style={{ display: 'flex' }}>
+          <Link key={account.get('id')} style={itemStyle} className='account__display-name' to={`/accounts/${account.get('id')}`}>
+            <div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
+            <DisplayName account={account} />
+          </Link>
+
+          {buttons}
+        </div>
+
+        {note}
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/features/followers/containers/account_container.jsx b/app/assets/javascripts/components/features/followers/containers/account_container.jsx
index ee6b6dcfd..988d60adb 100644
--- a/app/assets/javascripts/components/features/followers/containers/account_container.jsx
+++ b/app/assets/javascripts/components/features/followers/containers/account_container.jsx
@@ -1,6 +1,10 @@
 import { connect }            from 'react-redux';
 import { makeGetAccount }     from '../../../selectors';
 import Account                from '../components/account';
+import {
+  followAccount,
+  unfollowAccount
+}                             from '../../../actions/accounts';
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
@@ -14,7 +18,13 @@ const makeMapStateToProps = () => {
 };
 
 const mapDispatchToProps = (dispatch) => ({
-  //
+  onFollow (account) {
+    if (account.getIn(['relationship', 'following'])) {
+      dispatch(unfollowAccount(account.get('id')));
+    } else {
+      dispatch(followAccount(account.get('id')));
+    }
+  }
 });
 
 export default connect(makeMapStateToProps, mapDispatchToProps)(Account);