text background

client/assets/styles/game.less

@@ -130,6 +130,9 @@
         margin-bottom: 0.25em;
         text-align: center;
         grid-area: name;
+        span {
+            background-color: black;
+        }
     }
 
     .skills {
@@ -138,9 +141,15 @@
             width: 100%;
             height: 2em;
             margin-right: 1em;
+            span {
+                background-color: black;
+            }
         }
         button.active {
             background: #2c2c2c;
+            span {
+                background-color: #2c2c2c;
+            }
         }
     }
 
@@ -151,6 +160,9 @@
         width: 100%;
         text-align: center;
         font-size: 1.5em;
+        span {
+            background-color: black;
+        }
     }
 
     .stats {
@@ -232,6 +244,7 @@
     padding-left: 1em;
     padding-right: 1em;
     text-align: center;
+    background-color: black;
     svg {
         display: inline;
         height: 1em;

client/src/components/construct.jsx

@@ -111,7 +111,7 @@ function constructText(props) {
         ? animText.text
         : construct.name;
 
-    return <h3 class={'name'}>{text}</h3>;
+    return <h3 class={'name'}><span>{text}</span></h3>;
 }
 
 module.exports = {

client/src/components/game.construct.jsx

@@ -153,11 +153,11 @@ class GameConstruct extends Component {
             }
             const effects = construct.effects.length
                 ? construct.effects.map(c =>
-                    <div
+                    <div key={c.effect}>
-                        key={c.effect}
+                        <span key={c.effect} onMouseOver={e => hoverInfo(e, c)}
-                        onMouseOver={e => hoverInfo(e, c)}
+                            onMouseOut={e => hoverInfo(e, null)}> {c.effect} - {c.duration}T
-                        onMouseOut={e => hoverInfo(e, null)}
+                        </span>
-                    > {c.effect} - {c.duration}T</div>)
+                    </div>)
                 : null;
             return (<div class="effects"> {effects} </div>);
         };

client/src/components/skill.btn.jsx

@@ -91,7 +91,7 @@ function Skill(props) {
             onMouseOut={e => hoverInfo(e, null)}
             type="submit"
             onClick={onClick}>
-            {s.skill} {cdText}
+            <span>{s.skill} {cdText}</span>
         </button>
     );
 }