diff --git a/src/components/NotifyBox.jsx b/src/components/NotifyBox.jsx
index 0006f07..c57b656 100644
--- a/src/components/NotifyBox.jsx
+++ b/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 }) => (
-
- {notification}
-
-);
+ return (
+
+ {value}
+
+ );
+};
function mapStateToProps(state: State) {
const { notification } = state.user;
diff --git a/src/styles/dark-round.css b/src/styles/dark-round.css
index 56580cc..b6870c2 100644
--- a/src/styles/dark-round.css
+++ b/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 {
diff --git a/src/styles/dark.css b/src/styles/dark.css
index b7e3a57..8beb0b5 100644
--- a/src/styles/dark.css
+++ b/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 {
diff --git a/src/styles/default.css b/src/styles/default.css
index 9ae8452..9d860de 100644
--- a/src/styles/default.css
+++ b/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 {
diff --git a/src/styles/light-round.css b/src/styles/light-round.css
index 3d2163e..040fce0 100644
--- a/src/styles/light-round.css
+++ b/src/styles/light-round.css
@@ -10,6 +10,6 @@
border-radius: 21px;
}
-.notifyboxvis, .notifyboxhid {
+.notifybox {
border-radius: 21px;
}