Update UX of Quick Add List: when clicking on row/hovering on row, can add/remove sketch/collection

Author: catarak

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>

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;
     }