headers

app/admin-tab/machine/template.hbs

@@ -1,6 +1,9 @@
 <section class="header clearfix">
   <h1>{{t 'machinePage.header'}}</h1>
+
+  <div class="pull-right">
   <button class="btn btn-sm bg-primary right-divider-btn" {{action 'addNewDriver'}}>{{t 'machinePage.add'}}</button>
+  </div>
 </section>
 
 <section>

app/authenticated/project/api/hooks/index/template.hbs

@@ -10,7 +10,9 @@
 <section class="header clearfix">
   <h1>{{t 'hookPage.receiver.header'}}</h1>
 
-  {{#link-to "authenticated.project.api.hooks.new-receiver" class="btn btn-sm bg-primary"}}{{t 'hookPage.receiver.buttonText'}}{{/link-to}}
+  <div class="pull-right">
+    {{#link-to "authenticated.project.api.hooks.new-receiver" class="btn btn-sm bg-primary"}}{{t 'hookPage.receiver.buttonText'}}{{/link-to}}
+  </div>
 </section>
 
 <section class="well">

app/authenticated/project/api/keys/template.hbs

@@ -1,7 +1,9 @@
 <section class="header clearfix">
   <h1>{{t 'apiPage.account.header'}}</h1>
 
-  <button class="btn btn-sm bg-primary" {{action "newApikey" "account"}}>{{t 'apiPage.account.buttonText'}}</button>
+  <div class="pull-right">
+    <button class="btn btn-sm bg-primary" {{action "newApikey" "account"}}>{{t 'apiPage.account.buttonText'}}</button>
+  </div>
 </section>
 
 <section class="well">

app/certificates/index/template.hbs

@@ -1,7 +1,9 @@
 <section class="header clearfix">
   <h1>{{t 'certificatesPage.index.header'}}</h1>
 
-  {{#link-to "certificates.new" classNames="btn btn-sm bg-primary right-divider-btn"}}{{t 'certificatesPage.index.linkTo'}}{{/link-to}}
+  <div class="pull-right">
+    {{#link-to "certificates.new" classNames="btn btn-sm bg-primary right-divider-btn"}}{{t 'certificatesPage.index.linkTo'}}{{/link-to}}
+  </div>
 </section>
 
 <section class="well instances">

app/components/form-secrets/template.hbs

@@ -54,7 +54,7 @@
               {{/if}}
 
               <td class="text-right">
-                <button class="btn btn-primary btn-sm" {{action "removeSecret" row}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
+                <button class="btn bg-primary btn-sm" {{action "removeSecret" row}}><i class="icon icon-minus"/><span class="sr-only">{{t 'generic.remove'}}</span></button>
               </td>
             </tr>
           {{/each}}

app/containers/index/template.hbs

@@ -1,10 +1,10 @@
 <section class="header clearfix">
   <h1>{{t 'containersPage.index.header'}}</h1>
 
-  {{#link-to "containers.new" classNames="btn btn-sm bg-primary"}}{{t 'containersPage.index.linkTo'}}{{/link-to}}
 
   <div class="btn-group pull-right mr-10 mt-5">
     <label style="font-weight: normal;">{{input type="checkbox" checked=showSystem}} {{t 'hostsPage.index.showSystem'}}</label>
+    {{#link-to "containers.new" classNames="btn btn-sm bg-primary"}}{{t 'containersPage.index.linkTo'}}{{/link-to}}
   </div>
 </section>
 

app/hosts/index/template.hbs

@@ -1,12 +1,11 @@
 <section class="header clearfix">
   <h1>{{t 'hostsPage.index.header'}}</h1>
 
-  {{#link-to "hosts.new" classNames="btn btn-sm bg-primary"}}{{t 'hostsPage.index.addHost'}}{{/link-to}}
-
   <div class="btn-group pull-right">
     {{#link-to "hosts" (query-params mode="dot") classNames="btn btn-sm bg-default"}}{{tooltip-link icon="icon-ellipsis" text=(t 'hostsPage.index.tooltip.listView') options=listLinkOptions}}{{/link-to}}
     {{#link-to "hosts" (query-params mode="grouped") classNames="btn btn-sm bg-default"}}{{tooltip-link icon="icon-layeredgroup" text=(t 'hostsPage.index.tooltip.groupedView') options=groupLinkOptions}}{{/link-to}}
 
+    {{#link-to "hosts.new" classNames="btn btn-sm bg-primary"}}{{t 'hostsPage.index.addHost'}}{{/link-to}}
 
   </div>
 

app/registries/index/template.hbs

@@ -1,7 +1,9 @@
 <section class="header clearfix">
   <h1>{{t 'registriesPage.index.header'}}</h1>
 
-  {{#link-to "registries.new" classNames="btn btn-sm bg-primary"}}{{t 'registriesPage.index.linkTo'}}{{/link-to}}
+  <div class="pull-right">
+    {{#link-to "registries.new" classNames="btn btn-sm bg-primary"}}{{t 'registriesPage.index.linkTo'}}{{/link-to}}
+  </div>
 </section>
 
 <section class="well instances">

app/secrets/index/template.hbs

@@ -10,7 +10,9 @@
 <section class="header clearfix">
   <h1>{{t 'secretsPage.index.header'}}</h1>
 
-  {{#link-to "secrets.new" classNames="btn btn-sm btn-primary"}}{{t 'secretsPage.index.linkTo'}}{{/link-to}}
+  <div class="pull-right">
+    {{#link-to "secrets.new" classNames="btn btn-sm bg-primary"}}{{t 'secretsPage.index.linkTo'}}{{/link-to}}
+  </div>
 </section>
 
 <section class="well instances r-pt5 r-pb5">

app/styles/components/_page-header.scss

@@ -25,12 +25,6 @@
     vertical-align: middle;
     width: calc(100% - 180px);
     margin: 0;
-     
-    .active {
-      color: $info;
-      border: 0;
-      border-bottom: solid 3px mix($secondary, black, 50%);
-    }
 
     .dropdown-menu {
       background: $light-grey;

app/styles/lacsso/components/_button.scss

@@ -13,7 +13,7 @@
     -ms-user-select: none;
     user-select: none;
     border: 0 solid transparent;
-    padding: 10px 20px;
+    padding: 5px 15px;
     border-radius: .25rem;
     letter-spacing: .5px;
     border-radius: 2px;

app/styles/lacsso/components/_forms.scss

@@ -6,9 +6,9 @@ select {
     width: 100%;
     box-sizing: border-box;
     border-width: 2px;
-    border-color: rgba($mid-grey, .4);
+    border-color: rgba($mid-grey, .1);
     border-radius: 0;
-    background: rgba($light-grey, .3);
+    background: rgba($mid-grey, .3);
     outline: none;
     padding: 5px 10px;
     font-size: 15px;

app/styles/lacsso/components/_nav.scss

@@ -13,17 +13,27 @@ nav {
       list-style-type: none;
       display: inline-block;
 
+      &.active {
+        a {
+          color: $info;
+          border: 0;
+          border-bottom: solid 4px mix($secondary, black, 50%);
+        }
+      }
+
       > a {
         color: $light-grey;
         display: block;
         padding: 10px;
-        border: solid 3px transparent;
+        border-bottom: solid 4px transparent;
 
         &:hover {
-          background-color: $mid-grey;
+          background-color: mix($secondary, black, 80%);
+          color: white;
           text-decoration: none;
+          border-bottom: solid 4px mix($secondary, black, 50%);
         }
       }
     }
   }
-}
+}

app/styles/lacsso/components/_pagination.scss

@@ -1,6 +1,11 @@
 .pagination {
   margin: 0px;
 
+  > li {
+    @extend .btn;
+    @extend .bg-default;
+  }
+
   .overview-text {
     position: relative;
     float: left;
@@ -10,9 +15,9 @@
     margin-left: -1px;
   }
   .pager-disabled {
+    @extend .bg-disabled;
     cursor: default;
     pointer-events: none;
-    background-color: $brand-accent;
   }
 }
 .pagination-left {