From 9b1b8c698bb03de99e8e542fca03c53e1881a64e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 9 Apr 2019 16:39:15 +1000
Subject: [PATCH] reclaiming styles

---
 client/cryps.css                         |  9 +++++++++
 client/src/components/vbox.component.jsx | 12 ++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index 2d359b35..59a4a83e 100644
--- a/client/cryps.css
+++ b/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%;
 
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 078b4758..c7852080 100644
--- a/client/src/components/vbox.component.jsx
+++ b/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"
-                onClick={() => setReclaiming(!reclaiming)}>
+                className={reclaimClass}
+                onClick={reclaimClick}>
                 reclaim
             </button>
             <table className="vbox-table">