change icons (#7526)

frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
-import { ModalPortal, Icon } from '@seafile/sf-metadata-ui-component';
+import { ModalPortal } from '@seafile/sf-metadata-ui-component';
 import { gettext } from '../../../../../utils/constants';
 import { isMobile } from '../../../../../utils/utils';
 
@@ -41,7 +41,7 @@ const HeaderDropdownMenu = ({ column, ColumnDropdownMenu, customProps }) => {
         aria-label={gettext('More operations')}
         tabIndex={0}
       >
-        <Icon iconName="drop-down" />
+        <i className="sf3-font-down sf3-font"></i>
       </DropdownToggle>
       {isMenuShow && !isMobile &&
         <ModalPortal>

frontend/src/metadata/components/dialog/peoples-dialog/index.js

@@ -77,6 +77,11 @@ const PeoplesDialog = ({ selectedImages, onToggle, onSubmit }) => {
             onSelectOption={onSelectPeople}
             supportMultipleSelect={true}
             searchable={true}
+            component={{
+              DropDownIcon: (
+                <i className="sf3-font sf3-font-down"></i>
+              )
+            }}
           />
         </FormGroup>
       </ModalBody>

frontend/src/metadata/components/popover/column-popover/data/date-data/index.js

@@ -75,7 +75,16 @@ const DateData = ({ value, column, onChange }) => {
     <div className="sf-metadata-column-data-settings sf-metadata-date-column-data-settings">
       <FormGroup className="">
         <Label>{gettext('Format')}</Label>
-        <CustomizeSelect value={selectedValue} options={options} onSelectOption={onFormatChange} />
+        <CustomizeSelect
+          value={selectedValue}
+          options={options}
+          onSelectOption={onFormatChange}
+          component={{
+            DropDownIcon: (
+              <i className="sf3-font sf3-font-down"></i>
+            )
+          }}
+        />
       </FormGroup>
       {!isShootingTime && (
         <>

frontend/src/metadata/components/popover/column-popover/data/rate-data/index.css

@@ -15,6 +15,15 @@
   fill: inherit;
 }
 
+.sf-metadata-rate-column-data-settings .rate-column-data-style-setting-wrapper>.sf3-font-down {
+  color: #999;
+}
+
+.sf-metadata-rate-column-data-settings .rate-column-data-style-setting-wrapper>.sf3-font-down:hover,
+.sf-metadata-rate-column-data-settings .sf-metadata-select .selected-option .custom-select-dropdown-icon:hover {
+  color: #555;
+}
+
 /* style popover */
 .sf-metadata-rate-column-data-style-setting-popover .rate-column-style-list {
   display: flex;

frontend/src/metadata/components/popover/column-popover/data/rate-data/index.js

@@ -57,7 +57,7 @@ const RateData = ({ value, onChange, updatePopoverState }) => {
             onClick={openStylePopover}
           >
             <div className="selected-option" style={{ fill: color }}><Icon iconName={type} /></div>
-            <Icon iconName="drop-down" />
+            <i className="sf3-font-down sf3-font"></i>
           </div>
           {isShowStylePopover && (
             <CustomizePopover
@@ -87,7 +87,16 @@ const RateData = ({ value, onChange, updatePopoverState }) => {
         </FormGroup>
         <FormGroup className="rate-column-data-setting-item rate-column-data-max-setting">
           <Label>{gettext('Max')}</Label>
-          <CustomizeSelect value={selectedMaxOption} options={maxOptions} onSelectOption={onMaxChange} />
+          <CustomizeSelect
+            value={selectedMaxOption}
+            options={maxOptions}
+            onSelectOption={onMaxChange}
+            component={{
+              DropDownIcon: (
+                <i className="sf3-font sf3-font-down"></i>
+              )
+            }}
+          />
         </FormGroup>
       </div>
     </div>

frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item/collaborator-filter/index.js

@@ -86,6 +86,11 @@ const CollaboratorFilter = ({ readOnly, filterIndex, filterTerm, collaborators,
       searchPlaceholder={gettext('Search collaborator')}
       isShowSelected={false}
       noOptionsPlaceholder={gettext('No collaborators')}
+      component={{
+        DropDownIcon: (
+          <i className="sf3-font sf3-font-down"></i>
+        )
+      }}
     />
   );
 };

frontend/src/metadata/components/popover/filter-popover/advanced-filters/filter-item/index.js

@@ -281,6 +281,11 @@ class FilterItem extends React.Component {
             value={activeConjunction}
             options={conjunctionOptions}
             onSelectOption={this.onSelectConjunction}
+            component={{
+              DropDownIcon: (
+                <i className="sf3-font sf3-font-down"></i>
+              )
+            }}
           />
         );
       }
@@ -347,6 +352,11 @@ class FilterItem extends React.Component {
         searchPlaceholder={gettext('Search option')}
         noOptionsPlaceholder={gettext('No options available')}
         supportMultipleSelect={isSupportMultipleSelect}
+        component={{
+          DropDownIcon: (
+            <i className="sf3-font sf3-font-down"></i>
+          )
+        }}
       />
     );
   };
@@ -459,6 +469,11 @@ class FilterItem extends React.Component {
             searchPlaceholder={gettext('Search option')}
             noOptionsPlaceholder={gettext('No options available')}
             isInModal={this.props.isInModal}
+            component={{
+              DropDownIcon: (
+                <i className="sf3-font sf3-font-down"></i>
+              )
+            }}
           />
         );
       }
@@ -593,6 +608,11 @@ class FilterItem extends React.Component {
                 searchable={true}
                 searchPlaceholder={gettext('Search property')}
                 noOptionsPlaceholder={gettext('No results')}
+                component={{
+                  DropDownIcon: (
+                    <i className="sf3-font sf3-font-down"></i>
+                  )
+                }}
               />
             </div>
             <div className={`filter-predicate ml-2 ${_isCheckboxColumn ? 'filter-checkbox-predicate' : ''}`}>
@@ -601,6 +621,11 @@ class FilterItem extends React.Component {
                 value={activePredicate}
                 options={filterPredicateOptions}
                 onSelectOption={this.onSelectPredicate}
+                component={{
+                  DropDownIcon: (
+                    <i className="sf3-font sf3-font-down"></i>
+                  )
+                }}
               />
             </div>
             {isDateColumn(filterColumn) && isNeedShowTermModifier && (
@@ -610,6 +635,11 @@ class FilterItem extends React.Component {
                   value={activeTermModifier}
                   options={filterTermModifierOptions}
                   onSelectOption={this.onSelectTermModifier}
+                  component={{
+                    DropDownIcon: (
+                      <i className="sf3-font sf3-font-down"></i>
+                    )
+                  }}
                 />
               </div>
             )}

frontend/src/metadata/components/popover/groupbys-popover/groupbys/groupby-item.js

@@ -187,6 +187,11 @@ const GroupbyItem = ({
               searchable={true}
               searchPlaceholder={gettext('Search property')}
               noOptionsPlaceholder={gettext('No results')}
+              component={{
+                DropDownIcon: (
+                  <i className="sf3-font sf3-font-down"></i>
+                )
+              }}
             />
           </div>
           {isShowGroupCountType(column) && (
@@ -196,6 +201,11 @@ const GroupbyItem = ({
                 value={selectedCountType}
                 onSelectOption={selectCountType}
                 options={countTypeOptions}
+                component={{
+                  DropDownIcon: (
+                    <i className="sf3-font sf3-font-down"></i>
+                  )
+                }}
               />
             </div>
           )}
@@ -206,6 +216,11 @@ const GroupbyItem = ({
                 value={selectedSortType}
                 options={sortOptions}
                 onSelectOption={selectSortType}
+                component={{
+                  DropDownIcon: (
+                    <i className="sf3-font sf3-font-down"></i>
+                  )
+                }}
               />
             )}
           </div>

frontend/src/metadata/components/popover/sort-popover/index.js

@@ -211,6 +211,11 @@ class SortPopover extends Component {
               searchable={true}
               searchPlaceholder={gettext('Search property')}
               noOptionsPlaceholder={gettext('No results')}
+              component={{
+                DropDownIcon: (
+                  <i className="sf3-font sf3-font-down"></i>
+                )
+              }}
             />
           </div>
           <div className="sort-predicate ml-2">
@@ -219,6 +224,11 @@ class SortPopover extends Component {
               value={selectedSortType}
               onSelectOption={(value) => this.onSelectSortType(value, index)}
               options={this.sortTypeOptions}
+              component={{
+                DropDownIcon: (
+                  <i className="sf3-font sf3-font-down"></i>
+                )
+              }}
             />
           </div>
         </div>