confusing icons hover issue fix #2255

Author: luckyklyist

client/modules/IDE/components/QuickAddList/Icons.jsx

@@ -20,12 +20,6 @@ const Icons = ({ isAdded }) => {
         aria-label="Descending"
         focusable="false"
       />
-      <CheckIcon
-        className="quick-add__in-icon"
-        role="img"
-        aria-label="Descending"
-        focusable="false"
-      />
       <CloseIcon
         className="quick-add__add-icon"
         role="img"

client/styles/components/_quick-add.scss

@@ -85,10 +85,11 @@
   transform: rotate(45deg);
 }
 
-.quick-add__item:hover,
-.quick-add__item-toggle:hover,
+.quick-add__item,
+.quick-add__item-toggle,
 .quick-add__item-toggle:focus {
   cursor: pointer;
+  
   @include themify() {
     & .quick-add__icon path {
       fill: getThemifyVariable('table-button-hover-color');
@@ -98,28 +99,25 @@
       fill: getThemifyVariable('table-button-background-hover-color');
     }
   }
+}
 
-  & .quick-add__in-icon {
-    display: none;
+.quick-add__icon--in-collection {
+  .quick-add__remove-icon {
+    display: inline-block;
   }
 
-  & .quick-add__icon--in-collection {
-    .quick-add__remove-icon {
-      display: inline-block;
-    }
-
-    .quick-add__add-icon {
-      display: none;
-    }
+  .quick-add__add-icon {
+    display: none;
   }
+}
 
-  & .quick-add__icon--not-in-collection {
-    .quick-add__add-icon {
-      display: inline-block;
-    }
+.quick-add__icon--not-in-collection {
+  .quick-add__add-icon {
+    display: inline-block;
+  }
 
-    .quick-add__remove-icon {
-      display: none;
-    }
+  .quick-add__remove-icon {
+    display: none;
   }
 }
+