diff --git a/web/ASC.Web.Components/src/components/context-menu-button/index.js b/web/ASC.Web.Components/src/components/context-menu-button/index.js
index edd5da494d..c7460c76a6 100644
--- a/web/ASC.Web.Components/src/components/context-menu-button/index.js
+++ b/web/ASC.Web.Components/src/components/context-menu-button/index.js
@@ -50,6 +50,8 @@ class ContextMenuButton extends React.Component {
       <StyledOuther ref={this.ref}>
         <IconButton
           color={this.props.color}
+          hoverColor={this.props.hoverColor}
+          clickColor={this.props.clickColor}
           size={this.props.size}
           iconName={this.props.iconName}
           iconHoverName={this.props.iconHoverName}
diff --git a/web/ASC.Web.Components/src/components/search-input/close-button.js b/web/ASC.Web.Components/src/components/search-input/close-button.js
index 23c1516b62..d3cc511f58 100644
--- a/web/ASC.Web.Components/src/components/search-input/close-button.js
+++ b/web/ASC.Web.Components/src/components/search-input/close-button.js
@@ -1,49 +1,19 @@
 import React from "react";
 import IconButton from '../icon-button';
 
-class CloseButton extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = {
-        hover: false,
-        isMouseOver: false
-      };
-  
-      this.onMouseEnter = this.onMouseEnter.bind(this);
-      this.onMouseLeave = this.onMouseLeave.bind(this);
-      this.onMouseOver = this.onMouseOver.bind(this);
-      this.onMouseOut = this.onMouseOut.bind(this);
-    }
-    onMouseEnter(){
-      this.setState({isMouseOver: true});
-    }
-    onMouseLeave(){
-      this.setState({isMouseOver: false});
-    }
-    onMouseOver(){
-      let _this = this;
-      setTimeout(function(){ if(_this.state.isMouseOver){ _this.setState({hover: true});}},30);
-    }
-    onMouseOut(){
-      let _this = this;
-      setTimeout(function(){ if(!_this.state.isMouseOver){_this.setState({hover: false});}},30);
-    }
-    render() {
-      return (
-        <IconButton
-            color={this.state.hover ? '#333' : "#D8D8D8"}
+const CloseButton = props => {
+  return (
+    <IconButton
+            color={"#D8D8D8"}
+            hoverColor={"#333"}
+            clickColor={"#333"}
             size={10}
             iconName={'CrossIcon'}
             isFill={true}
-            isDisabled={this.props.isDisabled}
-            onClick={!this.props.isDisabled ? ((e) => this.props.onClick()) : undefined}
-
-            onMouseOver={this.onMouseOver} 
-            onMouseOut={this.onMouseOut} 
-            onMouseEnter={this.onMouseEnter}
-            onMouseLeave={this.onMouseLeave}
+            isDisabled={props.isDisabled}
+            onClick={!props.isDisabled ? ((e) => props.onClick()) : undefined}
         />
-      );
-    }
-  }
-  export default CloseButton
\ No newline at end of file
+  );
+};
+
+export default CloseButton
\ No newline at end of file