From e0fca16b27b35d6d4303e5a76f10a689fdefcce3 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com>
Date: Fri, 3 Jun 2016 00:33:52 +0500
Subject: [PATCH] PLT-3010 - Updating system console (#3146)

* Updating system console

* Updating system console stuff

* Updating ldap settings
---
 .../admin_console/admin_sidebar.jsx           | 65 ++++++++++++-------
 .../admin_console/admin_sidebar_category.jsx  |  3 +-
 .../admin_console/admin_sidebar_section.jsx   | 32 +++++++--
 .../admin_console/configuration_settings.jsx  | 13 +---
 .../admin_console/connection_settings.jsx     | 13 +---
 .../admin_console/custom_brand_settings.jsx   | 13 +---
 .../email_authentication_settings.jsx         | 13 +---
 .../admin_console/email_settings.jsx          | 13 +---
 .../external_service_settings.jsx             | 13 +---
 .../admin_console/generated_setting.jsx       | 16 +++--
 .../admin_console/gitlab_settings.jsx         | 13 +---
 .../admin_console/image_settings.jsx          | 13 +---
 .../admin_console/ldap_settings.jsx           | 14 +---
 .../legal_and_support_settings.jsx            | 13 +---
 .../components/admin_console/log_settings.jsx | 14 +---
 .../admin_console/login_settings.jsx          | 13 +---
 .../admin_console/privacy_settings.jsx        | 13 +---
 .../admin_console/public_link_settings.jsx    | 13 +---
 .../admin_console/session_settings.jsx        | 13 +---
 .../admin_console/signup_settings.jsx         | 13 +---
 .../admin_console/storage_settings.jsx        | 13 +---
 .../users_and_teams_settings.jsx              | 13 +---
 .../admin_console/webhook_settings.jsx        | 13 +---
 webapp/i18n/en.json                           |  1 +
 webapp/root.jsx                               | 35 +++++-----
 webapp/sass/components/_buttons.scss          | 12 ++++
 webapp/sass/routes/_admin-console.scss        | 37 +++++++++--
 27 files changed, 199 insertions(+), 251 deletions(-)

diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index cdb7e29d53..19a6316b69 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -265,6 +265,7 @@ export default class AdminSidebar extends React.Component {
                             />
                         </AdminSidebarCategory>
                         <AdminSidebarCategory
+                            sectionClass='sections--settings'
                             parentLink='/admin_console'
                             icon='fa-gear'
                             title={
@@ -276,6 +277,7 @@ export default class AdminSidebar extends React.Component {
                         >
                             <AdminSidebarSection
                                 name='general'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.general'
@@ -310,6 +312,7 @@ export default class AdminSidebar extends React.Component {
                                         />
                                     }
                                 />
+                                {complianceSettings}
                                 <AdminSidebarSection
                                     name='logging'
                                     title={
@@ -322,6 +325,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='authentication'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.authentication'
@@ -351,6 +355,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='security'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.security'
@@ -406,6 +411,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='notifications'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.notifications'
@@ -434,6 +440,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='integrations'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.integrations'
@@ -460,17 +467,9 @@ export default class AdminSidebar extends React.Component {
                                     }
                                 />
                             </AdminSidebarSection>
-                            <AdminSidebarSection
-                                name='database'
-                                title={
-                                    <FormattedMessage
-                                        id='admin.sidebar.database'
-                                        defaultMessage='Database'
-                                    />
-                                }
-                            />
                             <AdminSidebarSection
                                 name='files'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.files'
@@ -499,6 +498,7 @@ export default class AdminSidebar extends React.Component {
                             </AdminSidebarSection>
                             <AdminSidebarSection
                                 name='customization'
+                                type='text'
                                 title={
                                     <FormattedMessage
                                         id='admin.sidebar.customization'
@@ -526,25 +526,44 @@ export default class AdminSidebar extends React.Component {
                                     }
                                 />
                             </AdminSidebarSection>
-                            {complianceSettings}
                             <AdminSidebarSection
-                                name='rate'
+                                name='advanced'
+                                type='text'
                                 title={
                                     <FormattedMessage
-                                        id='admin.sidebar.rate'
-                                        defaultMessage='Rate Limiting'
+                                        id='admin.sidebar.advanced'
+                                        defaultMessage='Advanced'
                                     />
                                 }
-                            />
-                            <AdminSidebarSection
-                                name='developer'
-                                title={
-                                    <FormattedMessage
-                                        id='admin.sidebar.developer'
-                                        defaultMessage='Developer'
-                                    />
-                                }
-                            />
+                            >
+                                <AdminSidebarSection
+                                    name='rate'
+                                    title={
+                                        <FormattedMessage
+                                            id='admin.sidebar.rate'
+                                            defaultMessage='Rate Limiting'
+                                        />
+                                    }
+                                />
+                                <AdminSidebarSection
+                                    name='database'
+                                    title={
+                                        <FormattedMessage
+                                            id='admin.sidebar.database'
+                                            defaultMessage='Database'
+                                        />
+                                    }
+                                />
+                                <AdminSidebarSection
+                                    name='developer'
+                                    title={
+                                        <FormattedMessage
+                                            id='admin.sidebar.developer'
+                                            defaultMessage='Developer'
+                                        />
+                                    }
+                                />
+                            </AdminSidebarSection>
                         </AdminSidebarCategory>
                         {this.renderTeams()}
                         <AdminSidebarCategory
diff --git a/webapp/components/admin_console/admin_sidebar_category.jsx b/webapp/components/admin_console/admin_sidebar_category.jsx
index c31c84ff7f..9f56d626b7 100644
--- a/webapp/components/admin_console/admin_sidebar_category.jsx
+++ b/webapp/components/admin_console/admin_sidebar_category.jsx
@@ -11,6 +11,7 @@ export default class AdminSidebarCategory extends React.Component {
             name: React.PropTypes.string,
             title: React.PropTypes.node.isRequired,
             icon: React.PropTypes.string.isRequired,
+            sectionClass: React.PropTypes.string,
             parentLink: React.PropTypes.string,
             children: React.PropTypes.node,
             action: React.PropTypes.node
@@ -57,7 +58,7 @@ export default class AdminSidebarCategory extends React.Component {
         let clonedChildren = null;
         if (this.props.children && this.context.router.isActive(link)) {
             clonedChildren = (
-                <ul className='sections'>
+                <ul className={'sections ' + this.props.sectionClass}>
                     {
                         React.Children.map(this.props.children, (child) => {
                             if (child === null) {
diff --git a/webapp/components/admin_console/admin_sidebar_section.jsx b/webapp/components/admin_console/admin_sidebar_section.jsx
index 0492745ca3..56e5206290 100644
--- a/webapp/components/admin_console/admin_sidebar_section.jsx
+++ b/webapp/components/admin_console/admin_sidebar_section.jsx
@@ -10,6 +10,7 @@ export default class AdminSidebarSection extends React.Component {
         return {
             name: React.PropTypes.string.isRequired,
             title: React.PropTypes.node.isRequired,
+            type: React.PropTypes.string,
             parentLink: React.PropTypes.string,
             subsection: React.PropTypes.bool,
             children: React.PropTypes.arrayOf(React.PropTypes.element),
@@ -59,20 +60,39 @@ export default class AdminSidebarSection extends React.Component {
             className += ' sidebar-subsection';
         }
 
-        return (
-            <li className={className}>
-                <Link
+        let sidebarItem = (
+            <Link
+                className={`${className}-title`}
+                activeClassName={`${className}-title ${className}-title--active`}
+                onlyActiveOnIndex={this.props.onlyActiveOnIndex}
+                onClick={this.handleClick}
+                to={link}
+            >
+                <span className={`${className}-title__text`}>
+                    {this.props.title}
+                </span>
+                {this.props.action}
+            </Link>
+        );
+
+        if (this.props.type === 'text') {
+            sidebarItem = (
+                <div
                     className={`${className}-title`}
                     activeClassName={`${className}-title ${className}-title--active`}
                     onlyActiveOnIndex={this.props.onlyActiveOnIndex}
-                    onClick={this.handleClick}
-                    to={link}
                 >
                     <span className={`${className}-title__text`}>
                         {this.props.title}
                     </span>
                     {this.props.action}
-                </Link>
+                </div>
+            );
+        }
+
+        return (
+            <li className={className}>
+                {sidebarItem}
                 {clonedChildren}
             </li>
         );
diff --git a/webapp/components/admin_console/configuration_settings.jsx b/webapp/components/admin_console/configuration_settings.jsx
index 9521ed22ca..5934cf1410 100644
--- a/webapp/components/admin_console/configuration_settings.jsx
+++ b/webapp/components/admin_console/configuration_settings.jsx
@@ -34,8 +34,8 @@ export default class ConfigurationSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.general.title'
-                    defaultMessage='General Settings'
+                    id='admin.general.configuration'
+                    defaultMessage='Configuration'
                 />
             </h3>
         );
@@ -43,14 +43,7 @@ export default class ConfigurationSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.general.configuration'
-                        defaultMessage='Configuration'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <ReloadConfigButton/>
                 <TextSetting
                     id='listenAddress'
diff --git a/webapp/components/admin_console/connection_settings.jsx b/webapp/components/admin_console/connection_settings.jsx
index 59b32ec239..21563cb077 100644
--- a/webapp/components/admin_console/connection_settings.jsx
+++ b/webapp/components/admin_console/connection_settings.jsx
@@ -36,8 +36,8 @@ export default class ConnectionSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
-                    defaultMessage='Security Settings'
+                    id='admin.security.connection'
+                    defaultMessage='Connections'
                 />
             </h3>
         );
@@ -45,14 +45,7 @@ export default class ConnectionSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.security.connection'
-                        defaultMessage='Connections'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <TextSetting
                     id='allowCorsFrom'
                     label={
diff --git a/webapp/components/admin_console/custom_brand_settings.jsx b/webapp/components/admin_console/custom_brand_settings.jsx
index 307bbad8c5..c6fe1cfaef 100644
--- a/webapp/components/admin_console/custom_brand_settings.jsx
+++ b/webapp/components/admin_console/custom_brand_settings.jsx
@@ -41,8 +41,8 @@ export default class CustomBrandSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.customization.title'
-                    defaultMessage='Customization Settings'
+                    id='admin.customization.customBrand'
+                    defaultMessage='Custom Branding'
                 />
             </h3>
         );
@@ -104,14 +104,7 @@ export default class CustomBrandSettings extends AdminSettings {
         }
 
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.customization.customBrand'
-                        defaultMessage='Custom Branding'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <TextSetting
                     id='siteName'
                     label={
diff --git a/webapp/components/admin_console/email_authentication_settings.jsx b/webapp/components/admin_console/email_authentication_settings.jsx
index 2f5c423bf0..a49062eb6f 100644
--- a/webapp/components/admin_console/email_authentication_settings.jsx
+++ b/webapp/components/admin_console/email_authentication_settings.jsx
@@ -35,8 +35,8 @@ export default class EmailAuthenticationSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.authentication.title'
-                    defaultMessage='Authentication Settings'
+                    id='admin.authentication.email'
+                    defaultMessage='Email'
                 />
             </h3>
         );
@@ -44,14 +44,7 @@ export default class EmailAuthenticationSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.authentication.email'
-                        defaultMessage='Email'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='enableSignUpWithEmail'
                     label={
diff --git a/webapp/components/admin_console/email_settings.jsx b/webapp/components/admin_console/email_settings.jsx
index 5067b562b3..3c30668d23 100644
--- a/webapp/components/admin_console/email_settings.jsx
+++ b/webapp/components/admin_console/email_settings.jsx
@@ -52,8 +52,8 @@ export default class EmailSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.notifications.title'
-                    defaultMessage='Notification Settings'
+                    id='admin.notifications.email'
+                    defaultMessage='Email'
                 />
             </h3>
         );
@@ -61,14 +61,7 @@ export default class EmailSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.notifications.email'
-                        defaultMessage='Email'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='sendEmailNotifications'
                     label={
diff --git a/webapp/components/admin_console/external_service_settings.jsx b/webapp/components/admin_console/external_service_settings.jsx
index 88c6c28eac..aff64a0eb9 100644
--- a/webapp/components/admin_console/external_service_settings.jsx
+++ b/webapp/components/admin_console/external_service_settings.jsx
@@ -35,8 +35,8 @@ export default class ExternalServiceSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.integration.title'
-                    defaultMessage='Integration Settings'
+                    id='admin.integrations.external'
+                    defaultMessage='External Services'
                 />
             </h3>
         );
@@ -44,14 +44,7 @@ export default class ExternalServiceSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.integrations.external'
-                        defaultMessage='External Services'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <TextSetting
                     id='segmentDeveloperKey'
                     label={
diff --git a/webapp/components/admin_console/generated_setting.jsx b/webapp/components/admin_console/generated_setting.jsx
index 29bb96985d..cb12fcd3d6 100644
--- a/webapp/components/admin_console/generated_setting.jsx
+++ b/webapp/components/admin_console/generated_setting.jsx
@@ -83,13 +83,15 @@ export default class GeneratedSetting extends React.Component {
                     <div className='help-text'>
                         {this.props.helpText}
                     </div>
-                    <button
-                        className='btn btn-default'
-                        onClick={this.regenerate}
-                        disabled={this.props.disabled}
-                    >
-                        {this.props.regenerateText}
-                    </button>
+                    <div className='help-text'>
+                        <button
+                            className='btn btn-default'
+                            onClick={this.regenerate}
+                            disabled={this.props.disabled}
+                        >
+                            {this.props.regenerateText}
+                        </button>
+                    </div>
                 </div>
             </div>
         );
diff --git a/webapp/components/admin_console/gitlab_settings.jsx b/webapp/components/admin_console/gitlab_settings.jsx
index cc8f7cdcfd..48be597cad 100644
--- a/webapp/components/admin_console/gitlab_settings.jsx
+++ b/webapp/components/admin_console/gitlab_settings.jsx
@@ -44,8 +44,8 @@ export default class GitLabSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.authentication.title'
-                    defaultMessage='Authentication Settings'
+                    id='admin.authentication.gitlab'
+                    defaultMessage='GitLab'
                 />
             </h3>
         );
@@ -53,14 +53,7 @@ export default class GitLabSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.authentication.gitlab'
-                        defaultMessage='GitLab'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='enable'
                     label={
diff --git a/webapp/components/admin_console/image_settings.jsx b/webapp/components/admin_console/image_settings.jsx
index 86d8795cc1..42595a863c 100644
--- a/webapp/components/admin_console/image_settings.jsx
+++ b/webapp/components/admin_console/image_settings.jsx
@@ -43,8 +43,8 @@ export default class ImageSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.files.title'
-                    defaultMessage='File Settings'
+                    id='admin.files.images'
+                    defaultMessage='Images'
                 />
             </h3>
         );
@@ -52,14 +52,7 @@ export default class ImageSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.files.images'
-                        defaultMessage='Images'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <TextSetting
                     id='thumbnailWidth'
                     label={
diff --git a/webapp/components/admin_console/ldap_settings.jsx b/webapp/components/admin_console/ldap_settings.jsx
index 80c1a78674..e4fd7f6cc8 100644
--- a/webapp/components/admin_console/ldap_settings.jsx
+++ b/webapp/components/admin_console/ldap_settings.jsx
@@ -68,8 +68,8 @@ export default class LdapSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.authentication.title'
-                    defaultMessage='Authentication Settings'
+                    id='admin.authentication.ldap'
+                    defaultMessage='LDAP'
                 />
             </h3>
         );
@@ -82,15 +82,7 @@ export default class LdapSettings extends AdminSettings {
         }
 
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.authentication.ldap'
-                        defaultMessage='LDAP'
-                    />
-
-                }
-            >
+            <SettingsGroup>
                 <Banner
                     description={
                         <FormattedMessage
diff --git a/webapp/components/admin_console/legal_and_support_settings.jsx b/webapp/components/admin_console/legal_and_support_settings.jsx
index cc5bc3a2d5..318ce54468 100644
--- a/webapp/components/admin_console/legal_and_support_settings.jsx
+++ b/webapp/components/admin_console/legal_and_support_settings.jsx
@@ -41,8 +41,8 @@ export default class LegalAndSupportSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.customization.title'
-                    defaultMessage='Customization Settings'
+                    id='admin.customization.support'
+                    defaultMessage='Legal and Support'
                 />
             </h3>
         );
@@ -50,14 +50,7 @@ export default class LegalAndSupportSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.customization.support'
-                        defaultMessage='Legal and Support'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <TextSetting
                     id='termsOfServiceLink'
                     label={
diff --git a/webapp/components/admin_console/log_settings.jsx b/webapp/components/admin_console/log_settings.jsx
index fa29074d83..0a69cbc165 100644
--- a/webapp/components/admin_console/log_settings.jsx
+++ b/webapp/components/admin_console/log_settings.jsx
@@ -45,8 +45,8 @@ export default class LogSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.general.title'
-                    defaultMessage='General Settings'
+                    id='admin.general.log'
+                    defaultMessage='Logging'
                 />
             </h3>
         );
@@ -60,15 +60,7 @@ export default class LogSettings extends AdminSettings {
         ];
 
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.general.log'
-                        defaultMessage='Logging'
-                    />
-
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='enableConsole'
                     label={
diff --git a/webapp/components/admin_console/login_settings.jsx b/webapp/components/admin_console/login_settings.jsx
index f473d8f564..1937c20fc3 100644
--- a/webapp/components/admin_console/login_settings.jsx
+++ b/webapp/components/admin_console/login_settings.jsx
@@ -41,8 +41,8 @@ export default class LoginSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
-                    defaultMessage='Security Settings'
+                    id='admin.security.login'
+                    defaultMessage='Login'
                 />
             </h3>
         );
@@ -73,14 +73,7 @@ export default class LoginSettings extends AdminSettings {
         }
 
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.security.login'
-                        defaultMessage='Login'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <GeneratedSetting
                     id='passwordResetSalt'
                     label={
diff --git a/webapp/components/admin_console/privacy_settings.jsx b/webapp/components/admin_console/privacy_settings.jsx
index 8905e57ef8..5ef57e467c 100644
--- a/webapp/components/admin_console/privacy_settings.jsx
+++ b/webapp/components/admin_console/privacy_settings.jsx
@@ -33,8 +33,8 @@ export default class PrivacySettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.general.title'
-                    defaultMessage='General Settings'
+                    id='admin.general.privacy'
+                    defaultMessage='Privacy'
                 />
             </h3>
         );
@@ -42,14 +42,7 @@ export default class PrivacySettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.general.privacy'
-                        defaultMessage='Privacy'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='showEmailAddress'
                     label={
diff --git a/webapp/components/admin_console/public_link_settings.jsx b/webapp/components/admin_console/public_link_settings.jsx
index 9024261fa7..97f841c23d 100644
--- a/webapp/components/admin_console/public_link_settings.jsx
+++ b/webapp/components/admin_console/public_link_settings.jsx
@@ -34,8 +34,8 @@ export default class PublicLinkSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
-                    defaultMessage='Security Settings'
+                    id='admin.security.public_links'
+                    defaultMessage='Public Links'
                 />
             </h3>
         );
@@ -43,14 +43,7 @@ export default class PublicLinkSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.security.public_links'
-                        defaultMessage='Public Links'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='enablePublicLink'
                     label={
diff --git a/webapp/components/admin_console/session_settings.jsx b/webapp/components/admin_console/session_settings.jsx
index 79f3c7ee5c..c19d4850bb 100644
--- a/webapp/components/admin_console/session_settings.jsx
+++ b/webapp/components/admin_console/session_settings.jsx
@@ -39,8 +39,8 @@ export default class SessionSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
-                    defaultMessage='Security Settings'
+                    id='admin.security.session'
+                    defaultMessage='Sessions'
                 />
             </h3>
         );
@@ -48,14 +48,7 @@ export default class SessionSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.security.session'
-                        defaultMessage='Sessions'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <TextSetting
                     id='sessionLengthWebInDays'
                     label={
diff --git a/webapp/components/admin_console/signup_settings.jsx b/webapp/components/admin_console/signup_settings.jsx
index fd64e4ea53..de7c0f20ea 100644
--- a/webapp/components/admin_console/signup_settings.jsx
+++ b/webapp/components/admin_console/signup_settings.jsx
@@ -36,8 +36,8 @@ export default class SignupSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.security.title'
-                    defaultMessage='Security Settings'
+                    id='admin.security.signup'
+                    defaultMessage='Signup'
                 />
             </h3>
         );
@@ -45,14 +45,7 @@ export default class SignupSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.security.signup'
-                        defaultMessage='Signup'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='requireEmailVerification'
                     label={
diff --git a/webapp/components/admin_console/storage_settings.jsx b/webapp/components/admin_console/storage_settings.jsx
index 7cfa9cf3ba..60eedc2d24 100644
--- a/webapp/components/admin_console/storage_settings.jsx
+++ b/webapp/components/admin_console/storage_settings.jsx
@@ -49,8 +49,8 @@ export default class StorageSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.files.title'
-                    defaultMessage='File Settings'
+                    id='admin.files.storage'
+                    defaultMessage='Storage'
                 />
             </h3>
         );
@@ -58,14 +58,7 @@ export default class StorageSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.files.storage'
-                        defaultMessage='Storage'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <TextSetting
                     id='maxFileSize'
                     label={
diff --git a/webapp/components/admin_console/users_and_teams_settings.jsx b/webapp/components/admin_console/users_and_teams_settings.jsx
index a7f7038200..15301854f5 100644
--- a/webapp/components/admin_console/users_and_teams_settings.jsx
+++ b/webapp/components/admin_console/users_and_teams_settings.jsx
@@ -48,8 +48,8 @@ export default class UsersAndTeamsSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.general.title'
-                    defaultMessage='General Settings'
+                    id='admin.general.usersAndTeams'
+                    defaultMessage='Users and Teams'
                 />
             </h3>
         );
@@ -57,14 +57,7 @@ export default class UsersAndTeamsSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.general.usersAndTeams'
-                        defaultMessage='Users and Teams'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='enableUserCreation'
                     label={
diff --git a/webapp/components/admin_console/webhook_settings.jsx b/webapp/components/admin_console/webhook_settings.jsx
index 1c125cd0f2..a9ffa8b136 100644
--- a/webapp/components/admin_console/webhook_settings.jsx
+++ b/webapp/components/admin_console/webhook_settings.jsx
@@ -41,8 +41,8 @@ export default class WebhookSettings extends AdminSettings {
         return (
             <h3>
                 <FormattedMessage
-                    id='admin.integration.title'
-                    defaultMessage='Integration Settings'
+                    id='admin.integrations.webhook'
+                    defaultMessage='Webhooks and Commands'
                 />
             </h3>
         );
@@ -50,14 +50,7 @@ export default class WebhookSettings extends AdminSettings {
 
     renderSettings() {
         return (
-            <SettingsGroup
-                header={
-                    <FormattedMessage
-                        id='admin.integrations.webhook'
-                        defaultMessage='Webhooks and Commands'
-                    />
-                }
-            >
+            <SettingsGroup>
                 <BooleanSetting
                     id='enableIncomingWebhooks'
                     label={
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 40fb304373..2457eb62b2 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -433,6 +433,7 @@
   "admin.sidebar.privacy": "Privacy",
   "admin.sidebar.publicLinks": "Public Links",
   "admin.sidebar.push": "Mobile Push",
+  "admin.sidebar.advanced": "Advanced",
   "admin.sidebar.rateLimiting": "Rate Limiting",
   "admin.sidebar.reports": "SITE REPORTS",
   "admin.sidebar.rmTeamSidebar": "Remove team from sidebar menu",
diff --git a/webapp/root.jsx b/webapp/root.jsx
index dc2df64ac1..d326f32fcc 100644
--- a/webapp/root.jsx
+++ b/webapp/root.jsx
@@ -370,6 +370,10 @@ function renderRootComponent() {
                                 path='privacy'
                                 component={PrivacySettings}
                             />
+                            <Route
+                                path='compliance'
+                                component={ComplianceSettings}
+                            />
                             <Route
                                 path='logging'
                                 component={LogSettings}
@@ -435,10 +439,6 @@ function renderRootComponent() {
                                 component={ExternalServiceSettings}
                             />
                         </Route>
-                        <Route
-                            path='database'
-                            component={DatabaseSettings}
-                        />
                         <Route path='files'>
                             <IndexRedirect to='storage'/>
                             <Route
@@ -461,18 +461,21 @@ function renderRootComponent() {
                                 component={LegalAndSupportSettings}
                             />
                         </Route>
-                        <Route
-                            path='compliance'
-                            component={ComplianceSettings}
-                        />
-                        <Route
-                            path='rate'
-                            component={RateSettings}
-                        />
-                        <Route
-                            path='developer'
-                            component={DeveloperSettings}
-                        />
+                        <Route path='advanced'>
+                            <IndexRedirect to='rate'/>
+                            <Route
+                                path='rate'
+                                component={RateSettings}
+                            />
+                            <Route
+                                path='database'
+                                component={DatabaseSettings}
+                            />
+                            <Route
+                                path='developer'
+                                component={DeveloperSettings}
+                            />
+                        </Route>
                         <Route path='team'>
                             <Redirect
                                 from=':team'
diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss
index ffe82c5247..abf5b772f7 100644
--- a/webapp/sass/components/_buttons.scss
+++ b/webapp/sass/components/_buttons.scss
@@ -15,6 +15,18 @@
         }
     }
 
+    &.btn-default {
+        background: alpha-color($black, .7);
+        color: $white;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background: alpha-color($black, .8);
+            color: $white;
+        }
+    }
+
     &.btn-danger {
         color: $white;
 
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 86170ffce9..676264ab29 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -103,8 +103,8 @@
         }
 
         .help-text {
-            color: #777;
-            margin: 10px 0 0 15px;
+            color: alpha-color($black, .5);
+            margin: 10px 0 0;
 
             &.no-margin {
                 margin: 0;
@@ -261,10 +261,11 @@
     }
 
     .nav-pills__container {
-        background: #111;
         @include font-smoothing(initial);
-        height: calc(100% - 80px);
+        background: #111;
+        height: calc(100% - 50px);
         margin-top: 1px;
+        padding-bottom: 20px;
         position: relative;
     }
 
@@ -291,6 +292,23 @@
         > .sidebar-section-title {
             position: relative;
         }
+
+        .nav__sub-menu {
+            margin-bottom: 7px;
+        }
+    }
+
+    .sections {
+        &.sections--settings {
+            .sidebar-section-title {
+                text-transform: uppercase;
+
+                &:hover,
+                &:focus {
+                    color: alpha-color($white, .5);
+                }
+            }
+        }
     }
 
     .sidebar-section-title {
@@ -303,7 +321,8 @@
 
     .sidebar-section-title,
     .sidebar-subsection-title {
-        color: #bbb;
+        @include clearfix;
+        color: alpha-color($white, .5);
         display: block;
         font-size: 13px;
         position: relative;
@@ -318,8 +337,14 @@
         }
 
         &--active {
+            background: alpha-color($white, .1);
             color: $white;
-            font-weight: 600;
+
+            &:hover,
+            &:focus {
+                background: alpha-color($white, .1);
+                color: $white;
+            }
 
             &:after {
                 -moz-osx-font-smoothing: grayscale;