add container and white space fixes

app/admin-tab/auth/azuread/controller.js

@@ -125,13 +125,4 @@ export default Ember.Controller.extend({
       });
     },
   },
-
-  headerText: Ember.computed('access.enabled', 'intl.locale', function() {
-    let out = this.get('intl').findTranslationByKey('authPage.azuread.header.disabled');
-    if (this.get('access.enabled')) {
-      out = this.get('intl').findTranslationByKey('authPage.azuread.header.enabled');
-
-    }
-    return this.get('intl').formatHtmlMessage(out);
-  }),
 });

app/admin-tab/auth/azuread/template.hbs

@@ -1,12 +1,18 @@
 <section>
-  <h2>{{headerText}}</h2>
+  {{#if access.enabled}}
-  <div>
+    <p>{{t 'authPage.azuread.header.enabled'}}</p>
-    {{#if access.enabled}}
+    {{t 'authPage.azuread.subtext.enabled' appName=settings.appName}}
-      {{t 'authPage.azuread.subtext.enabled' appName=settings.appName}}
+  {{else}}
-    {{else}}
+    <div class="banner bg-warning">
-      {{t 'authPage.azuread.subtext.disabled' appName=settings.appName}}
+      <div class="banner-icon">
-    {{/if}}
+        <span class="icon icon-alert"></span>
-  </div>
+      </div>
+      <div class="banner-message">
+        <p>{{t 'authPage.azuread.header.disabled'}}</p>
+      </div>
+    </div>
+    <p>{{t 'authPage.azuread.subtext.disabled' appName=settings.appName}}</p>
+  {{/if}}
 </section>
 
 {{#if access.enabled}}

app/admin-tab/auth/github/template.hbs

@@ -1,6 +1,7 @@
-<section>
+<section class="box">
   {{#if access.enabled}}
-    <b>{{t 'authPage.github.header.enabled.label' github=(t providerName)}}</b>
+    <h3>{{t 'authPage.github.header.enabled.label' github=(t providerName)}}</h3>
+    <hr/>
   {{else}}
     <div class="banner bg-warning">
       <div class="banner-icon"><span class="icon icon-alert"></span></div>
@@ -11,9 +12,9 @@
   {{/if}}
   <div>
     {{#if access.enabled}}
-      {{t (concat-str 'authPage.github.header.enabled.' model.accessMode character='') appName=settings.appName github=(t providerName) users=numUsers orgs=numOrgs}}
+      <p>{{t (concat-str 'authPage.github.header.enabled.' model.accessMode character='') appName=settings.appName github=(t providerName) users=numUsers orgs=numOrgs}}</p>
     {{else}}
-      {{t 'authPage.github.header.disabled.warning' appName=settings.appName}}
+      <p>{{t 'authPage.github.header.disabled.warning' appName=settings.appName}}</p>
     {{/if}}
   </div>
 </section>

app/components/badge-state/component.js

@@ -2,6 +2,6 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   tagName: 'SPAN',
-  classNames: ['badge-state','inline-block'],
+  classNames: ['badge-state','vertical-middle'],
   classNameBindings: ['model.stateBackground'],
 });

app/components/container-dot/component.js

@@ -5,7 +5,8 @@ export default Ember.Component.extend({
   resourceActions : Ember.inject.service('resource-actions'),
   tooltipService  : Ember.inject.service('tooltip'),
   model           : null,
-  tagName         : 'span',
+  tagName         : 'div',
+  classNames      : ['vertical-middle'],
   type            : 'tooltip-action-menu',
   template        : null,
 

app/components/container-dots/template.hbs

@@ -1,6 +1,6 @@
 {{#if groupByDeploymentUnit}}
   {{#each grouped as |group|}}
-    <div class="dot-group">
+    <div class="dot-group bg-default">
       {{#each group as |item|}}
         {{container-dot model=item}}
       {{/each}}

app/components/service-row/template.hbs

@@ -70,8 +70,10 @@
     </td>
     <td class="text-center">
       {{#if (and expanded model.canScale)}}
+        <div class="btn-group">
         <button class="btn btn-xs bg-primary" {{action "scaleDown" target=model}}><i class="icon icon-minus"/></button>
-        <button class="btn btn-xs bg-primary" {{action "scaleUp" target=model}}><i class="icon icon-plus"/></button>
+        <button style="margin-left:2px;" class="btn btn-xs bg-primary" {{action "scaleUp" target=model}}><i class="icon icon-plus"/></button>
+        </div>
       {{/if}}
     </td>
     <td>{{! actions}}</td>

app/components/tooltip-element/component.js

@@ -3,9 +3,9 @@ import Ember from 'ember';
 const DELAY = 100;
 
 export default Ember.Component.extend({
-  classNameBindings : ['inlineBlock:inline-block','clip:clip'],
+  classNameBindings : ['inlineBlock:vertical-middle','clip:clip'],
   tooltipService   : Ember.inject.service('tooltip'),
-  inlineBlock      : true,
+  inlineBlock      : false,
   clip             : false,
   model            : null,
   size             : 'default',

app/styles/base/_helpers.scss

@@ -141,7 +141,7 @@
   display: table-cell !important;
 }
 
-.vertical-center {
+.vertical-middle {
   display: inline-block;
   vertical-align: middle;
 }

app/styles/components/_nav.scss

@@ -32,7 +32,7 @@ nav {
       > a {
         color: $header-link;
         display: block;
-        padding: 10px;
+        padding: 11px;
         border-bottom: solid $nav-spacing transparent;
         border-top: solid $nav-spacing transparent;
 

app/styles/components/_tabs.scss

@@ -76,7 +76,7 @@ $close-text-shadow                   : 0 1px 0 white !default;
           }
           a {
             display: block;
-            padding: 15px 10px;
+            padding: 19px 10px;
             text-decoration: none;
             border-bottom: solid 2px transparent;
             color: $text-muted;

app/styles/layout/_header.scss

@@ -7,7 +7,7 @@ header {
 
 .header {
   border-bottom: solid 2px $border;
-  margin: 0 0 30px 0;
+  margin: 0 0 15px 0;
 
   h1 {
     margin: 0;
@@ -21,7 +21,7 @@ header {
   .right-buttons {
     @include clearfix;
     float: right;
-    padding: 11px 0;
+    padding: 15px 0;
 
     > .resource-actions {
       .btn.btn-sm {

app/styles/pages/_host.scss

@@ -5,8 +5,8 @@
 }
 
 .dot-group {
-  float: left;
+  display: inline-block;
-  border: 1px solid #aaa;
+  border: 1px solid $border;
   margin: 0 5px 0 0;
   padding: 2px;
 }

translations/en-us.yaml

@@ -308,7 +308,7 @@ authPage:
   azuread:
     header:
       enabled: 'Azure AD Authentication is <b>enabled</b>'
-      disabled: 'Azure AD Authentication is <b class="text-warning">not configured</b>'
+      disabled: 'Azure AD Authentication is not configured'
     subtext:
       enabled: '{appName} is configured to allow access to accounts in Azure AD'
       disabled: '{appName} can be configured to restrict access to a set of accounts defined in the {appName} database.  This is not currently set up, so anybody that reach this page (or the API) has full control over the system.'