Fix a bunch of layout issues

website/src/Dialog/ChangeEmailDialog.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { autoBind } from 'auto-bind2'
-import { Modal, Button, Icon, StackLayout, Text } from '../ui'
+import { Modal, Button, Icon, Column, Text } from '../ui'
 import { ValidatedInput, ValidatedButton, Validator } from '../Validated'
 import { regExpPattern } from 'regexp-pattern'
 
@@ -58,24 +58,24 @@ export class ChangeEmailDialog extends React.Component {
       <Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose}
         closeOnDimmerClick={false}>
         <form className='user-form' id='emailForm' onSubmit={this.handleSubmit}>
-          <StackLayout>
-            <StackLayout.Item>
+          <Column>
+            <Column.Item>
               <Text>Change Email</Text>
-            </StackLayout.Item>
-            <StackLayout.Item>
+            </Column.Item>
+            <Column.Item>
               <ValidatedInput label='New Email' name='newEmail' width={16}
                 message='Your new email address, e.g. xyz@abc.com, cannot be blank'
                 validator={this.state.validator} />
-            </StackLayout.Item>
-            <StackLayout.Item>
+            </Column.Item>
+            <Column.Item>
               <ValidatedButton primary submit form='emailForm' name='submit' validator={this.state.validator}>
                 <Icon name='checkmark' /> OK
                 </ValidatedButton>
               <Button color='red' onClick={this.handleClick}>
                 <Icon name='close' /> Cancel
               </Button>
-            </StackLayout.Item>
-          </StackLayout>
+            </Column.Item>
+          </Column>
         </form>
       </Modal>
     )