Selectable List in place

website/src/Users/UserFormPlaceholder.js

@@ -1,8 +1,14 @@
 import React from 'react'
+import { Column, Text } from 'ui'
 
 export const UserFormPlaceholder = () => (
-  <div className='user-form-placeholder'>
-    <h3>Select a registered user to view details here</h3>
-    <h5>Or 'Add New User'</h5>
-  </div>
+  <Column fillParent>
+    <Column.Item grow />
+    <Column.Item>
+      <Text size='large' align='center' width='100%'>Select a registered user to view details here</Text>
+      <br />
+      <Text size='small' align='center' width='100%'>Or 'Add New User'</Text>
+    </Column.Item>
+    <Column.Item grow />
+  </Column>
 )

website/src/Users/UserList.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { List, Icon, Button } from 'ui'
+import { Column, List, Button } from 'ui'
+import { sizeInfo } from 'ui/style'
 
 export class UserList extends React.Component {
   static propTypes = {
@@ -20,8 +21,6 @@ export class UserList extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    // This ensures that the original list is populated with 'all' by default,
-    // due to the component mounting before users are returned (by api)
     if (nextProps.users !== this.props.users) {
       this.setState({ users: nextProps.users })
     }
@@ -38,26 +37,30 @@ export class UserList extends React.Component {
 
   render() {
     return (
-      <div>
-        <List className='user-list' selection>
-          {
-          this.state.users
-          ? this.state.users.map((user, index) =>
-            (<List.Item className='user-list-item' key={user._id || '0'} onClick={this.props.onUserListClick}
-              active={user === this.props.selectedUser} data-index={index}>
-              <Icon name='profile' size={20} />
-              <List.Content>
-                { user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
-                { user === this.props.selectedUser && this.props.selectionModified ? <Icon className='user-update'
-                  name='edit' /> : null }
-              </List.Content>
-            </List.Item>)
-          )
-          : null
-          }
-        </List>
-        <Button className='add-new-user' content='Add New User' primary onClick={this.props.onAddNewUser} />
-      </div>
+      <Column fillParent>
+        <Column.Item grow>
+          <List>
+            {
+            this.state.users
+            ? this.state.users.map((user, index) =>
+              (<List.Item className='user-list-item' key={user._id || '0'} onClick={this.props.onUserListClick}
+                active={true || user === this.props.selectedUser} data-index={index}>
+                <List.Icon name='profile' size={30} />
+                <List.Text>
+                  { user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
+                </List.Text>
+                { user === this.props.selectedUser && this.props.selectionModified ? <List.Icon className='user-update' name='edit' /> : null }
+              </List.Item>)
+            )
+            : null
+            }
+          </List>
+        </Column.Item>
+        <Column.Item height={20} />
+        <Column.Item height={sizeInfo.buttonHeight}>
+          <Button className='add-new-user' width='100%' color='inverse' onClick={this.props.onAddNewUser} text='Add New User' />
+        </Column.Item>
+      </Column>
     )
   }
 }

website/src/Users/Users.js

@@ -1,13 +1,14 @@
-import React from 'react'
+import React, { Component, Fragment } from 'react'
 import { reactAutoBind } from 'auto-bind2'
 import { UserList } from './UserList'
 import { UserForm } from './UserForm'
 import { UserFormPlaceholder } from './UserFormPlaceholder'
 import { api } from 'src/API'
-import { Row } from 'ui'
+import { Row, Column, Box } from 'ui'
 import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '../Modal'
+import { sizeInfo, colorInfo } from 'ui/style'
 
-export class Users extends React.Component {
+export class Users extends Component {
   constructor() {
     super()
     reactAutoBind(this)
@@ -236,42 +237,53 @@ export class Users extends React.Component {
   }
 
   render() {
+    const { messageModal } = this.state
+
     return (
-      <div>
-        <div>Users</div>
-        <Row>
-          <Row.Item width={5}>
-            <UserList users={this.state.users} selectedUser={this.state.selectedUser}
-              selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
-              onAddNewUser={this.handleAddNewUser} />
-          </Row.Item>
-          <Row.Item>
-            {
-              this.state.selectedUser
-              ? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
-                onRemove={this.handleRemove} onModifiedChanged={this.handleModifiedChanged}
-                onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
-              : <UserFormPlaceholder />
-            }
-          </Row.Item>
-        </Row>
+      <Fragment>
+        <Column.Item height={20} />
+        <Column.Item grow>
+          <Row fillParent>
+            <Row.Item width={20} />
+            <Row.Item width='25vw'>
+              <UserList users={this.state.users} selectedUser={this.state.selectedUser}
+                selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
+                onAddNewUser={this.handleAddNewUser} />
+            </Row.Item>
+            <Row.Item width={20} />
+            <Row.Item grow>
+              <Box border={`${sizeInfo.headerBorderWidth}px solid ${colorInfo.headerBorder}`} radius={sizeInfo.formBoxRadius}>
+                {
+                  this.state.selectedUser
+                  ? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
+                    onRemove={this.handleRemove} onModifiedChanged={this.handleModifiedChanged}
+                    onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
+                  : <UserFormPlaceholder />
+                }
+              </Box>
+            </Row.Item>
+            <Row.Item width={20} />
+          </Row>
+        </Column.Item>
+        <Column.Item height={20}>
+          <ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
 
-        <ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
+          <YesNoMessageModal open={!!this.state.yesNoModal}
+            title={this.state.yesNoModal ? this.state.yesNoModal.title : ''}
+            message={this.state.yesNoModal ? this.state.yesNoModal.message : ''}
+            onDismiss={this.state.yesNoModal ? this.state.yesNoModal.onDismiss : null} />
 
-        <YesNoMessageModal open={!!this.state.yesNoModal}
-          title={this.state.yesNoModal ? this.state.yesNoModal.title : ''}
-          message={this.state.yesNoModal ? this.state.yesNoModal.message : ''}
-          onDismiss={this.state.yesNoModal ? this.state.yesNoModal.onDismiss : null} />
+          <MessageModal
+            open={!!messageModal}
+            icon={messageModal ? messageModal.icon : ''}
+            error={messageModal ? messageModal.error : false}
+            title={messageModal ? messageModal.title : ''}
+            message={messageModal ? messageModal.message : ''}
+            onDismiss={this.handleMessageModalDismiss} />
 
-        <MessageModal
-          open={!!this.state.messageModal}
-          error={this.state.messageModal ? this.state.messageModal.error : false}
-          title={this.state.messageModal ? this.state.messageModal.title : ''}
-          message={this.state.messageModal ? this.state.messageModal.message : ''}
-          onDismiss={this.handleMessageModalDismiss} />
-
-        <WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
-      </div>
+          <WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
+        </Column.Item>
+      </Fragment>
     )
   }
 }