Fix titles and tab colors for actors

website/src/Users/UserList.js

@@ -35,7 +35,7 @@ export class UserList extends React.Component {
             {
             this.state.users
             ? this.state.users.map((user, index) =>
-              (<List.Item className='user-list-item' key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
+              (<List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
                 active={user === this.props.selectedUser}>
                 <List.Icon name={user.administrator ? 'admin' : 'profile'} size={25} />
                 <List.Text>
@@ -50,7 +50,7 @@ export class UserList extends React.Component {
         </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' />
+          <Button width='100%' color='inverse' onClick={this.props.onAddNewUser} text='Add New User' />
         </Column.Item>
       </Column>
     )

website/src/Users/Users.js

@@ -24,7 +24,7 @@ export class Users extends Component {
       yesNoModal: null,
       messageModal: null,
       waitModal: null,
-      changeEmailModal: null
+      changeEmailModal: null,
     }
   }
 
@@ -45,7 +45,7 @@ export class Users extends Component {
     })
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     this.props.onChangeTitle('')
   }
 
@@ -119,7 +119,7 @@ export class Users extends Component {
   }
 
   handleChangeEmail() {
-    this.setState({ changeEmailModal: {} })
+    this.setState({ changeEmailModal: { oldEmail: this.state.selectedUser.email } })
   }
 
   handleResendEmail() {
@@ -139,7 +139,7 @@ export class Users extends Component {
         error: true,
         waitModal: null,
         messageModal: {
-          error: 'hand',
+          icon: 'hand',
           message: 'Unable to request email change.',
           detail: error.message,
         }
@@ -155,25 +155,27 @@ export class Users extends Component {
     this.setState({
       waitModal: { message: 'Requesting Email Change...' }
     })
-    api.sendConfirmEmail({ existingEmail: this.state.selectedUser.email, newEmail }).then(() => {
-      this.setState({
-        waitModal: null,
-        messageModal: {
-          icon: 'hand',
-          message: `An email has been sent to '${newEmail}' to confirm this email.`
-        }
+    if (this.state.selectedUser) {
+      api.sendConfirmEmail({ existingEmail: this.state.selectedUser.email, newEmail }).then(() => {
+        this.setState({
+          waitModal: null,
+          messageModal: {
+            icon: 'hand',
+            message: `An email has been sent to '${newEmail}' to confirm this email.`
+          }
+        })
+      }).catch((error) => {
+        this.setState({
+          error: true,
+          waitModal: null,
+          messageModal: {
+            icon: 'hand',
+            message: 'Unable to request email change.',
+            detail: error.message,
+          }
+        })
       })
-    }).catch((error) => {
-      this.setState({
-        error: true,
-        waitModal: null,
-        messageModal: {
-          icon: 'hand',
-          message: 'Unable to request email change.',
-          detail: error.message,
-        }
-      })
-    })
+    }
   }
 
   handleRemove() {
@@ -247,7 +249,7 @@ export class Users extends Component {
   }
 
   render() {
-    const { messageModal, yesNoModal } = this.state
+    const { messageModal, yesNoModal, changeEmailModal } = this.state
 
     return (
       <Fragment>
@@ -276,17 +278,19 @@ export class Users extends Component {
           </Row>
         </Column.Item>
         <Column.Item height={20}>
-          <ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
+          <ChangeEmailModal open={!!changeEmailModal}
+            oldEmail={changeEmailModal && changeEmailModal.oldEmail}
+            onDismiss={this.handleChangeEmailDismiss} />
 
           <YesNoMessageModal open={!!yesNoModal}
             question={yesNoModal ? yesNoModal.question : ''}
-            onDismiss={yesNoModal ? yesNoModal.onDismiss : null} />
+            onDismiss={yesNoModal && yesNoModal.onDismiss} />
 
           <MessageModal
             open={!!messageModal}
             icon={messageModal ? messageModal.icon : ''}
             message={messageModal ? messageModal.message : ''}
-            detail={messageModal ? messageModal.detail : null}
+            detail={messageModal && messageModal.detail}
             onDismiss={this.handleMessageModalDismiss} />
 
           <WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />