change metadata check icon style (#8081)

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;
 }

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>

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>

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>

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>
         ),

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>
       )

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>

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;
 }