group colours together in table, fix the vertical spacing issue

client/assets/styles/instance.less

@@ -2,7 +2,7 @@
     overflow: hidden;
     display: grid;
     grid-template-columns: 1fr minmax(min-content, 1fr);
-    grid-template-rows: minmax(min-content, 0.75fr) 1fr;
+    grid-template-rows: min-content 1fr;
 
     grid-template-areas:
         "vbox info"
@@ -37,7 +37,7 @@
     grid-area: info;
 
     display: grid;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: 12em min-content;
     grid-template-areas:
         "item"
         "combos";
@@ -50,16 +50,20 @@
     .combos {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
+        align-content: center;
 
         .table-button {
             display: grid;
             text-align: center;
+            align-content: center;
+            border-bottom: 2px solid #222;
 
             grid-template-areas:
                 "item"
                 "ingr";
 
             .item {
+                border-top: 2px solid #222;
                 border-bottom: 2px solid #222;
                 flex: 1;
                 grid-area: item;
@@ -68,15 +72,14 @@
 
             div {
                 border-right: 2px solid #222;
-
                 svg {
                     vertical-align: middle;
                 }
             }
 
-            &:last-child {
+            &:first-child {
                 div {
-                    border-right: 0;
+                    border-left: 2px solid #222;
                 }
             }
         }
@@ -101,29 +104,6 @@
     }
 }
 
-.instance .combos {
-    margin: 0 0 1em 1em;
-
-    table {
-        tr {
-            svg {
-                height: 1em;
-            }
-        }
-    }
-
-    td.table-button {
-        padding:5px;
-        cursor: pointer;
-        animation: border-co 0.75s ease-in-out 0s infinite alternate;
-        &:hover {
-            color: whitesmoke;
-            background-color: @gray-hover;
-        }
-
-    }
-}
-
 .instance .info figcaption {
     font-size: 1em;
     display: inline-block;

client/src/components/info.component.jsx

@@ -147,19 +147,27 @@ class InfoComponent extends preact.Component {
             const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
             if (vboxCombos.length > 6 || vboxCombos.length === 0) return generalNotes;
 
+            const comboTable = vboxCombos.map((c, i) => {
+                const mouseOver = e => {
+                    e.stopPropagation();
+                    this.setState({ comboItem: c.item });
+                };
+                const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci)))
+                    ? [<div key="0">{convertItem(c.components[0])}&nbsp;{convertItem(c.components[1])}</div>,
+                        <div key="1">{convertItem(c.components[2])}</div>]
+                    : c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>);
+                return (
+                    <div key={i} onMouseOver={mouseOver} class="table-button" onClick={() => setInfo(c.item)}>
+                        <div class="item">
+                            {convertItem(c.item)}
+                        </div>
+                        {componentTable}
+                    </div>
+                );
+            });
             return (
                 <div class="combos">
-                    {vboxCombos.map((c, i) =>
+                    {comboTable}
-                        <div class="table-button"
-                            onMouseOver={e => {
-                                e.stopPropagation();
-                                this.setState({ comboItem: c.item });
-                            }}
-                            onClick={() => setInfo(c.item)}>
-                                <div class="item">{convertItem(c.item)}</div>
-                                {c.components.map((u, j) => <div key={j} >{convertItem(u)}</div>)}
-                        </div>
-                    )}
                 </div>
             );
         };

client/src/components/instance.constructs.jsx

@@ -238,7 +238,7 @@ function Construct(props) {
         </div>;
     });
 
-    const classes = `instance-construct`;
+    const classes = 'instance-construct';
     const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
     return (
         <div key={construct.id} class={classes} onClick={onClick} onDragOver={ev => ev.preventDefault()} onDrop={onClick}>

client/src/components/instance.ctrl.btns.jsx

@@ -17,16 +17,11 @@ const addState = connect(
             return ws.sendInstanceReady(instance.id);
         }
 
-        function sendAbandon() {
-            return ws.sendInstanceAbandon(instance.id);
-        }
-
         return {
             instance,
             chatShow,
             account,
 
-            sendAbandon,
             sendReady,
         };
     },
@@ -48,7 +43,6 @@ function InstanceCtrlBtns(args) {
         chatShow,
         account,
 
-        sendAbandon,
         sendReady,
         setChatShow,
     } = args;