Icon bg more (#7902)

* [op icon] changed the default color for all the operation icons; added background for the operation icons in 'views/people' items when hover on them

* ['system admin'] library view: added background for the items & the operation icons when hover on them

* [system admin] user/org/institution: added background for the 'edit' icons in the 'info' page when hover on them

* [system admin] user - Shared Libraries: added background for the items when hover on them

* [system admin] group - libraries: added background for the items & the operation icons when hover on them

* [system admin] group - members: added background for the operation icons when hover on them

* [system admin] org - groups: added background for the items & the operation icons when hover on them

* [system admin] org - libraries: added background for the items & the operation icons when hover on them

* [org admin] Devices - Desktop/Mobile: added background for the items & the operation icons when hover on them

* [org admin] Libraries - All/Trash: added background for the items & the operation icons when hover on them

* [org admin] Users - All/Admin: fixup for the operation icons when hover on them

* [org admin] Users - user - profile: added background for the operation icons when hover on them

* [org admin] Users - user - owned libraries: added background for the items & the operation icons when hover on them

* [org admin] Groups: fixup for the operation icons when hover on them

* [org admin] Groups - Group - Libraries: added background for the items & the operation icons when hover on them

* [org admin] Search Groups: fixup for the operation icons when hover on them

* [org admin] Departments - Department - Members: fixup for the operation icons when hover on them

* [org admin] Links - All Public Links: fixup for the operation icons when hover on them

* [org admin] Logs - File Access: added background for the operation icons when hover on them

* [org admin] Logs - Permission: added background for the operation icons when hover on them

* [org admin] Logs - File Update: added background for the operation icons when hover on them

* fixup

frontend/src/components/edit-icon.js

@@ -2,20 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../utils/constants';
 
-const EditIcon = (props) => {
+function EditIcon({ onClick }) {
   return (
-    <span
+    <i
       role="button"
       title={gettext('Edit')}
       aria-label={gettext('Edit')}
-      className="sf3-font sf3-font-rename attr-action-icon"
+      className="sf3-font sf3-font-rename op-icon op-icon-bg-light ml-1"
-      onClick={props.onClick}>
+      onClick={onClick}>
-    </span>
+    </i>
   );
-};
+}
 
 EditIcon.propTypes = {
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired
 };
 
 export default EditIcon;

frontend/src/metadata/views/face-recognition/peoples/people/op-menu/index.js

@@ -35,7 +35,7 @@ const OpMenu = ({ onRename, onFreezed, onUnFreezed }) => {
         tag="i"
         role="button"
         tabIndex="0"
-        className="sf-dropdown-toggle sf3-font-more sf3-font face-recognition-more-operations-toggle"
+        className="sf-dropdown-toggle op-icon sf3-font-more sf3-font face-recognition-more-operations-toggle"
         title={gettext('More operations')}
         aria-label={gettext('More operations')}
         data-toggle="dropdown"

frontend/src/pages/org-admin/departments/member-item.js

@@ -111,7 +111,7 @@ class DepartmentsV2MembersItem extends React.Component {
               direction="down"
             >
               <DropdownToggle
-                tag='a'
+                tag='i'
                 role="button"
                 className='op-icon sf3-font-more sf3-font'
                 title={gettext('More operations')}

frontend/src/pages/org-admin/devices/devices-by-platform.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
+import classnames from 'classnames';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { orgAdminAPI } from '../../../utils/org-admin-api';
 import { orgID, gettext } from '../../../utils/constants';
@@ -88,6 +89,7 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isHighlighted: false,
       unlinked: false,
       isOpIconShown: false,
       isUnlinkDeviceDialogOpen: false
@@ -95,15 +97,20 @@ class Item extends Component {
   }
 
   handleMouseOver = () => {
-    this.setState({ isOpIconShown: true });
+    this.setState({
+      isHighlighted: true,
+      isOpIconShown: true
+    });
   };
 
   handleMouseOut = () => {
-    this.setState({ isOpIconShown: false });
+    this.setState({
+      isHighlighted: false,
+      isOpIconShown: false
+    });
   };
 
-  handleUnlink = (e) => {
+  handleUnlink = () => {
-    e.preventDefault();
     if (this.props.item.is_desktop_client) {
       this.toggleUnlinkDeviceDialog();
     } else {
@@ -129,7 +136,7 @@ class Item extends Component {
 
   render() {
     const item = this.props.item;
-    const { unlinked, isUnlinkDeviceDialogOpen, isOpIconShown } = this.state;
+    const { unlinked, isUnlinkDeviceDialogOpen, isOpIconShown, isHighlighted } = this.state;
 
     if (unlinked) {
       return null;
@@ -137,7 +144,13 @@ class Item extends Component {
 
     return (
       <Fragment>
-        <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+        <tr
+          className={classnames({
+            'tr-highlight': isHighlighted
+          })}
+          onMouseEnter={this.handleMouseOver}
+          onMouseLeave={this.handleMouseOut}
+        >
           <td>{item.user_name}</td>
           <td>{item.platform}{' / '}{item.client_version}</td>
           <td>{item.device_name}</td>
@@ -146,7 +159,12 @@ class Item extends Component {
             <span title={dayjs(item.last_accessed).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(item.last_accessed).fromNow()}</span>
           </td>
           <td>
-            <a href="#" className={`sf3-font-delete1 sf3-font action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Unlink')} onClick={this.handleUnlink}></a>
+            <i
+              className={`sf3-font-delete1 sf3-font op-icon ${isOpIconShown ? '' : 'invisible'}`}
+              title={gettext('Unlink')}
+              onClick={this.handleUnlink}
+            >
+            </i>
           </td>
         </tr>
         {isUnlinkDeviceDialogOpen &&

frontend/src/pages/org-admin/libraries/org-all-repos.js

@@ -173,7 +173,6 @@ class RepoItem extends React.Component {
   };
 
   onDropdownToggleClick = (e) => {
-    e.preventDefault();
     this.toggleOperationMenu(e);
   };
 
@@ -243,7 +242,8 @@ class RepoItem extends React.Component {
             {isOperationMenuShow &&
             <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
               <DropdownToggle
-                tag="a"
+                tag="i"
+                role="button"
                 className="op-icon sf3-font-more sf3-font"
                 title={gettext('More operations')}
                 aria-label={gettext('More operations')}

frontend/src/pages/org-admin/libraries/org-repo-trash.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import classnames from 'classnames';
 import { Utils } from '../../../utils/utils';
 import { orgAdminAPI } from '../../../utils/org-admin-api';
 import { gettext, orgID } from '../../../utils/constants';
@@ -69,15 +70,17 @@ class Content extends Component {
             </thead>
             <tbody>
               {items.map((item, index) => {
-                return (<Item
+                return (
-                  key={index}
+                  <Item
-                  repo={item}
+                    key={index}
-                  isItemFreezed={this.state.isItemFreezed}
+                    repo={item}
-                  onFreezedItem={this.onFreezedItem}
+                    isItemFreezed={this.state.isItemFreezed}
-                  onUnfreezedItem={this.onUnfreezedItem}
+                    onFreezedItem={this.onFreezedItem}
-                  onDeleteRepo={this.props.onDeleteRepo}
+                    onUnfreezedItem={this.onUnfreezedItem}
-                  onRestoreRepo={this.props.onRestoreRepo}
+                    onDeleteRepo={this.props.onDeleteRepo}
-                />);
+                    onRestoreRepo={this.props.onRestoreRepo}
+                  />
+                );
               })}
             </tbody>
           </table>
@@ -117,7 +120,7 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      highlight: false,
+      isHighlighted: false,
       isOpIconShown: false,
       isDeleteRepoDialogOpen: false,
       isRestoreRepoDialogOpen: false
@@ -128,7 +131,7 @@ class Item extends Component {
     if (!this.props.isItemFreezed) {
       this.setState({
         isOpIconShown: true,
-        highlight: true
+        isHighlighted: true
       });
     }
   };
@@ -137,14 +140,14 @@ class Item extends Component {
     if (!this.props.isItemFreezed) {
       this.setState({
         isOpIconShown: false,
-        highlight: false
+        isHighlighted: false
       });
     }
   };
 
   onUnfreezedItem = () => {
     this.setState({
-      highlight: false,
+      isHighlighted: false,
       isOpIconShow: false
     });
     this.props.onUnfreezedItem();
@@ -219,14 +222,20 @@ class Item extends Component {
 
   render() {
     const { repo } = this.props;
-    const { isOpIconShown, isDeleteRepoDialogOpen, isRestoreRepoDialogOpen } = this.state;
+    const { isHighlighted, isOpIconShown, isDeleteRepoDialogOpen, isRestoreRepoDialogOpen } = this.state;
     const iconUrl = Utils.getLibIconUrl(repo);
     const iconTitle = Utils.getLibIconTitle(repo);
     const repoName = '<span class="op-target">' + Utils.HTMLescape(repo.name) + '</span>';
 
     return (
       <Fragment>
-        <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+        <tr
+          className={classnames({
+            'tr-highlight': isHighlighted
+          })}
+          onMouseEnter={this.handleMouseOver}
+          onMouseLeave={this.handleMouseOut}
+        >
           <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
           <td>{repo.name}</td>
           <td>

frontend/src/pages/org-admin/org-group-repos.js

@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Link } from '@gatsbyjs/reach-router';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { gettext, siteRoot } from '../../utils/constants';
@@ -76,7 +77,7 @@ class Content extends Component {
 
     return (
       <Fragment>
-        <table className="table-hover">
+        <table>
           <thead>
             <tr>
               <th width="4%">{/* icon*/}</th>
@@ -106,6 +107,7 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isHighlighted: false,
       isOpIconShown: false,
       deleted: false,
       isDeleteRepoDialogOpen: false,
@@ -115,18 +117,19 @@ class Item extends Component {
 
   handleMouseOver = () => {
     this.setState({
+      isHighlighted: true,
       isOpIconShown: true
     });
   };
 
   handleMouseOut = () => {
     this.setState({
+      isHighlighted: false,
       isOpIconShown: false
     });
   };
 
-  handleDeleteIconClick = (e) => {
+  handleDeleteIconClick = () => {
-    e.preventDefault();
     this.toggleDeleteRepoDialog();
   };
 
@@ -154,7 +157,7 @@ class Item extends Component {
   };
 
   render() {
-    const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
+    const { deleted, isOpIconShown, isDeleteRepoDialogOpen, isHighlighted } = this.state;
     const repo = this.props.data;
 
     if (deleted) {
@@ -163,7 +166,13 @@ class Item extends Component {
 
     return (
       <Fragment>
-        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <tr
+          className={classnames({
+            'tr-highlight': isHighlighted
+          })}
+          onMouseOver={this.handleMouseOver}
+          onMouseOut={this.handleMouseOut}
+        >
           <td>
             <img src={Utils.getLibIconUrl(repo)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
           </td>
@@ -171,7 +180,12 @@ class Item extends Component {
           <td>{Utils.bytesToSize(repo.size)}</td>
           <td><Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(repo.shared_by)}/`}>{repo.shared_by_name}</Link></td>
           <td>
-            <a href="#" className={`action-icon sf3-font-delete1 sf3-font${isOpIconShown ? '' : ' invisible'}`} title={gettext('Delete')} onClick={this.handleDeleteIconClick}></a>
+            <i
+              className={`op-icon sf3-font-delete1 sf3-font${isOpIconShown ? '' : ' invisible'}`}
+              title={gettext('Delete')}
+              onClick={this.handleDeleteIconClick}
+            >
+            </i>
           </td>
         </tr>
         {isDeleteRepoDialogOpen && (

frontend/src/pages/org-admin/org-groups-search-groups.js

@@ -37,7 +37,6 @@ class GroupItem extends React.Component {
   };
 
   onDropdownToggleClick = (e) => {
-    e.preventDefault();
     this.toggleOperationMenu(e);
   };
 
@@ -102,7 +101,7 @@ class GroupItem extends React.Component {
           {isOperationMenuShow &&
             <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
               <DropdownToggle
-                tag="a"
+                tag="i"
                 className="op-icon sf3-font-more sf3-font"
                 title={gettext('More operations')}
                 aria-label={gettext('More operations')}
@@ -156,7 +155,7 @@ class OrgGroupsSearchGroupsResult extends React.Component {
               <th width="30%">{gettext('Name')}</th>
               <th width="35%">{gettext('Creator')}</th>
               <th width="23%">{gettext('Created At')}</th>
-              <th width="12%" className="text-center">{gettext('Operations')}</th>
+              <th width="12%"></th>
             </tr>
           </thead>
           <tbody>

frontend/src/pages/org-admin/org-groups.js

@@ -179,7 +179,7 @@ class OrgGroups extends Component {
                     <th width="30%">{gettext('Name')}</th>
                     <th width="35%">{gettext('Creator')}</th>
                     <th width="23%">{gettext('Created At')}</th>
-                    <th width="12%" className="text-center">{gettext('Operations')}</th>
+                    <th width="12%"></th>
                   </tr>
                 </thead>
                 <tbody>
@@ -251,7 +251,6 @@ class GroupItem extends React.Component {
   };
 
   onDropdownToggleClick = (e) => {
-    e.preventDefault();
     this.toggleOperationMenu(e);
   };
 
@@ -319,7 +318,7 @@ class GroupItem extends React.Component {
           {isOperationMenuShow &&
             <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
               <DropdownToggle
-                tag="a"
+                tag="i"
                 className="op-icon sf3-font-more sf3-font"
                 title={gettext('More operations')}
                 aria-label={gettext('More operations')}

frontend/src/pages/org-admin/org-links.js

@@ -173,7 +173,6 @@ class RepoItem extends React.Component {
   };
 
   onDropdownToggleClick = (e) => {
-    e.preventDefault();
     this.toggleOperationMenu(e);
   };
 
@@ -207,7 +206,7 @@ class RepoItem extends React.Component {
           {this.state.showMenu &&
             <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
               <DropdownToggle
-                tag="a"
+                tag="i"
                 className="op-icon sf3-font-more sf3-font"
                 title={gettext('More operations')}
                 aria-label={gettext('More operations')}

frontend/src/pages/org-admin/org-logs-file-audit.js

@@ -184,7 +184,7 @@ class FileAuditItem extends React.Component {
         <a href={siteRoot + 'org/useradmin/info/' + fileEvent.user_email + '/'}>{fileEvent.user_name}</a>{' '}
         <Dropdown size='sm' isOpen={this.state.userDropdownOpen} toggle={this.toggleUserDropdown}
           className={this.state.highlight ? '' : 'vh'} tag="span">
-          <DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
+          <DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
           <DropdownMenu>
             <DropdownItem onClick={this.props.filterUser.bind(this, fileEvent.user_email)}>
               {gettext('Only Show')}{' '}
@@ -225,7 +225,7 @@ class FileAuditItem extends React.Component {
         { fileEvent.repo_name &&
           <Dropdown size='sm' isOpen={this.state.repoDropdownOpen} toggle={this.toggleRepoDropdown}
             className={this.state.highlight ? '' : 'vh'} >
-            <DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
+            <DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
             <DropdownMenu>
               <DropdownItem size='sm' onClick={this.props.filterRepo.bind(this, fileEvent.repo_name)}>
                 {gettext('Only Show')}{' '}<span className="font-weight-bold">{fileEvent.repo_name}</span>

frontend/src/pages/org-admin/org-logs-file-update.js

@@ -210,7 +210,7 @@ class FileUpdateItem extends React.Component {
         <a href={siteRoot + 'org/useradmin/info/' + fileEvent.user_email + '/'}>{fileEvent.user_name}</a>{' '}
         <Dropdown size='sm' isOpen={this.state.userDropdownOpen} toggle={this.toggleUserDropdown}
           className={this.state.highlight ? '' : 'vh'} tag="span">
-          <DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
+          <DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
           <DropdownMenu>
             <DropdownItem onClick={this.props.filterUser.bind(this, fileEvent.user_email)}>
               {gettext('Only Show')}{' '}<span className="font-weight-bold">{fileEvent.user_name}</span>
@@ -236,7 +236,7 @@ class FileUpdateItem extends React.Component {
         { fileEvent.repo_name &&
           <Dropdown size='sm' isOpen={this.state.repoDropdownOpen} toggle={this.toggleRepoDropdown}
             className={this.state.highlight ? '' : 'vh'} >
-            <DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
+            <DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
             <DropdownMenu>
               <DropdownItem size='sm' onClick={this.props.filterRepo.bind(this, fileEvent.repo_name)}>
                 {gettext('Only Show')}{' '}

frontend/src/pages/org-admin/org-logs-perm-audit.js

@@ -157,7 +157,7 @@ class PermAuditItem extends React.Component {
         <a href={siteRoot + 'org/useradmin/info/' + permEvent.from_user_email + '/'}>{permEvent.from_user_name}</a>{' '}
         <Dropdown size='sm' isOpen={this.state.userDropdownOpen} toggle={this.toggleUserDropdown}
           className={this.state.highlight ? '' : 'vh'} tag="span">
-          <DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
+          <DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
           <DropdownMenu>
             <DropdownItem onClick={this.props.filterUser.bind(this, permEvent.from_user_email)}>
               {gettext('Only Show')}{' '}

frontend/src/pages/org-admin/org-user-item.js

@@ -85,7 +85,6 @@ class UserItem extends React.Component {
   };
 
   onDropdownToggleClick = (e) => {
-    e.preventDefault();
     this.toggleOperationMenu(e);
   };
 
@@ -176,7 +175,7 @@ class UserItem extends React.Component {
             {isOperationMenuShow && (
               <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
                 <DropdownToggle
-                  tag="a"
+                  tag="i"
                   className="op-icon sf3-font-more sf3-font"
                   title={gettext('More operations')}
                   aria-label={gettext('More operations')}

frontend/src/pages/org-admin/org-user-profile.js

@@ -8,6 +8,7 @@ import OrgAdminUserNav from '../../components/org-admin-user-nav';
 import SetOrgUserName from '../../components/dialog/set-org-user-name';
 import SetOrgUserContactEmail from '../../components/dialog/set-org-user-contact-email';
 import SetOrgUserQuota from '../../components/dialog/set-org-user-quota';
+import EditIcon from '../../components/edit-icon';
 import MainPanelTopbar from './main-panel-topbar';
 
 import '../../css/org-admin-user.css';
@@ -136,13 +137,13 @@ class Content extends Component {
           <dt>{gettext('Name')}</dt>
           <dd>
             {name || '--'}
-            <span title={gettext('Edit')} className="attr-action-icon sf3-font sf3-font-rename" onClick={this.toggleSetNameDialog}></span>
+            <EditIcon onClick={this.toggleSetNameDialog} />
           </dd>
 
           <dt>{gettext('Contact Email')}</dt>
           <dd>
             {contact_email || '--'}
-            <span title={gettext('Edit')} className="attr-action-icon sf3-font sf3-font-rename" onClick={this.toggleSetContactEmailDialog}></span>
+            <EditIcon onClick={this.toggleSetContactEmailDialog} />
           </dd>
 
           <dt>{gettext('Organization')}</dt>
@@ -151,7 +152,7 @@ class Content extends Component {
           <dt>{gettext('Space Used / Quota')}</dt>
           <dd>
             {`${Utils.bytesToSize(quota_usage)}${quota_total > 0 ? ' / ' + Utils.bytesToSize(quota_total) : ''}`}
-            <span title={gettext('Edit')} className="attr-action-icon sf3-font sf3-font-rename" onClick={this.toggleSetQuotaDialog}></span>
+            <EditIcon onClick={this.toggleSetQuotaDialog} />
           </dd>
         </dl>
         {isSetNameDialogOpen &&

frontend/src/pages/org-admin/org-user-repos.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
+import classnames from 'classnames';
 import { orgAdminAPI } from '../../utils/org-admin-api';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -102,6 +103,7 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isHighlighted: false,
       isOpIconShown: false,
       deleted: false,
       isDeleteRepoDialogOpen: false,
@@ -111,18 +113,19 @@ class Item extends Component {
 
   handleMouseOver = () => {
     this.setState({
+      isHighlighted: true,
       isOpIconShown: true
     });
   };
 
   handleMouseOut = () => {
     this.setState({
+      isHighlighted: false,
       isOpIconShown: false
     });
   };
 
-  handleDeleteIconClick = (e) => {
+  handleDeleteIconClick = () => {
-    e.preventDefault();
     this.toggleDeleteRepoDialog();
   };
 
@@ -150,7 +153,7 @@ class Item extends Component {
   };
 
   render() {
-    const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
+    const { deleted, isOpIconShown, isDeleteRepoDialogOpen, isHighlighted } = this.state;
     const repo = this.props.data;
 
     if (deleted) {
@@ -159,7 +162,13 @@ class Item extends Component {
 
     return (
       <Fragment>
-        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <tr
+          className={classnames({
+            'tr-highlight': isHighlighted
+          })}
+          onMouseOver={this.handleMouseOver}
+          onMouseOut={this.handleMouseOut}
+        >
           <td>
             <img src={Utils.getLibIconUrl(repo)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
           </td>
@@ -167,7 +176,13 @@ class Item extends Component {
           <td>{Utils.bytesToSize(repo.size)}</td>
           <td title={dayjs(repo.last_modified).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(repo.last_modified).format('YYYY-MM-DD')}</td>
           <td>
-            <a href="#" className={`action-icon sf3-font-delete1 sf3-font${isOpIconShown ? '' : ' invisible'}`} title={gettext('Delete')} onClick={this.handleDeleteIconClick}></a>
+            <i
+              role="button"
+              className={`op-icon sf3-font-delete1 sf3-font${isOpIconShown ? '' : ' invisible'}`}
+              title={gettext('Delete')}
+              onClick={this.handleDeleteIconClick}
+            >
+            </i>
           </td>
         </tr>
         {isDeleteRepoDialogOpen && (

frontend/src/pages/sys-admin/groups/group-members.js

@@ -60,14 +60,16 @@ class Content extends Component {
             </thead>
             <tbody>
               {items.map((item, index) => {
-                return (<Item
+                return (
-                  key={index}
+                  <Item
-                  item={item}
+                    key={index}
-                  isItemFreezed={this.state.isItemFreezed}
+                    item={item}
-                  toggleItemFreezed={this.toggleItemFreezed}
+                    isItemFreezed={this.state.isItemFreezed}
-                  removeMember={this.props.removeMember}
+                    toggleItemFreezed={this.toggleItemFreezed}
-                  updateMemberRole={this.props.updateMemberRole}
+                    removeMember={this.props.removeMember}
-                />);
+                    updateMemberRole={this.props.updateMemberRole}
+                  />
+                );
               })}
             </tbody>
           </table>
@@ -174,7 +176,13 @@ class Item extends Component {
           </td>
           <td>
             {item.role != 'Owner' &&
-            <a href="#" className={`action-icon sf2-icon-x3 ${highlighted ? '' : 'invisible'}`} title={gettext('Remove')} onClick={this.toggleDeleteDialog}></a>
+            <i
+              role="button"
+              className={`op-icon sf2-icon-x3 ${highlighted ? '' : 'invisible'}`}
+              title={gettext('Remove')}
+              onClick={this.toggleDeleteDialog}
+            >
+            </i>
             }
           </td>
         </tr>

frontend/src/pages/sys-admin/groups/group-repos.js

@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Utils } from '../../../utils/utils';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { siteRoot, gettext, isPro } from '../../../utils/constants';
@@ -32,7 +33,7 @@ class Content extends Component {
       );
       const table = (
         <Fragment>
-          <table className="table-hover">
+          <table>
             <thead>
               <tr>
                 <th width="5%">{/* icon */}</th>
@@ -44,11 +45,13 @@ class Content extends Component {
             </thead>
             <tbody>
               {items.map((item, index) => {
-                return (<Item
+                return (
-                  key={index}
+                  <Item
-                  item={item}
+                    key={index}
-                  unshareRepo={this.props.unshareRepo}
+                    item={item}
-                />);
+                    unshareRepo={this.props.unshareRepo}
+                  />
+                );
               })}
             </tbody>
           </table>
@@ -75,23 +78,27 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isHighlighted: false,
       isOpIconShown: false,
       isUnshareRepoDialogOpen: false
     };
   }
 
   handleMouseEnter = () => {
-    this.setState({ isOpIconShown: true });
+    this.setState({
+      isHighlighted: true,
+      isOpIconShown: true
+    });
   };
 
   handleMouseLeave = () => {
-    this.setState({ isOpIconShown: false });
+    this.setState({
+      isHighlighted: false,
+      isOpIconShown: false
+    });
   };
 
-  toggleUnshareRepoDialog = (e) => {
+  toggleUnshareRepoDialog = () => {
-    if (e) {
-      e.preventDefault();
-    }
     this.setState({ isUnshareRepoDialogOpen: !this.state.isUnshareRepoDialogOpen });
   };
 
@@ -117,7 +124,7 @@ class Item extends Component {
   };
 
   render() {
-    let { isOpIconShown, isUnshareRepoDialogOpen } = this.state;
+    let { isOpIconShown, isUnshareRepoDialogOpen, isHighlighted } = this.state;
     let { item } = this.props;
 
     let iconUrl = Utils.getLibIconUrl(item);
@@ -128,7 +135,13 @@ class Item extends Component {
 
     return (
       <Fragment>
-        <tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <tr
+          className={classnames({
+            'tr-highlight': isHighlighted
+          })}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        >
           <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
           <td>{this.renderRepoName()}</td>
           <td>{Utils.bytesToSize(item.size)}</td>
@@ -136,7 +149,13 @@ class Item extends Component {
             <UserLink email={item.shared_by} name={item.shared_by_name} />
           </td>
           <td>
-            <a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Unshare')} onClick={this.toggleUnshareRepoDialog}></a>
+            <i
+              role="button"
+              className={`op-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`}
+              title={gettext('Unshare')}
+              onClick={this.toggleUnshareRepoDialog}
+            >
+            </i>
           </td>
         </tr>
         {isUnshareRepoDialogOpen &&

frontend/src/pages/sys-admin/orgs/org-groups.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
+import classnames from 'classnames';
 import { Utils } from '../../../utils/utils';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { siteRoot, gettext } from '../../../utils/constants';
@@ -42,11 +43,13 @@ class Content extends Component {
             </thead>
             <tbody>
               {items.map((item, index) => {
-                return (<Item
+                return (
-                  key={index}
+                  <Item
-                  item={item}
+                    key={index}
-                  deleteGroup={this.props.deleteGroup}
+                    item={item}
-                />);
+                    deleteGroup={this.props.deleteGroup}
+                  />
+                );
               })}
             </tbody>
           </table>
@@ -73,23 +76,27 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isHighlighted: false,
       isOpIconShown: false,
       isDeleteDialogOpen: false
     };
   }
 
   handleMouseEnter = () => {
-    this.setState({ isOpIconShown: true });
+    this.setState({
+      isHighlighted: true,
+      isOpIconShown: true
+    });
   };
 
   handleMouseLeave = () => {
-    this.setState({ isOpIconShown: false });
+    this.setState({
+      isHighlighted: false,
+      isOpIconShown: false
+    });
   };
 
-  toggleDeleteDialog = (e) => {
+  toggleDeleteDialog = () => {
-    if (e) {
-      e.preventDefault();
-    }
     this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
   };
 
@@ -100,7 +107,7 @@ class Item extends Component {
 
   render() {
     const { item } = this.props;
-    const { isOpIconShown, isDeleteDialogOpen } = this.state;
+    const { isOpIconShown, isDeleteDialogOpen, isHighlighted } = this.state;
 
     const itemName = '<span class="op-target">' + Utils.HTMLescape(item.group_name) + '</span>';
     const deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?').replace('{placeholder}', itemName);
@@ -109,12 +116,23 @@ class Item extends Component {
 
     return (
       <Fragment>
-        <tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <tr
+          className={classnames({
+            'tr-highlight': isHighlighted
+          })}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        >
           <td><a href={groupUrl}>{item.group_name}</a></td>
           <td><UserLink email={item.creator_email} name={item.creator_name} /></td>
           <td>{dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')}</td>
           <td>
-            <a href="#" className={`action-icon sf3-font-delete1 sf3-font ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Delete')} onClick={this.toggleDeleteDialog}></a>
+            <i
+              className={`op-icon sf3-font-delete1 sf3-font ${isOpIconShown ? '' : 'invisible'}`}
+              title={gettext('Delete')}
+              onClick={this.toggleDeleteDialog}
+            >
+            </i>
           </td>
         </tr>
         {isDeleteDialogOpen &&

frontend/src/pages/sys-admin/orgs/org-repos.js

@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Utils } from '../../../utils/utils';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { gettext } from '../../../utils/constants';
@@ -25,7 +26,7 @@ class Content extends Component {
       );
       const table = (
         <Fragment>
-          <table className="table-hover">
+          <table>
             <thead>
               <tr>
                 <th width="5%"></th>
@@ -37,11 +38,13 @@ class Content extends Component {
             </thead>
             <tbody>
               {items.map((item, index) => {
-                return (<Item
+                return (
-                  key={index}
+                  <Item
-                  item={item}
+                    key={index}
-                  deleteRepo={this.props.deleteRepo}
+                    item={item}
-                />);
+                    deleteRepo={this.props.deleteRepo}
+                  />
+                );
               })}
             </tbody>
           </table>
@@ -64,17 +67,24 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      isHighlighted: false,
       isOpIconShown: false,
       isDeleteDialogOpen: false
     };
   }
 
   handleMouseEnter = () => {
-    this.setState({ isOpIconShown: true });
+    this.setState({
+      isHighlighted: true,
+      isOpIconShown: true
+    });
   };
 
   handleMouseLeave = () => {
-    this.setState({ isOpIconShown: false });
+    this.setState({
+      isHighlighted: false,
+      isOpIconShown: false
+    });
   };
 
   toggleDeleteDialog = (e) => {
@@ -90,7 +100,7 @@ class Item extends Component {
 
   render() {
     const { item } = this.props;
-    const { isOpIconShown, isDeleteDialogOpen } = this.state;
+    const { isOpIconShown, isDeleteDialogOpen, isHighlighted } = this.state;
 
     const iconUrl = Utils.getLibIconUrl(item);
     const iconTitle = Utils.getLibIconTitle(item);
@@ -100,7 +110,13 @@ class Item extends Component {
 
     return (
       <Fragment>
-        <tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <tr
+          className={classnames({
+            'tr-highlight': isHighlighted
+          })}
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        >
           <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
           <td>{item.repo_name}</td>
           <td>{item.repo_id}</td>
@@ -113,7 +129,12 @@ class Item extends Component {
             }
           </td>
           <td>
-            <a href="#" className={`action-icon sf3-font-delete1 sf3-font ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Delete')} onClick={this.toggleDeleteDialog}></a>
+            <i
+              className={`op-icon sf3-font-delete1 sf3-font ${isOpIconShown ? '' : 'invisible'}`}
+              title={gettext('Delete')}
+              onClick={this.toggleDeleteDialog}
+            >
+            </i>
           </td>
         </tr>
         {isDeleteDialogOpen &&

frontend/src/pages/sys-admin/repos/dir-content.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import classnames from 'classnames';
 import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import Loading from '../../../components/loading';
@@ -14,18 +15,21 @@ class DirentItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      isHighlighted: false,
       isOpIconShown: false
     };
   }
 
   handleMouseOver = () => {
     this.setState({
+      isHighlighted: true,
       isOpIconShown: true
     });
   };
 
   handleMouseOut = () => {
     this.setState({
+      isHighlighted: false,
       isOpIconShown: false
     });
   };
@@ -34,24 +38,28 @@ class DirentItem extends React.Component {
     this.props.openFolder(this.props.dirent);
   };
 
-  deleteDirent = (e) => {
+  deleteDirent = () => {
-    e.preventDefault();
     this.props.deleteDirent(this.props.dirent);
   };
 
-  downloadDirent = (e) => {
+  downloadDirent = () => {
-    e.preventDefault();
     this.props.downloadDirent(this.props.dirent);
   };
 
   render() {
-    let { isOpIconShown } = this.state;
+    let { isOpIconShown, isHighlighted } = this.state;
     let { dirent, fromSystemRepo } = this.props;
     let iconUrl = Utils.getDirentIcon(dirent);
 
     return (
       <Fragment>
-        <tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
+        <tr
+          className={classnames({
+            'tr-highlight': isHighlighted
+          })}
+          onMouseEnter={this.handleMouseOver}
+          onMouseLeave={this.handleMouseOut}
+        >
           <td className="text-center"><img src={iconUrl} width="24" alt='' /></td>
           <td>
             {dirent.is_file ?
@@ -61,10 +69,20 @@ class DirentItem extends React.Component {
           </td>
           <td>
             {isOpIconShown && fromSystemRepo &&
-              <a href="#" className="op-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} onClick={this.deleteDirent}></a>
+              <i
+                className="op-icon sf3-font-delete1 sf3-font"
+                title={gettext('Delete')}
+                onClick={this.deleteDirent}
+              >
+              </i>
             }
             {isOpIconShown && dirent.is_file &&
-            <a href="#" className="op-icon sf3-font sf3-font-download1" title={gettext('Download')} onClick={this.downloadDirent}></a>
+            <i
+              className="op-icon sf3-font sf3-font-download1"
+              title={gettext('Download')}
+              onClick={this.downloadDirent}
+            >
+            </i>
             }
           </td>
           <td>{dirent.size}</td>

frontend/src/pages/sys-admin/users/user-shared-repos.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import classnames from 'classnames';
 import { Utils } from '../../../utils/utils';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { isPro, siteRoot, gettext } from '../../../utils/constants';
@@ -24,7 +25,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const table = (
-        <table className="table-hover">
+        <table>
           <thead>
             <tr>
               <th width="5%"></th>
@@ -57,6 +58,25 @@ Content.propTypes = {
 
 class Item extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isHighlighted: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isHighlighted: true
+    });
+  };
+
+  handleMouseOut = () => {
+    this.setState({
+      isHighlighted: false
+    });
+  };
+
   renderRepoName = () => {
     const { item } = this.props;
     const repo = item;
@@ -89,8 +109,15 @@ class Item extends Component {
     const { item } = this.props;
     const iconUrl = Utils.getLibIconUrl(item);
     const iconTitle = Utils.getLibIconTitle(item);
+    const { isHighlighted } = this.state;
     return (
-      <tr>
+      <tr
+        className={classnames({
+          'tr-highlight': isHighlighted
+        })}
+        onMouseOver={this.handleMouseOver}
+        onMouseOut={this.handleMouseOut}
+      >
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td>{this.renderRepoName()}</td>
         <td>{this.getOwnerLink()}</td>

media/css/seahub_react.css

@@ -567,7 +567,7 @@ a, a:hover {
 .op-icon {
   font-size: 1rem;
   line-height: 1;
-  color: #999;
+  color: #666;
   cursor: pointer;
   display: inline-flex;
   width: 24px;
@@ -580,7 +580,7 @@ a, a:hover {
 
 .op-icon:focus,
 .op-icon:hover {
-  color: #666;
+  color: #666; /* to overwrite the styles for `a:hover` */
   text-decoration: none;
   background: #e5e5e5;
 }
@@ -590,10 +590,6 @@ a, a:hover {
   background: #efefef; /* for .op-icon shown in white containers */
 }
 
-.tr-highlight .op-icon {
-  color: #666;
-}
-
 .action-icon,
 .attr-action-icon {
   margin-left: 0.5rem;