From c32b4b7180ac6f44c339d6ed33388e7c9eb16cc1 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Fri, 26 Apr 2019 13:41:40 +1000
Subject: [PATCH] disabled form

---
 client/cryps.css                               | 11 ++++++-----
 client/src/components/instance.create.form.jsx |  8 +++++++-
 client/src/components/menu.component.jsx       |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index ef408aa0..e28cda97 100644
--- a/client/cryps.css
+++ b/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;
 }
diff --git a/client/src/components/instance.create.form.jsx b/client/src/components/instance.create.form.jsx
index 3e9cc9d0..f8b5f8cb 100644
--- a/client/src/components/instance.create.form.jsx
+++ b/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>
diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx
index 3dfcfeba..0e5177dd 100644
--- a/client/src/components/menu.component.jsx
+++ b/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