change empty tips (#6565)

* [draft] change empty tips

* remove useless codes

frontend/src/components/dialog/my-deleted-repos.js

@@ -52,10 +52,12 @@ class MyLibsDeleted extends Component {
         <ModalBody className="my-deleted-repos-container">
           {this.state.isLoading && <Loading />}
           {(!this.state.isLoading && repos.length === 0) &&
-          <EmptyTip forDialog={true} className="my-deleted-repos-empty-tip">
-            <h2 className="h6 font-weight-normal">{gettext('No deleted libraries')}</h2>
-            <p className="empty-explanation">{gettext('You have not deleted any libraries in the last {placeholder} days. A deleted library will be cleaned automatically after this period.').replace('{placeholder}', trashReposExpireDays)}</p>
-          </EmptyTip>
+          <EmptyTip
+            forDialog={true}
+            className="my-deleted-repos-empty-tip"
+            title={gettext('No deleted libraries')}
+            text={gettext('You have not deleted any libraries in the last {placeholder} days. A deleted library will be cleaned automatically after this period.').replace('{placeholder}', trashReposExpireDays)}
+          />
           }
           {repos.length !== 0 &&
           <div>

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

@@ -175,9 +175,7 @@ class RepoShareAdminGroupShares extends Component {
         {loading && <Loading />}
         {!loading && errorMsg && <p className="error text-center mt-8">{errorMsg}</p>}
         {!loading && !errorMsg && !items.length &&
-        <EmptyTip forDialog={true}>
-          <p className="text-secondary">{gettext('No group shares')}</p>
-        </EmptyTip>
+        <EmptyTip forDialog={true} text={gettext('No group shares')}/>
         }
         {!loading && !errorMsg && items.length > 0 &&
         <table className="table-hover">

frontend/src/components/dialog/repo-share-admin/share-links.js

@@ -128,9 +128,7 @@ class RepoShareAdminShareLinks extends Component {
         {loading && <Loading />}
         {!loading && errorMsg && <p className="error text-center mt-8">{errorMsg}</p>}
         {!loading && !errorMsg && !items.length &&
-        <EmptyTip forDialog={true}>
-          <p className="text-secondary">{gettext('No share links')}</p>
-        </EmptyTip>
+        <EmptyTip forDialog={true} text={gettext('No share links')}/>
         }
         {!loading && !errorMsg && items.length > 0 &&
         <table className="table-hover">

frontend/src/components/dialog/repo-share-admin/upload-links.js

@@ -118,9 +118,7 @@ class RepoShareAdminUploadLinks extends Component {
         {loading && <Loading />}
         {!loading && errorMsg && <p className="error text-center mt-8">{errorMsg}</p>}
         {!loading && !errorMsg && !items.length &&
-        <EmptyTip forDialog={true}>
-          <p className="text-secondary">{gettext('No upload links')}</p>
-        </EmptyTip>
+        <EmptyTip forDialog={true} text={gettext('No upload links')}/>
         }
         {!loading && !errorMsg && items.length > 0 &&
         <table className="table-hover">

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

@@ -175,9 +175,7 @@ class RepoShareAdminUserShares extends Component {
         {loading && <Loading />}
         {!loading && errorMsg && <p className="error text-center mt-8">{errorMsg}</p>}
         {!loading && !errorMsg && !items.length &&
-        <EmptyTip forDialog={true}>
-          <p className="text-secondary">{gettext('No user shares')}</p>
-        </EmptyTip>
+        <EmptyTip forDialog={true} text={gettext('No user shares')}/>
         }
         {!loading && !errorMsg && items.length > 0 &&
         <table className="table-hover">

frontend/src/components/empty-tip.js

@@ -1,26 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { mediaUrl } from '../utils/constants';
+import '../css/empty-tip.css';
 
-const propTypes = {
-  forDialog: PropTypes.bool,
-  children: PropTypes.any,
-  className: PropTypes.string
-};
-
-class EmptyTip extends React.Component {
-
-  render() {
-    const { className } = this.props;
-    return (
-      <div className={this.props.forDialog ? `${className || 'text-center mt-8'}` : 'empty-tip'}>
-        <img src={`${mediaUrl}img/no-items-tip.png`} alt="" width="100" height="100" className="no-items-img-tip" />
-        {this.props.children}
-      </div>
-    );
-  }
+function EmptyTip({ forDialog, className, title, text, children }) {
+  return (
+    <div className={forDialog ? `${className || 'text-center mt-8'}` : 'empty-tip'}>
+      <img src={`${mediaUrl}img/no-items-tip.png`} alt="" width="100" height="100" className="no-items-img-tip" />
+      {title && <span className="empty-tip-title">{title}</span>}
+      {text && <span className="empty-tip-text">{text}</span>}
+      {children}
+    </div>
+  );
 }
 
-EmptyTip.propTypes = propTypes;
+EmptyTip.propTypes = {
+  forDialog: PropTypes.bool,
+  className: PropTypes.string,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  children: PropTypes.any,
+};
 
 export default EmptyTip;

frontend/src/components/seatable-integration-account-setting-widgets/seatable-account-setting-list.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
-import { gettext, mediaUrl } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import SeatableAccountItem from './seatable-account-setting-item';
+import EmptyTip from '../empty-tip';
 
 class SeatableAccountSettingList extends Component {
 
@@ -18,10 +19,7 @@ class SeatableAccountSettingList extends Component {
     const { seatableSettings } = this.props;
     if (!Array.isArray(seatableSettings) || seatableSettings.length === 0) {
       return (
-        <div className="no-accounts d-flex flex-column align-items-center justify-content-center">
-          <img src={`${mediaUrl}img/no-items-tip.png`} alt={gettext('No SeaTable bases')} />
-          <p>{gettext('No SeaTable bases')}</p>
-        </div>
+        <EmptyTip text={gettext('No SeaTable bases')}/>
       );
     }
     return (

frontend/src/components/share-link-panel/link-list.js

@@ -73,9 +73,7 @@ class LinkList extends React.Component {
           </div>
         </div>
         {shareLinks.length == 0 ? (
-          <EmptyTip forDialog={true}>
-            <p className="text-secondary">{gettext('No share links')}</p>
-          </EmptyTip>
+          <EmptyTip forDialog={true} text={gettext('No share links')}/>
         ) : (
           <div className='share-list-container share-link-list'>
             <table className="table-place-header">

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -831,8 +831,6 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-
-
       </Fragment>
     );
   }