Fix #131 - Make active favourite buttons yellow

3 files changed, 34 insertions, 8 deletions

diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx
index 656f3d4a3..d8f00f5d8 100644
--- a/app/assets/javascripts/components/components/icon_button.jsx
+++ b/app/assets/javascripts/components/components/icon_button.jsx
@@ -7,7 +7,9 @@ const IconButton = React.createClass({
     icon: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func.isRequired,
     size: React.PropTypes.number,
-    active: React.PropTypes.bool
+    active: React.PropTypes.bool,
+    style: React.PropTypes.object,
+    activeStyle: React.PropTypes.object
   },
 
   getDefaultProps () {
@@ -26,7 +28,7 @@ const IconButton = React.createClass({
   },
 
   render () {
-    const style = {
+    let style = {
       display: 'inline-block',
       border: 'none',
       padding: '0',
@@ -39,6 +41,10 @@ const IconButton = React.createClass({
       ...this.props.style
     };
 
+    if (this.props.active) {
+      style = { ...style, ...this.props.activeStyle };
+    }
+
     return (
       <button aria-label={this.props.title} title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} onClick={this.handleClick} style={style}>
         <i className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
diff --git a/app/assets/javascripts/components/components/status_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx
index 23c8e4d5c..16e393534 100644
--- a/app/assets/javascripts/components/components/status_action_bar.jsx
+++ b/app/assets/javascripts/components/components/status_action_bar.jsx
@@ -49,7 +49,7 @@ const StatusActionBar = React.createClass({
       <div style={{ marginTop: '10px', overflow: 'hidden' }}>
         <div style={{ float: 'left', marginRight: '18px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div>
         <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div>
-        <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} /></div>
+        <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
 
         <div onClick={e => e.stopPropagation()} style={{ width: '18px', height: '18px', float: 'left' }}>
           <DropdownMenu items={menu} icon='ellipsis-h' size={18} />
diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx
index d0cae4557..2733cea07 100644
--- a/app/assets/javascripts/components/features/status/components/action_bar.jsx
+++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx
@@ -17,22 +17,42 @@ const ActionBar = React.createClass({
 
   mixins: [PureRenderMixin],
 
+  handleReplyClick () {
+    this.props.onReply(status);
+  },
+
+  handleReblogClick () {
+    this.props.onReblog(status);
+  },
+
+  handleFavouriteClick () {
+    this.props.onFavourite(status);
+  },
+
+  handleDeleteClick () {
+    this.props.onDelete(status);
+  },
+
+  handleMentionClick () {
+    this.props.onMention(status.get('account'));
+  },
+
   render () {
     const { status, me } = this.props;
 
     let menu = [];
 
     if (me === status.getIn(['account', 'id'])) {
-      menu.push({ text: 'Delete', action: () => this.props.onDelete(status) });
+      menu.push({ text: 'Delete', action: this.handleDeleteClick });
     } else {
-      menu.push({ text: 'Mention', action: () => this.props.onMention(status.get('account')) });
+      menu.push({ text: 'Mention', action: this.handleMentionClick });
     }
 
     return (
       <div style={{ background: '#2f3441', display: 'flex', flexDirection: 'row', borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px 0' }}>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title='Reply' icon='reply' onClick={() => this.props.onReply(status)} /></div>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={() => this.props.onReblog(status)} /></div>
-        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={() => this.props.onFavourite(status)} /></div>
+        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div>
+        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div>
+        <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick}  activeStyle={{ color: '#ca8f04' }} /></div>
         <div style={{ flex: '1 1 auto', textAlign: 'center' }}><DropdownMenu size={18} icon='ellipsis-h' items={menu} /></div>
       </div>
     );