change search button style (#7519)

haiwen · Feb 25, 2025 · 96fd59b · 96fd59b
1 parent 453deac
commit 96fd59b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 30 deletions.
diff --git a/frontend/src/components/sf-table/index.css b/frontend/src/components/sf-table/index.css
@@ -43,6 +43,7 @@
   right: 4px;
   top: 50%;
   transform: translateY(-50%);
+  color: #666;
 }
 
 .sf-table-searcher-input-wrapper .btn-close-searcher {
@@ -66,30 +67,25 @@
   text-align: center;
 }
 
-.sf-table-searcher-input-wrapper .search-upward,
-.sf-table-searcher-input-wrapper .search-backward {
-  color: #666;
-  font-size: 12px;
-  background-color: #efefef;
-  display: inline-block;
-  height: 20px;
-  line-height: 20px;
+.toolbar-search-btn {
   width: 20px;
-}
-
-.sf-table-searcher-input-wrapper .search-upward:hover,
-.sf-table-searcher-input-wrapper .search-backward:hover {
+  height: 20px;
+  border-radius: 3px;
+  position: relative;
   cursor: pointer;
-  background-color: #DBDBDB;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 4px;
 }
 
-.sf-table-searcher-input-wrapper .search-upward {
-  margin-left: 8px;
-  border-radius: 2px 0 0 2px;
+.toolbar-search-btn:hover {
+  background-color: #efefef;
 }
 
-.sf-table-searcher-input-wrapper .search-backward {
-  border-radius: 0 2px 2px 0;
+.toolbar-search-btn i.sf3-font {
+  color: #666;
+  font-size: 12px;
 }
 
 .sf-table-wrapper {

diff --git a/frontend/src/components/sf-table/searcher/index.js b/frontend/src/components/sf-table/searcher/index.js
@@ -38,7 +38,7 @@ const SFTableSearcher = ({ recordsCount, columnsCount, searchResult, searchCells
     }
   };
 
-  const renderSearchPollButton = () => {
+  const renderSearchButtons = () => {
     return (
       <span className="input-icon-addon search-poll-button">
         {hasSearchValue &&
@@ -50,12 +50,20 @@ const SFTableSearcher = ({ recordsCount, columnsCount, searchResult, searchCells
         }
         {hasSearchResult &&
           <>
-            <i className="sf3-font sf3-font-down rotate-180 search-upward"
-              onClick={focusPreviousMatchedCell ? focusPreviousMatchedCell : () => {}}>
-            </i>
-            <i className="sf3-font sf3-font-down search-backward"
-              onClick={focusNextMatchedCell ? focusNextMatchedCell : () => {}}>
-            </i>
+            <span
+              className='toolbar-search-btn'
+              role="button"
+              onClick={focusPreviousMatchedCell ? focusPreviousMatchedCell : () => {}}
+            >
+              <i aria-hidden="true" className="sf3-font sf3-font-down rotate-180"></i>
+            </span>
+            <span
+              role="button"
+              className='toolbar-search-btn'
+              onClick={focusNextMatchedCell ? focusNextMatchedCell : () => {}}
+            >
+              <i aria-hidden="true" className="sf3-font sf3-font-down"></i>
+            </span>
           </>
         }
       </span>
@@ -74,22 +82,22 @@ const SFTableSearcher = ({ recordsCount, columnsCount, searchResult, searchCells
           aria-label={gettext('Search')}
           tabIndex={0}
         >
-          <i className='active-search m-0 sf3-font sf3-font-search'></i>
+          <i className='active-search m-0 sf3-font sf3-font-search' aria-hidden="true" ></i>
         </span>
       )}
       {isSearchActive && (
         <div className='sf-table-searcher-input-wrapper'>
-          <i className='input-icon-addon sf3-font sf3-font-search' />
+          <i className='input-icon-addon sf3-font sf3-font-search' aria-hidden="true" />
           <SFTableSearcherInput
             recordsCount={recordsCount}
             columnsCount={columnsCount}
             onKeyDown={onKeyDown}
             setHasSearchValue={setHasSearchValue}
             searchCells={searchCells}
           />
-          {renderSearchPollButton()}
-          <span className="btn-close-searcher-wrapper input-icon-addon" onClick={handleCloseSearcher}>
-            <i className='btn-close-searcher sf3-font sf3-font-x-01'></i>
+          {renderSearchButtons()}
+          <span className="btn-close-searcher-wrapper input-icon-addon" onClick={handleCloseSearcher} role="button">
+            <i className='btn-close-searcher sf3-font sf3-font-x-01' aria-hidden="true"></i>
           </span>
         </div>
       )}