more menu

client/cryps.css

@@ -289,16 +289,31 @@ header {
 }
 
 .menu-instance-btn {
-    box-sizing: border-box;
     flex: 1 1 100%;
-    font-size: 1.5em;
+    font-size: 1.2em;
-    border-width: 2px;
+}
-    padding: 0.5em;
+
-    margin-right: 0.5em;
+.create-form {
+    flex: 1;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    border: 1px solid whitesmoke;
+    padding: 1em;
+    margin-bottom: 1.5em;
+}
+
+.create-form select, .create-form input, .create-form label {
+    margin: 0;
 }
 
 .create-form button {
+    flex: 0 1 25%;
+    font-size: 1.5em;
     display: block;
+    margin-bottom: 0;
 }
 
 /*
@@ -415,6 +430,7 @@ header {
 table {
     table-layout: fixed;
     width: 100%;
+    margin-bottom: 2em;
 }
 
 table td {

client/src/components/instance.create.form.jsx

@@ -51,34 +51,30 @@ class InstanceCreateForm extends Component {
 
     render() {
         return (
-            <div
+            <div className="create-form">
-                className="">
+                <label>instance name</label>
-                <div className="create-form">
+                <input
-                    <div>+</div>
+                    className="login-input"
-                    <label>instance name</label>
+                    type="text"
-                    <input
+                    value={this.state.name}
-                        className="login-input"
+                    placeholder="name"
-                        type="text"
+                    onChange={this.nameChange}
-                        value={this.state.name}
+                />
-                        placeholder="name"
+                <label htmlFor="playerSelect">players</label>
-                        onChange={this.nameChange}
+                <select id="playerSelect"
-                    />
+                    onChange={this.playersChange}
-                    <label htmlFor="playerSelect">players</label>
+                    >
-                    <select id="playerSelect"
+                    <option value={1}>pve</option>
-                        onChange={this.playersChange}
+                    <option selected value={2}>2</option>
-                        >
+                    <option value={4}>4</option>
-                        <option value={1}>pve</option>
+                    <option value={8}>8</option>
-                        <option selected value={2}>2</option>
+                    <option value={16}>16</option>
-                        <option value={4}>4</option>
+                </select>
-                        <option value={8}>8</option>
+                <button
-                        <option value={16}>16</option>
+                    onClick={this.handleSubmit}
-                    </select>
+                    type="submit">
-                    <button
+                    +
-                        onClick={this.handleSubmit}
+                </button>
-                        type="submit">
-                        create
-                    </button>
-                </div>
             </div>
         );
     }

client/src/components/menu.component.jsx

@@ -80,8 +80,8 @@ function Menu(args) {
                         {instancePanels}
                     </tbody>
                 </table>
-                {mmSet}
                 <InstanceCreateForm />
+                {mmSet}
             </section>
         );
     }