styles

client/assets/styles/colours.less

@@ -0,0 +1,27 @@
+@green: #1FF01F;
+@red: #a52a2a;
+@blue: #3498db;
+@white: #f5f5f5; // whitesmoke
+@purple: #9355b5; // 6lack - that far cover
+
+@darkgray: #222;
+@gray: #333;
+
+
+svg {
+    stroke: none;
+    margin: 0 auto;
+    display: block;
+
+    &.red {
+        fill: @red;
+    }
+
+    &.green {
+        fill: @green;
+    }
+
+    &.blue {
+        fill: @blue;
+    }
+}

client/assets/styles/vbox.less

@@ -1,11 +1,4 @@
-@green: #1FF01F;
-@red: #a52a2a;
-@blue: #3498db;
-@white: #f5f5f5; // whitesmoke
-@purple: #9355b5; // 6lack - that far cover
-
-@darkgray: #222;
-@gray: #333;
+@import 'colours.less';
 
 .vbox {
     margin-bottom: 2em;
@@ -85,20 +78,5 @@
 
     svg {
         stroke: none;
-        margin: 0 auto;
-        display: block;
-
-        &.red {
-            fill: @red;
-        }
-
-        &.green {
-            fill: @green;
-        }
-
-        &.blue {
-            fill: @blue;
     }
 }
-
-}

client/src/components/vbox.component.jsx

@@ -209,7 +209,7 @@ function Vbox(args) {
                 </div>
                 <button
                     class='vbox-btn'
-                    onMouseOver={e => hoverInfo(e, 'reroll')}
+                    onMouseOver={e => hoverInfo(e, 'refill')}
                     onClick={() => sendVboxDiscard()}>
                     refill - 5b
                 </button>

client/src/constants.jsx

@@ -56,8 +56,8 @@ module.exports = {
             item: 'REFINE',
             description: 'Refine ITEMS currently in I-COMBINATOR into more powerful variants',
         },
-        reroll: {
-            item: 'REROLL',
+        refill: {
+            item: 'REFILL',
             description: 'Refill the VBOX with new ITEMS.\nCosts 5b.',
         },
         equipSkills: {