disabled form

client/cryps.css

@@ -116,10 +116,6 @@ button.left:hover, button.left:focus {
     box-shadow: inset 0.5em 0 0 0 whitesmoke;
 }
 
-button.hidden {
-    opacity: 0;
-}
-
 svg {
     flex: 1;
     fill: none;
@@ -311,6 +307,11 @@ header {
     margin-bottom: 1.5em;
 }
 
+.create-form.disabled {
+    border: 1px solid #333;
+    color: #333;
+}
+
 .create-form select, .create-form input, .create-form label {
     margin: 0;
 }
@@ -382,7 +383,7 @@ header {
     margin: 0;
 }
 
-.instance-ui-btn[disabled] {
+button[disabled] {
     color: #333;
     border-color: #333;
 }

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

@@ -50,18 +50,23 @@ class InstanceCreateForm extends Component {
     }
 
     render() {
+        const disabled = !this.props.selectedCryps.every(c => c);
+
+        const classes = `create-form ${disabled ? 'disabled' : ''}`;
         return (
-            <div className="create-form">
+            <div className={classes}>
                 <label>instance name</label>
                 <input
                     className="login-input"
                     type="text"
+                    disabled={disabled}
                     value={this.state.name}
                     placeholder="name"
                     onChange={this.nameChange}
                 />
                 <label htmlFor="playerSelect">players</label>
                 <select id="playerSelect"
+                    disabled={disabled}
                     onChange={this.playersChange}
                     >
                     <option value={1}>pve</option>
@@ -72,6 +77,7 @@ class InstanceCreateForm extends Component {
                 </select>
                 <button
                     onClick={this.handleSubmit}
+                    disabled={disabled}
                     type="submit">
                     +
                 </button>

client/src/components/menu.component.jsx

@@ -60,7 +60,7 @@ function Menu(args) {
 
         const mmSet = (
             <button
-                className={`menu-instance-btn left ${instanceJoinHidden ? 'hidden' : ''}`}
+                className={'menu-instance-btn left'}
                 disabled={instanceJoinHidden}
                 onClick={() => sendPlayerMmCrypsSet()}>
                 Set Matchmaking Team