UX: Fix the nav tabs styling

assets/javascripts/discourse/templates/upgrade-index.hbs

@@ -1,3 +1,5 @@
+<h1>Upgrade</h1>
+
 <button
   disabled={{upgradeAllButtonDisabled}}
   id="upgrade-all"

assets/javascripts/discourse/templates/upgrade.hbs

@@ -1,26 +1,35 @@
-<div class="docker-manager">
-  <h1>Upgrade</h1>
+<div class="admin-controls">
+  <nav>
+    <ul class="nav nav-pills">
+      <li>
+        <LinkTo @route="upgrade.index">
+          Versions
+        </LinkTo>
+      </li>
 
-  <div>
-    {{#if showBanner}}
-      <div id="banner">
-        <div id="banner-content">
-          <div class="close" {{action "dismiss"}}>
-            <i class="fa fa-times" title="Dismiss this banner."></i>
-          </div>
-
-          {{#each banner as |row|}}
-            <p>{{{row}}}</p>
-          {{/each}}
-        </div>
-      </div>
-    {{/if}}
-
-    <div class="nav nav-tabs">
-      {{#link-to "upgrade.index" class="nav-link"}}Versions{{/link-to}}
-      {{#link-to "upgrade.processes" class="nav-link"}}Processes{{/link-to}}
-    </div>
-
-    {{outlet}}
-  </div>
+      <li>
+        <LinkTo @route="upgrade.processes">
+          Processes
+        </LinkTo>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<div class="docker-manager">
+  {{#if showBanner}}
+    <div id="banner">
+      <div id="banner-content">
+        <div class="close" {{action "dismiss"}}>
+          <i class="fa fa-times" title="Dismiss this banner."></i>
+        </div>
+
+        {{#each banner as |row|}}
+          <p>{{{row}}}</p>
+        {{/each}}
+      </div>
+    </div>
+  {{/if}}
+
+  {{outlet}}
 </div>

assets/stylesheets/common/docker-manager.scss

@@ -83,7 +83,7 @@
   }
 
   #banner {
-    margin-bottom: 20px;
+    margin: 1rem 0;
     padding: 10px;
     border-radius: 5px;
     background: scale-color($tertiary, $lightness: 90%);