Toggle resource favorite button color based on favorite state

app/shared/favorite-button/FavoriteButton.js

@@ -1,14 +1,25 @@
 import React, { PropTypes } from 'react';
 import Button from 'react-bootstrap/lib/Button';
+import classnames from 'classnames';
 import iconHeart from 'hel-icons/dist/shapes/heart-o.svg';
 
+import iconHeartWhite from 'assets/icons/heart-white.svg';
 import { injectT } from 'i18n';
 
 function FavoriteButton({ favorited, onClick, t }) {
-  const buttonText = t(`ResourceHeader.${favorited ? 'favoriteRemoveButton' : 'favoriteAddButton'}`);
+  const buttonClassNames = classnames('favorite-button', {
+    'favorite-button--favorite': favorited,
+  });
+  const buttonText = t(
+    `ResourceHeader.${favorited ? 'favoriteRemoveButton' : 'favoriteAddButton'}`
+  );
   return (
-    <Button className="favorite-button" onClick={onClick}>
-      <img alt={buttonText} className="favorite-button-icon" src={iconHeart} />
+    <Button className={buttonClassNames} onClick={onClick}>
+      <img
+        alt={buttonText}
+        className="favorite-button__icon"
+        src={favorited ? iconHeartWhite : iconHeart}
+      />
       <span>{buttonText}</span>
     </Button>
   );
@@ -20,6 +31,6 @@ FavoriteButton.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-FavoriteButton = injectT(FavoriteButton);  // eslint-disable-line
+FavoriteButton = injectT(FavoriteButton); // eslint-disable-line
 
 export default FavoriteButton;

app/shared/favorite-button/FavoriteButton.spec.js

@@ -26,14 +26,19 @@ describe('shared/favorite-button/FavoriteButton', () => {
   });
 
   it('has favorite-button class name', () => {
-    expect(wrapper.prop('className')).to.equal('favorite-button');
+    expect(getWrapper({ favorited: false }).prop('className')).to.equal('favorite-button');
+  });
+
+  it('has favorite class modifier if it is favorited', () => {
+    expect(getWrapper({ favorited: true }).prop('className')).to.equal(
+      'favorite-button favorite-button--favorite'
+    );
   });
 
   it('passes onClick prop', () => {
     expect(wrapper.prop('onClick')).to.deep.equal(defaultProps.onClick);
   });
 
-
   it('has remove favorite text if favorited', () => {
     const buttonText = getWrapper({ favorited: true }).find('span');
     expect(buttonText).to.have.length(1);

app/shared/favorite-button/_favorite-button.scss

@@ -1,5 +1,17 @@
 .favorite-button {
-  .favorite-button-icon {
+  &--favorite {
+    &,
+    &:active {
+      &,
+      &:focus,
+      &:hover {
+        background-color: $black;
+        color: $white;
+      }
+    }
+  }
+
+  &__icon {
     height: $line-height-computed;
     width: $line-height-computed;
     margin-right: 8px;