1 files changed, 71 insertions, 45 deletions

diff --git a/web/react/components/team_settings_modal.jsx b/web/react/components/team_settings_modal.jsx
index 7e65e8cab..668bf76cf 100644
--- a/web/react/components/team_settings_modal.jsx
+++ b/web/react/components/team_settings_modal.jsx
@@ -1,70 +1,96 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var SettingsSidebar = require('./settings_sidebar.jsx');
-var TeamSettings = require('./team_settings.jsx');
+const SettingsSidebar = require('./settings_sidebar.jsx');
+const TeamSettings = require('./team_settings.jsx');
 
-module.exports = React.createClass({
-    displayName: 'Team Settings Modal',
-    propTypes: {
-        teamDisplayName: React.PropTypes.string.isRequired
-    },
-    componentDidMount: function() {
-        $('body').on('click', '.modal-back', function onClick() {
+export default class TeamSettingsModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.updateTab = this.updateTab.bind(this);
+        this.updateSection = this.updateSection.bind(this);
+
+        this.state = {
+            activeTab: 'general',
+            activeSection: ''
+        };
+    }
+    componentDidMount() {
+        $('body').on('click', '.modal-back', function handleBackClick() {
             $(this).closest('.modal-dialog').removeClass('display--content');
         });
-        $('body').on('click', '.modal-header .close', function onClick() {
+        $('body').on('click', '.modal-header .close', function handleCloseClick() {
             setTimeout(function removeContent() {
                 $('.modal-dialog.display--content').removeClass('display--content');
             }, 500);
         });
-    },
-    updateTab: function(tab) {
+    }
+    updateTab(tab) {
         this.setState({activeTab: tab, activeSection: ''});
-    },
-    updateSection: function(section) {
+    }
+    updateSection(section) {
         this.setState({activeSection: section});
-    },
-    getInitialState: function() {
-        return {activeTab: 'general', activeSection: ''};
-    },
-    render: function() {
-        var tabs = [];
+    }
+    render() {
+        let tabs = [];
         tabs.push({name: 'general', uiName: 'General', icon: 'glyphicon glyphicon-cog'});
         tabs.push({name: 'import', uiName: 'Import', icon: 'glyphicon glyphicon-upload'});
         tabs.push({name: 'feature', uiName: 'Advanced', icon: 'glyphicon glyphicon-wrench'});
 
         return (
-            <div className='modal fade' ref='modal' id='team_settings' role='dialog' tabIndex='-1' aria-hidden='true'>
-              <div className='modal-dialog settings-modal'>
-                <div className='modal-content'>
-                  <div className='modal-header'>
-                    <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
-                    <h4 className='modal-title' ref='title'>Team Settings</h4>
-                  </div>
-                  <div className='modal-body'>
-                    <div className='settings-table'>
-                        <div className='settings-links'>
-                            <SettingsSidebar
-                                tabs={tabs}
-                                activeTab={this.state.activeTab}
-                                updateTab={this.updateTab}
-                            />
+            <div
+                className='modal fade'
+                ref='modal'
+                id='team_settings'
+                role='dialog'
+                tabIndex='-1'
+                aria-hidden='true'
+            >
+                <div className='modal-dialog settings-modal'>
+                    <div className='modal-content'>
+                        <div className='modal-header'>
+                            <button
+                                type='button'
+                                className='close'
+                                data-dismiss='modal'
+                                aria-label='Close'
+                            >
+                                <span aria-hidden='true'>&times;</span>
+                            </button>
+                            <h4
+                                className='modal-title'
+                                ref='title'
+                            >
+                                Team Settings
+                            </h4>
                         </div>
-                        <div className='settings-content minimize-settings'>
-                            <TeamSettings
-                                activeTab={this.state.activeTab}
-                                activeSection={this.state.activeSection}
-                                updateSection={this.updateSection}
-                                teamDisplayName={this.props.teamDisplayName}
-                            />
+                        <div className='modal-body'>
+                            <div className='settings-table'>
+                                <div className='settings-links'>
+                                    <SettingsSidebar
+                                        tabs={tabs}
+                                        activeTab={this.state.activeTab}
+                                        updateTab={this.updateTab}
+                                    />
+                                </div>
+                                <div className='settings-content minimize-settings'>
+                                    <TeamSettings
+                                        activeTab={this.state.activeTab}
+                                        activeSection={this.state.activeSection}
+                                        updateSection={this.updateSection}
+                                        teamDisplayName={this.props.teamDisplayName}
+                                    />
+                                </div>
+                            </div>
                         </div>
                     </div>
-                  </div>
                 </div>
-              </div>
             </div>
         );
     }
-});
+}
 
+TeamSettingsModal.propTypes = {
+    teamDisplayName: React.PropTypes.string.isRequired
+};