From 1b65e5614baea9094e96b9f9a9ba98a4f6b40d03 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Wed, 30 Jul 2025 11:31:27 +0800
Subject: [PATCH] change metadata check icon style (#8081)

---
 .../components/customize-select/select-option-group/index.css | 4 ++++
 .../components/cell-editors/collaborator-editor/index.js      | 3 +--
 .../components/cell-editors/multiple-select-editor/index.js   | 3 +--
 .../components/cell-editors/single-select-editor/index.js     | 3 +--
 .../src/metadata/components/dialog/peoples-dialog/index.js    | 3 +--
 .../filter-popover/advanced-filters/filter-item-utils.js      | 4 ++--
 .../advanced-filters/filter-item/collaborator-filter/index.js | 3 +--
 .../popover/filter-popover/advanced-filters/index.css         | 4 ++++
 8 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/customize-select/select-option-group/index.css b/frontend/src/components/customize-select/select-option-group/index.css
index 809158b064..d7a012e6bf 100644
--- a/frontend/src/components/customize-select/select-option-group/index.css
+++ b/frontend/src/components/customize-select/select-option-group/index.css
@@ -74,6 +74,10 @@
   fill: #aaa;
 }
 
+.seafile-select-option:not(.seafile-select-option-active):hover .header-icon .sf2-icon-tick {
+  color: #aaa;
+}
+
 .seafile-select-option .select-option-name .single-select-option {
   margin: 0 0 0 12px;
 }
diff --git a/frontend/src/metadata/components/cell-editors/collaborator-editor/index.js b/frontend/src/metadata/components/cell-editors/collaborator-editor/index.js
index 5599933d03..a5054caa73 100644
--- a/frontend/src/metadata/components/cell-editors/collaborator-editor/index.js
+++ b/frontend/src/metadata/components/cell-editors/collaborator-editor/index.js
@@ -2,7 +2,6 @@ import React, { forwardRef, useMemo, useImperativeHandle, useCallback, useState,
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import SearchInput from '../../../../components/search-input';
-import Icon from '../../../../components/icon';
 import DeleteCollaborator from './delete-collaborator';
 import { Utils } from '../../../../utils/utils';
 import { KeyCodes } from '../../../../constants';
@@ -233,7 +232,7 @@ const CollaboratorEditor = forwardRef(({
               </span>
             </div>
             <div className="collaborator-check-icon">
-              {isSelected && (<Icon className="sf-metadata-icon" symbol="check-mark" />)}
+              {isSelected && <i className="sf2-icon-tick"></i>}
             </div>
           </div>
         </div>
diff --git a/frontend/src/metadata/components/cell-editors/multiple-select-editor/index.js b/frontend/src/metadata/components/cell-editors/multiple-select-editor/index.js
index d909a8543f..54118a8ec9 100644
--- a/frontend/src/metadata/components/cell-editors/multiple-select-editor/index.js
+++ b/frontend/src/metadata/components/cell-editors/multiple-select-editor/index.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import CommonAddTool from '../../../../components/common-add-tool';
 import SearchInput from '../../../../components/search-input';
-import Icon from '../../../../components/icon';
 import DeleteOption from './delete-options';
 import { Utils } from '../../../../utils/utils';
 import { getColumnOptionIdsByNames } from '../../../utils/cell';
@@ -236,7 +235,7 @@ const MultipleSelectEditor = forwardRef(({
               </span>
             </div>
             <div className="single-select-check-icon">
-              {isSelected && (<Icon className="sf-metadata-icon" symbol="check-mark" />)}
+              {isSelected && <i className="sf2-icon-tick"></i>}
             </div>
           </div>
         </div>
diff --git a/frontend/src/metadata/components/cell-editors/single-select-editor/index.js b/frontend/src/metadata/components/cell-editors/single-select-editor/index.js
index 245ae4e733..0da67d0573 100644
--- a/frontend/src/metadata/components/cell-editors/single-select-editor/index.js
+++ b/frontend/src/metadata/components/cell-editors/single-select-editor/index.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import CommonAddTool from '../../../../components/common-add-tool';
 import SearchInput from '../../../../components/search-input';
-import Icon from '../../../../components/icon';
 import { gettext } from '../../../../utils/constants';
 import { Utils } from '../../../../utils/utils';
 import { KeyCodes } from '../../../../constants';
@@ -234,7 +233,7 @@ const SingleSelectEditor = forwardRef(({
               </span>
             </div>
             <div className="single-select-check-icon">
-              {isSelected && (<Icon className="sf-metadata-icon" symbol="check-mark" />)}
+              {isSelected && <i className="sf2-icon-tick"></i>}
             </div>
           </div>
         </div>
diff --git a/frontend/src/metadata/components/dialog/peoples-dialog/index.js b/frontend/src/metadata/components/dialog/peoples-dialog/index.js
index ec0f734858..98c7ddcdb4 100644
--- a/frontend/src/metadata/components/dialog/peoples-dialog/index.js
+++ b/frontend/src/metadata/components/dialog/peoples-dialog/index.js
@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody, ModalFooter, Button, FormGroup, Label } from 'reactstrap';
-import Icon from '../../../../components/icon';
 import CustomizeSelect from '../../../../components/customize-select';
 import SeahubModalHeader from '@/components/common/seahub-modal-header';
 import People from './people';
@@ -25,7 +24,7 @@ const PeoplesDialog = ({ selectedImages, onToggle, onSubmit }) => {
           <div className="select-option-people">
             <People people={people} />
             <div className="people-check-icon">
-              {isSelected && (<Icon symbol="check-mark" />)}
+              {isSelected && <i className="sf2-icon-tick"></i>}
             </div>
           </div>
         ),
diff --git a/frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item-utils.js b/frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item-utils.js
index 78eafaed81..d0256518b2 100644
--- a/frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item-utils.js
+++ b/frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item-utils.js
@@ -40,7 +40,7 @@ class FilterItemUtils {
         <div className="select-option-name single-option-name">
           <div className="single-select-option" style={{ background: option.color, color: option.textColor || null }} title={option.name} aria-label={option.name}>{option.name}</div>
           <div className="single-check-icon">
-            {selectedOption?.id === option.id && (<Icon symbol="check-mark" />)}
+            {selectedOption?.id === option.id && <i className="sf2-icon-tick"></i>}
           </div>
         </div>
       )
@@ -54,7 +54,7 @@ class FilterItemUtils {
         <div className="select-option-name multiple-option-name">
           <div className="multiple-select-option" style={{ background: option.color, color: option.textColor }} title={option.name} aria-label={option.name}>{option.name}</div>
           <div className="multiple-check-icon">
-            {filterTerm.indexOf(option.id) > -1 && (<Icon symbol="check-mark" />)}
+            {filterTerm.indexOf(option.id) > -1 && <i className="sf2-icon-tick"></i>}
           </div>
         </div>
       )
diff --git a/frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item/collaborator-filter/index.js b/frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item/collaborator-filter/index.js
index 3873dc941d..94b2a5cddd 100644
--- a/frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item/collaborator-filter/index.js
+++ b/frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item/collaborator-filter/index.js
@@ -1,7 +1,6 @@
 import React, { Fragment, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import CustomizeSelect from '../../../../../../../components/customize-select';
-import Icon from '../../../../../../../components/icon';
 import { gettext } from '../../../../../../../utils/constants';
 import { FILTER_PREDICATE_TYPE } from '../../../../../../constants';
 
@@ -45,7 +44,7 @@ const CollaboratorFilter = ({ readOnly, filterIndex, filterTerm, collaborators,
                 </div>
               </div>
               <div className='collaborator-check-icon'>
-                {isSelected && (<Icon symbol="check-mark" />)}
+                {isSelected && <i className="sf2-icon-tick"></i>}
               </div>
             </div>
           </Fragment>
diff --git a/frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css b/frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css
index fa287e2e91..eeec707384 100644
--- a/frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css
+++ b/frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css
@@ -333,6 +333,10 @@
   fill: #fff;
 }
 
+.seafile-select-option:not(.seafile-select-option-active):hover .sf-metadata-filter-header-icon .sf2-icon-tick {
+  color: #aaa;
+}
+
 .seafile-select-option:not(.seafile-select-option-active):hover .sf-metadata-filter-header-icon .seafile-multicolor-icon {
   fill: #aaa;
 }