change move dirent search file style (#7022)

frontend/src/components/dialog/move-dirent-dialog.js

@@ -265,7 +265,11 @@ class MoveDirent extends React.Component {
 
     return (
       <Modal className='custom-modal' isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle} close={
+          <div className="header-close-list">
+            <span aria-hidden="true" className="sf3-font sf3-font-x-01 comment-close-icon" onClick={this.toggle}></span>
+          </div>
+        }>
           {isMultipleOperation ? this.renderTitle() : <div dangerouslySetInnerHTML={{ __html: this.renderTitle() }} className='d-flex'></div>}
           {isPro && (
             showSearchBar ? (

frontend/src/components/file-chooser/searched-list-item.css

@@ -0,0 +1,23 @@
+.searched-list-item {
+  height: 40px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.searched-list-item:hover {
+  background-color: #f5f5f5;
+}
+
+.searched-list-item.searched-dir td {
+  padding: 0;
+  height: 40px;
+  border-bottom: none;
+}
+
+.searched-list-item .searched-item-icon {
+  border-radius: 3px 0 0 3px;
+}
+
+.searched-list-item .searched-item-link {
+  border-radius: 0 3px 3px 0;
+}

frontend/src/components/file-chooser/searched-list-item.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Utils } from '../../utils/utils';
+import './searched-list-item.css';
 
 const propTypes = {
   currentItem: PropTypes.object,
@@ -12,30 +13,12 @@ const propTypes = {
 
 class SearchedListItem extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      highlight: false,
-    };
-  }
-
-  onMouseEnter = () => {
-    this.setState({ highlight: true });
-  };
-
-  onMouseLeave = () => {
-    this.setState({ highlight: false });
-  };
-
   onClick = () => {
-    let item = this.props.item;
+    this.props.onItemClick(this.props.item);
-    this.props.onItemClick(item);
   };
 
-  searchItemDoubleClick = (e) => {
+  searchItemDoubleClick = () => {
-    let item = this.props.item;
+    this.props.onSearchedItemDoubleClick(this.props.item);
-
-    this.props.onSearchedItemDoubleClick(item);
   };
 
   render() {
@@ -43,17 +26,18 @@ class SearchedListItem extends React.Component {
     return (
       <tr
         className={classnames('searched-list-item', {
-          'tr-highlight': this.state.highlight,
           'tr-active': currentItem && item.repo_id === currentItem.repo_id && item.path === currentItem.path,
           'searched-dir': item.is_dir,
         })}
         onClick={this.onClick}
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
         onDoubleClick={this.searchItemDoubleClick}
       >
         <td className="text-center searched-item-icon">
-          {item.is_dir ? <span className="icon sf3-font sf3-font-folder tree-node-icon"></span> : <img className="item-img" src={Utils.getFileIconUrl(item.name)} alt="" width="24"/>}
+          {item.is_dir ?
+            <span className="icon sf3-font sf3-font-folder tree-node-icon"></span>
+            :
+            <img className="item-img" src={Utils.getFileIconUrl(item.name)} alt="" width="24"/>
+          }
         </td>
         <td className='searched-item-link'>
           <span className="item-link">{item.repo_name}/{item.link_content}</span>

frontend/src/components/file-chooser/searcher/index.css

@@ -42,15 +42,3 @@
   flex-direction: column;
   gap: 0.5rem;
 }
-
-.file-chooser-search-results-popover .search-results-popover-body .searched-list-item.searched-dir td {
-  padding: 0;
-}
-
-.file-chooser-search-results-popover .search-results-popover-body .searched-item-icon {
-  border-radius: 3px 0 0 3px;
-}
-
-.file-chooser-search-results-popover .search-results-popover-body  .searched-item-link {
-  border-radius: 0 3px 3px 0;
-}

frontend/src/css/lib-content-view.css

@@ -320,7 +320,8 @@
   position: absolute;
   top: 16px;
   right: 48px;
-  color: #666;
+  color: #000;
+  opacity: 0.5;
 }
 
 .custom-modal .modal-header .close {
@@ -341,13 +342,11 @@
 .custom-modal .modal-header .search:hover,
 .custom-modal .modal-header .close:hover {
   cursor: pointer;
-  background-color: #f0f0f0;
   border-radius: 3px;
-  color: #666 !important;
+  opacity: 0.75;
-  opacity: 1;
 }
 
-.custom-modal .modal-header .close span{
+.custom-modal .modal-header .close span {
   width: 16px;
   height: 16px;
 }
@@ -484,3 +483,20 @@
   flex-shrink: 0;
   margin-left: 10px;
 }
+
+.comment-close-icon {
+  height: 24px;
+  width: 24px;
+  text-align: center;
+}
+
+.comment-close-icon {
+  cursor: pointer;
+  color: #000;
+  opacity: 0.5;
+  font-weight: 700;
+}
+
+.comment-close-icon:hover {
+  opacity: 0.75;
+}