diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index d81509c0..a55a976a 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.css @@ -473,30 +473,17 @@ header { display: flex; flex-flow: row wrap; - border: 2px solid #333; padding: 1em; margin-bottom: 1.5em; } -.create-form form { - margin: 0; - flex: 1 1 50%; -} - -.create-form .login-input { - width: 50%; -} - -.create-form.disabled { - border: 2px solid #222; - color: #222; -} - .create-form button { - flex: 0 1 25%; + flex: 1; font-size: 1.5em; - border-color: #444; - background-color: #333; +} + +.create-form button:first-child { + margin-right: 1em; } .create-form button:hover, .create-form button:focus { diff --git a/client/src/components/instance.create.buttons.jsx b/client/src/components/instance.create.buttons.jsx new file mode 100644 index 00000000..82efa245 --- /dev/null +++ b/client/src/components/instance.create.buttons.jsx @@ -0,0 +1,46 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); +const { Component } = require('preact'); + +const addState = connect( + function receiveState(state) { + const { ws, team, account } = state; + + function sendInstanceNew(sConstructs, pve) { + if (sConstructs.length) { + return ws.sendInstanceNew(sConstructs, account.name, pve); + } + return false; + } + + return { + sendInstanceNew, + team, + }; + } +); + +function CreateButtons(args) { + const { team, sendInstanceNew } = args; + const disabled = !team.every(c => c); + + const classes = `create-form ${disabled ? 'disabled' : ''}`; + return ( +
+ + +
+ ); +} + +module.exports = addState(CreateButtons); diff --git a/client/src/components/list.jsx b/client/src/components/list.jsx index c5d62a4c..60b9034c 100644 --- a/client/src/components/list.jsx +++ b/client/src/components/list.jsx @@ -4,7 +4,7 @@ const preact = require('preact'); const { stringSort, NULL_UUID, COLOURS } = require('./../utils'); const { ConstructAvatar } = require('./construct'); const actions = require('./../actions'); -const InstanceCreateForm = require('./instance.create.form'); +const InstanceCreateForm = require('./instance.create.buttons'); const idSort = stringSort('id');