From 5011c1f0027fa0fbf91cb22c668458f7d94333fa Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Mon, 16 Sep 2019 21:50:44 +0200
Subject: [PATCH] Display icon-based add/remove button in Collection List

---
 .../CollectionList/CollectionListRow.jsx      | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

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 (
+    <button className="overlay__close-button" onClick={onClick}>
+      <InlineSVG src={icon} alt={alt} />
+    </button>
+  );
+};
+
+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) ? <button onClick={this.handleCollectionRemove}>Remove</button> : <button onClick={this.handleCollectionAdd}>Add</button>;
+      return CollectionListRowBase.projectInCollection(this.props.project, this.props.collection) ?
+        <AddRemoveButton type="remove" onClick={this.handleCollectionRemove} /> :
+        <AddRemoveButton type="add" onClick={this.handleCollectionAdd} />;
     }
 
     return (