Fix #284 - Alignment in notifications column

app/assets/javascripts/components/components/account.jsx

@@ -31,7 +31,8 @@ const noteStyle = {
 };
 
 const buttonsStyle = {
-  padding: '10px'
+  padding: '10px',
+  height: '18px'
 };
 
 const Account = React.createClass({
@@ -68,25 +69,23 @@ const Account = React.createClass({
       note = <div style={noteStyle}>{account.get('note')}</div>;
     }
 
-    if (account.get('id') !== me) {
+    if (account.get('id') !== me && account.get('relationship', null) != null) {
       const following = account.getIn(['relationship', 'following']);
 
-      buttons = (
-        <div style={buttonsStyle}>
-          <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} active={following} />
-        </div>
-      );
+      buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} active={following} />;
     }
 
     return (
       <div style={outerStyle}>
         <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>
+            <div style={{ float: 'left', marginLeft: '12px', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div>
             <DisplayName account={account} />
           </Link>
 
-          {buttons}
+          <div style={buttonsStyle}>
+            {buttons}
+          </div>
         </div>
 
         {note}

app/assets/javascripts/components/features/notifications/components/notification.jsx

@@ -6,11 +6,13 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 
 const messageStyle = {
-  padding: '8px 10px',
+  marginLeft: '68px',
+  padding: '8px 0',
   paddingBottom: '0',
   cursor: 'default',
   color: '#d9e1e8',
-  fontSize: '15px'
+  fontSize: '15px',
+  position: 'relative'
 };
 
 const linkStyle = {
@@ -28,7 +30,14 @@ const Notification = React.createClass({
   renderFollow (account, link) {
     return (
       <div className='notification'>
-        <div style={messageStyle}><i className='fa fa-fw fa-user-plus' style={{ color: '#2b90d9' }} /> <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} /></div>
+        <div style={messageStyle}>
+          <div style={{ position: 'absolute', 'left': '-26px'}}>
+            <i className='fa fa-fw fa-user-plus' style={{ color: '#2b90d9' }} />
+          </div>
+
+          <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
+        </div>
+
         <AccountContainer id={account.get('id')} withNote={false} />
       </div>
     );
@@ -41,7 +50,14 @@ const Notification = React.createClass({
   renderFavourite (notification, link) {
     return (
       <div className='notification'>
-        <div style={messageStyle}><i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} /> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /></div>
+        <div style={messageStyle}>
+          <div style={{ position: 'absolute', 'left': '-26px'}}>
+            <i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} />
+          </div>
+
+          <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
+        </div>
+
         <StatusContainer id={notification.get('status')} muted={true} />
       </div>
     );
@@ -50,7 +66,14 @@ const Notification = React.createClass({
   renderReblog (notification, link) {
     return (
       <div className='notification'>
-        <div style={messageStyle}><i className='fa fa-fw fa-retweet' style={{ color: '#2b90d9' }} /> <FormattedMessage id='notification.reblog' defaultMessage='{name} reblogged your status' values={{ name: link }} /></div>
+        <div style={messageStyle}>
+          <div style={{ position: 'absolute', 'left': '-26px'}}>
+            <i className='fa fa-fw fa-retweet' style={{ color: '#2b90d9' }} />
+          </div>
+
+          <FormattedMessage id='notification.reblog' defaultMessage='{name} reblogged your status' values={{ name: link }} />
+        </div>
+
         <StatusContainer id={notification.get('status')} muted={true} />
       </div>
     );