Merge pull request #939 from asaadmahmoodspin/plt-424

Admin console UI Improvements

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'

web/react/components/admin_console/admin_sidebar.jsx

@@ -129,6 +129,7 @@ export default class AdminSidebar extends React.Component {
             <div className='sidebar--left sidebar--collapsable'>
                 <div>
                     <AdminSidebarHeader />
+                    <div className='nav-pills__container'>
                         <ul className='nav nav-pills nav-stacked'>
                             <li>
                                 <ul className='nav nav__sub-menu'>
@@ -265,6 +266,7 @@ export default class AdminSidebar extends React.Component {
                             </li>
                         </ul>
                     </div>
+                </div>
 
                 <SelectTeamModal
                     teams={this.props.teams}

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}
                                 >

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'}

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>

web/react/utils/utils.jsx

@@ -428,6 +428,7 @@ export function applyTheme(theme) {
 
     if (theme.sidebarTextActiveColor) {
         changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2);
+        changeCss('.sidebar--left .nav-pills__container li.active a .status .online--icon', 'fill:' + theme.sidebarTextActiveColor, 2);
     }
 
     if (theme.sidebarHeaderBg) {

web/sass-files/sass/partials/_admin-console.scss

@@ -1,5 +1,12 @@
-
+#admin_controller {
-.sidebar--left {    &.sidebar--collapsable {
+    > div {
+        height: 100%;
+    }
+    .table {
+        background: #fff;
+    }
+    .sidebar--left {
+        &.sidebar--collapsable {
             background: #333;
             .team__header {
                 background: transparent;
@@ -12,11 +19,10 @@
                         width: 17px;
                     }
                     > a {
-                    color: #fff;
                         padding: 9px 15px;
                         display: block;
                         &:hover, &.active, &:focus  {
-                        background-color: $primary-color;
+                            background-color: #EAEAEA;
                         }
                     }
                     > h4 {
@@ -124,9 +130,12 @@
             .alert {
                 display: inline-block;
                 padding: 5px 7px;
-            margin: 0;
+                margin: 1em 0 0;
                 top: 1px;
                 position: relative;
+                .fa {
+                    margin-right: 5px;
+                }
             }
         }
         .banner {
@@ -189,5 +198,5 @@
                 }
             }
         }
-
+    }
 }

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;
 		}

web/templates/admin_console.html

@@ -5,11 +5,11 @@
 {{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();