From ef9ef0b60482010effbc7cc690e5c95c1ce12516 Mon Sep 17 00:00:00 2001
From: Mashy <himesh.kapadia@gmail.com>
Date: Thu, 21 Nov 2019 13:19:07 +1000
Subject: [PATCH] new layout combiner bottom

---
 client/assets/styles/vbox.less           | 34 +++++++++++++++---------
 client/src/components/vbox.component.jsx | 29 ++++++++++++--------
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index 851a185b..80f63180 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -8,19 +8,17 @@
     grid-template-areas:
         "shop-hdr shop"
         "stash-hdr shop"
-        "stash-hdr combiner"
-        "stash  stash";
+        "stash  stash"
+        "refund  combiner";
     border-top: 0.1em solid @gray-exists;
-    border-bottom: 0.1em solid @gray-exists;
-
     margin-bottom: 1em;
     line-height: 0;
 
-    .items {
+    .vbox-padding {
         margin-left: 0.5em;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;
         margin-top: 0.5em;
-        margin-right: 1em;
+        margin-right: 0.5em;
     }
 
     .shop {
@@ -45,10 +43,16 @@
 
     .combiner {
         grid-area: combiner;
-        border-bottom: 0.1em solid @gray-exists;
-        border-right: 0.1em solid @gray-exists;
+        border-top: 0.1em solid @gray-exists;
+        border-left: 0.1em solid @gray-exists;
         display: flex;
         flex-direction: column;
+        
+        .vbox-padding {
+            margin-right: 0em;
+            margin-bottom: 0em;
+        }
+
         button {
             height: 3em;
             letter-spacing: 0.1em;
@@ -61,7 +65,7 @@
     
     .stash {
         grid-area: stash;
-        .items {
+        .vbox-padding {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             grid-gap: 0.5em 1em;
@@ -76,13 +80,17 @@
         border-left: 0.1em solid @gray-exists;
         border-right: 0.1em solid @gray-exists;
         text-align: center;
+    }
+
+    .refund {
         button {
-            margin-top: 0.5em;
-            line-height: 1.6;
-            height: 4em;
+            line-height: 1.4;
+            height: 3em;
             letter-spacing: 0.1em;
             background-color: #342100;
         }
+        border-left: 0.1em solid @gray-exists;
+        border-bottom: 0.1em solid @gray-exists;
     }
 
     .vbox-hdr {
diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx
index 6a8a13fb..4c09de46 100644
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@@ -222,7 +222,7 @@ class Vbox extends preact.Component {
             return (
                 <div class='shop'
                     onClick={e => e.stopPropagation()}>
-                    <div class='items'>
+                    <div class='vbox-padding'>
                         <div class="vbox-colours">
                             {range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
                         </div>
@@ -238,7 +238,7 @@ class Vbox extends preact.Component {
         function vboxHdr() {
             return (
                 <div class="shop-hdr">
-                    <div class='items'>
+                    <div class='vbox-padding'>
                         <h3
                             onTouchStart={e => e.target.scrollIntoView(true)}
                             onMouseOver={e => vboxHover(e, 'vbox')}> STORE
@@ -364,7 +364,7 @@ class Vbox extends preact.Component {
             }
             return (
                 <div class='combiner'>
-                    <div class='items'>
+                    <div class='vbox-padding'>
                         <button
                             class='vbox-btn'
                             disabled={!mouseEvent}
@@ -392,7 +392,7 @@ class Vbox extends preact.Component {
                     onDragOver={ev => ev.preventDefault()}
                     onDrop={inventoryClick}
                 >
-                    <div class='items'>
+                    <div class='vbox-padding'>
                         {range(0, 4).map(i => inventoryBtn(vbox.bound[i], i))}
                     </div>
                 </div>
@@ -400,18 +400,24 @@ class Vbox extends preact.Component {
         }
 
         function inventoryHdr() {
+            return (
+                <div class='stash-hdr'>
+                    <div class='vbox-padding'>
+                        <h3 onTouchStart={e => e.target.scrollIntoView(true)}
+                            onMouseOver={e => vboxHover(e, 'inventory')}> STASH
+                        </h3>
+                    </div>
+                </div>
+            );
+        }
+        function refundBtn() {
             const refund = shopSelect.length === 0 && stashSelect.length === 1
                 ? itemInfo.items.find(i => i.item === vbox.bound[stashSelect[0]]).cost
                 : 0;
             const tutorialDisabled = tutorial && tutorial < 8 && instance.time_control === 'Practice' && instance.rounds.length === 1;
-
             return (
-                <div class={'stash-hdr'}>
-                    <div class='items'>
-                        <h3
-                            onTouchStart={e => e.target.scrollIntoView(true)}
-                            onMouseOver={e => vboxHover(e, 'inventory')}> STASH
-                        </h3>
+                <div class='refund'>
+                    <div class='vbox-padding'>
                         <button
                             disabled={tutorialDisabled || !refund}
                             class='vbox-btn'
@@ -438,6 +444,7 @@ class Vbox extends preact.Component {
                 {inventoryHdr()}
                 {inventoryElement()}
                 {combinerBtn()}
+                {refundBtn()}
             </div>
         );
     }