diff --git a/website/src/Users/UserForm.js b/website/src/Users/UserForm.js index 2c89459..e2be202 100644 --- a/website/src/Users/UserForm.js +++ b/website/src/Users/UserForm.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types' import { reactAutoBind } from 'auto-bind2' import { regExpPattern } from 'regexp-pattern' import { api } from 'src/API' -import { Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui' +import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui' import { FormBinder } from 'react-form-binder' +import { sizeInfo } from 'ui/style' export class UserForm extends React.Component { static propTypes = { @@ -28,15 +29,19 @@ export class UserForm extends React.Component { nonValue: true, isDisabled: (r) => (!!r._id === false) }, + resendEmail: { + nonValue: true, + isDisabled: (r) => (!!r._id === false) + }, firstName: { isValid: (r, v) => (v !== '') }, lastName: { isValid: (r, v) => (v !== '') }, - role: { + administrator: { isValid: (r, v) => (v !== ''), - isDisabled: (r) => (api.loggedInUser._id === r._id) + isDisabled: (r) => (api.loggedInUser._id === r._id) // Adding a new user }, project: { isValid: (r, v) => (v !== '' || v === '') @@ -99,40 +104,79 @@ export class UserForm extends React.Component { } render() { - return ( -
- - - - - - - - - - - - - - - - - + const { binder } = this.state - - - - - + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) diff --git a/website/src/Users/UserList.js b/website/src/Users/UserList.js index 75094ce..4fd257b 100644 --- a/website/src/Users/UserList.js +++ b/website/src/Users/UserList.js @@ -44,7 +44,7 @@ export class UserList extends React.Component { this.state.users ? this.state.users.map((user, index) => ( + active={user === this.props.selectedUser} data-index={index}> { user._id ? user.firstName + ' ' + user.lastName : '[New User]' } diff --git a/website/src/ui/BoundEmailIcon.js b/website/src/ui/BoundEmailIcon.js index 775211c..20e5eaf 100644 --- a/website/src/ui/BoundEmailIcon.js +++ b/website/src/ui/BoundEmailIcon.js @@ -1,42 +1,33 @@ import React from 'react' import PropTypes from 'prop-types' -import { Text, Button, Icon } from 'ui' +import { Text, Icon } from 'ui' export default class BoundEmailIcon extends React.Component { static propTypes = { name: PropTypes.string, binder: PropTypes.object, - width: PropTypes.number, - onClick: PropTypes.func } constructor(props) { super(props) - this.state = props.binder.getField('emailValidated') + this.state = props.binder.getFieldState(props.name) } componentWillReceiveProps(nextProps) { if (nextProps.binder !== this.props.binder) { - this.setState(nextProps.binder.getField(nextProps.name)) + this.setState(nextProps.binder.getFieldState(nextProps.name)) } } render() { - if (this.state.value) { - return ( -
-   - -
- ) - } else { - return ( -
-   -
- ) - } + // const { value } = this.state + + return ( +
+   +
+ +
+ ) } } diff --git a/website/src/ui/Button.js b/website/src/ui/Button.js index 9408aeb..cab6c5a 100644 --- a/website/src/ui/Button.js +++ b/website/src/ui/Button.js @@ -1,8 +1,7 @@ import Radium from 'radium' import PropTypes from 'prop-types' import React, { Component } from 'react' -import style from './Button.style' -import { sizeInfo } from './style' +import { colorInfo, sizeInfo } from './style' import { Text } from '.' class Button extends Component { @@ -21,13 +20,34 @@ class Button extends Component { disabled: false, } + static style = { + button: { + height: sizeInfo.buttonHeight, + borderRadius: 10, + background: colorInfo.buttonBackgroundHover, + verticalAlign: 'middle', + padding: '0 15px 0 15px', + outline: 'none', + ':hover': { + background: colorInfo.buttonBackground, + }, + ':disabled': { + background: colorInfo.disabledButtonBackground, + }, + ':active': { + borderWidth: 0, + background: colorInfo.buttonBackgroundActive, + } + } + } + render() { const { name, submit, visible, disabled, width, text, onClick } = this.props return ( diff --git a/website/src/ui/Button.style.js b/website/src/ui/Button.style.js deleted file mode 100644 index 91afc60..0000000 --- a/website/src/ui/Button.style.js +++ /dev/null @@ -1,22 +0,0 @@ -import { colorInfo } from './style' - -export default { - base: { - height: '100%', - borderRadius: 10, - background: colorInfo.buttonBackgroundHover, - verticalAlign: 'middle', - padding: '0 15px 0 15px', - outline: 'none', - ':hover': { - background: colorInfo.buttonBackground, - }, - ':disabled': { - background: colorInfo.disabledButtonBackground, - }, - ':active': { - borderWidth: 0, - background: colorInfo.buttonBackgroundActive, - } - } -} diff --git a/website/src/ui/Checkbox.js b/website/src/ui/Checkbox.js index cad79e1..5a6987f 100644 --- a/website/src/ui/Checkbox.js +++ b/website/src/ui/Checkbox.js @@ -1,9 +1,8 @@ import Radium from 'radium' import PropTypes from 'prop-types' import React, { Component } from 'react' -import style from './Checkbox.style' import { reactAutoBind } from 'auto-bind2' -import { fontInfo } from './style' +import { fontInfo, colorInfo, sizeInfo } from './style' class Checkbox extends Component { static propTypes = { @@ -14,6 +13,58 @@ class Checkbox extends Component { name: PropTypes.string, } + static style = { + checkbox: { + position: 'relative', + display: 'inline-block', + cursor: 'pointer', + backgroundColor: colorInfo.buttonBackground, + height: sizeInfo.checkboxSize, + width: sizeInfo.checkboxSize, + ':hover': { + backgroundColor: colorInfo.buttonBackgroundHover + } + }, + + input: { + position: 'absolute', + opacity: 0, + cursor: 'pointer', + }, + + checkboxUnchecked: { + backgroundColor: colorInfo.uncheckedCheckbox, + ':hover': { + backgroundColor: colorInfo.uncheckedCheckboxHover, + } + }, + + checkboxDisabled: { + backgroundColor: colorInfo.disabledButtonBackground, + }, + + checkmark: { + position: 'absolute', + content: '', + left: 8, + top: 4, + width: 6, + height: 12, + borderStyle: 'solid', + borderColor: '#FFFFFF', + borderWidth: '0 3px 3px 0', + transform: 'rotate(45deg)', + }, + + checkmarkUnchecked: { + display: 'none' + }, + + label: { + marginLeft: 10, + } + } + constructor(props) { super(props) reactAutoBind(this) @@ -32,14 +83,14 @@ class Checkbox extends Component { return (
-
- -
+ +