diff --git a/frontend/src/components/dialog/my-deleted-repos.js b/frontend/src/components/dialog/my-deleted-repos.js
index 47e808908b..f03ae8f310 100644
--- a/frontend/src/components/dialog/my-deleted-repos.js
+++ b/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>
diff --git a/frontend/src/components/dialog/repo-share-admin/group-shares.js b/frontend/src/components/dialog/repo-share-admin/group-shares.js
index d8dfbd14c5..8acca1a582 100644
--- a/frontend/src/components/dialog/repo-share-admin/group-shares.js
+++ b/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">
diff --git a/frontend/src/components/dialog/repo-share-admin/share-links.js b/frontend/src/components/dialog/repo-share-admin/share-links.js
index aa8506860e..7627919592 100644
--- a/frontend/src/components/dialog/repo-share-admin/share-links.js
+++ b/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">
diff --git a/frontend/src/components/dialog/repo-share-admin/upload-links.js b/frontend/src/components/dialog/repo-share-admin/upload-links.js
index 428a996168..4b9e6b2821 100644
--- a/frontend/src/components/dialog/repo-share-admin/upload-links.js
+++ b/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">
diff --git a/frontend/src/components/dialog/repo-share-admin/user-shares.js b/frontend/src/components/dialog/repo-share-admin/user-shares.js
index e185a9bbe6..e23f1e2aae 100644
--- a/frontend/src/components/dialog/repo-share-admin/user-shares.js
+++ b/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">
diff --git a/frontend/src/components/empty-tip.js b/frontend/src/components/empty-tip.js
index 6398cb9a3f..c0053e97af 100644
--- a/frontend/src/components/empty-tip.js
+++ b/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;
diff --git a/frontend/src/components/seatable-integration-account-setting-widgets/seatable-account-setting-list.js b/frontend/src/components/seatable-integration-account-setting-widgets/seatable-account-setting-list.js
index 02a01b3e0c..4732bfff5c 100644
--- a/frontend/src/components/seatable-integration-account-setting-widgets/seatable-account-setting-list.js
+++ b/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 (
diff --git a/frontend/src/components/share-link-panel/link-list.js b/frontend/src/components/share-link-panel/link-list.js
index 2a2c444dba..7136f2fe34 100644
--- a/frontend/src/components/share-link-panel/link-list.js
+++ b/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">
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index c5860118eb..d9b6cdb058 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -831,8 +831,6 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-
-
       </Fragment>
     );
   }
diff --git a/frontend/src/css/dingtalk-departments.css b/frontend/src/css/dingtalk-departments.css
index fede55c3bb..480f9e7503 100644
--- a/frontend/src/css/dingtalk-departments.css
+++ b/frontend/src/css/dingtalk-departments.css
@@ -1,6 +1,7 @@
 .cur-view-content {
   position: relative;
 }
+
 .dir-content-main {
   position: absolute;
   right: 0;
@@ -9,27 +10,25 @@
   overflow-y: hidden;
   padding-right: 1rem;
 }
+
 .dir-content-main:hover {
   overflow-y: auto;
 }
+
 .dir-content-main table td {
   line-height: 2rem;
 }
-.dir-content-main .empty-tip {
-  box-shadow: none;
-}
-.dir-content-main .empty-tip img {
-  width: 140px;
-  height: 140px;
-}
+
 .dir-content-nav {
   position: absolute;
   overflow: hidden;
   width: 24%;
 }
+
 .dir-content-nav:hover {
   overflow: auto;
 }
+
 .dir-content-resize {
   position: absolute;
   left: 25%;
@@ -37,42 +36,51 @@
   width: 1%;
   border-left: 1px solid #eee;
 }
+
 .department-children {
   padding-left: 1rem;
   position: relative;
 }
+
 .tree-node-inner {
   position: relative;
   display: flex;
   padding-right: 1rem;
 }
+
 .tree-node-inner i {
   position: absolute;
   top: 20%;
   left: 0.3rem;
   color: silver;
 }
+
 .tree-node-inner-hover {
   background-color: #FFEFB2;
   border-radius: 0.25rem;
   cursor: pointer;
 }
+
 .tree-node-hight-light {
   color: #fff;
   border-radius: 4px;
   background-color: #feac74 !important;
 }
+
 .tree-node-hight-light i {
   color: #fff;
 }
+
 .tree-node-hight-light .attr-action-icon,
 .tree-node-hight-light .attr-action-icon:focus,
 .tree-node-hight-light .attr-action-icon:hover {
   color: #fff !important;
 }
+
 .tree-node-icon {
   padding-right: 1.5rem;
 }
+
 .tree-node-text {
   width: calc(100% - 2.5rem);
   font-size: 14px;
@@ -81,6 +89,7 @@
   text-overflow: ellipsis;
   line-height: 24px;
 }
+
 .tree-view {
   padding: 12px 12px 12px 0;
   flex: 1 1;
diff --git a/frontend/src/css/empty-tip.css b/frontend/src/css/empty-tip.css
new file mode 100644
index 0000000000..f9666152eb
--- /dev/null
+++ b/frontend/src/css/empty-tip.css
@@ -0,0 +1,31 @@
+.empty-tip {
+  margin: 5.5em 1em;
+  padding: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.empty-tip .no-items-img-tip {
+  display: inline-block;
+  margin-bottom: 10px; 
+}
+
+.empty-tip .empty-tip-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #212529;
+}
+
+.empty-tip .empty-tip-text {
+  font-size: 14px;
+  font-weight: normal;
+  color: #666;
+}
+
+@media (min-width: 768px) {
+  .empty-tip {
+    padding: 30px 80px;
+  }
+}
diff --git a/frontend/src/css/my-deleted-repos.css b/frontend/src/css/my-deleted-repos.css
index 67257c6720..53eb9c26fb 100644
--- a/frontend/src/css/my-deleted-repos.css
+++ b/frontend/src/css/my-deleted-repos.css
@@ -1,35 +1,29 @@
 .my-deleted-repos-dialog {
-    max-width: 720px;
+  max-width: 720px;
 }
 
 .my-deleted-repos-container {
-    min-height: 200px;
-    max-height: 500px;
-    overflow: auto;
+  min-height: 200px;
+  max-height: 500px;
+  overflow: auto;
 }
 
 .my-deleted-repos-empty-tip {
-    text-align: center;
-    margin: 20px 0;
-}
-
-.my-deleted-repos-empty-tip .empty-explanation {
-    color: #666;
-    font-size: .875rem;
-    margin: 0;
+  text-align: center;
+  margin: 20px 0;
 }
 
 @media (min-width: 768px) {
-    .my-deleted-repos-empty-tip {
-        margin: 104px 0 216px;
-    }
+  .my-deleted-repos-empty-tip {
+    margin: 104px 0 216px;
+  }
 
-    .my-deleted-repos-empty-tip .empty-explanation {
-        margin: 0 7rem;
-    }
+  .my-deleted-repos-empty-tip .empty-explanation {
+    margin: 0 7rem;
+  }
 }
 
 .my-deleted-repos-tip {
-    font-size: .8125rem;
-    color: #9c9c9c;
+  font-size: .8125rem;
+  color: #9c9c9c;
 }
diff --git a/frontend/src/css/repo-seatable-integration-dialog.css b/frontend/src/css/repo-seatable-integration-dialog.css
index cd29b1dc00..b753c62b8e 100644
--- a/frontend/src/css/repo-seatable-integration-dialog.css
+++ b/frontend/src/css/repo-seatable-integration-dialog.css
@@ -140,19 +140,6 @@
   font-weight: normal;
 }
 
-.accounts-manage .no-accounts {
-  height: 400px;
-}
-
-.accounts-manage .no-accounts img {
-  width: 120px;
-}
-
-.accounts-manage .no-accounts p {
-  margin-top: 1rem;
-  color: #afafaf;
-}
-
 .accounts-manage .accounts-list-body {
   max-height: 400px;
   overflow-y: auto;
diff --git a/frontend/src/css/user-notifications.css b/frontend/src/css/user-notifications.css
index e9e01bdd16..addbad2833 100644
--- a/frontend/src/css/user-notifications.css
+++ b/frontend/src/css/user-notifications.css
@@ -120,22 +120,3 @@
   color: #666;
   font-size: 14px;
 }
-
-.notification-dialog-body .empty-tip {
-  margin: 5.5em 1em;
-  border-radius: 3px;
-  padding: 30px;
-  background-color: #fff;
-  text-align: center;
-}
-
-.notification-dialog-body .empty-tip .no-items-img-tip {
-  width: 100px;
-  height: 100px;
-}
-
-@media (min-width: 768px) {
-  .notification-dialog-body .empty-tip {
-    padding: 30px 80px;
-  }
-}
diff --git a/frontend/src/css/work-weixin-departments.css b/frontend/src/css/work-weixin-departments.css
index fede55c3bb..480f9e7503 100644
--- a/frontend/src/css/work-weixin-departments.css
+++ b/frontend/src/css/work-weixin-departments.css
@@ -1,6 +1,7 @@
 .cur-view-content {
   position: relative;
 }
+
 .dir-content-main {
   position: absolute;
   right: 0;
@@ -9,27 +10,25 @@
   overflow-y: hidden;
   padding-right: 1rem;
 }
+
 .dir-content-main:hover {
   overflow-y: auto;
 }
+
 .dir-content-main table td {
   line-height: 2rem;
 }
-.dir-content-main .empty-tip {
-  box-shadow: none;
-}
-.dir-content-main .empty-tip img {
-  width: 140px;
-  height: 140px;
-}
+
 .dir-content-nav {
   position: absolute;
   overflow: hidden;
   width: 24%;
 }
+
 .dir-content-nav:hover {
   overflow: auto;
 }
+
 .dir-content-resize {
   position: absolute;
   left: 25%;
@@ -37,42 +36,51 @@
   width: 1%;
   border-left: 1px solid #eee;
 }
+
 .department-children {
   padding-left: 1rem;
   position: relative;
 }
+
 .tree-node-inner {
   position: relative;
   display: flex;
   padding-right: 1rem;
 }
+
 .tree-node-inner i {
   position: absolute;
   top: 20%;
   left: 0.3rem;
   color: silver;
 }
+
 .tree-node-inner-hover {
   background-color: #FFEFB2;
   border-radius: 0.25rem;
   cursor: pointer;
 }
+
 .tree-node-hight-light {
   color: #fff;
   border-radius: 4px;
   background-color: #feac74 !important;
 }
+
 .tree-node-hight-light i {
   color: #fff;
 }
+
 .tree-node-hight-light .attr-action-icon,
 .tree-node-hight-light .attr-action-icon:focus,
 .tree-node-hight-light .attr-action-icon:hover {
   color: #fff !important;
 }
+
 .tree-node-icon {
   padding-right: 1.5rem;
 }
+
 .tree-node-text {
   width: calc(100% - 2.5rem);
   font-size: 14px;
@@ -81,6 +89,7 @@
   text-overflow: ellipsis;
   line-height: 24px;
 }
+
 .tree-view {
   padding: 12px 12px 12px 0;
   flex: 1 1;
diff --git a/frontend/src/pages/dashboard/content.js b/frontend/src/pages/dashboard/content.js
index b161fbbb14..ba89bcce3e 100644
--- a/frontend/src/pages/dashboard/content.js
+++ b/frontend/src/pages/dashboard/content.js
@@ -22,7 +22,7 @@ class FileActivitiesContent extends Component {
     let { items, isLoadingMore } = this.props;
 
     if (!items.length) {
-      return <EmptyTip><p>{gettext('No more activities')}</p></EmptyTip>;
+      return <EmptyTip text={gettext('No more activities')}/>;
     }
 
     const desktopThead = (
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index a1422d9c28..8c7fc12d48 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -139,24 +139,22 @@ class GroupView extends React.Component {
     if (currentGroup) {
       if (currentGroup.parent_group_id === 0) {
         emptyTip = (
-          <EmptyTip>
-            <h2>{gettext('No libraries shared with this group')}</h2>
-            <p>{gettext('No libraries have been shared with this group yet. A library shared with a group can be accessed by all group members. You can share a library with a group in "My Libraries". You can also create a new library to be shared with this group by clicking the "New Library" button in the menu bar.')}</p>
-          </EmptyTip>
+          <EmptyTip
+            title={gettext('No libraries shared with this group')}
+            text={gettext('No libraries have been shared with this group yet. A library shared with a group can be accessed by all group members. You can share a library with a group in "My Libraries". You can also create a new library to be shared with this group by clicking the "New Library" button in the menu bar.')}
+          />
         );
       } else {
         if (currentGroup.admins.indexOf(username) == -1) { // is a member of this group
           emptyTip = (
-            <EmptyTip>
-              <h2>{gettext('No libraries')}</h2>
-            </EmptyTip>
+            <EmptyTip title={gettext('No libraries')}/>
           );
         } else {
           emptyTip = (
-            <EmptyTip>
-              <h2>{gettext('No libraries')}</h2>
-              <p>{gettext('You can create libraries by clicking the "New Library" button above.')}</p>
-            </EmptyTip>
+            <EmptyTip
+              title={gettext('No libraries')}
+              text={gettext('You can create libraries by clicking the "New Library" button above.')}
+            />
           );
         }
       }
diff --git a/frontend/src/pages/institution-admin/user-content/user-groups.js b/frontend/src/pages/institution-admin/user-content/user-groups.js
index 9d3ba47edc..69013c927c 100644
--- a/frontend/src/pages/institution-admin/user-content/user-groups.js
+++ b/frontend/src/pages/institution-admin/user-content/user-groups.js
@@ -26,9 +26,7 @@ export default function UsersGroups() {
 
   if (groups.length === 0) {
     return (
-      <EmptyTip>
-        <h2>{gettext('This user has not created or joined any groups')}</h2>
-      </EmptyTip>
+      <EmptyTip text={gettext('This user has not created or joined any groups')}/>
     );
   }
 
diff --git a/frontend/src/pages/institution-admin/user-content/user-repos.js b/frontend/src/pages/institution-admin/user-content/user-repos.js
index 06d28032b3..a36cc6262e 100644
--- a/frontend/src/pages/institution-admin/user-content/user-repos.js
+++ b/frontend/src/pages/institution-admin/user-content/user-repos.js
@@ -26,9 +26,7 @@ export default function UserRepos() {
 
   if (repos.length === 0) {
     return (
-      <EmptyTip>
-        <h2>{gettext('No libraries')}</h2>
-      </EmptyTip>
+      <EmptyTip text={gettext('No libraries')}/>
     );
   }
 
diff --git a/frontend/src/pages/invitations/invitations-view.js b/frontend/src/pages/invitations/invitations-view.js
index 1edf2a015d..8d851115ff 100644
--- a/frontend/src/pages/invitations/invitations-view.js
+++ b/frontend/src/pages/invitations/invitations-view.js
@@ -180,10 +180,10 @@ class Content extends Component {
 
     if (!invitationsList.length) {
       return (
-        <EmptyTip>
-          <h2>{gettext('No guest invitations')}</h2>
-          <p>{gettext('You have not invited any guests yet. A guest can access shared libraries through the web interface allowing more efficient ways to collaborate than through links. You can invite a guest by clicking the "Invite Guest" button in the menu bar.')}</p>
-        </EmptyTip>
+        <EmptyTip
+          title={gettext('No guest invitations')}
+          text={gettext('You have not invited any guests yet. A guest can access shared libraries through the web interface allowing more efficient ways to collaborate than through links. You can invite a guest by clicking the "Invite Guest" button in the menu bar.')}
+        />
       );
     }
 
diff --git a/frontend/src/pages/linked-devices/linked-devices.js b/frontend/src/pages/linked-devices/linked-devices.js
index dc42c0f604..1b869e0532 100644
--- a/frontend/src/pages/linked-devices/linked-devices.js
+++ b/frontend/src/pages/linked-devices/linked-devices.js
@@ -20,10 +20,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No linked devices')}</h2>
-          <p>{gettext('You have not accessed your files with any client (desktop or mobile) yet. Configure clients on your devices to access your data more comfortably.')}</p>
-        </EmptyTip>
+        <EmptyTip
+          title={gettext('No linked devices')}
+          text={gettext('You have not accessed your files with any client (desktop or mobile) yet. Configure clients on your devices to access your data more comfortably.')}
+        />
       );
 
       const desktopThead = (
diff --git a/frontend/src/pages/my-libs/my-libs-deleted.js b/frontend/src/pages/my-libs/my-libs-deleted.js
index 8f4b2c4057..ce0b04cfb6 100644
--- a/frontend/src/pages/my-libs/my-libs-deleted.js
+++ b/frontend/src/pages/my-libs/my-libs-deleted.js
@@ -55,10 +55,10 @@ class MyLibsDeleted extends Component {
             <div className="cur-view-content">
               {this.state.isLoading && <Loading />}
               {(!this.state.isLoading && this.state.deletedRepoList.length === 0) &&
-              <EmptyTip>
-                <h2>{gettext('No deleted libraries')}</h2>
-                <p>{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
+                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)}
+              />
               }
               {this.state.deletedRepoList.length !== 0 &&
                 <div>
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index bbc393c83b..e82c7e2ed8 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -29,9 +29,10 @@ class MyLibraries extends Component {
     };
 
     this.emptyTip = (
-      <EmptyTip>
-        <h2>{gettext('No libraries')}</h2>
-        <p>{gettext('You have not created any libraries yet. A library is a container to organize your files and folders. A library can also be shared with others and synced to your connected devices. You can create a library by clicking the "New Library" button in the menu bar.')}</p>
+      <EmptyTip
+        title={gettext('No libraries')}
+        text={gettext('You have not created any libraries yet. A library is a container to organize your files and folders. A library can also be shared with others and synced to your connected devices. You can create a library by clicking the "New Library" button in the menu bar.')}
+      >
       </EmptyTip>
     );
   }
diff --git a/frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js b/frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js
index 8a747e7ca7..51f8ac38ac 100644
--- a/frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js
+++ b/frontend/src/pages/ocm-via-webdav/ocm-via-webdav.js
@@ -141,9 +141,10 @@ class Content extends Component {
   render() {
     const { loading, errorMsg, items, path } = this.props;
     const emptyTip = (
-      <EmptyTip>
-        <h2>{gettext('No libraries have been shared with you')}</h2>
-        <p>{gettext('No libraries have been shared with you from other servers.')}</p>
+      <EmptyTip
+        title={gettext('No libraries have been shared with you')}
+        text={gettext('No libraries have been shared with you from other servers.')}
+      >
       </EmptyTip>
     );
 
diff --git a/frontend/src/pages/org-admin/devices/devices-by-platform.js b/frontend/src/pages/org-admin/devices/devices-by-platform.js
index 1e33485c10..99f17eaa7d 100644
--- a/frontend/src/pages/org-admin/devices/devices-by-platform.js
+++ b/frontend/src/pages/org-admin/devices/devices-by-platform.js
@@ -32,9 +32,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No connected devices')}</h2>
-        </EmptyTip>
+        <EmptyTip text={gettext('No connected devices')}/>
       );
       const table = (
         <Fragment>
diff --git a/frontend/src/pages/org-admin/devices/devices-errors.js b/frontend/src/pages/org-admin/devices/devices-errors.js
index 92d1e0a5e3..41b6a615aa 100644
--- a/frontend/src/pages/org-admin/devices/devices-errors.js
+++ b/frontend/src/pages/org-admin/devices/devices-errors.js
@@ -36,9 +36,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No sync errors')}</h2>
-        </EmptyTip>
+        <EmptyTip text={gettext('No sync errors')}/>
       );
       const table = (
         <Fragment>
diff --git a/frontend/src/pages/org-admin/libraries/org-all-repos.js b/frontend/src/pages/org-admin/libraries/org-all-repos.js
index aec7ad67de..1ce5aaae34 100644
--- a/frontend/src/pages/org-admin/libraries/org-all-repos.js
+++ b/frontend/src/pages/org-admin/libraries/org-all-repos.js
@@ -60,9 +60,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No libraries')}</h2>
-        </EmptyTip>
+        <EmptyTip text={gettext('No libraries')}/>
       );
       const initialSortIcon = <span className="sf3-font sf3-font-sort3"></span>;
       const sortIcon = <span className="sf3-font sf3-font-down"></span>;
diff --git a/frontend/src/pages/org-admin/libraries/org-repo-trash.js b/frontend/src/pages/org-admin/libraries/org-repo-trash.js
index bf5410361a..fe9303c133 100644
--- a/frontend/src/pages/org-admin/libraries/org-repo-trash.js
+++ b/frontend/src/pages/org-admin/libraries/org-repo-trash.js
@@ -50,9 +50,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No deleted libraries')}</h2>
-        </EmptyTip>
+        <EmptyTip text={gettext('No deleted libraries')}/>
       );
       const table = (
         <Fragment>
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index a730980365..e5be54b27d 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -30,9 +30,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No folders shared')}</h2>
-          <p>{gettext('You have not shared any folders with other users yet. You can share a folder with other users by clicking the share icon to the right of a folder\'s name.')}</p>
+        <EmptyTip
+          title={gettext('No folders shared')}
+          text={gettext('You have not shared any folders with other users yet. You can share a folder with other users by clicking the share icon to the right of a folder\'s name.')}
+        >
         </EmptyTip>
       );
 
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index cd20b6acf6..c1ef78e7e6 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -29,9 +29,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No libraries shared')}</h2>
-          <p>{gettext('You have not shared any libraries with other users yet. You can share a library with other users by clicking the share icon to the right of a library\'s name in "My Libraries".')}</p>
+        <EmptyTip
+          title={gettext('No libraries shared')}
+          text={gettext('You have not shared any libraries with other users yet. You can share a library with other users by clicking the share icon to the right of a library\'s name in "My Libraries".')}
+        >
         </EmptyTip>
       );
 
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js
index 10d9e7efcc..fc34f53eb4 100644
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -64,9 +64,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No share links')}</h2>
-          <p>{gettext('You have not created any share links yet. A share link can be used to share files and folders with anyone. You can create a share link for a file or folder by clicking the share icon to the right of its name.')}</p>
+        <EmptyTip
+          title={gettext('No share links')}
+          text={gettext('You have not created any share links yet. A share link can be used to share files and folders with anyone. You can create a share link for a file or folder by clicking the share icon to the right of its name.')}
+        >
         </EmptyTip>
       );
 
diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js
index fd86f4b296..83a733fdac 100644
--- a/frontend/src/pages/share-admin/upload-links.js
+++ b/frontend/src/pages/share-admin/upload-links.js
@@ -34,9 +34,10 @@ class Content extends Component {
     }
 
     const emptyTip = (
-      <EmptyTip>
-        <h2>{gettext('No upload links')}</h2>
-        <p>{gettext('You have not created any upload links yet. An upload link allows anyone to upload files to a folder or library. You can create an upload link for a folder or library by clicking the share icon to the right of its name.')}</p>
+      <EmptyTip
+        title={gettext('No upload links')}
+        text={gettext('You have not created any upload links yet. An upload link allows anyone to upload files to a folder or library. You can create an upload link for a folder or library by clicking the share icon to the right of its name.')}
+      >
       </EmptyTip>
     );
 
diff --git a/frontend/src/pages/share-with-ocm/shared-with-ocm.js b/frontend/src/pages/share-with-ocm/shared-with-ocm.js
index c75315dba0..f4ace825f9 100644
--- a/frontend/src/pages/share-with-ocm/shared-with-ocm.js
+++ b/frontend/src/pages/share-with-ocm/shared-with-ocm.js
@@ -15,9 +15,10 @@ class Content extends Component {
     const { loading, errorMsg, items } = this.props;
 
     const emptyTip = (
-      <EmptyTip>
-        <h2>{gettext('No libraries have been shared with you')}</h2>
-        <p>{gettext('No libraries have been shared with you from other servers.')}</p>
+      <EmptyTip
+        title={gettext('No libraries have been shared with you')}
+        text={gettext('No libraries have been shared with you from other servers.')}
+      >
       </EmptyTip>
     );
 
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index c1df9549a1..513c409b15 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -58,9 +58,10 @@ class Content extends Component {
 
     const emptyTip = inAllLibs ?
       <p className={`libraries-empty-tip-in-${currentViewMode}-mode`}>{gettext('No shared libraries')}</p> :
-      <EmptyTip>
-        <h2>{gettext('No shared libraries')}</h2>
-        <p>{gettext('No libraries have been shared directly with you. A shared library can be shared with full or restricted permission. If you need access to a library owned by another user, ask the user to share the library with you.')}</p>
+      <EmptyTip
+        title={gettext('No shared libraries')}
+        text={gettext('No libraries have been shared directly with you. A shared library can be shared with full or restricted permission. If you need access to a library owned by another user, ask the user to share the library with you.')}
+      >
       </EmptyTip>;
 
     if (loading) {
diff --git a/frontend/src/pages/shared-with-all/index.js b/frontend/src/pages/shared-with-all/index.js
index f7fef3b4f1..62c8e5cc5d 100644
--- a/frontend/src/pages/shared-with-all/index.js
+++ b/frontend/src/pages/shared-with-all/index.js
@@ -124,9 +124,10 @@ class PublicSharedView extends React.Component {
     const { errMessage } = this.state;
     const emptyTip = inAllLibs ?
       <p className={`libraries-empty-tip-in-${currentViewMode}-mode`}>{gettext('No public libraries')}</p> : (
-        <EmptyTip>
-          <h2>{gettext('No public libraries')}</h2>
-          <p>{gettext('No public libraries have been created yet. A public library is accessible by all users. You can create a public library by clicking the "Add Library" button in the menu bar.')}</p>
+        <EmptyTip
+          title={gettext('No public libraries')}
+          text={gettext('No public libraries have been created yet. A public library is accessible by all users. You can create a public library by clicking the "Add Library" button in the menu bar.')}
+        >
         </EmptyTip>
       );
     return (
diff --git a/frontend/src/pages/starred/starred.js b/frontend/src/pages/starred/starred.js
index 6923c4fede..9f2ea8c0ba 100644
--- a/frontend/src/pages/starred/starred.js
+++ b/frontend/src/pages/starred/starred.js
@@ -21,9 +21,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else if (items.length === 0) {
       return (
-        <EmptyTip>
-          <h2>{gettext('No favorites')}</h2>
-          <p>{gettext('You have not added any libraries, folders or files to your favorites yet. A favorite gives you quick access to your most frequently used objects. You can add a library, folder or file to your favorites by clicking the star to the left of its name.')}</p>
+        <EmptyTip
+          title={gettext('No favorites')}
+          text={gettext('You have not added any libraries, folders or files to your favorites yet. A favorite gives you quick access to your most frequently used objects. You can add a library, folder or file to your favorites by clicking the star to the left of its name.')}
+        >
         </EmptyTip>
       );
     } else {
diff --git a/frontend/src/pages/sys-admin/admin-logs/login-logs.js b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
index 285d3aa507..c5def2c31b 100644
--- a/frontend/src/pages/sys-admin/admin-logs/login-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/login-logs.js
@@ -34,8 +34,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No Admin login logs')}</h2>
+        <EmptyTip text={gettext('No Admin login logs')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
index 79e5af1da3..6794fd94da 100644
--- a/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
+++ b/frontend/src/pages/sys-admin/admin-logs/operation-logs.js
@@ -33,8 +33,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No Admin operation logs')}</h2>
+        <EmptyTip text={gettext('No Admin operation logs')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/devices/devices-by-platform.js b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
index d9a572b8ba..86aa5f70bf 100644
--- a/frontend/src/pages/sys-admin/devices/devices-by-platform.js
+++ b/frontend/src/pages/sys-admin/devices/devices-by-platform.js
@@ -32,8 +32,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No connected devices')}</h2>
+        <EmptyTip text={gettext('No connected devices')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/devices/devices-errors.js b/frontend/src/pages/sys-admin/devices/devices-errors.js
index 547557028a..7eccea4ec6 100644
--- a/frontend/src/pages/sys-admin/devices/devices-errors.js
+++ b/frontend/src/pages/sys-admin/devices/devices-errors.js
@@ -36,8 +36,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No sync errors')}</h2>
+        <EmptyTip text={gettext('No sync errors')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/groups/group-members.js b/frontend/src/pages/sys-admin/groups/group-members.js
index 12141a00ec..f2678b8d6c 100644
--- a/frontend/src/pages/sys-admin/groups/group-members.js
+++ b/frontend/src/pages/sys-admin/groups/group-members.js
@@ -44,8 +44,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No members')}</h2>
+        <EmptyTip text={gettext('No members')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/groups/group-repos.js b/frontend/src/pages/sys-admin/groups/group-repos.js
index 969a427e3c..d603c7a2b8 100644
--- a/frontend/src/pages/sys-admin/groups/group-repos.js
+++ b/frontend/src/pages/sys-admin/groups/group-repos.js
@@ -27,8 +27,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No libraries')}</h2>
+        <EmptyTip text={gettext('No libraries')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/groups/groups-content.js b/frontend/src/pages/sys-admin/groups/groups-content.js
index b12d8cebba..78811cdaf8 100644
--- a/frontend/src/pages/sys-admin/groups/groups-content.js
+++ b/frontend/src/pages/sys-admin/groups/groups-content.js
@@ -46,8 +46,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No groups')}</h2>
+        <EmptyTip text={gettext('No groups')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/institutions/institution-admins.js b/frontend/src/pages/sys-admin/institutions/institution-admins.js
index 2b638ca496..43729782f7 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-admins.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-admins.js
@@ -38,8 +38,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No admins')}</h2>
+        <EmptyTip text={gettext('No admins')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/institutions/institution-users.js b/frontend/src/pages/sys-admin/institutions/institution-users.js
index fddcb8738a..ab8347154d 100644
--- a/frontend/src/pages/sys-admin/institutions/institution-users.js
+++ b/frontend/src/pages/sys-admin/institutions/institution-users.js
@@ -49,8 +49,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No members')}</h2>
+        <EmptyTip text={gettext('No members')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/institutions/institutions.js b/frontend/src/pages/sys-admin/institutions/institutions.js
index ecce116ba4..578599eb9b 100644
--- a/frontend/src/pages/sys-admin/institutions/institutions.js
+++ b/frontend/src/pages/sys-admin/institutions/institutions.js
@@ -36,8 +36,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No institutions')}</h2>
+        <EmptyTip text={gettext('No institutions')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/invitations/invitations.js b/frontend/src/pages/sys-admin/invitations/invitations.js
index c506d90dcd..540f576fe2 100644
--- a/frontend/src/pages/sys-admin/invitations/invitations.js
+++ b/frontend/src/pages/sys-admin/invitations/invitations.js
@@ -46,8 +46,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No invitations')}</h2>
+        <EmptyTip text={gettext('No invitations')}>
         </EmptyTip>
       );
 
diff --git a/frontend/src/pages/sys-admin/links/share-links.js b/frontend/src/pages/sys-admin/links/share-links.js
index efadab4903..1491ab60da 100644
--- a/frontend/src/pages/sys-admin/links/share-links.js
+++ b/frontend/src/pages/sys-admin/links/share-links.js
@@ -49,8 +49,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No share links')}</h2>
+        <EmptyTip text={gettext('No share links')}>
         </EmptyTip>
       );
 
diff --git a/frontend/src/pages/sys-admin/links/upload-links.js b/frontend/src/pages/sys-admin/links/upload-links.js
index 7b9ddc869c..98e554ba32 100644
--- a/frontend/src/pages/sys-admin/links/upload-links.js
+++ b/frontend/src/pages/sys-admin/links/upload-links.js
@@ -35,8 +35,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No upload links')}</h2>
+        <EmptyTip text={gettext('No upload links')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
index 3629791793..a89c156f73 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-access-logs.js
@@ -61,8 +61,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No file access logs')}</h2>
+        <EmptyTip text={gettext('No file access logs')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
index 618efeb28f..97e1e3ef5c 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
@@ -33,8 +33,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No file update logs')}</h2>
+        <EmptyTip text={gettext('No file update logs')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/logs-page/login-logs.js b/frontend/src/pages/sys-admin/logs-page/login-logs.js
index 63073c6bac..e45397789d 100644
--- a/frontend/src/pages/sys-admin/logs-page/login-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/login-logs.js
@@ -33,8 +33,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No login logs')}</h2>
+        <EmptyTip text={gettext('No login logs')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
index a719552951..975384abba 100644
--- a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
@@ -33,8 +33,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No permission logs')}</h2>
+        <EmptyTip text={gettext('No permission logs')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/notifications/notifications.js b/frontend/src/pages/sys-admin/notifications/notifications.js
index c590b841d4..9cd3f4a020 100644
--- a/frontend/src/pages/sys-admin/notifications/notifications.js
+++ b/frontend/src/pages/sys-admin/notifications/notifications.js
@@ -37,8 +37,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No notifications')}</h2>
+        <EmptyTip text={gettext('No notifications')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/orgs/org-groups.js b/frontend/src/pages/sys-admin/orgs/org-groups.js
index dd75cf11f9..a5f5964425 100644
--- a/frontend/src/pages/sys-admin/orgs/org-groups.js
+++ b/frontend/src/pages/sys-admin/orgs/org-groups.js
@@ -26,8 +26,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No groups')}</h2>
+        <EmptyTip text={gettext('No groups')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/orgs/org-repos.js b/frontend/src/pages/sys-admin/orgs/org-repos.js
index 7118f53a52..9e2211c1c1 100644
--- a/frontend/src/pages/sys-admin/orgs/org-repos.js
+++ b/frontend/src/pages/sys-admin/orgs/org-repos.js
@@ -20,8 +20,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No libraries')}</h2>
+        <EmptyTip text={gettext('No libraries')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/orgs/org-users.js b/frontend/src/pages/sys-admin/orgs/org-users.js
index 2d39a215ee..d21f8422b3 100644
--- a/frontend/src/pages/sys-admin/orgs/org-users.js
+++ b/frontend/src/pages/sys-admin/orgs/org-users.js
@@ -45,8 +45,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No members')}</h2>
+        <EmptyTip text={gettext('No members')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/orgs/orgs-content.js b/frontend/src/pages/sys-admin/orgs/orgs-content.js
index d7cafc4d4f..94941d4ecc 100644
--- a/frontend/src/pages/sys-admin/orgs/orgs-content.js
+++ b/frontend/src/pages/sys-admin/orgs/orgs-content.js
@@ -44,8 +44,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No organizations')}</h2>
+        <EmptyTip text={gettext('No organizations')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/repos/repos.js b/frontend/src/pages/sys-admin/repos/repos.js
index 4e0ba3e48e..48d55b19d2 100644
--- a/frontend/src/pages/sys-admin/repos/repos.js
+++ b/frontend/src/pages/sys-admin/repos/repos.js
@@ -62,8 +62,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No libraries')}</h2>
+        <EmptyTip text={gettext('No libraries')}>
         </EmptyTip>
       );
       const initialSortIcon = <span className="sf3-font sf3-font-sort3"></span>;
diff --git a/frontend/src/pages/sys-admin/repos/trash-repos.js b/frontend/src/pages/sys-admin/repos/trash-repos.js
index 37ecb913fd..4d29898878 100644
--- a/frontend/src/pages/sys-admin/repos/trash-repos.js
+++ b/frontend/src/pages/sys-admin/repos/trash-repos.js
@@ -52,8 +52,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No deleted libraries')}</h2>
+        <EmptyTip text={gettext('No deleted libraries')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/terms-and-conditions/content.js b/frontend/src/pages/sys-admin/terms-and-conditions/content.js
index 54efe66067..366b885e5b 100644
--- a/frontend/src/pages/sys-admin/terms-and-conditions/content.js
+++ b/frontend/src/pages/sys-admin/terms-and-conditions/content.js
@@ -38,8 +38,7 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No terms and conditions')}</h2>
+        <EmptyTip text={gettext('No terms and conditions')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/users/ldap-users.js b/frontend/src/pages/sys-admin/users/ldap-users.js
index 2782786f8a..1c14783750 100644
--- a/frontend/src/pages/sys-admin/users/ldap-users.js
+++ b/frontend/src/pages/sys-admin/users/ldap-users.js
@@ -33,8 +33,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No users')}</h2>
+        <EmptyTip text={gettext('No users')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/users/user-groups.js b/frontend/src/pages/sys-admin/users/user-groups.js
index c5c6a3cf47..681a59132d 100644
--- a/frontend/src/pages/sys-admin/users/user-groups.js
+++ b/frontend/src/pages/sys-admin/users/user-groups.js
@@ -35,8 +35,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No groups')}</h2>
+        <EmptyTip text={gettext('No groups')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/users/user-links.js b/frontend/src/pages/sys-admin/users/user-links.js
index 7e381a334c..79eb292fca 100644
--- a/frontend/src/pages/sys-admin/users/user-links.js
+++ b/frontend/src/pages/sys-admin/users/user-links.js
@@ -36,8 +36,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No shared links')}</h2>
+        <EmptyTip text={gettext('No shared links')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/users/user-repos.js b/frontend/src/pages/sys-admin/users/user-repos.js
index 28fbc1a8d3..1f72b9cf7b 100644
--- a/frontend/src/pages/sys-admin/users/user-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-repos.js
@@ -41,8 +41,7 @@ class Content extends Component {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No libraries')}</h2>
+        <EmptyTip text={gettext('No libraries')}>
         </EmptyTip>
       );
       const table = (
diff --git a/frontend/src/pages/sys-admin/users/user-shared-repos.js b/frontend/src/pages/sys-admin/users/user-shared-repos.js
index 53c7e1f8ba..c98de59be1 100644
--- a/frontend/src/pages/sys-admin/users/user-shared-repos.js
+++ b/frontend/src/pages/sys-admin/users/user-shared-repos.js
@@ -21,11 +21,6 @@ class Content extends Component {
     } else if (errorMsg) {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
-      const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No libraries')}</h2>
-        </EmptyTip>
-      );
       const table = (
         <Fragment>
           <table className="table-hover">
@@ -49,7 +44,7 @@ class Content extends Component {
           </table>
         </Fragment>
       );
-      return items.length ? table : emptyTip;
+      return items.length ? table : <EmptyTip text={gettext('No libraries')} />;
     }
   }
 }
diff --git a/frontend/src/pages/sys-admin/users/users-content.js b/frontend/src/pages/sys-admin/users/users-content.js
index 1972c2a433..bca130e7a0 100644
--- a/frontend/src/pages/sys-admin/users/users-content.js
+++ b/frontend/src/pages/sys-admin/users/users-content.js
@@ -64,13 +64,6 @@ class Content extends Component {
     } else if (errorMsg) {
       return <p className="error text-center mt-4">{errorMsg}</p>;
     } else {
-      const emptyTip = (
-        <EmptyTip>
-          <h2>{gettext('No users')}</h2>
-        </EmptyTip>
-      );
-
-
       let columns = [];
 
       let sortIcon;
@@ -177,7 +170,7 @@ class Content extends Component {
               onRoleChange={this.props.onRoleChange}
             />
           }
-          {items.length ? table : emptyTip}
+          {items.length ? table : <EmptyTip text={gettext('No users')} />}
         </div>
       );
     }
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index f65766f268..3bdc8a556b 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -307,8 +307,7 @@ class Wikis extends Component {
             }
             {(!this.state.loading && this.state.wikis.length === 0 && this.state.groupWikis.length === 0) &&
               <div className="cur-view-content">
-                <EmptyTip>
-                  <h2>{gettext('No Wikis')}</h2>
+                <EmptyTip title={gettext('No Wikis')}>
                   <p>{gettext('You do not have any wikis yet.')}</p>
                   <p>{gettext('You can add a wiki by clicking the "Add Wiki" button in the menu.')}</p>
                 </EmptyTip>
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 0c4700fd1c..2958e1827a 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -1117,34 +1117,6 @@ a.table-sort-op:hover {
   color: #fff;
 }
 
-/* empty-tip */
-.empty-tip {
-  margin: 5.5em 1em;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  padding: 30px;
-  background-color: #fafafa;
-  text-align: center;
-}
-
-@media (min-width: 768px) {
-  .empty-tip {
-    padding: 30px 80px;
-  }
-}
-
-.no-items-img-tip {
-  display: inline-block;
-  margin-bottom: 20px; 
-}
-
-.empty-tip h2 {
-  font-size: 1.125rem;
-  text-align: center;
-  color: #222;
-  font-weight: bold;
-}
-
 .err-tip {
   margin: 2rem auto;
   padding: 30px 40px;