diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index f3a51bc0..851a185b 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -3,22 +3,21 @@ align-content: space-between; grid-area: vbox; display: grid; - grid-template-rows: 9em 3em 2em min-content; - grid-template-columns: 7em 25em; + grid-template-rows: 9.5em 2.5em 4.5em min-content; + grid-template-columns: 7em 21em; grid-template-areas: - "shop-hdr shop" - "combiner shop" - "combiner stash" - "stash-hdr stash"; + "shop-hdr shop" + "stash-hdr shop" + "stash-hdr combiner" + "stash stash"; border-top: 0.1em solid @gray-exists; - border-right: 0.1em solid @gray-exists; border-bottom: 0.1em solid @gray-exists; margin-bottom: 1em; line-height: 0; .items { - margin-left: 1em; + margin-left: 0.5em; margin-bottom: 1em; margin-top: 0.5em; margin-right: 1em; @@ -27,37 +26,63 @@ .shop { grid-area: shop; border-bottom: 0.1em solid @gray-exists; + border-right: 0.1em solid @gray-exists; } .shop-hdr { grid-area: shop-hdr; - display: flex; - flex-direction: column; border-bottom: 0.1em solid @gray-exists; border-left: 0.1em solid @gray-exists; + text-align: center; + button { + margin-top: 0.5em; + line-height: 1.6; + height: 4em; + letter-spacing: 0.1em; + background-color: #421010; + } } .combiner { grid-area: combiner; + border-bottom: 0.1em solid @gray-exists; + border-right: 0.1em solid @gray-exists; display: flex; flex-direction: column; - border-right: 0.1em solid @gray-exists; - + button { + height: 3em; + letter-spacing: 0.1em; + background-color: #342100; + &[disabled] { + color: #342100; + }; + } } .stash { grid-area: stash; + .items { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 0.5em 1em; + align-items: center; + } + border-right: 0.1em solid @gray-exists; + border-left: 0.1em solid @gray-exists; } .stash-hdr { grid-area: stash-hdr; - display: flex; - flex-direction: column; - justify-content: flex-end; border-left: 0.1em solid @gray-exists; - border-top: 0.1em solid @gray-exists; - - + border-right: 0.1em solid @gray-exists; + text-align: center; + button { + margin-top: 0.5em; + line-height: 1.6; + height: 4em; + letter-spacing: 0.1em; + background-color: #342100; + } } .vbox-hdr { @@ -93,14 +118,6 @@ color: white; } - &.reclaim { - height: auto; - - &:hover { - color: @red; - }; - } - &[disabled] { background: black; border-width: 1px; diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 71360599..6045c049 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -111,7 +111,7 @@ class InfoComponent extends preact.Component { return (