fix notifybox styling

src/components/NotifyBox.jsx

@@ -3,32 +3,38 @@
  * @flow
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
 
 import type { State } from '../reducers';
 
-function getStyle(notification) {
-  if (!notification) return {};
 
-  if (typeof notification === 'string') {
-    return {
-      width: 50,
-    };
+const NotifyBox = ({ notification }) => {
+  const [className, setClassName] = useState('notifybox');
+  const [value, setValue] = useState(notification);
+
+  if (notification) {
+    let newClassName = 'notifybox';
+    if (notification && typeof notification !== 'string') {
+      if (notification > 0) newClassName += ' green';
+      else newClassName += ' red';
+    }
+    if (newClassName !== className) {
+      setClassName(newClassName);
+    }
+    if (notification !== value) {
+      setValue(notification);
+    }
   }
-  return {
-    backgroundColor: (notification >= 0) ? '#a9ffb0cc' : '#ffa9a9cc',
-  };
-}
 
-const NotifyBox = ({ notification }) => (
-  <div
-    className={(notification) ? 'notifyboxvis' : 'notifyboxhid'}
-    style={getStyle(notification)}
-  >
-    {notification}
-  </div>
-);
+  return (
+    <div
+      className={(notification) ? `${className} show` : className}
+    >
+      {value}
+    </div>
+  );
+};
 
 function mapStateToProps(state: State) {
   const { notification } = state.user;

src/styles/dark-round.css

@@ -35,7 +35,7 @@ tr:nth-child(even) {
   border-radius: 8px;
 }
 
-.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect {
+.actionbuttons, .coorbox, .onlinebox, .cooldownbox, #historyselect, .notifybox {
   background-color: rgba(59, 59, 59, 0.8);
   color: #f4f4f4;
   border-radius: 21px;
@@ -107,9 +107,8 @@ tr:nth-child(even) {
   color: #ecc9ff;
 }
 
-.notifyboxvis, .notifyboxhid {
-  background-color: rgba(59, 59, 59, 0.8);
-  border-radius: 21px;
+.notifybox.green, .notifybox.red {
+  color: black;
 }
 
 .actionbuttons:hover, .coorbox:hover, .menu > div:hover {

src/styles/dark.css

@@ -34,7 +34,7 @@ tr:nth-child(even) {
   background-color: rgba(59, 59, 59, 0.8);
 }
 
-.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox, #historyselect {
+.actionbuttons, .coorbox, .onlinebox, .cooldownbox, .palettebox, #historyselect, .notifybox {
   background-color: rgba(59, 59, 59, 0.8);
   color: #f4f4f4;
 }
@@ -104,8 +104,8 @@ tr:nth-child(even) {
   color: #ecc9ff;
 }
 
-.notifyboxvis, .notifyboxhid {
-  background-color: rgba(59, 59, 59, 0.8);
+.notifybox.green, .notifybox.red {
+  color: black;
 }
 
 .actionbuttons:hover, .coorbox:hover, .menu > div:hover {

src/styles/default.css

@@ -431,14 +431,14 @@ tr:nth-child(even) {
   box-shadow:0 0 3px 2px rgba(0,0,0,.6);
 }
 
-.notifyboxvis, .notifyboxhid {
+.notifybox {
   background-color: rgba(226, 226, 226, 0.80);
   position: absolute;
   top: 57px;
   left: 0px;
   right: 0px;
   height: 30px;
-  width: 20px;
+  width: 50px;
   color: black;
   font-size: 14px;
   line-height: 30px;
@@ -450,17 +450,26 @@ tr:nth-child(even) {
   margin-left: auto;
   margin-right: auto;
   z-index: 2;
-}
-
-.notifyboxvis {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 0s, opacity 0.5s linear;
-}
-.notifyboxhid {
+  transition: visibility 0.5s, opacity 0.5s linear;
   visibility: hidden;
   opacity: 0;
-  transition: visibility 0.5s, opacity 0.5s linear;
+}
+
+.notifybox.show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.notifybox.green, .notifybox.red {
+  width: 20px;
+}
+
+.notifybox.green {
+  background-color: #a9ffb0cc;
+}
+
+.notifybox.red {
+  background-color: #ffa9a9cc;
 }
 
 .cooldownbox {

src/styles/light-round.css

@@ -10,6 +10,6 @@
   border-radius: 21px;
 }
 
-.notifyboxvis, .notifyboxhid {
+.notifybox {
   border-radius: 21px;
 }