diff --git a/src/components/CoolDownBox.jsx b/src/components/CoolDownBox.jsx
index ca91598..9e8dfd2 100644
--- a/src/components/CoolDownBox.jsx
+++ b/src/components/CoolDownBox.jsx
@@ -14,10 +14,8 @@ import type { State } from '../reducers';
const CoolDownBox = ({ coolDown }) => (
= 1000) ? 'block' : 'none',
- }}
+ className={(coolDown && coolDown >= 300)
+ ? 'cooldownbox show' : 'cooldownbox'}
>
{coolDown && durationToString(coolDown, true)}
diff --git a/src/core/utils.js b/src/core/utils.js
index 46f8aab..c2a2fb7 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -163,7 +163,7 @@ export function durationToString(
ms: number,
smallest: boolean = false,
): string {
- const seconds = Math.floor(ms / 1000);
+ const seconds = Math.ceil(ms / 1000);
let timestring: string;
if (seconds < 60 && smallest) {
timestring = seconds;
diff --git a/src/styles/default.css b/src/styles/default.css
index 94516d3..e55a96b 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -469,7 +469,7 @@ tr:nth-child(even) {
opacity: 0;
}
-.notifybox.show {
+.notifybox.show, .cooldownbox.show {
visibility: visible;
opacity: 1;
}
@@ -494,6 +494,9 @@ tr:nth-child(even) {
margin-left: auto;
margin-right: auto;
z-index: 2;
+ transition: visibility 0.3s, opacity 0.3s linear;
+ visibility: hidden;
+ opacity: 0;
}
.actionbuttons {