Admin console UI Improvements

8 files changed, 317 insertions, 307 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>
diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss
index 5037da415..09907da6d 100644
--- a/web/sass-files/sass/partials/_admin-console.scss
+++ b/web/sass-files/sass/partials/_admin-console.scss
@@ -1,193 +1,202 @@
-
-.sidebar--left {    &.sidebar--collapsable {
-        background: #333;
-        .team__header {
-            background: transparent;
-            margin-bottom: 5px;
-        }
-        .nav {
-            li {
-                padding: 0;
-                .icon {
-                    width: 17px;
-                }
-                > a {
-                    color: #fff;
-                    padding: 9px 15px;
-                    display: block;
-                    &:hover, &.active, &:focus  {
-                        background-color: $primary-color;
-                    }
-                }
-                > h4 {
-                    background: #333;
-                    padding: 10px 10px;
-                    margin: 1px 0 0;
-                }
-            }
-            .menu-icon--right {
-                vertical-align: top;
-                padding: 5px 10px;
-                margin: -5px;
-                float: right;
-                .fa {
-                    font-size: 13px;
-                    right: -2px;
-                    position: relative;
-                    color: #fff;
-                }
+#admin_controller {
+    > div {
+        height: 100%;
+    }
+    .table {
+        background: #fff;
+    }
+    .sidebar--left {
+        &.sidebar--collapsable {
+            background: #333;
+            .team__header {
+                background: transparent;
+                margin-bottom: 5px;
             }
-            &.nav__sub-menu {
-                background: #111;
-                -webkit-font-smoothing: auto;
-                &.padded {
-                    padding: 5px 0;
-                }
+            .nav {
                 li {
+                    padding: 0;
+                    .icon {
+                        width: 17px;
+                    }
                     > a {
-                        font-size: 13px;
-                        padding: 5px 15px;
-                        background: transparent;
-                        color: #bbb;
-                        &:hover {
-                            color: lighten($primary-color, 10);
-                        }
-                        &.active {
-                            color: #fff;
-                            font-weight: 600;
+                        padding: 9px 15px;
+                        display: block;
+                        &:hover, &.active, &:focus  {
+                            background-color: #EAEAEA;
                         }
                     }
-                    .nav-more {
+                    > h4 {
+                        background: #333;
+                        padding: 10px 10px;
+                        margin: 1px 0 0;
+                    }
+                }
+                .menu-icon--right {
+                    vertical-align: top;
+                    padding: 5px 10px;
+                    margin: -5px;
+                    float: right;
+                    .fa {
                         font-size: 13px;
-                        padding: 5px 15px;
-                        background: transparent;
-                        color: #bbb;
-                        display: block;
-                        cursor: pointer;
-                        &:hover {
-                            color: lighten($primary-color, 10);
+                        right: -2px;
+                        position: relative;
+                        color: #fff;
+                    }
+                }
+                &.nav__sub-menu {
+                    background: #111;
+                    -webkit-font-smoothing: auto;
+                    &.padded {
+                        padding: 5px 0;
+                    }
+                    li {
+                        > a {
+                            font-size: 13px;
+                            padding: 5px 15px;
+                            background: transparent;
+                            color: #bbb;
+                            &:hover {
+                                color: lighten($primary-color, 10);
+                            }
+                            &.active {
+                                color: #fff;
+                                font-weight: 600;
+                            }
+                        }
+                        .nav-more {
+                            font-size: 13px;
+                            padding: 5px 15px;
+                            background: transparent;
+                            color: #bbb;
+                            display: block;
+                            cursor: pointer;
+                            &:hover {
+                                color: lighten($primary-color, 10);
+                            }
                         }
                     }
                 }
-            }
-            &.nav__inner-menu {
-                li {
-                    > a {
-                        padding-left: 20px;
+                &.nav__inner-menu {
+                    li {
+                        > a {
+                            padding-left: 20px;
+                        }
                     }
                 }
             }
         }
     }
-}
 
-.log__panel {
-    overflow: scroll;
-    width: 100%;
-    height: 800px;
-    border: 1px solid #ddd;
-    margin-top: 10px;
-    padding: 5px;
-    background-color: white;
-}
-
-.app__content {
-    &.admin {
-        overflow: auto;
-        background-color: #f1f1f1;
-        padding: 0 20px 20px;
-        min-height: 600px;
-    }
-    .wrapper--fixed {
-        max-width: 800px;
+    .log__panel {
+        overflow: scroll;
+        width: 100%;
+        height: 800px;
+        border: 1px solid #ddd;
+        margin-top: 10px;
+        padding: 5px;
+        background-color: white;
     }
-    .form-horizontal {
-        margin-top: 40px;
-        .control-label {
-            text-align: left;
-            padding-right: 0;
-            font-weight: 600;
+
+    .app__content {
+        &.admin {
+            overflow: auto;
+            background-color: #f1f1f1;
+            padding: 0 20px 20px;
+            min-height: 600px;
         }
-        .form-group {
-            margin-bottom: 25px;
+        .wrapper--fixed {
+            max-width: 800px;
         }
-        .help-text {
-            margin: 10px 0 0 15px;
-            color: #777;
-            .help-link {
-                margin-right: 5px;
+        .form-horizontal {
+            margin-top: 40px;
+            .control-label {
+                text-align: left;
+                padding-right: 0;
+                font-weight: 600;
             }
-            .btn {
-                font-size: 13px;
+            .form-group {
+                margin-bottom: 25px;
+            }
+            .help-text {
+                margin: 10px 0 0 15px;
+                color: #777;
+                .help-link {
+                    margin-right: 5px;
+                }
+                .btn {
+                    font-size: 13px;
+                }
+            }
+            .alert {
+                display: inline-block;
+                padding: 5px 7px;
+                margin: 1em 0 0;
+                top: 1px;
+                position: relative;
+                .fa {
+                    margin-right: 5px;
+                }
             }
         }
-        .alert {
-            display: inline-block;
-            padding: 5px 7px;
-            margin: 0;
-            top: 1px;
-            position: relative;
-        }
-    }
-    .banner {
-        background: #fff;
-        border: 1px solid #ddd;
-        padding: 0.7em 1.5em;
-        font-size: 0.95em;
-        margin: 2em 0;
-        .banner__heading {
-            font-size: 1.5em;
+        .banner {
+            background: #fff;
+            border: 1px solid #ddd;
+            padding: 0.7em 1.5em;
+            font-size: 0.95em;
+            margin: 2em 0;
+            .banner__heading {
+                font-size: 1.5em;
+            }
+            .banner__content {
+                width: 80%;
+            }
         }
-        .banner__content {
-            width: 80%;
+        .popover {
+            border-radius: 3px;
+            width: 100%;
+            font-size: 0.95em;
         }
-    }
-    .popover {
-        border-radius: 3px;
-        width: 100%;
-        font-size: 0.95em;
-    }
-    .panel {
-        border: none;
-        background-color: transparent;
-    }
-    .panel-default {
-        > .panel-heading {
-            padding: 10px 0;
+        .panel {
+            border: none;
             background-color: transparent;
         }
-        .panel-body {
-            padding: 30px 0 10px;
+        .panel-default {
+            > .panel-heading {
+                padding: 10px 0;
+                background-color: transparent;
+            }
+            .panel-body {
+                padding: 30px 0 10px;
+            }
+        }
+        .panel-group {
+            margin-bottom: 50px;
         }
-    }
-    .panel-group {
-        margin-bottom: 50px;
-    }
-    .panel-title {
-        font-size: 24px;
-        line-height: 1.5;
-        a {
-            text-decoration: none;
-            display: block;
-            @include clearfix;
-            &.collapsed {
-                .fa-minus {
-                    display: none;
+        .panel-title {
+            font-size: 24px;
+            line-height: 1.5;
+            a {
+                text-decoration: none;
+                display: block;
+                @include clearfix;
+                &.collapsed {
+                    .fa-minus {
+                        display: none;
+                    }
+                    .fa-plus {
+                        display: inline-block;
+                    }
+                }
+                .fa {
+                    font-size: 18px;
+                    float: right;
+                    margin-top: 8px;
+                    color: #aaa;
                 }
                 .fa-plus {
-                    display: inline-block;
+                    display: none;
                 }
             }
-            .fa {
-                font-size: 18px;
-                float: right;
-                margin-top: 8px;
-                color: #aaa;
-            }
-            .fa-plus {
-                display: none;
-            }
         }
     }
-
 }
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index 2a4e82fc7..8e353aff9 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -37,7 +37,6 @@
 		&.description {
 			overflow: hidden;
 			text-overflow: ellipsis;
-			@include opacity(0.6);
 			margin-top: 2px;
 			max-height: 45px;
 		}
diff --git a/web/templates/admin_console.html b/web/templates/admin_console.html
index 1444d9b17..a046478f6 100644
--- a/web/templates/admin_console.html
+++ b/web/templates/admin_console.html
@@ -5,15 +5,15 @@
 {{template "head" . }}
 <body>
 
-<div id="error_bar"></div>
+<div id='error_bar'></div>
 
-<div id="admin_controller"></div>
+<div id='admin_controller' class='container-fluid'></div>
 
-<div id="select_team_modal"></div>
+<div id='select_team_modal'></div>
 
 <script>
     window.setup_admin_console_page();
-    
+
     $(document).ready(function(){
         $('[data-toggle="tooltip"]').tooltip();
         $('[data-toggle="popover"]').popover();