change system admin department style (#6915)

frontend/src/pages/sys-admin/departments/department-libraries.js

@@ -9,6 +9,7 @@ import DeleteRepoDialog from '../../../components/dialog/sysadmin-dialog/sysadmi
 import { gettext, lang } from '../../../utils/constants';
 import RepoItem from './repo-item';
 import Department from './department';
+import EmptyTip from '../../../components/empty-tip';
 import '../../../css/org-department-item.css';
 
 moment.locale(lang);
@@ -95,7 +96,7 @@ class DepartmentDetail extends React.Component {
                 </tbody>
               </table>
             </div>
-            : <p className="no-libraty">{gettext('No libraries')}</p>
+            : <EmptyTip text={gettext('No libraries')} />
           }
         </Department>
         {this.state.showDeleteRepoDialog && (

frontend/src/pages/sys-admin/departments/department-list.js

@@ -6,6 +6,7 @@ import ModalPortal from '../../../components/modal-portal';
 import AddDepartDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-add-department-dialog';
 import { gettext, lang } from '../../../utils/constants';
 import GroupItem from './group-item';
+import EmptyTip from '../../../components/empty-tip';
 import '../../../css/org-department-item.css';
 
 moment.locale(lang);
@@ -84,25 +85,20 @@ class DepartmentList extends React.Component {
 
   render() {
     const groups = this.state.groups;
-    const topbarChildren = (
-      <Fragment>
-        <button className='btn btn-secondary operation-item' title={gettext('New Department')} onClick={this.toggleAddDepartDialog}>{gettext('New Department')}
-        </button>
-        {this.state.isShowAddDepartDialog && (
-          <ModalPortal>
-            <AddDepartDialog
-              onAddNewDepartment={this.onAddNewDepartment}
-              groupID={this.state.groupID}
-              toggle={this.toggleAddDepartDialog}
-            />
-          </ModalPortal>
-        )}
-      </Fragment>
-    );
     return (
       <Fragment>
         <MainPanelTopbar {...this.props}>
-          {topbarChildren}
+          <button className='btn btn-secondary operation-item' title={gettext('New Department')} onClick={this.toggleAddDepartDialog}>{gettext('New Department')}
+          </button>
+          {this.state.isShowAddDepartDialog && (
+            <ModalPortal>
+              <AddDepartDialog
+                onAddNewDepartment={this.onAddNewDepartment}
+                groupID={this.state.groupID}
+                toggle={this.toggleAddDepartDialog}
+              />
+            </ModalPortal>
+          )}
         </MainPanelTopbar>
         <div className="main-panel-center flex-row h-100">
           <div className="cur-view-container o-auto">
@@ -111,9 +107,9 @@ class DepartmentList extends React.Component {
                 <h3 className="sf-heading">{gettext('Departments')}</h3>
               </div>
             </div>
-            <div className="cur-view-content">
+            <div className="cur-view-content pb-8">
               {groups && groups.length > 0 ?
-                <table>
+                <table className='mb-8'>
                   <thead>
                     <tr>
                       <th width="40%">{gettext('Name')}</th>
@@ -141,7 +137,7 @@ class DepartmentList extends React.Component {
                   </tbody>
                 </table>
                 :
-                <p className="no-group">{gettext('No departments')}</p>
+                <EmptyTip text={gettext('No departments')}/>
               }
             </div>
           </div>

frontend/src/pages/sys-admin/departments/department-members.js

@@ -9,6 +9,7 @@ import DeleteMemberDialog from '../../../components/dialog/sysadmin-dialog/sysad
 import { gettext, lang } from '../../../utils/constants';
 import MemberItem from './member-item';
 import Department from './department';
+import EmptyTip from '../../../components/empty-tip';
 import '../../../css/org-department-item.css';
 
 moment.locale(lang);
@@ -118,7 +119,7 @@ class DepartmentMembers extends React.Component {
           <div className="cur-view-content">
             {membersErrorMsg ? <p className="error text-center">{membersErrorMsg}</p> :
               members.length == 0 ?
-                <p className="no-member">{gettext('No members')}</p> :
+                <EmptyTip text={gettext('No members')}/> :
                 <Fragment>
                   <table>
                     <thead>

frontend/src/pages/sys-admin/departments/repo-item.js

@@ -42,7 +42,7 @@ class RepoItem extends React.Component {
         }
         <td>{Utils.bytesToSize(repo.size)}</td>
         <td className="cursor-pointer text-center" onClick={this.props.showDeleteRepoDialog.bind(this, repo)}>
-          <span className={`sf3-font-delete1 sf3-font action-icon ${highlight ? '' : 'vh'}`} title="Delete"></span>
+          <span className={`sf3-font-delete1 sf3-font op-icon ${highlight ? '' : 'vh'}`} title="Delete"></span>
         </td>
       </tr>
     );

frontend/src/pages/sys-admin/departments/sub-departments.js

@@ -7,6 +7,7 @@ import toaster from '../../../components/toast';
 import { gettext, lang } from '../../../utils/constants';
 import GroupItem from './group-item';
 import Department from './department';
+import EmptyTip from '../../../components/empty-tip';
 
 import '../../../css/org-department-item.css';
 
@@ -129,7 +130,7 @@ class SubDepartments extends React.Component {
                 })}
               </tbody>
             </table>
-            : <p className="no-group">{gettext('No sub-departments')}</p>
+            : <EmptyTip text={gettext('No sub-departments')}/>
           }
         </div>
       </Department>

frontend/src/pages/sys-admin/main-panel-topbar.js

@@ -4,7 +4,7 @@ import Account from '../../components/common/account';
 import { gettext } from '../../utils/constants';
 
 const propTypes = {
-  children: PropTypes.object,
+  children: PropTypes.any,
   search: PropTypes.any,
   toggleSidePanel: PropTypes.func
 };