Merge pull request #2438 from luckyklyist/luckyklyist/confusingIcons

confusing icons hover issue fix #2255

Author: raclim

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import CheckIcon from '../../../../images/check_encircled.svg';
 import CloseIcon from '../../../../images/close.svg';
+import CheckIcon from '../../../../images/check_encircled.svg';
 
 const Icons = ({ isAdded }) => {
   const classes = [
@@ -21,12 +20,6 @@ const Icons = ({ isAdded }) => {
         focusable="false"
       />
       <CheckIcon
-        className="quick-add__in-icon"
-        role="img"
-        aria-label="Descending"
-        focusable="false"
-      />
-      <CloseIcon
         className="quick-add__add-icon"
         role="img"
         aria-label="Descending"

client/styles/components/_quick-add.scss

@@ -83,14 +83,11 @@
   }
 }
 
-.quick-add__add-icon {
-  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');
@@ -100,28 +97,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;
   }
 }
+