diff --git a/frontend/package.json b/frontend/package.json index 9a9bf065..8baf1065 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -53,6 +53,7 @@ "redux-thunk": "^2.1.0", "require-hacker": "^2.1.4", "reselect": "^2.5.4", + "style-loader": "^0.13.1", "styled-components": "^1.3.0", "svg-react-loader": "^0.3.7", "understood": "^1.0.1", diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js index 4a49bf62..3c3bdd1f 100644 --- a/frontend/src/components/people-list/invite.js +++ b/frontend/src/components/people-list/invite.js @@ -1,19 +1,38 @@ const React = require('react'); +const styled = require('styled-components'); const Row = require('@ui/components/row'); const Column = require('@ui/components/column'); const Button = require('@ui/components/button'); +const { + default: Styled +} = styled; + // TOOD: Require from UI Components - causes issue ATM. const Select = require('react-select'); require('react-select/dist/react-select.css'); +const SelectWrapper = Styled.div` + + .Select-menu-outer { + margin-top: 48px; + } + + .Select-arrow { + position: relative; + top: -4px; + } +`; + const Invite = React.createClass({ propTypes: { + addMemember: React.PropTypes.func, // UI: React.PropTypes.object, handleToggle: React.PropTypes.func, // people: React.PropTypes.array, + parentIndex: React.PropTypes.number, platformMembers: React.PropTypes.array, }, @@ -31,6 +50,26 @@ const Invite = React.createClass({ })); }, + handleSubmit(e) { + e.preventDefault(); + + const data = { + member: { + name: this.state.selectValue.label, + email: this.state.selectValue.value, + role: 'Unassigned', + status: 'Sent invitation', + }, + parentIndex: this.props.parentIndex, + }; + + this.props.addMemember(data, () => { + this.setState({ + selectValue: '' + }); + }); + }, + render() { const { @@ -41,7 +80,10 @@ const Invite = React.createClass({ const InputStyle = { float: 'left', - width: '75%' + width: '75%', + minHeight: '50px', + marginBottom: '20px', + paddingTop: '10px' }; const AddButtonStyle = { @@ -69,21 +111,26 @@ const Invite = React.createClass({ - {/*TODO: Fix why there are issues with webpack and nodemodules*/} -