use ceil instead of floor on cooldown box for tosya

src/components/CoolDownBox.jsx

@@ -14,10 +14,8 @@ import type { State } from '../reducers';
 
 const CoolDownBox = ({ coolDown }) => (
   <div
-    className="cooldownbox"
-    style={{
-      display: (coolDown >= 1000) ? 'block' : 'none',
-    }}
+    className={(coolDown && coolDown >= 300)
+      ? 'cooldownbox show' : 'cooldownbox'}
   >
     {coolDown && durationToString(coolDown, true)}
   </div>

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;

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 {