menu styles

client/assets/styles/styles.css

@@ -56,6 +56,11 @@ h4 {
     margin: 0;
 }
 
+hr {
+    margin: 1.5em 0;
+    width: 100%;
+}
+
 figure {
     margin: 0;
     text-align: center;
@@ -429,11 +434,15 @@ header {
     display: grid;
 
     grid-template-areas:
+        "top"
         "team"
-        "list"
-        "create";
+        "list";
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-rows: min-content min-content 1fr;
+}
+
+.menu-instances .top {
+    grid-area: top;
 }
 
 .menu-instances .construct-list {
@@ -508,10 +517,8 @@ figure.gray {
     fill: none;
 }
 
-main .top {
-    display: flex;
-    flex-flow: column;
-    flex: 1;
+main .top button {
+    width: 100%;
 }
 
 .ready:hover {

client/src/components/list.jsx

@@ -36,6 +36,15 @@ const addState = connect(
             instances,
         };
     },
+
+    function receiveDispatch(dispatch) {
+        function navToTeam() {
+            return dispatch(actions.setNav('team'));
+        }
+        return {
+            navToTeam,
+        };
+    }
 );
 
 function List(args) {
@@ -47,6 +56,7 @@ function List(args) {
         sendInstanceJoin,
         sendInstanceList,
         instances,
+        navToTeam,
     } = args;
 
     function instanceList() {
@@ -76,6 +86,7 @@ function List(args) {
 
         return (
             <div className="menu-instance-list" >
+                <hr />
                 <table>
                     <thead>
                         <tr>
@@ -113,9 +124,20 @@ function List(args) {
         );
     });
 
+    const header = (
+        <div className="top">
+            <button
+                className="instance-btn instance-ui-btn left"
+                onClick={() => navToTeam()}>
+                Select Constructs
+            </button>
+        </div>
+    );
+
 
     return (
         <main className="menu-instances">
+            {header}
             <div className="construct-list">
                 {constructPanels}
             </div>