reclaim button fixes

client/assets/styles/vbox.less

@@ -48,17 +48,22 @@
             };
         }
 
-        &.reclaiming, &.reclaiming:hover, &.reclaiming:active {
-            background: @red;
-            color: black;
-        }
-
         &[disabled] {
             background: black;
             border-width: 1px;
         };
     }
 
+    .reclaiming {
+        button:not([disabled]) {
+            &, &:hover, &:active {
+                background: @red;
+                color: black;
+                border: 1px solid black;
+            }
+        }
+    }
+
     button {
         height: 4em;
         margin: 0;

client/src/components/shapes.jsx

@@ -73,13 +73,13 @@ module.exports = {
 
     LifeRR: () =>
     <figure>
-        {square(['green'])}
+        {square(['red'])}
         <figcaption>Life</figcaption>
     </figure>,
 
     LifeBB:() =>
     <figure>
-        {square(['green'])}
+        {square(['blue'])}
         <figcaption>Life</figcaption>
     </figure>,
 
@@ -111,13 +111,13 @@ module.exports = {
 
     PowerRR: () =>
     <figure>
-        {circle(['green'])}
+        {circle(['red'])}
         <figcaption>Power</figcaption>
     </figure>,
 
     PowerBB:() =>
     <figure>
-        {circle(['green'])}
+        {circle(['blue'])}
         <figcaption>Power</figcaption>
     </figure>,
 
@@ -148,13 +148,13 @@ module.exports = {
 
     SpeedRR: () =>
     <figure>
-        {triangle(['green'])}
+        {triangle(['red'])}
         <figcaption>Speed</figcaption>
     </figure>,
 
     SpeedBB:() =>
     <figure>
-        {triangle(['green'])}
+        {triangle(['blue'])}
         <figcaption>Speed</figcaption>
     </figure>,
 

client/src/components/vbox.component.jsx

@@ -282,7 +282,7 @@ function Vbox(args) {
         return setReclaiming(!reclaiming);
     }
 
-    const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
+    const inventoryClass = `vbox-section ${reclaiming ? 'reclaiming' : ''}`;
 
     function inventoryBtn(v, i) {
         const inventoryHighlight = vboxSelecting || itemUnequip.length;
@@ -363,14 +363,14 @@ function Vbox(args) {
         }
 
         return (
-            <div class='vbox-section'
+            <div class={inventoryClass}
                 onClick={inventoryClick}
                 style={vboxSelecting || itemUnequip ? { cursor: 'pointer' } : null}
                 onMouseOver={e => hoverInfo(e, 'inventory')}>
                 <div class="vbox-hdr">
                     <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
                     <button
-                        class={reclaimClass}
+                        class='vbox-btn reclaim'
                         onMouseOver={e => hoverInfo(e, 'reclaim')}
                         onClick={reclaimClick}>
                         reclaim