12.0 remove font awesome (#6257)

* remove font-awesome

* remove font awesome 3.2.1

frontend/src/components/search/ai-search.js

@@ -421,7 +421,7 @@ export default class AISearch extends Component {
       return (
         <div className="search-types">
           <div className="search-types-repos search-types-highlight" onClick={this.searchAllRepos} tabIndex={0}>
-            <i className="search-icon-left input-icon-addon fas fa-search"></i>
+            <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
             {inputValue}
             <span className="search-types-text">{gettext('in all libraries')}</span>
           </div>
@@ -433,17 +433,17 @@ export default class AISearch extends Component {
         return (
           <div className="search-types">
             <div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in this library')}</span>
             </div>
             <div className={`search-types-folder ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchFolder} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in this folder')}</span>
             </div>
             <div className={`search-types-repos ${highlightIndex === 2 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in all libraries')}</span>
             </div>
@@ -453,12 +453,12 @@ export default class AISearch extends Component {
         return (
           <div className="search-types">
             <div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in this library')}</span>
             </div>
             <div className={`search-types-repos ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in all libraries')}</span>
             </div>
@@ -716,7 +716,7 @@ export default class AISearch extends Component {
                     }
                     <button
                       type="button"
-                      className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4"
+                      className="search-icon-right input-icon-addon sf3-font sf3-font-x-01 border-0 bg-transparent mr-4"
                       onClick={this.onCloseHandler}
                       aria-label={gettext('Close')}
                     ></button>
@@ -756,7 +756,7 @@ export default class AISearch extends Component {
                     autoComplete="off"
                   />
                   {this.state.isCloseShow &&
-                    <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
+                    <button type="button" className="search-icon-right input-icon-addon sf3-font sf3-font-x-01 border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
                   }
                 </div>
                 <div className="search-result-container dropdown-search-result-container" onScroll={this.onResultListScroll}>

frontend/src/components/search/search-by-name.js

@@ -30,7 +30,7 @@ class SearchByName extends Component {
     return (
       <Fragment>
         <i
-          className="fas fa-search top-search-file-icon"
+          className="sf3-font sf3-font-search top-search-file-icon"
           onClick={this.toggleDialog}
           title={gettext('Search files in this library')}
         ></i>

frontend/src/components/search/search.js

@@ -420,7 +420,7 @@ class Search extends Component {
       return (
         <div className="search-types">
           <div className="search-types-repos search-types-highlight" onClick={this.searchAllRepos} tabIndex={0}>
-            <i className="search-icon-left input-icon-addon fas fa-search"></i>
+            <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
             {inputValue}
             <span className="search-types-text">{gettext('in all libraries')}</span>
           </div>
@@ -432,17 +432,17 @@ class Search extends Component {
         return (
           <div className="search-types">
             <div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in this library')}</span>
             </div>
             <div className={`search-types-folder ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchFolder} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in this folder')}</span>
             </div>
             <div className={`search-types-repos ${highlightIndex === 2 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in all libraries')}</span>
             </div>
@@ -452,12 +452,12 @@ class Search extends Component {
         return (
           <div className="search-types">
             <div className={`search-types-repo ${highlightIndex === 0 ? 'search-types-highlight' : ''}`} onClick={this.searchRepo} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in this library')}</span>
             </div>
             <div className={`search-types-repos ${highlightIndex === 1 ? 'search-types-highlight' : ''}`} onClick={this.searchAllRepos} tabIndex={0}>
-              <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
               {inputValue}
               <span className="search-types-text">{gettext('in all libraries')}</span>
             </div>
@@ -551,7 +551,7 @@ class Search extends Component {
             <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler}></div>
             <div className={`search-container ${isMaskShow ? 'show' : ''}`}>
               <div className={`input-icon ${isMaskShow ? 'mb-1' : ''}`}>
-                <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                 <input
                   type="text"
                   className="form-control search-input"
@@ -565,7 +565,7 @@ class Search extends Component {
                   ref={this.inputRef}
                 />
                 {this.state.isCloseShow &&
-                  <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
+                  <button type="button" className="search-icon-right input-icon-addon sf3-font sf3-font-x-01 border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
                 }
               </div>
               <div
@@ -580,14 +580,14 @@ class Search extends Component {
         </MediaQuery>
         <MediaQuery query="(max-width: 767.8px)">
           <div className="search-icon-container">
-            <i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
+            <i className="search-icon sf3-font sf3-font-search" onClick={this.onSearchToggle}></i>
           </div>
           {this.state.isSearchInputShow &&
             <div className="search">
               <div className={`search-mask ${isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
               <div className="search-container">
                 <div className="input-icon">
-                  <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                  <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                   <input
                     type="text"
                     className="form-control search-input"
@@ -600,7 +600,7 @@ class Search extends Component {
                     autoComplete="off"
                   />
                   {this.state.isCloseShow &&
-                    <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
+                    <button type="button" className="search-icon-right input-icon-addon sf3-font sf3-font-x-01 border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
                   }
                 </div>
                 <div className="search-result-container dropdown-search-result-container" onScroll={this.onResultListScroll}>

frontend/src/components/search/wiki-search.js

@@ -228,7 +228,7 @@ class Search extends Component {
             <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
             <div className="search-container">
               <div className="input-icon">
-                <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                 <input
                   type="text"
                   className="form-control search-input"
@@ -240,7 +240,7 @@ class Search extends Component {
                   onChange={this.onChangeHandler}
                   autoComplete="off"
                 />
-                {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
+                {this.state.isCloseShow && <i className='search-icon-right input-icon-addon sf3-font sf3-font-x-01' onClick={this.onCloseHandler}></i>}
               </div>
               <div className="search-result-container dropdown-search-result-container">
                 {this.renderSearchResult()}
@@ -250,14 +250,14 @@ class Search extends Component {
         </MediaQuery>
         <MediaQuery query="(max-width: 767.8px)">
           <div className="search-icon-container">
-            <i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
+            <i className="search-icon sf3-font sf3-font-search" onClick={this.onSearchToggle}></i>
           </div>
           {this.state.isSearchInputShow &&
             <div className="search">
               <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
               <div className="search-container">
                 <div className="input-icon">
-                  <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                  <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                   <input
                     type="text"
                     className="form-control search-input"
@@ -269,7 +269,7 @@ class Search extends Component {
                     onChange={this.onChangeHandler}
                     autoComplete="off"
                   />
-                  {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
+                  {this.state.isCloseShow && <i className='search-icon-right input-icon-addon sf3-font sf3-font-x-01' onClick={this.onCloseHandler}></i>}
                 </div>
                 <div className="search-result-container dropdown-search-result-container">
                   {this.renderSearchResult()}