12.0 remove font awesome (#6257)

* remove font-awesome

* remove font awesome 3.2.1

frontend/src/components/dialog/create-tag-dialog.js

@@ -70,7 +70,7 @@ class CreateTagDialog extends React.Component {
     return (
       <Fragment>
         <ModalHeader toggle={this.props.onClose}>
-          <span className="tag-dialog-back fas fa-sm fa-arrow-left" onClick={this.props.toggleCancel} aria-label={gettext('Back')}></span>
+          <span className="tag-dialog-back sf3-font sf3-font-arrow rotate-180 d-inline-block" onClick={this.props.toggleCancel} aria-label={gettext('Back')}></span>
           {gettext('New Tag')}
         </ModalHeader>
         <ModalBody>

frontend/src/components/dialog/custom-permission/custom-permission-editor.js

@@ -119,7 +119,7 @@ class CustomPermissionEditor extends React.Component {
         <div className="permission-header">
           <div className="d-flex align-items-center">
             <OpIcon
-              className="fa fa-arrow-left back-icon"
+              className="sf3-font sf3-font-arrow rotate-180 d-inline-block back-icon"
               op={this.props.onChangeMode}
               title={gettext('Back')}
             />
@@ -167,7 +167,7 @@ class CustomPermissionEditor extends React.Component {
                   <Label check>
                     <Input type="checkbox" onChange={this.onChangePermission('modify')} checked={permission.modify}/>
                     <span>{gettext('Modify')}</span>
-                    <span id="modify-tip" className="fa fa-question-circle ml-2" style={{color: '#999'}}></span>
+                    <span id="modify-tip" className="sf3-font sf3-font-tips ml-2" style={{color: '#999'}}></span>
                     <Tooltip
                       toggle={this.toggle}
                       delay={{show: 0, hide: 0}}

frontend/src/components/dialog/custom-permission/custom-permission-item.js

@@ -51,12 +51,12 @@ class CustomPermissionItem extends React.Component {
           {this.state.isShowOperations && (
             <Fragment>
               <OpIcon
-                className="fa fa-pencil-alt attr-action-icon"
+                className="sf3-font sf3-font-rename attr-action-icon"
                 title={gettext('Edit')}
                 op={this.onEditCustomPermission}
               />
               <OpIcon
-                className="fa fa-trash attr-action-icon"
+                className="sf3-font sf3-font-delete1 attr-action-icon"
                 title={gettext('Delete')}
                 op={this.onDeleteCustomPermission}
               />

frontend/src/components/dialog/generate-upload-link.js

@@ -299,7 +299,14 @@ class GenerateUploadLink extends React.Component {
                 <dd className="d-flex">
                   <div className="d-flex align-items-center">
                     <input id="stored-password" className="border-0 mr-1" type="text" value={this.state.storedPasswordVisible ? sharedUploadInfo.password : '****************************************'} readOnly={true} size={Math.max(sharedUploadInfo.password.length, 10)} />
-                    <span tabIndex="0" role="button" aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')} onKeyDown={this.onIconKeyDown} onClick={this.toggleStoredPasswordVisible} className={`eye-icon fas ${this.state.storedPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></span>
+                    <span
+                      tabIndex="0"
+                      role="button"
+                      aria-label={this.state.storedPasswordVisible ? gettext('Hide') : gettext('Show')}
+                      onKeyDown={this.onIconKeyDown}
+                      onClick={this.toggleStoredPasswordVisible}
+                      className={`eye-icon sf3-font sf3-font-eye${this.state.storedPasswordVisible ? '': '-slash'}`}
+                    ></span>
                   </div>
                 </dd>
               </FormGroup>
@@ -316,7 +323,7 @@ class GenerateUploadLink extends React.Component {
                         role="button"
                         aria-label={gettext('Edit')}
                         title={gettext('Edit')}
-                        className="fa fa-pencil-alt attr-action-icon"
+                        className="sf3-font sf3-font-rename attr-action-icon"
                         onClick={this.editExpirationToggle}>
                       </a>
                     )}
@@ -381,8 +388,12 @@ class GenerateUploadLink extends React.Component {
               <InputGroup style={{width: inputWidth}}>
                 <Input id="passwd" type={this.state.passwordVisible ? 'text':'password'} value={this.state.password || ''} onChange={this.inputPassword} />
                 <InputGroupAddon addonType="append">
-                  <Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.passwordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
-                  <Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
+                  <Button onClick={this.togglePasswordVisible}>
+                    <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.passwordVisible ? '': '-slash'}`}></i>
+                  </Button>
+                  <Button onClick={this.generatePassword}>
+                    <i className="link-operation-icon sf3-font sf3-font-magic"></i>
+                  </Button>
                 </InputGroupAddon>
               </InputGroup>
             </FormGroup>

frontend/src/components/dialog/op-menu.js

@@ -49,7 +49,7 @@ class OpMenu extends React.Component {
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
         <DropdownToggle
           tag="i"
-          className="d-flex w-5 h-5 align-items-center justify-content-center sf-dropdown-toggle fa fa-ellipsis-v"
+          className="d-flex w-5 h-5 align-items-center justify-content-center sf-dropdown-toggle sf3-font sf3-font-more-vertical"
           title={gettext('More operations')}
           aria-label={gettext('More operations')}
           data-toggle="dropdown"

frontend/src/components/dialog/org-add-user-dialog.js

@@ -146,8 +146,12 @@ class AddOrgUserDialog extends React.Component {
               <InputGroup className="passwd">
                 <Input id="userPwd" innerRef={input => {this.passwdInput = input;}} value={this.state.password || ''} onChange={this.inputPassword} />
                 <InputGroupAddon addonType="append">
-                  <Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}></i></Button>
-                  <Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
+                  <Button onClick={this.togglePasswordVisible}>
+                    <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '-slash' : ''}`}></i>
+                  </Button>
+                  <Button onClick={this.generatePassword}>
+                    <i className="link-operation-icon sf3-font sf3-font-magic"></i>
+                  </Button>
                 </InputGroupAddon>
               </InputGroup>
             </FormGroup>

frontend/src/components/dialog/repo-api-token-dialog.js

@@ -65,7 +65,7 @@ class APITokenItem extends React.Component {
           <span>{item.api_token}</span>
           {this.state.isOperationShow &&
             <OpIcon
-              className="far fa-copy action-icon"
+              className="action-icon sf3-font sf3-font-copy1"
               op={this.onCopyAPIToken}
               title={gettext('Copy')}
             />

frontend/src/components/dialog/repo-share-admin/group-shares.js

@@ -86,7 +86,7 @@ class Item extends Component {
                   role="button"
                   aria-label={gettext('Edit')}
                   title={gettext('Edit')}
-                  className="fa fa-pencil-alt attr-action-icon"
+                  className="sf3-font sf3-font-rename attr-action-icon"
                   onClick={this.onEditPermission}>
                 </a>
               )}

frontend/src/components/dialog/repo-share-admin/user-shares.js

@@ -86,7 +86,7 @@ class Item extends Component {
                   role="button"
                   aria-label={gettext('Edit')}
                   title={gettext('Edit')}
-                  className="fa fa-pencil-alt attr-action-icon"
+                  className="sf3-font sf3-font-rename attr-action-icon"
                   onClick={this.onEditPermission}>
                 </a>
               )}

frontend/src/components/dialog/reset-webdav-password.js

@@ -74,8 +74,12 @@ class ResetWebdavPassword extends Component {
           <InputGroup>
             <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
             <InputGroupAddon addonType="append">
-              <Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
-              <Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
+              <Button onClick={this.togglePasswordVisible}>
+                <i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': '-slash'}`}></i>
+              </Button>
+              <Button onClick={this.generatePassword}>
+                <i className="sf3-font sf3-font-magic"></i>
+              </Button>
             </InputGroupAddon>
           </InputGroup>
           <p className="form-text text-muted m-0">{passwordTip}</p>

frontend/src/components/dialog/set-webdav-password.js

@@ -74,8 +74,12 @@ class SetWebdavPassword extends Component {
           <InputGroup>
             <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password} onChange={this.handleInputChange} autoComplete="new-password"/>
             <InputGroupAddon addonType="append">
-              <Button onClick={this.togglePasswordVisible}><i className={`fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
-              <Button onClick={this.generatePassword}><i className="fas fa-magic"></i></Button>
+              <Button onClick={this.togglePasswordVisible}>
+                <i className={`sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': 'slash'}`}></i>
+              </Button>
+              <Button onClick={this.generatePassword}>
+                <i className="sf3-font sf3-font-magic"></i>
+              </Button>
             </InputGroupAddon>
           </InputGroup>
           <p className="form-text text-muted m-0">{passwordTip}</p>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-org-dialog.js

@@ -98,7 +98,7 @@ class SysAdminAddOrgDialog extends React.Component {
             <FormGroup>
               <Label>
                 {gettext('Owner')}
-                <span className="small text-secondary ml-1 fas fa-question-circle" title={gettext('Owner can use admin panel in an organization, must be a new account.')}></span>
+                <span className="small text-secondary ml-1 sf3-font sf3-font-tips" title={gettext('Owner can use admin panel in an organization, must be a new account.')}></span>
               </Label>
               <Input value={email} onChange={this.inputEmail} />
             </FormGroup>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-user-dialog.js

@@ -138,7 +138,7 @@ class SysAdminAddUserDialog extends React.Component {
             <FormGroup>
               <Label>
                 {gettext('Role')}
-                <span className="small text-secondary ml-1 fas fa-question-circle" title={gettext('You can also add a user as a guest, who will not be allowed to create libraries and groups.')}></span>
+                <span className="small text-secondary ml-1 sf3-font sf3-font-tips" title={gettext('You can also add a user as a guest, who will not be allowed to create libraries and groups.')}></span>
               </Label>
               <SysAdminUserRoleEditor
                 isTextMode={false}
@@ -154,8 +154,12 @@ class SysAdminAddUserDialog extends React.Component {
               <InputGroup>
                 <Input autoComplete="new-password" type={isPasswordVisible ? 'text' : 'password'} value={password || ''} onChange={this.inputPassword} />
                 <InputGroupAddon addonType="append">
-                  <Button className="mt-0" onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
-                  <Button className="mt-0" onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
+                  <Button className="mt-0" onClick={this.togglePasswordVisible}>
+                    <i className={`link-operation-icon sf3-font sf3-font-eye${this.state.isPasswordVisible ? '': '-slash'}`}></i>
+                  </Button>
+                  <Button className="mt-0" onClick={this.generatePassword}>
+                    <i className="link-operation-icon sf3-font sf3-font-magic"></i>
+                  </Button>
                 </InputGroupAddon>
               </InputGroup>
             </FormGroup>