diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
index 73755359..edcf321e 100644
--- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx
@@ -11,6 +11,24 @@ import * as IdeActions from '../../actions/ide';
import * as ToastActions from '../../actions/toast';
const downFilledTriangle = require('../../../../images/down-filled-triangle.svg');
+const addIcon = require('../../../../images/plus.svg');
+const removeIcon = require('../../../../images/minus.svg');
+
+const AddRemoveButton = ({ type, onClick }) => {
+ const alt = type === 'add' ? 'add to collection' : 'remove from collection';
+ const icon = type === 'add' ? addIcon : removeIcon;
+
+ return (
+
+ );
+};
+
+AddRemoveButton.propTypes = {
+ type: PropTypes.oneOf(['add', 'remove']).isRequired,
+ onClick: PropTypes.func.isRequired,
+};
class CollectionListRowBase extends React.Component {
static projectInCollection(project, collection) {
@@ -144,7 +162,9 @@ class CollectionListRowBase extends React.Component {
const userIsOwner = this.props.user.username === this.props.username;
if (this.props.addMode === true && this.props.project) {
- return CollectionListRowBase.projectInCollection(this.props.project, this.props.collection) ? : ;
+ return CollectionListRowBase.projectInCollection(this.props.project, this.props.collection) ?
+ :
+ ;
}
return (