reclaiming styles

client/cryps.css

@@ -340,6 +340,15 @@ header {
     margin: 0;
 }
 
+.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
+    color: black;
+}
+
+.vbox-btn.reclaiming, .vbox-btn.reclaiming:hover {
+    color: #a52a2a;
+    box-shadow: inset 0.5em 0 0 0 #a52a2a;
+}
+
 .vbox {
     flex: 1 1 25%;
 

client/src/components/vbox.component.jsx

@@ -196,7 +196,15 @@ function Vbox(args) {
     //
     // EVERYTHING
     //
+
+    function reclaimClick(e) {
+        e.stopPropagation();
+        return setReclaiming(!reclaiming);
+    }
+
     const classes = `vbox ${activeVar !== null || activeCryp ? 'hidden' : ''}`;
+    const reclaimClass = `instance-btn instance-ui-btn vbox-btn ${reclaiming ? 'reclaiming' : ''}`;
+
     return (
         <div className={classes} onClick={() => setReclaiming(false)} >
             <div className="vbox-hdr">
@@ -215,8 +223,8 @@ function Vbox(args) {
             </table>
             <span onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</span>
             <button
-                className="instance-btn instance-ui-btn vbox-btn"
+                className={reclaimClass}
-                onClick={() => setReclaiming(!reclaiming)}>
+                onClick={reclaimClick}>
                 reclaim
             </button>
             <table className="vbox-table">