Move switch service out of black header

Also following the pattern work that Tim and Stephen have done.

app/assets/stylesheets/_grids.scss

@@ -46,7 +46,7 @@
 .align-with-heading {
   display: block;
   text-align: center;
-  margin-top: $gutter;
+  margin-top: 13px;
   padding-left: 2px;
   padding-right: 2px;
 }

app/assets/stylesheets/app.scss

@@ -56,14 +56,16 @@ a {
 
 .column-main {
 
-  > .heading-large {
-    margin-top: $gutter;
+  > .heading-large,
+  > .heading-medium {
+    margin: 10px 0 15px 0;
   }
 
-  > .grid-row  {
+  > .grid-row:first-child  {
 
-    .heading-large {
-      margin-top: $gutter;
+    .heading-large,
+    .heading-medium {
+      margin: 10px 0 15px 0;
     }
 
   }

app/assets/stylesheets/components/navigation.scss

@@ -2,17 +2,35 @@
 
   padding: 0 $gutter 0 0;
 
+  &-service {
+
+    padding: 11px 0 9px 0;
+    border-bottom: 1px solid $border-colour;
+    margin: 0 0 10px;
+    position: relative;
+
+    h2 {
+      @include bold-19;
+      margin: 0 0 0 0;
+    }
+
+    &-switch {
+      @include core-16;
+      text-align: right;
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 13px 0 9px 15px;
+    }
+
+  }
+
   li {
     @include core-19;
     margin: 10px 0 0 0;
     list-style-type: none;
   }
 
-  h2 {
-    @include bold-19;
-    margin: $gutter 0 0 0;
-  }
-
   a {
 
     &:link,

app/assets/stylesheets/views/dashboard.scss

@@ -11,6 +11,11 @@
       border: 0;
     }
   }
+
+  > .heading-medium {
+    margin-top: 10px;
+  }
+
 }
 
 .keyline-block {

app/templates/admin_template.html

@@ -45,9 +45,6 @@
             <li>
               <a href="{{ url_for('main.user_profile') }}">{{ current_user.name }}</a>
             </li>
-            <li>
-              <a href="{{ url_for('main.choose_service') }}">Switch service</a>
-            </li>
             {% if current_user.has_permissions(admin_override=True) %}
                 <li>
                   <a href="{{ url_for('main.platform_admin') }}">Platform admin</a>

app/templates/main_nav.html

@@ -42,9 +42,6 @@
   {% endcall %}
 {% else %}
 <nav class="navigation">
-  <h2 class="navigation-service-name">
-    {{ current_service.name }}
-  </h2>
   <ul>
     <li><a href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
   {% if current_user.has_permissions(['view_activity', 'manage_templates', 'manage_api_keys'], admin_override=True, any_=True) %}

app/templates/withnav_template.html

@@ -1,6 +1,12 @@
 {% extends "admin_template.html" %}
 
 {% block fullwidth_content %}
+  <div class="navigation-service">
+    <h2 class="navigation-service-name">
+      {{ current_service.name }}
+    </h2>
+    <a href="{{ url_for('main.choose_service') }}" class="navigation-service-switch">Switch service</a>
+  </div>
   <div class="grid-row">
     <div class="column-one-third">
       {% include "main_nav.html" %}