Admin console UI Improvements

5 files changed, 144 insertions, 142 deletions

diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx
index 92f0bbdce..f40e48f70 100644
--- a/web/react/components/admin_console/admin_controller.jsx
+++ b/web/react/components/admin_console/admin_controller.jsx
@@ -147,7 +147,7 @@ export default class AdminController extends React.Component {
         }
 
         return (
-            <div className='container-fluid'>
+            <div>
                 <div
                     className='sidebar--menu'
                     id='sidebar-menu'
diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx
index 4b9ff3cb8..f102661b2 100644
--- a/web/react/components/admin_console/admin_sidebar.jsx
+++ b/web/react/components/admin_console/admin_sidebar.jsx
@@ -129,141 +129,143 @@ export default class AdminSidebar extends React.Component {
             <div className='sidebar--left sidebar--collapsable'>
                 <div>
                     <AdminSidebarHeader />
-                    <ul className='nav nav-pills nav-stacked'>
-                        <li>
-                            <ul className='nav nav__sub-menu'>
-                                <li>
-                                    <h4>
-                                        <span className='icon fa fa-gear'></span>
-                                        <span>{'SETTINGS'}</span>
-                                    </h4>
-                                </li>
-                            </ul>
-                            <ul className='nav nav__sub-menu padded'>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('service_settings')}
-                                        onClick={this.handleClick.bind(this, 'service_settings', null)}
-                                    >
-                                        {'Service Settings'}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('team_settings')}
-                                        onClick={this.handleClick.bind(this, 'team_settings', null)}
-                                    >
-                                        {'Team Settings'}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('sql_settings')}
-                                        onClick={this.handleClick.bind(this, 'sql_settings', null)}
-                                    >
-                                        {'SQL Settings'}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('email_settings')}
-                                        onClick={this.handleClick.bind(this, 'email_settings', null)}
-                                    >
-                                        {'Email Settings'}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('image_settings')}
-                                        onClick={this.handleClick.bind(this, 'image_settings', null)}
-                                    >
-                                        {'File Settings'}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('log_settings')}
-                                        onClick={this.handleClick.bind(this, 'log_settings', null)}
-                                    >
-                                        {'Log Settings'}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('rate_settings')}
-                                        onClick={this.handleClick.bind(this, 'rate_settings', null)}
-                                    >
-                                        {'Rate Limit Settings'}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('privacy_settings')}
-                                        onClick={this.handleClick.bind(this, 'privacy_settings', null)}
-                                    >
-                                        {'Privacy Settings'}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('gitlab_settings')}
-                                        onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
-                                    >
-                                        {'GitLab Settings'}
-                                    </a>
-                                </li>
-                            </ul>
-                            <ul className='nav nav__sub-menu'>
-                                 <li>
-                                    <h4>
-                                        <span className='icon fa fa-gear'></span>
-                                        <span>{'TEAMS (' + count + ')'}</span>
-                                        <span className='menu-icon--right'>
-                                            <a
-                                                href='#'
-                                                onClick={this.showTeamSelect}
-                                            >
-                                                <i className='fa fa-plus'></i>
-                                            </a>
-                                        </span>
-                                    </h4>
-                                </li>
-                            </ul>
-                            <ul className='nav nav__sub-menu padded'>
-                                <li>
-                                    {teams}
-                                </li>
-                            </ul>
-                            <ul className='nav nav__sub-menu'>
-                                <li>
-                                    <h4>
-                                        <span className='icon fa fa-gear'></span>
-                                        <span>{'OTHER'}</span>
-                                    </h4>
-                                </li>
-                            </ul>
-                            <ul className='nav nav__sub-menu padded'>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className={this.isSelected('logs')}
-                                        onClick={this.handleClick.bind(this, 'logs', null)}
-                                    >
-                                        {'Logs'}
-                                    </a>
-                                </li>
-                            </ul>
-                        </li>
-                    </ul>
+                    <div className='nav-pills__container'>
+                        <ul className='nav nav-pills nav-stacked'>
+                            <li>
+                                <ul className='nav nav__sub-menu'>
+                                    <li>
+                                        <h4>
+                                            <span className='icon fa fa-gear'></span>
+                                            <span>{'SETTINGS'}</span>
+                                        </h4>
+                                    </li>
+                                </ul>
+                                <ul className='nav nav__sub-menu padded'>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('service_settings')}
+                                            onClick={this.handleClick.bind(this, 'service_settings', null)}
+                                        >
+                                            {'Service Settings'}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('team_settings')}
+                                            onClick={this.handleClick.bind(this, 'team_settings', null)}
+                                        >
+                                            {'Team Settings'}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('sql_settings')}
+                                            onClick={this.handleClick.bind(this, 'sql_settings', null)}
+                                        >
+                                            {'SQL Settings'}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('email_settings')}
+                                            onClick={this.handleClick.bind(this, 'email_settings', null)}
+                                        >
+                                            {'Email Settings'}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('image_settings')}
+                                            onClick={this.handleClick.bind(this, 'image_settings', null)}
+                                        >
+                                            {'File Settings'}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('log_settings')}
+                                            onClick={this.handleClick.bind(this, 'log_settings', null)}
+                                        >
+                                            {'Log Settings'}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('rate_settings')}
+                                            onClick={this.handleClick.bind(this, 'rate_settings', null)}
+                                        >
+                                            {'Rate Limit Settings'}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('privacy_settings')}
+                                            onClick={this.handleClick.bind(this, 'privacy_settings', null)}
+                                        >
+                                            {'Privacy Settings'}
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('gitlab_settings')}
+                                            onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
+                                        >
+                                            {'GitLab Settings'}
+                                        </a>
+                                    </li>
+                                </ul>
+                                <ul className='nav nav__sub-menu'>
+                                     <li>
+                                        <h4>
+                                            <span className='icon fa fa-gear'></span>
+                                            <span>{'TEAMS (' + count + ')'}</span>
+                                            <span className='menu-icon--right'>
+                                                <a
+                                                    href='#'
+                                                    onClick={this.showTeamSelect}
+                                                >
+                                                    <i className='fa fa-plus'></i>
+                                                </a>
+                                            </span>
+                                        </h4>
+                                    </li>
+                                </ul>
+                                <ul className='nav nav__sub-menu padded'>
+                                    <li>
+                                        {teams}
+                                    </li>
+                                </ul>
+                                <ul className='nav nav__sub-menu'>
+                                    <li>
+                                        <h4>
+                                            <span className='icon fa fa-gear'></span>
+                                            <span>{'OTHER'}</span>
+                                        </h4>
+                                    </li>
+                                </ul>
+                                <ul className='nav nav__sub-menu padded'>
+                                    <li>
+                                        <a
+                                            href='#'
+                                            className={this.isSelected('logs')}
+                                            onClick={this.handleClick.bind(this, 'logs', null)}
+                                        >
+                                            {'Logs'}
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
 
                 <SelectTeamModal
diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx
index 762a4ab26..3432f69ff 100644
--- a/web/react/components/admin_console/email_settings.jsx
+++ b/web/react/components/admin_console/email_settings.jsx
@@ -437,7 +437,7 @@ export default class EmailSettings extends React.Component {
                             </select>
                             <div className='help-text'>
                                 <table
-                                    className='table-bordered'
+                                    className='table table-bordered'
                                     cellPadding='5'
                                 >
                                     <tr><td className='help-text'>{'None'}</td><td className='help-text'>{'Mattermost will send email over an unsecure connection.'}</td></tr>
@@ -447,7 +447,7 @@ export default class EmailSettings extends React.Component {
                             </div>
                             <div className='help-text'>
                                 <button
-                                    className='help-link'
+                                    className='btn'
                                     onClick={this.handleTestConnection}
                                     disabled={!this.state.sendEmailNotifications}
                                     id='connection-button'
@@ -482,7 +482,7 @@ export default class EmailSettings extends React.Component {
                             <p className='help-text'>{'32-character salt added to signing of email invites. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='help-link'
+                                    className='btn'
                                     onClick={this.handleGenerateInvite}
                                     disabled={!this.state.sendEmailNotifications}
                                 >
@@ -513,7 +513,7 @@ export default class EmailSettings extends React.Component {
                             <p className='help-text'>{'32-character salt added to signing of password reset emails. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='help-link'
+                                    className='btn'
                                     onClick={this.handleGenerateReset}
                                     disabled={!this.state.sendEmailNotifications}
                                 >
diff --git a/web/react/components/admin_console/image_settings.jsx b/web/react/components/admin_console/image_settings.jsx
index e52f516e8..e08d39ca8 100644
--- a/web/react/components/admin_console/image_settings.jsx
+++ b/web/react/components/admin_console/image_settings.jsx
@@ -460,7 +460,7 @@ export default class FileSettings extends React.Component {
                             <p className='help-text'>{'32-character salt added to signing of public image links. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='help-link'
+                                    className='btn btn-default'
                                     onClick={this.handleGenerate}
                                 >
                                     {'Re-Generate'}
diff --git a/web/react/components/admin_console/log_settings.jsx b/web/react/components/admin_console/log_settings.jsx
index 1c39c60e8..608ef9cc0 100644
--- a/web/react/components/admin_console/log_settings.jsx
+++ b/web/react/components/admin_console/log_settings.jsx
@@ -253,7 +253,7 @@ export default class LogSettings extends React.Component {
                                 {'Format of log message output. If blank will be set to "[%D %T] [%L] %M", where:'}
                                 <div className='help-text'>
                                     <table
-                                        className='table-bordered'
+                                        className='table table-bordered'
                                         cellPadding='5'
                                     >
                                         <tr><td className='help-text'>{'%T'}</td><td className='help-text'>{'Time (15:04:05 MST)'}</td></tr>