Fix routing issues. Fix panel layout.

website/src/Profile/Profile.js

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { Fragment, Component } from 'react'
 import { ProfileForm } from './ProfileForm'
 import { api } from 'src/API'
 import { WaitModal, MessageModal, ChangePasswordModal, ChangeEmailModal } from '../Modal'
+import { Column, Row } from 'ui'
+import { sizeInfo } from 'ui/style'
 import autobind from 'autobind-decorator'
 
-export class Profile extends React.Component {
+export class Profile extends Component {
   constructor(props) {
     super(props)
 
@@ -129,26 +131,37 @@ export class Profile extends React.Component {
 
   render() {
     return (
-      <div>
-        <ProfileForm
-          user={this.state.user}
-          onSaved={this.handleSaved}
-          onSelectImage={this.handleSelectImage}
-          onChangePassword={this.handleChangePassword}
-          onChangeEmail={this.handleChangeEmail}
-          userImageUrl={this.state.userImageUrl} />
+      <Fragment>
+        <Column.Item grow />
+        <Column.Item>
+          <Row>
+            <Row.Item grow />
+            <Row.Item width={sizeInfo.modalWidth}>
+              <ProfileForm
+                user={this.state.user}
+                onSaved={this.handleSaved}
+                onSelectImage={this.handleSelectImage}
+                onChangePassword={this.handleChangePassword}
+                onChangeEmail={this.handleChangeEmail}
+                userImageUrl={this.state.userImageUrl} />
+            </Row.Item>
+            <Row.Item grow />
+          </Row>
+        </Column.Item>
+        <Column.Item>
+          <MessageModal error open={!!this.state.messageModal}
+            title={this.state.messageModal ? this.state.messageModal.title : ''}
+            message={this.state.messageModal ? this.state.messageModal.message : ''}
+            onDismiss={this.handleMessageModalDismiss} />
 
-        <MessageModal error open={!!this.state.messageModal}
-          title={this.state.messageModal ? this.state.messageModal.title : ''}
-          message={this.state.messageModal ? this.state.messageModal.message : ''}
-          onDismiss={this.handleMessageModalDismiss} />
+          <ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
 
-        <ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
+          <WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
 
-        <WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
-
-        <ChangePasswordModal open={!!this.state.changePasswordModal} onDismiss={this.handleChangePasswordDismiss} />
-      </div>
+          <ChangePasswordModal open={!!this.state.changePasswordModal} onDismiss={this.handleChangePasswordDismiss} />
+        </Column.Item>
+        <Column.Item grow />
+      </Fragment>
     )
   }
 }

website/src/Profile/ProfileForm.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Column, Button, BoundInput, BoundButton } from 'ui'
+import { Column, Row, Box, Button, BoundInput, BoundButton } from 'ui'
+import { sizeInfo, colorInfo } from 'ui/style'
 import { regExpPattern } from 'regexp-pattern'
 import { FormBinder } from 'react-form-binder'
 import autobind from 'autobind-decorator'
@@ -90,32 +91,39 @@ export class ProfileForm extends React.Component {
   }
 
   render() {
+    const { binder } = this.state
+
     return (
       <form onSubmit={this.handleSubmit} id='profileForm'>
-        <Column stackable>
-          <Column.Item>
-            <BoundInput label='First Name' name='firstName'
-              binder={this.state.binder} />
-          </Column.Item>
-          <Column.Item>
-            <BoundInput label='Last Name' name='lastName'
-              binder={this.state.binder} />
-          </Column.Item>
-          <Column.Item>
-            <BoundInput label='Email' name='email' message='Required. Must be a valid email address.'
-              binder={this.state.binder} />
-          </Column.Item>
-          <Column.Item>
-            <Button fluid content={'Change Email'} label='&nbsp;'
-              onClick={this.props.onChangeEmail} />
-            <Button fluid content={'Change Password'} label='&nbsp;'
-              onClick={this.props.onChangePassword} />
-          </Column.Item>
-          <Column.Item>
-            <BoundButton submit primary size='medium' content='Save' label='&nbsp;' name='save'
-              binder={this.state.binder} />
-          </Column.Item>
-        </Column>
+        <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
+          <Row>
+            <Row.Item width={sizeInfo.formRowSpacing} />
+            <Row.Item>
+              <Column stackable>
+                <Column.Item>
+                  <BoundInput label='First Name' name='firstName'
+                    binder={binder} />
+                </Column.Item>
+                <Column.Item>
+                  <BoundInput label='Last Name' name='lastName'
+                    binder={binder} />
+                </Column.Item>
+                <Column.Item>
+                  <BoundInput label='Email' name='email' message='Required. Must be a valid email address.'
+                    binder={binder} />
+                </Column.Item>
+                <Column.Item>
+                  <Button text={'Change Email'} label='&nbsp;'
+                    onClick={this.props.onChangeEmail} />
+                  <Button text={'Change Password'} label='&nbsp;'
+                    onClick={this.props.onChangePassword} />
+                  <BoundButton submit size='medium' text='Save' label='&nbsp;' name='save'
+                    binder={binder} />
+                </Column.Item>
+              </Column>
+            </Row.Item>
+          </Row>
+        </Box>
       </form>
     )
   }