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 }) => ( -
  • +
  • { /* eslint-disable-line */ } - View + {name} + e.stopPropogation()} + > + View +
  • ); @@ -45,7 +52,10 @@ const QuickAddList = ({ key={item.id} {...item} onSelect={ - () => handleAction(item) + (event) => { + event.target.blur(); + handleAction(item); + } } />))} 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; }