fix team page

client/assets/styles/styles.css

@@ -349,18 +349,35 @@ header {
 */
 
 .menu-cryps {
-    display: flex;
-    flex-flow: row wrap;
+    display: grid;
+    grid-auto-columns: 1fr 1fr 1fr;
+    grid-auto-rows: min-content 1fr;
+
+    grid-template-areas:
+        "top"
+        "list";
+/*    flex-flow: row wrap;
     flex: 1;
     justify-content: space-between;
+*/
+
+
+}
+
+.menu-cryps .list {
+    grid-area: list;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
 }
 
 .menu-cryp-ctr {
-    flex: 0 0 30%;
-    flex-flow: column;
+    /*flex: 0 0 30%;*/
 
-    text-align: center;
     display: flex;
+    flex-flow: column;
+    text-align: center;
     justify-content: center;
 }
 

client/src/components/team.jsx

@@ -36,8 +36,16 @@ const addState = connect(
             dispatch(actions.setTeam(crypIds));
         }
 
+        function navToList() {
+            dispatch(actions.setGame(null));
+            dispatch(actions.setInstance(null));
+            return dispatch(actions.setNav('list'));
+        }
+
+
         return {
             setTeam,
+            navToList,
         };
     }
 );
@@ -50,6 +58,7 @@ function Team(args) {
 
         setTeam,
         sendCrypSpawn,
+        navToList,
     } = args;
 
     if (!cryps) return <div></div>;
@@ -97,10 +106,25 @@ function Team(args) {
     const spawnButtons = range(spawnButtonsNum)
         .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
 
+
+    const header = (
+        <div className="top">
+            <button
+                disabled={cryps.every(c => c)}
+                className="instance-btn instance-ui-btn right"
+                onClick={() => navToList()}>
+                Join an Instance
+            </button>
+        </div>
+    );
+
     return (
         <main className="menu-cryps">
+            {header}
+            <div className="list">
                 {crypPanels}
                 {spawnButtons}
+            </div>
         </main>
     );
 }