From 2ce36bef6f6af790c4faf9d2f4c6170a8504dfab Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 11 Feb 2020 16:16:43 -0500
Subject: [PATCH] Update UX of Quick Add List: when clicking on row/hovering on
 row, can add/remove sketch/collection

---
 .../components/QuickAddList/QuickAddList.jsx   | 18 ++++++++++++++----
 client/styles/components/_quick-add.scss       | 10 +++++++---
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
index e4d5e6d7..fe32168d 100644
--- a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
+++ b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
@@ -7,12 +7,19 @@ import Icons from './Icons';
 const Item = ({
   isAdded, onSelect, name, url
 }) => (
-  <li className="quick-add__item">
+  <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
     <button className="quick-add__item-toggle" onClick={onSelect}>
       <Icons isAdded={isAdded} />
-      {name}
     </button>
-    <Link className="quick-add__item-view" to={url}>View</Link>
+    <span className="quick-add__item-name">{name}</span>
+    <Link
+      className="quick-add__item-view"
+      to={url}
+      target="_blank"
+      onClick={e => e.stopPropogation()}
+    >
+      View
+    </Link>
   </li>
 );
 
@@ -45,7 +52,10 @@ const QuickAddList = ({
       key={item.id}
       {...item}
       onSelect={
-        () => handleAction(item)
+        (event) => {
+          event.target.blur();
+          handleAction(item);
+        }
       }
     />))}
     </ul>
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
index 78671f78..8070e3c3 100644
--- a/client/styles/components/_quick-add.scss
+++ b/client/styles/components/_quick-add.scss
@@ -29,7 +29,9 @@
 .quick-add__item-toggle {
   display: flex;
   align-items: center;
+}
 
+.quick-add__item-name {
   flex: 1;
 }
 
@@ -83,8 +85,10 @@
   transform: rotate(45deg);
 }
 
+.quick-add__item:hover,
 .quick-add__item-toggle:hover,
 .quick-add__item-toggle:focus {
+  cursor: pointer;
   @include themify() {
     .quick-add__icon {
       polygon {
@@ -97,11 +101,11 @@
     }
   }
 
-  .quick-add__in-icon {
+  & .quick-add__in-icon {
     display: none;
   }
 
-  .quick-add__icon--in-collection {
+  & .quick-add__icon--in-collection {
     .quick-add__remove-icon {
       display: inline-block;
     }
@@ -111,7 +115,7 @@
     }
   }
 
-  .quick-add__icon--not-in-collection {
+  & .quick-add__icon--not-in-collection {
     .quick-add__add-icon {
       display: inline-block;
     }