From 51ca41b218b1773a2fb5f1c0ef33c3b175d10df9 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 7 Nov 2019 17:52:07 +1000
Subject: [PATCH] background color for resolving-skill

---
 client/assets/styles/game.less             |  4 ++++
 client/src/components/targeting.arrows.jsx | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less
index 6f781d54..a87344e0 100644
--- a/client/assets/styles/game.less
+++ b/client/assets/styles/game.less
@@ -242,6 +242,10 @@
     top: 35%;
     height: 15%;
     width: calc(90% - 1.25em);
+    z-index: 2;
+    span {
+        background-color: black;
+    }
 }
 
 .resolving-skill {
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
index d893e3bc..aa9257e3 100644
--- a/client/src/components/targeting.arrows.jsx
+++ b/client/src/components/targeting.arrows.jsx
@@ -59,7 +59,7 @@ class TargetSvg extends Component {
         if (tutorialGame) {
             return (
                 <div class="resolving-skill">
-                    <h2> Select your skills, click on targets and then hit <b>READY</b>.</h2>
+                    <h2><span> Select your skills, click on targets and then hit <b>READY</b>.</span></h2>
                 </div>
             );
         }
@@ -72,8 +72,8 @@ class TargetSvg extends Component {
 
             return (
                 <div class="resolving-skill">
-                    <h1>{gameEffectInfo.effect}</h1>
-                    <div> {infoDescription} </div>
+                    <h1><span>{gameEffectInfo.effect}</span></h1>
+                    <div><span>{infoDescription} </span></div>
                 </div>
             );
         }
@@ -90,8 +90,8 @@ class TargetSvg extends Component {
             const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
             return (
                 <div class="resolving-skill">
-                    <h1>{animSkill}</h1>
-                    <div> {itemSourceDescription} </div>
+                    <h1><span>{animSkill}</span></h1>
+                    <div><span>{itemSourceDescription}</span></div>
                 </div>
             );
         }