diff --git a/frontend/src/pages/my-libs/my-libs-deleted.js b/frontend/src/pages/my-libs/my-libs-deleted.js
index 52f2ed63f5..6f32e465c3 100644
--- a/frontend/src/pages/my-libs/my-libs-deleted.js
+++ b/frontend/src/pages/my-libs/my-libs-deleted.js
@@ -4,7 +4,6 @@ import { gettext, siteRoot, lang } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../../components/toast';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
-import classnames from 'classnames';
 import moment from 'moment';
 moment.locale(lang);
 
@@ -104,7 +103,7 @@ class DeletedRepoItem extends Component {
     super(props);
     this.state = {
       hideRestoreMenu: true,
-      highlight: '',
+      highlight: false,
     };
   }
 
@@ -112,7 +111,7 @@ class DeletedRepoItem extends Component {
     if (!this.props.isItemFreezed) {
       this.setState({
         hideRestoreMenu: false,
-        highlight: 'tr-highlight'
+        highlight: true,
       });
     }
   }
@@ -121,7 +120,7 @@ class DeletedRepoItem extends Component {
     if (!this.props.isItemFreezed) {
       this.setState({
         hideRestoreMenu: true,
-        highlight: ''
+        highlight: false,
       });
     }
   } 
@@ -144,11 +143,15 @@ class DeletedRepoItem extends Component {
     localTime = moment(localTime).fromNow();
 
     return (
-      <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="icon"><img src={siteRoot + 'media/img/lib/48/lib.png'} alt='icon' /></td>
         <td className="name">{this.props.repo.repo_name}</td>
         <td className="update">{localTime}</td>
-        <td className={classnames({hide: this.state.hideRestoreMenu})}><i onClick={this.restoreDeletedRepo} className="fas fa-reply"></i></td>
+        <td>
+          {this.state.highlight && (
+            <a href="#" onClick={this.restoreDeletedRepo} className="sf2-icon-reply sf2-x repo-share-btn op-icon"></a>
+          )}
+        </td>
       </tr>
     );
   }
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index a287991293..bdfde6659f 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -80,6 +80,7 @@
 .sf2-icon-list-view:before { content:"\e026"; }
 .sf2-icon-copy:before {content:"\e028"}
 .sf2-icon-move:before {content:"\e029"}
+.sf2-icon-reply:before { content:"\e02a"; }
 .sf2-icon-menu:before { content: "\e031"; }
 .sf2-icon-more:before { content: "\e032"; }
 .sf2-icon-x3:before {content:"\e035";}
@@ -143,10 +144,6 @@ ul,ol,li {
     justify-content: flex-end;
 }
 
-.flex-direction-row {
-    flex-direction: row;
-}
-
 .sf-font {
     color: #eb8205 !important;
     text-decoration: none;