combos wip

client/assets/styles/vbox.less

@@ -3,7 +3,7 @@
     grid-area: vbox;
     display: grid;
     grid-template-rows: 3fr 2fr;
-    grid-template-columns: 1fr 4fr 6fr 15.5em; // =\
+    grid-template-columns: 1fr 4fr 6fr min-content; // =\
     grid-template-areas:
         "store-hdr store info combos"
         "stash-hdr stash combiner combos";
@@ -176,10 +176,12 @@
         h2 {
             text-transform: uppercase;
         }
+
         svg {
             display: inline;
             height: 1em;
         }
+
         figure {
             display: inline;
             height: 0.5em;
@@ -187,11 +189,13 @@
                 margin-right: 0.5em;
             }
         }
+
         figcaption {
             font-size: 1em;
             display: inline-block;
             vertical-align: middle;
         }
+
         margin-left: 1em;
         grid-area: info;
         display: grid;
@@ -234,6 +238,31 @@
         grid-template-areas:
             "comboHeader"
             "comboList";
+
+        h2 {
+            text-transform: uppercase;
+        }
+
+        svg {
+            display: inline;
+            height: 1em;
+        }
+
+        figure {
+            display: inline;
+            height: 0.5em;
+            svg {
+                margin-right: 0.5em;
+            }
+        }
+
+        figcaption {
+            font-size: 1em;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+
         .combo-header {
             text-align: center;
         }

client/src/components/vbox.component.jsx

@@ -9,6 +9,7 @@ const InfoContainer = require('./vbox.info');
 const StashElement = require('./vbox.stash');
 const StoreElement = require('./vbox.store');
 const Combiner = require('./vbox.combiner');
+const Combos = require('./vbox.combos');
 
 const addState = connect(
     function receiveState(state) {
@@ -256,7 +257,11 @@ class Vbox extends preact.Component {
                     vboxHighlight={vboxHighlight}
                     vboxBuySelected={vboxBuySelected}
                 />
-                <div class="combos"></div>
+                <Combos
+                    vboxHighlight={vboxHighlight}
+                    vboxBuySelected={vboxBuySelected}
+                />
+
             </div>
         );
     }