diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 76e68884..055ee56e 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -5,7 +5,7 @@ .instance { overflow: hidden; display: grid; - grid-template-columns: 3fr minmax(min-content, 6fr); + grid-template-columns: 1fr minmax(min-content, 1fr); grid-template-rows: min-content 1fr; grid-template-areas: diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index c4d5c6cd..8534d374 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -2,12 +2,11 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: 1fr min-content; - grid-template-columns: 1fr 3fr; + grid-template-rows: 3fr 2fr; + grid-template-columns: 1fr 4fr 1fr; grid-template-areas: - "store-hdr store" - "stash-hdr stash" - "refund combiner"; + "store-hdr store combiner" + "stash-hdr stash combiner"; margin-bottom: 1em; line-height: 0; @@ -48,7 +47,7 @@ display: flex; flex-direction: column; - padding: 0.5em 0 0 0; + padding: 0; .vbox-padding { margin-right: 0em; @@ -58,20 +57,24 @@ button { letter-spacing: 0.1em; background-color: #996100; + border-radius: 0; + border: 0; &[disabled] { - color: #996100; + border: 0.2em solid @gray-exists; + border-left: 0; }; + + transition-property: 0; } } .stash { grid-area: stash; display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(3, 1fr); grid-gap: 0.5em 1em; align-items: center; - padding: 0.5em; border: 0.2em solid @gray-exists; border-left: 0; } @@ -85,6 +88,10 @@ text-align: center; border: 0.2em solid @gray-exists; border-right: 0; + + h3 { + margin-bottom: 2.5em; + } } .refund { diff --git a/client/src/components/vbox.combiner.jsx b/client/src/components/vbox.combiner.jsx index e1514e1f..48277f3e 100644 --- a/client/src/components/vbox.combiner.jsx +++ b/client/src/components/vbox.combiner.jsx @@ -34,7 +34,7 @@ function combinerBtn(props) { let bits = 0; storeSelect.forEach(item => bits += item[0] + 1); text = bits - ? `Buy ${comboItem} - ${bits}b` + ? `${comboItem} - ${bits}b` : `Combine - ${comboItem}`; if (vbox.bits >= bits) mouseEvent = sendVboxCombine; } else if (stashSelect.length === 0 && storeSelect.length === 1) { diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index e5286807..9d3f124c 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -201,33 +201,31 @@ class Vbox extends preact.Component { } function stashHdr() { - return ( -