diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 236768dd1a..4a3de81b92 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -639,7 +639,7 @@
     },
     "axios": {
       "version": "0.18.0",
-      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
       "requires": {
         "follow-redirects": "^1.3.0",
@@ -9963,7 +9963,7 @@
     },
     "react-popper": {
       "version": "0.8.3",
-      "resolved": "http://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.8.3.tgz",
       "integrity": "sha1-D3MzMTfJ+wr27EB00tBYWgoEYeE=",
       "requires": {
         "popper.js": "^1.12.9",
diff --git a/frontend/src/components/dir-view/dir-view.js b/frontend/src/components/dir-view/dir-view.js
index 3f384ea104..8a5dc2a320 100644
--- a/frontend/src/components/dir-view/dir-view.js
+++ b/frontend/src/components/dir-view/dir-view.js
@@ -4,7 +4,7 @@ import { siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
-import Toast from '../toast';
+import toaster from '../toast';
 import DirPanel from './dir-panel';
 import Dirent from '../../models/dirent';
 import FileTag from '../../models/file-tag';
@@ -166,11 +166,11 @@ class DirView extends React.Component {
 
       let message = gettext('Successfully moved %(name)s.');
       message = message.replace('%(name)s', dirName);
-      Toast.success(message);
+      toaster.success(message);
     }).catch(() => {
       let message = gettext('Failed to move %(name)s');
       message = message.replace('%(name)s', dirName);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }
 
@@ -180,11 +180,11 @@ class DirView extends React.Component {
     seafileAPI.copyDir(repoID, destRepo.repo_id, copyToDirentPath, this.state.path, dirName).then(() => {
       let message = gettext('Successfully copied %(name)s.');
       message = message.replace('%(name)s', dirName);
-      Toast.success(message);
+      toaster.success(message);
     }).catch(() => {
       let message = gettext('Failed to copy %(name)s');
       message = message.replace('%(name)s', dirName);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }
 
@@ -232,11 +232,11 @@ class DirView extends React.Component {
       this.setState({direntList: direntList});
       let message = gettext('Successfully moved %(name)s.');
       message = message.replace('%(name)s', dirNames);
-      Toast.success(message);
+      toaster.success(message);
     }).catch(() => {
       let message = gettext('Failed to move %(name)s');
       message = message.replace('%(name)s', dirNames);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }
 
@@ -246,11 +246,11 @@ class DirView extends React.Component {
     seafileAPI.copyDir(repoID, destRepo.repo_id, destDirentPath, this.state.path, dirNames).then(() => {
       let message = gettext('Successfully copied %(name)s.');
       message = message.replace('%(name)s', dirNames);
-      Toast.success(message);
+      toaster.success(message);
     }).catch(() => {
       let message = gettext('Failed to copy %(name)s');
       message = message.replace('%(name)s', dirNames);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }
 
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index 506e2f3420..9f0c260532 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -4,7 +4,7 @@ import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
-import Toast from '../toast';
+import toaster from '../toast';
 import DirentMenu from './dirent-menu';
 import DirentRename from './dirent-rename';
 import ModalPortal from '../modal-portal';
@@ -215,13 +215,13 @@ class DirentListItem extends React.Component {
 
     if (!newName) {
       let errMessage = 'It is required.';
-      Toast.error(gettext(errMessage));
+      toaster.danger(gettext(errMessage));
       return false;
     }
 
     if (newName.indexOf('/') > -1) {
       let errMessage = 'Name should not include ' + '\'/\'' + '.';
-      Toast.error(gettext(errMessage));
+      toaster.danger(gettext(errMessage));
       return false;
     }
 
@@ -285,7 +285,7 @@ class DirentListItem extends React.Component {
       let newWindow = window.open('draft');
       newWindow.location.href = url;
     }).catch(() => {
-      Toast.error('Create draft failed.');
+      toaster.danger('Create draft failed.');
     });
     this.onItemMenuHide();
   }
@@ -328,7 +328,7 @@ class DirentListItem extends React.Component {
         this.interval = setInterval(this.addDownloadAnimation, 1000);
       }).catch(() => {
         clearInterval(this.interval);
-        // Toast.error(gettext(''));
+        // toaster.danger(gettext(''));
         //todo;
       });
     } else {
diff --git a/frontend/src/components/toast/alert.js b/frontend/src/components/toast/alert.js
index 2ea3769a71..2c1fdf8201 100644
--- a/frontend/src/components/toast/alert.js
+++ b/frontend/src/components/toast/alert.js
@@ -34,12 +34,14 @@ class Alert extends React.PureComponent {
     this.toastTextTitle = css({
       fontWeight: '600',
       fontSize: '14px',
-      color: '#435a6f'
+      color: '#435a6f',
+      margin: '0',
     });
 
     this.toastTextChild = css({
       fontSize: '14px',
-      color: '#999'
+      color: '#999',
+      margin: '0'
     });
     this.toastClose = css({
       marginLeft: '15px',
diff --git a/frontend/src/components/toast/toastManager.js b/frontend/src/components/toast/toastManager.js
index 16cb4a45a4..65d1338328 100644
--- a/frontend/src/components/toast/toastManager.js
+++ b/frontend/src/components/toast/toastManager.js
@@ -88,7 +88,7 @@ export default class ToastManager extends React.PureComponent {
       title,
       description: settings.description,
       hasCloseButton: settings.hasCloseButton || true,
-      duration: settings.duration || 5,
+      duration: settings.duration || 2,
       close: () => this.closeToast(id),
       intent: settings.intent
     };
diff --git a/frontend/src/draft-review.js b/frontend/src/draft-review.js
index 10a7f3ac19..52c0e6e2a2 100644
--- a/frontend/src/draft-review.js
+++ b/frontend/src/draft-review.js
@@ -13,7 +13,7 @@ import DiffViewer from '@seafile/seafile-editor/dist/viewer/diff-viewer';
 import { htmlSerializer } from '@seafile/seafile-editor/dist/utils/serialize-html';
 import { serialize } from '@seafile/seafile-editor/dist/utils/slate2markdown/serialize';
 import Loading from './components/loading';
-import Toast from './components/toast';
+import toaster from './components/toast';
 import ReviewComments from './components/review-list-view/review-comments';
 import ReviewCommentDialog from './components/review-list-view/review-comment-dialog.js';
 import { Tooltip } from 'reactstrap';
@@ -114,11 +114,11 @@ class DraftReview extends React.Component {
       this.setState({reviewStatus: 'closed'});
       let msg_s = gettext('Successfully closed review %(reviewID)s.');
       msg_s = msg_s.replace('%(reviewID)s', reviewID);
-      Toast.success(msg_s);
+      toaster.success(msg_s);
     }).catch(() => {
       let msg_s = gettext('Failed to close review %(reviewID)s');
       msg_s = msg_s.replace('%(reviewID)s', reviewID);
-      Toast.error(msg_s);
+      toaster.danger(msg_s);
     });
   }
 
@@ -126,10 +126,10 @@ class DraftReview extends React.Component {
     seafileAPI.updateReviewStatus(reviewID, 'finished').then(res => {
       this.setState({reviewStatus: 'finished', activeTab: 'reviewInfo' });
       let msg_s = gettext('Successfully published draft.');
-      Toast.success(msg_s);
+      toaster.success(msg_s);
     }).catch(() => {
       let msg_s = gettext('Failed to publish draft.');
-      Toast.error(msg_s);
+      toaster.danger(msg_s);
     });
   }
   
diff --git a/frontend/src/pages/drafts/draft-content.js b/frontend/src/pages/drafts/draft-content.js
index fcd451436e..2af70e7a27 100644
--- a/frontend/src/pages/drafts/draft-content.js
+++ b/frontend/src/pages/drafts/draft-content.js
@@ -3,7 +3,7 @@ import { siteRoot, gettext } from '../../utils/constants';
 import editUtilties from '../../utils/editor-utilties';
 import { Utils } from '../../utils/utils';
 import PropTypes from 'prop-types';
-import Toast from '../../components/toast';
+import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 import DraftListView from '../../components/draft-list-view/draft-list-view';
 import DraftListMenu from '../../components/draft-list-view/draft-list-menu';
@@ -41,11 +41,11 @@ class DraftContent extends React.Component {
       this.props.updateDraftsList(draft.id);
       let msg_s = gettext('Successfully deleted draft %(draft)s.');
       msg_s = msg_s.replace('%(draft)s', draft_name);
-      Toast.success(msg_s);
+      toaster.success(msg_s);
     }).catch(() => {
       let msg_s = gettext('Failed to delete draft %(draft)s.');
       msg_s = msg_s.replace('%(draft)s', draft_name);
-      Toast.error(msg_s);
+      toaster.danger(msg_s);
     });
   }
 
@@ -56,11 +56,11 @@ class DraftContent extends React.Component {
       this.props.updateDraftsList(draft.id);
       let msg_s = gettext('Successfully published draft %(draft)s.');
       msg_s = msg_s.replace('%(draft)s', draft_name);
-      Toast.success(msg_s);
+      toaster.success(msg_s);
     }).catch(() => {
       let msg_s = gettext('Failed to publish draft %(draft)s.');
       msg_s = msg_s.replace('%(draft)s', draft_name);
-      Toast.error(msg_s);
+      toaster.danger(msg_s);
     });
   }
 
@@ -72,7 +72,7 @@ class DraftContent extends React.Component {
       w.location = siteRoot + 'drafts/review/' + res.data.id;
     }).catch((error) => { 
       if (error.response.status == '409') {
-        Toast.error(gettext('Review already exists.'));
+        toaster.danger(gettext('Review already exists.'));
       }    
     });
   }
diff --git a/frontend/src/pages/linked-devices/linked-devices.js b/frontend/src/pages/linked-devices/linked-devices.js
index 117bd08b36..f7815f2b84 100644
--- a/frontend/src/pages/linked-devices/linked-devices.js
+++ b/frontend/src/pages/linked-devices/linked-devices.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl } from '../../utils/constants';
-import Toast from '../../components/toast';
+import toaster from '../../components/toast';
 
 class Content extends Component {
 
@@ -103,11 +103,11 @@ class Item extends Component {
       });
       let msg_s = gettext("Successfully unlink %(name)s.");
       msg_s = msg_s.replace('%(name)s', data.device_name);
-      Toast.success(msg_s);
+      toaster.success(msg_s);
     }).catch((error) => {
       let message = gettext("Failed to unlink %(name)s");
       message = message.replace('%(name)s', data.device_name);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }
 
diff --git a/frontend/src/repo-wiki-mode.js b/frontend/src/repo-wiki-mode.js
index c326c21098..1a296b5b66 100644
--- a/frontend/src/repo-wiki-mode.js
+++ b/frontend/src/repo-wiki-mode.js
@@ -8,7 +8,7 @@ import SidePanel from './pages/repo-wiki-mode/side-panel';
 import MainPanel from './pages/repo-wiki-mode/main-panel';
 import Node from './components/tree-view/node';
 import Tree from './components/tree-view/tree';
-import Toast from './components/toast';
+import toaster from './components/toast';
 import Dirent from './models/dirent';
 import FileTag from './models/file-tag';
 import './assets/css/fa-solid.css';
@@ -151,11 +151,11 @@ class Wiki extends Component {
 
       let message = gettext('Successfully moved %(name)s.');
       message = message.replace('%(name)s', dirName);
-      Toast.success(message);
+      toaster.success(message);
     }).catch(() => {
       let message = gettext('Failed to move %(name)s');
       message = message.replace('%(name)s', dirName);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }
 
@@ -167,11 +167,11 @@ class Wiki extends Component {
       this.copyTreeNode(direntPath, copyToDirentPath, destRepo);
       let message = gettext('Successfully copied %(name)s.');
       message = message.replace('%(name)s', dirName);
-      Toast.success(message);
+      toaster.success(message);
     }).catch(() => {
       let message = gettext('Failed to copy %(name)s');
       message = message.replace('%(name)s', dirName);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }
 
@@ -471,11 +471,11 @@ class Wiki extends Component {
       });
       let message = gettext('Successfully moved %(name)s.');
       message = message.replace('%(name)s', dirNames);
-      Toast.success(message);
+      toaster.success(message);
     }).catch(() => {
       let message = gettext('Failed to move %(name)s');
       message = message.replace('%(name)s', dirNames);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }
 
@@ -489,11 +489,11 @@ class Wiki extends Component {
       });
       let message = gettext('Successfully copied %(name)s.');
       message = message.replace('%(name)s', dirNames);
-      Toast.success(message);
+      toaster.success(message);
     }).catch(() => {
       let message = gettext('Failed to copy %(name)s');
       message = message.replace('%(name)s', dirNames);
-      Toast.error(message);
+      toaster.danger(message);
     });
   }