Merge branch 'remove-gray-bg'

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

Merge branch 'remove-gray-bg'
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
620d8b68 · Dmitriy Zaporozhets · f03da18e · 9c69c899 · 620d8b68 · 620d8b68
Commit 620d8b68 authored Jan 14, 2016 by Dmitriy Zaporozhets
85 changed files
--- a/CHANGELOG
+++ b/CHANGELOG
 Please view this file on the master branch, on stable branches it's out of date.
+v 8.5.0 (unreleased)
+  - Remove gray background from layout in UI
 v 8.4.0 (unreleased)
  - Improve the consistency of commit titles, branch names, tag names, issue/MR titles, on their respective project pages
  - Autocomplete data is now always loaded, instead of when focusing a comment text area (Yorick Peterse)

--- a/app/assets/javascripts/activities.js.coffee
+++ b/app/assets/javascripts/activities.js.coffee
 class @Activities
  constructor: ->
    Pager.init 20, true
-    $(".event-filter .btn").bind "click", (event) =>
+    $(".event-filter a").bind "click", (event) =>
      event.preventDefault()
      @toggleFilter($(event.currentTarget))
      @reloadActivities()
@@ -12,7 +12,7 @@ class @Activities
  toggleFilter: (sender) ->
-    sender.toggleClass "active"
+    sender.closest('li').toggleClass "active"
    event_filters = $.cookie("event_filter")
    filter = sender.attr("id").split("_")[0]
    if event_filters

--- a/app/assets/javascripts/merge_request_tabs.js.coffee
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -5,7 +5,7 @@
 #
 # ### Example Markup
 #
-#   <ul class="nav nav-tabs merge-request-tabs">
+#   <ul class="nav-links merge-request-tabs">
 #     <li class="notes-tab active">
 #       <a data-action="notes" data-target="#notes" data-toggle="tab" href="/foo/bar/merge_requests/1">
 #         Discussion

--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -24,6 +24,7 @@
 @import "framework/lists.scss";
 @import "framework/markdown_area.scss";
 @import "framework/mobile.scss";
+@import "framework/nav.scss";
 @import "framework/pagination.scss";
 @import "framework/panels.scss";
 @import "framework/selects.scss";

--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -18,9 +18,9 @@
  line-height: 36px;
 }
-.content-block,
 .gray-content-block {
-  margin: -$gl-padding;
+  margin-top: 0;
+  margin-bottom: -$gl-padding;
  background-color: $background-color;
  padding: $gl-padding;
  margin-bottom: 0px;
@@ -86,10 +86,7 @@
 .cover-block {
  text-align: center;
  background: $background-color;
-  margin: -$gl-padding;
+  padding-top: 44px;
-  margin-bottom: 0;
-  padding: 44px $gl-padding;
-  border-bottom: 1px solid $border-color;
  position: relative;
  .avatar-holder {
@@ -136,3 +133,23 @@
 .block-connector {
  margin-top: -1px;
 }
+.nav-block {
+  .controls {
+    float: right;
+    .btn {
+      padding: 7px 10px;
+      margin-top: 11px;
+    }
+  }
+}
+.content-block {
+  padding: $gl-padding 0;
+  border-bottom: 1px solid $border-color;
+  &.oneline-block {
+    line-height: 42px;
+  }
+}
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -159,33 +159,6 @@
  }
 }
-.btn-group-next {
-  .btn {
-    padding: 9px 0px;
-    font-size: 15px;
-    color: #7f8fa4;
-    border-color: #e7e9ed;
-    width: 140px;
-    .badge {
-      font-weight: normal;
-      background-color: #eee;
-      color: #78a;
-    }
-    &.active {
-      border-color: $gl-info;
-      background: $gl-info;
-      color: #fff;
-      .badge {
-        color: $gl-info;
-        background-color: white;
-      }
-    }
-  }
-}
 .btn-clipboard {
  border: none;
 }
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -374,75 +374,6 @@ table {
  }
 }
-.center-top-menu, .left-top-menu {
-  @include nav-menu;
-  text-align: center;
-  margin-top: 5px;
-  margin-bottom: $gl-padding;
-  height: auto;
-  margin-top: -$gl-padding;
-  &.no-bottom {
-    margin-bottom: 0;
-  }
-  &.no-top {
-    margin-top: 0;
-  }
-  li a {
-    display: inline-block;
-    padding-top: $gl-padding;
-    padding-bottom: 11px;
-    margin-bottom: -1px;
-  }
-  &.bottom-border {
-    border-bottom: 1px solid $border-color;
-    height: 57px;
-  }
-  &.wide {
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
-  }
-}
-.left-top-menu {
-  text-align: left;
-  border-bottom: 1px solid #EEE;
-}
-.center-middle-menu {
-  @include nav-menu;
-  padding: 0;
-  text-align: center;
-  margin: -$gl-padding;
-  margin-top: 0;
-  margin-bottom: 0;
-  height: 58px;
-  border-bottom: 1px solid $border-color;
-  li {
-    &:after {
-      content: "|";
-      color: $border-gray-light;
-    }
-    &:last-child {
-      &:after {
-        content: none;
-      }
-    }
-    > a {
-      display: inline-block;
-      text-transform: uppercase;
-      font-size: 13px;
-    }
-  }
-}
 .dropzone .dz-preview .dz-progress {
  border-color: $border-color !important;
 }

--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -3,11 +3,8 @@
 *
 */
 .file-holder {
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
  border: none;
-  border-top: 1px solid #E7E9EE;
+  border: 1px solid $border-color;
-  border-bottom: 1px solid #E7E9EE;
  &.readme-holder {
    border-bottom: 0;

--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -8,10 +8,12 @@
  .flash-notice {
    @extend .alert;
    @extend .alert-info;
+    margin: 0;
  }
  .flash-alert {
    @extend .alert;
    @extend .alert-danger;
+    margin: 0;
  }
 }
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -28,6 +28,7 @@ header {
    min-height: $header-height;
    background-color: #fff;
    border: none;
+    border-bottom: 1px solid #EEE;
    .container-fluid {
      width: 100% !important;

--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -5,8 +5,6 @@ html {
 }
 body {
-  background-color: #F3F3F3 !important;
  &.navless {
    background-color: white !important;
  }

--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -109,10 +109,8 @@ ul.content-list {
  padding: 0;
  > li {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
    border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
    color: $gl-gray;
    .avatar {
@@ -133,6 +131,7 @@ ul.content-list {
 .panel > .content-list {
  li {
    margin: 0;
+    padding: $gl-padding;
  }
 }
@@ -148,7 +147,7 @@ ul.controls {
  > li {
    float: left;
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }

--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -65,13 +65,6 @@
  position: relative;
 }
-.md-header {
-  ul {
-    float: left;
-    margin-bottom: 1px;
-  }
-}
 .referenced-users {
  color: #4c4e54;
  padding-top: 10px;
@@ -85,23 +78,6 @@
  box-shadow: none;
 }
-.new_note,
-.edit_note,
-.detail-page-description,
-.milestone-description,
-.wiki-content,
-.merge-request-form {
-  .nav-tabs {
-    margin-bottom: 0;
-    border: none;
-    li a,
-    li.active a {
-      border: 1px solid #DDD;
-    }
-  }
-}
 .markdown-area {
  @include border-radius(0);
  background: #FFF;

--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -118,38 +118,3 @@
  font-size: 16px;
  line-height: 24px;
 }
-@mixin nav-menu {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  height: 56px;
-  li {
-    display: inline-block;
-    a {
-      padding: 14px;
-      font-size: 15px;
-      line-height: 28px;
-      color: #959494;
-      border-bottom: 2px solid transparent;
-      &:hover, &:active, &:focus {
-        text-decoration: none;
-        outline: none;
-      }
-    }
-    &.active a {
-      color: #616060;
-      border-bottom: 2px solid #4688f1;
-    }
-    .badge {
-      font-weight: normal;
-      background-color: #eee;
-      color: #78a;
-    }
-  }
-}
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -9,7 +9,7 @@
    padding-right: 5px;
  }
-  .nav.nav-tabs > li > a {
+  .nav-links > li > a {
    padding: 10px;
    font-size: 12px;
    margin-right: 3px;
@@ -81,7 +81,7 @@
    display: none;
  }
-  .center-top-menu, .left-top-menu {
+  .nav-links, .nav-links {
    li a {
      font-size: 14px;
      padding: 19px 10px;

--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
+.nav-links {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  height: auto;
+  border-bottom: 1px solid $border-color;
+  li {
+    display: inline-block;
+    a {
+      display: inline-block;
+      padding: 14px;
+      padding-top: $gl-padding;
+      padding-bottom: 11px;
+      margin-bottom: -1px;
+      font-size: 15px;
+      line-height: 28px;
+      color: #959494;
+      border-bottom: 2px solid transparent;
+      &:hover, &:active, &:focus {
+        text-decoration: none;
+        outline: none;
+      }
+    }
+    &.active a {
+      color: #000000;
+      border-bottom: 2px solid #4688f1;
+    }
+    .badge {
+      font-weight: normal;
+      background-color: #eee;
+      color: #78a;
+    }
+  }
+}
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -21,11 +21,10 @@
 .content-wrapper {
  width: 100%;
-  padding: 20px;
  .container-fluid {
    background: #FFF;
-    padding: $gl-padding;
+    padding: 0 $gl-padding;
    &.container-blank {
      background: none;

--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
 .table-holder {
-  margin: -$gl-padding;
+  margin: 0;
-  margin-top: 0;
-  margin-bottom: 0;
 }
 table {
  &.table {
    margin-bottom: $gl-padding;
    .dropdown-menu a {
      text-decoration: none;
    }
@@ -32,6 +30,7 @@ table {
      }
      th {
+        background-color: $background-color;
        font-weight: normal;
        font-size: 15px;
        border-bottom: 1px solid $border-color !important;

--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -5,10 +5,8 @@
  padding: 0;
  .timeline-entry {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
    border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
    color: $gl-gray;
    border-bottom: 1px solid $border-white-light;

--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -99,47 +99,6 @@
  }
 }
-// Nav tabs
-.nav.nav-tabs {
-  margin-bottom: 15px;
-  li {
-    > a {
-      margin-right: 5px;
-      line-height: 20px;
-      border-color: #EEE;
-      color: #888;
-      border-bottom: 1px solid #ddd;
-      .badge {
-        background-color: #eee;
-        color: #888;
-        text-shadow: 0 1px 1px #fff;
-      }
-      i.fa {
-        line-height: 14px;
-      }
-    }
-    &.active {
-      > a {
-        border-color: #CCC;
-        border-bottom: 1px solid #fff;
-        color: #333;
-        font-weight: bold;
-      }
-    }
-  }
-}
-.nav-tabs > li > a,
-.nav-pills > li > a {
-  color: #666;
-}
-.nav-pills > .active > a > span > .badge {
-  background-color: #fff;
-  color: $gl-primary;
-}
 /**
 * fix to keep tooltips position in top navigation bar

--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -177,7 +177,7 @@ body {
 }
 .page-title {
-  margin-top: 0px;
+  margin-top: $gl-padding;
  line-height: 1.3;
  font-size: 1.25em;
  font-weight: 600;

--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -4,7 +4,7 @@
    position: absolute;
    top: 0px;
    right: 4px;
-    line-height: 40px;
+    line-height: 56px;
  }
  a.js-zen-leave {

--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -39,6 +39,8 @@
 }
 .commit-box {
+  border-top: 1px solid $border-color;
  .commit-title {
    margin: 0;
    font-size: 23px;

--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
 .detail-page-header {
-  margin: -$gl-padding;
+  padding: 11px 0;
-  padding: 7px $gl-padding;
-  margin-bottom: 0px;
  border-bottom: 1px solid $border-color;
  color: #5c5d5e;
  font-size: 16px;

--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
 // Common
 .diff-file {
-  margin-left: -$gl-padding;
+  border: 1px solid $border-color;
-  margin-right: -$gl-padding;
+  border-top: none;
-  border: none;
-  border-bottom: 1px solid #E7E9EE;
  .diff-header {
    position: relative;

--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -4,9 +4,7 @@
 */
 .event-item {
  font-size: $gl-font-size;
-  padding: $gl-padding $gl-padding $gl-padding ($gl-padding + $gl-avatar-size + 15px);
+  padding: $gl-padding 0 $gl-padding ($gl-avatar-size + 15px);
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
  border-bottom: 1px solid $table-border-color;
  color: #7f8fa4;

--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -30,7 +30,7 @@
    margin-top: 7px;
  }
-  .center-top-menu {
+  .nav-links {
    text-align: left;
  }
 }

--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -3,9 +3,9 @@
 *
 */
 .mr-state-widget {
-  background: #F7F8FA;
+  background: $background-color;
  color: $gl-gray;
-  border: 1px solid #dce0e6;
+  border: 1px solid $border-color;
  @include border-radius(2px);
  form {

--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -26,6 +26,8 @@
 }
 .project-home-panel {
+  padding-bottom: 40px;
+  border-bottom: 1px solid $border-color;
  .cover-controls {
    .project-settings-dropdown {
@@ -226,7 +228,6 @@
 }
 .projects-search-form {
  .input-group .form-control {
    height: 42px;
  }
@@ -351,28 +352,6 @@
  color: #555;
 }
-ul.nav.nav-projects-tabs {
-  @extend .nav-tabs;
-  padding-left: 8px;
-  li {
-    a {
-      padding: 6px 25px;
-      margin-top: 2px;
-      border-color: #DDD;
-      background-color: #EEE;
-      text-shadow: 0 1px 1px white;
-      color: #555;
-    }
-    &.active {
-      a {
-        font-weight: bold;
-      }
-    }
-  }
-}
 .project_member_row form {
  margin: 0px;
 }
@@ -416,11 +395,8 @@ ul.nav.nav-projects-tabs {
 .top-area {
  border-bottom: 1px solid #EEE;
-  margin: 0 -16px;
-  padding: 0 $gl-padding;
-  height: 42px;
-  ul.left-top-menu {
+  ul.nav-links {
    display: inline-block;
    width: 50%;
    margin-bottom: 0px;
@@ -482,11 +458,11 @@ table.table.protected-branches-list tr.no-border {
  padding-top: 10px;
  padding-bottom: 4px;
-  ul.nav-pills {
+  ul.nav {
    display:inline-block;
  }
-  .nav-pills li {
+  .nav li {
    display:inline;
  }
@@ -523,8 +499,7 @@ pre.light-well {
 }
 .projects-search-form {
-  margin: -$gl-padding;
+  padding: $gl-padding 0;
-  padding: $gl-padding;
  padding-bottom: 0;
  margin-bottom: 0px;
@@ -574,10 +549,8 @@ pre.light-well {
  @include basic-list;
  .project-row {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
    border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
    &.no-description {
      .project {
@@ -631,8 +604,6 @@ pre.light-well {
 }
 .project-last-commit {
-  margin: 0 7px;
  .ci-status {
    margin-right: 16px;
  }
@@ -662,9 +633,7 @@ pre.light-well {
 }
 .project-show-readme .readme-holder {
-  margin-left: -$gl-padding;
+  padding: $gl-padding 0;
-  margin-right: -$gl-padding;
-  padding: ($gl-padding + 7px);
  border-top: 0;
  .edit-project-readme {

--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
 .tree-holder {
+  > .nav-block {
+    margin: 11px 0;
+  }
  .file-finder {
    width: 50%;
@@ -13,7 +16,7 @@
    tr {
      > td, > th {
-        line-height: 28px;
+        line-height: 26px;
      }
      &:hover {
@@ -86,12 +89,14 @@
 .blob-commit-info {
  list-style: none;
+  padding: $gl-padding;
+  background: $background-color;
+  border: 1px solid $border-color;
+  border-bottom: none;
  margin: 0;
-  padding: 0;
-  margin-bottom: 5px;
  .commit {
-    padding: $gl-padding 0;
+    padding: 0;
    .commit-row-title {
      .commit-row-message {
@@ -115,3 +120,8 @@
  font-weight: normal;
  color: $md-link-color;
 }
+.tree-controls {
+  float: right;
+  margin-top: 11px;
+}
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -27,13 +27,15 @@ module EventsHelper
    key = key.to_s
    active = 'active' if @event_filter.active?(key)
    link_opts = {
-      class: "event-filter-link btn btn-default #{active}",
+      class: "event-filter-link",
      id:    "#{key}_event_filter",
      title: "Filter by #{tooltip.downcase}",
    }
-    link_to request.path, link_opts do
+    content_tag :li, class: active do
-      content_tag(:span, ' ' + tooltip)
+      link_to request.path, link_opts do
+        content_tag(:span, ' ' + tooltip)
+      end
    end
  end

--- a/app/views/admin/builds/index.html.haml
+++ b/app/views/admin/builds/index.html.haml
@@ -4,7 +4,7 @@
      - if @all_builds.running_or_pending.any?
        = link_to 'Cancel all', cancel_all_admin_builds_path, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
-  %ul.center-top-menu
+  %ul.nav-links
    %li{class: ('active' if @scope.nil?)}
      = link_to admin_builds_path do
        All

--- a/app/views/admin/logs/show.html.haml
+++ b/app/views/admin/logs/show.html.haml
 - page_title "Logs"
 - loggers = [Gitlab::GitLogger, Gitlab::AppLogger,
             Gitlab::ProductionLogger, Gitlab::SidekiqLogger]
-%ul.nav.nav-tabs.log-tabs
+%ul.nav-links.log-tabs
  - loggers.each do |klass|
    %li{ class: (klass == Gitlab::GitLogger ? 'active' : '') }
      = link_to klass::file_name, "##{klass::file_name_noext}",
          'data-toggle' => 'tab'
-%p.light To prevent performance issues admin logs output the last 2000 lines
+.gray-content-block
+  To prevent performance issues admin logs output the last 2000 lines
 .tab-content
  - loggers.each do |klass|
    .tab-pane{ class: (klass == Gitlab::GitLogger ? 'active' : ''),

--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@@ -12,7 +12,7 @@
      %i.fa.fa-pencil-square-o
      Edit
 %hr
-%ul.nav.nav-tabs
+%ul.nav-links
  = nav_link(path: 'users#show') do
    = link_to "Account", admin_user_path(@user)
  = nav_link(path: 'users#groups') do
@@ -23,3 +23,4 @@
    = link_to "SSH keys", keys_admin_user_path(@user)
  = nav_link(controller: :identities) do
    = link_to "Identities", admin_user_identities_path(@user)
+.append-bottom-default
--- a/app/views/admin/users/index.html.haml
+++ b/app/views/admin/users/index.html.haml
 - page_title "Users"
 = render 'shared/show_aside'
-.row
+.admin-filter
-  %aside.col-md-3
+  %ul.nav-links
-    .admin-filter
+    %li{class: "#{'active' unless params[:filter]}"}
-      %ul.nav.nav-pills.nav-stacked
+      = link_to admin_users_path do
-        %li{class: "#{'active' unless params[:filter]}"}
+        Active
-          = link_to admin_users_path do
+        %small.badge= number_with_delimiter(User.active.count)
-            Active
+    %li{class: "#{'active' if params[:filter] == "admins"}"}
-            %small.pull-right= number_with_delimiter(User.active.count)
+      = link_to admin_users_path(filter: "admins") do
-        %li{class: "#{'active' if params[:filter] == "admins"}"}
+        Admins
-          = link_to admin_users_path(filter: "admins") do
+        %small.badge= number_with_delimiter(User.admins.count)
-            Admins
+    %li.filter-two-factor-enabled{class: "#{'active' if params[:filter] == 'two_factor_enabled'}"}
-            %small.pull-right= number_with_delimiter(User.admins.count)
+      = link_to admin_users_path(filter: 'two_factor_enabled') do
-        %li.filter-two-factor-enabled{class: "#{'active' if params[:filter] == 'two_factor_enabled'}"}
+        2FA Enabled
-          = link_to admin_users_path(filter: 'two_factor_enabled') do
+        %small.badge= number_with_delimiter(User.with_two_factor.count)
-            2FA Enabled
+    %li.filter-two-factor-disabled{class: "#{'active' if params[:filter] == 'two_factor_disabled'}"}
-            %small.pull-right= number_with_delimiter(User.with_two_factor.count)
+      = link_to admin_users_path(filter: 'two_factor_disabled') do
-        %li.filter-two-factor-disabled{class: "#{'active' if params[:filter] == 'two_factor_disabled'}"}
+        2FA Disabled
-          = link_to admin_users_path(filter: 'two_factor_disabled') do
+        %small.badge= number_with_delimiter(User.without_two_factor.count)
-            2FA Disabled
+    %li{class: "#{'active' if params[:filter] == "blocked"}"}
-            %small.pull-right= number_with_delimiter(User.without_two_factor.count)
+      = link_to admin_users_path(filter: "blocked") do
-        %li{class: "#{'active' if params[:filter] == "blocked"}"}
+        Blocked
-          = link_to admin_users_path(filter: "blocked") do
+        %small.badge= number_with_delimiter(User.blocked.count)
-            Blocked
+    %li{class: "#{'active' if params[:filter] == "wop"}"}
-            %small.pull-right= number_with_delimiter(User.blocked.count)
+      = link_to admin_users_path(filter: "wop") do
-        %li{class: "#{'active' if params[:filter] == "wop"}"}
+        Without projects
-          = link_to admin_users_path(filter: "wop") do
+        %small.badge= number_with_delimiter(User.without_projects.count)
-            Without projects
-            %small.pull-right= number_with_delimiter(User.without_projects.count)
-      %hr
-      = form_tag admin_users_path, method: :get, class: 'form-inline' do
-        .form-group
-          = search_field_tag :name, params[:name], placeholder: 'Name, email or username', class: 'form-control', spellcheck: false
-          = hidden_field_tag "filter", params[:filter]
-        = button_tag class: 'btn btn-primary' do
-          %i.fa.fa-search
-      %hr
-      = link_to 'Reset', admin_users_path, class: "btn btn-cancel"
-  %section.col-md-9
+  .gray-content-block.second-block
-    .panel.panel-default
+    .pull-right
-      .panel-heading
+      .dropdown.inline
-        Users (#{number_with_delimiter(@users.total_count)})
+        %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
-        .panel-head-actions
+          %span.light sort:
-          .dropdown.inline
+          - if @sort.present?
-            %a.dropdown-toggle.btn.btn-sm{href: '#', "data-toggle" => "dropdown"}
+            = sort_options_hash[@sort]
-              %span.light sort:
+          - else
-              - if @sort.present?
+            = sort_title_name
-                = sort_options_hash[@sort]
+          %b.caret
-              - else
+        %ul.dropdown-menu
-                = sort_title_name
-              %b.caret
-            %ul.dropdown-menu
-              %li
-                = link_to admin_users_path(sort: sort_value_name, filter: params[:filter]) do
-                  = sort_title_name
-                = link_to admin_users_path(sort: sort_value_recently_signin, filter: params[:filter]) do
-                  = sort_title_recently_signin
-                = link_to admin_users_path(sort: sort_value_oldest_signin, filter: params[:filter]) do
-                  = sort_title_oldest_signin
-                = link_to admin_users_path(sort: sort_value_recently_created, filter: params[:filter]) do
-                  = sort_title_recently_created
-                = link_to admin_users_path(sort: sort_value_oldest_created, filter: params[:filter]) do
-                  = sort_title_oldest_created
-                = link_to admin_users_path(sort: sort_value_recently_updated, filter: params[:filter]) do
-                  = sort_title_recently_updated
-                = link_to admin_users_path(sort: sort_value_oldest_updated, filter: params[:filter]) do
-                  = sort_title_oldest_updated
-          = link_to 'New User', new_admin_user_path, class: "btn btn-new btn-sm"
-      %ul.well-list
-        - @users.each do |user|
          %li
-            .list-item-name
+            = link_to admin_users_path(sort: sort_value_name, filter: params[:filter]) do
-              - if user.blocked?
+              = sort_title_name
-                %i.fa.fa-lock.cred
+            = link_to admin_users_path(sort: sort_value_recently_signin, filter: params[:filter]) do
+              = sort_title_recently_signin
+            = link_to admin_users_path(sort: sort_value_oldest_signin, filter: params[:filter]) do
+              = sort_title_oldest_signin
+            = link_to admin_users_path(sort: sort_value_recently_created, filter: params[:filter]) do
+              = sort_title_recently_created
+            = link_to admin_users_path(sort: sort_value_oldest_created, filter: params[:filter]) do
+              = sort_title_oldest_created
+            = link_to admin_users_path(sort: sort_value_recently_updated, filter: params[:filter]) do
+              = sort_title_recently_updated
+            = link_to admin_users_path(sort: sort_value_oldest_updated, filter: params[:filter]) do
+              = sort_title_oldest_updated
+      = link_to 'New User', new_admin_user_path, class: "btn btn-new"
+    = form_tag admin_users_path, method: :get, class: 'form-inline' do
+      .form-group
+        = search_field_tag :name, params[:name], placeholder: 'Name, email or username', class: 'form-control', spellcheck: false
+        = hidden_field_tag "filter", params[:filter]
+      = button_tag class: 'btn btn-primary' do
+        %i.fa.fa-search
+.panel.panel-default
+  %ul.well-list
+    - @users.each do |user|
+      %li
+        .list-item-name
+          - if user.blocked?
+            %i.fa.fa-lock.cred
+          - else
+            %i.fa.fa-user.cgreen
+          = link_to user.name, [:admin, user]
+          - if user.admin?
+            %strong.cred (Admin)
+          - if user == current_user
+            %span.cred It's you!
+        .pull-right
+          %span.light
+            %i.fa.fa-envelope
+            = mail_to user.email, user.email, class: 'light'
+          &nbsp;
+          .pull-right
+            = link_to 'Edit', edit_admin_user_path(user), id: "edit_#{dom_id(user)}", class: 'btn-grouped btn btn-xs'
+            - unless user == current_user
+              - if user.ldap_blocked?
+                = link_to '#', title: 'Cannot unblock LDAP blocked users', data: {toggle: 'tooltip'}, class: 'btn-grouped btn btn-xs btn-success disabled' do
+                  %i.fa.fa-lock
+                  Unblock
+              - elsif user.blocked?
+                = link_to 'Unblock', unblock_admin_user_path(user), method: :put, class: 'btn-grouped btn btn-xs btn-success'
              - else
-                %i.fa.fa-user.cgreen
+                = link_to 'Block', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: 'btn-grouped btn btn-xs btn-warning'
-              = link_to user.name, [:admin, user]
+              - if user.access_locked?
-              - if user.admin?
+                = link_to 'Unlock', unlock_admin_user_path(user), method: :put, class: 'btn-grouped btn btn-xs btn-success', data: { confirm: 'Are you sure?' }
-                %strong.cred (Admin)
+              - if user.can_be_removed?
-              - if user == current_user
+                = link_to 'Destroy', [:admin, user], data: { confirm: "USER #{user.name} WILL BE REMOVED! All issues, merge requests and groups linked to this user will also be removed! Maybe block the user instead? Are you sure?" }, method: :delete, class: 'btn-grouped btn btn-xs btn-remove'
-                %span.cred It's you!
+= paginate @users, theme: "gitlab"
-            .pull-right
-              %span.light
-                %i.fa.fa-envelope
-                = mail_to user.email, user.email, class: 'light'
-              &nbsp;
-              .pull-right
-                = link_to 'Edit', edit_admin_user_path(user), id: "edit_#{dom_id(user)}", class: 'btn-grouped btn btn-xs'
-                - unless user == current_user
-                  - if user.ldap_blocked?
-                    = link_to '#', title: 'Cannot unblock LDAP blocked users', data: {toggle: 'tooltip'}, class: 'btn-grouped btn btn-xs btn-success disabled' do
-                      %i.fa.fa-lock
-                      Unblock
-                  - elsif user.blocked?
-                    = link_to 'Unblock', unblock_admin_user_path(user), method: :put, class: 'btn-grouped btn btn-xs btn-success'
-                  - else
-                    = link_to 'Block', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: 'btn-grouped btn btn-xs btn-warning'
-                  - if user.access_locked?
-                    = link_to 'Unlock', unlock_admin_user_path(user), method: :put, class: 'btn-grouped btn btn-xs btn-success', data: { confirm: 'Are you sure?' }
-                  - if user.can_be_removed?
-                    = link_to 'Destroy', [:admin, user], data: { confirm: "USER #{user.name} WILL BE REMOVED! All issues, merge requests and groups linked to this user will also be removed! Maybe block the user instead? Are you sure?" }, method: :delete, class: 'btn-grouped btn btn-xs btn-remove'
-    = paginate @users, theme: "gitlab"
--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
 .hidden-xs
  = render "events/event_last_push", event: @last_push
-.gray-content-block
+.nav-block
  - if current_user
-    .pull-right
+    .controls
      = link_to dashboard_projects_path(:atom, { private_token: current_user.private_token }), class: 'btn rss-btn' do
        %i.fa.fa-rss
  = render 'shared/event_filter'

--- a/app/views/dashboard/_activity_head.html.haml
+++ b/app/views/dashboard/_activity_head.html.haml
-%ul.center-top-menu
+%ul.nav-links
  %li{ class: ("active" unless params[:filter]) }
    = link_to activity_dashboard_path, class: 'shortcuts-activity', data: {placement: 'right'} do
      Your Projects

--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
-%ul.center-top-menu
+%ul.nav-links
  = nav_link(page: dashboard_groups_path) do
    = link_to dashboard_groups_path, title: 'Your groups', data: {placement: 'right'} do
      Your Groups

--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
 = content_for :flash_message do
  = render 'shared/project_limit'
 .top-area
-  %ul.left-top-menu
+  %ul.nav-links
    = nav_link(page: [dashboard_projects_path, root_path]) do
      = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do
        Your Projects

--- a/app/views/dashboard/_snippets_head.html.haml
+++ b/app/views/dashboard/_snippets_head.html.haml
-%ul.center-top-menu
+%ul.nav-links
  = nav_link(page: dashboard_snippets_path, html_options: {class: 'home'}) do
    = link_to dashboard_snippets_path, title: 'Your snippets', data: {placement: 'right'} do
      Your Snippets

--- a/app/views/dashboard/milestones/show.html.haml
+++ b/app/views/dashboard/milestones/show.html.haml
@@ -48,7 +48,7 @@
    #{@milestone.open_items_count} open
  = milestone_progress_bar(@milestone)
-%ul.center-top-menu.no-top.no-bottom
+%ul.nav-links.no-top.no-bottom
  %li.active
    = link_to '#tab-issues', 'data-toggle' => 'tab' do
      Issues

--- a/app/views/dashboard/snippets/index.html.haml
+++ b/app/views/dashboard/snippets/index.html.haml
@@ -3,32 +3,36 @@
 = render 'dashboard/snippets_head'
-.gray-content-block
+.nav-block
-  .pull-right
+  .controls
    = link_to new_snippet_path, class: "btn btn-new", title: "New Snippet" do
      = icon('plus')
      New Snippet
-  .btn-group.btn-group-next.snippet-scope-menu
+  .nav-links.snippet-scope-menu
-    = link_to dashboard_snippets_path, class: "btn btn-default #{"active" unless params[:scope]}" do
+    %li{ class: ("active" unless params[:scope]) }
-      All
+      = link_to dashboard_snippets_path do
-      %span.badge
+        All
-        = current_user.snippets.count
+        %span.badge
+          = current_user.snippets.count
-    = link_to dashboard_snippets_path(scope: 'are_private'), class: "btn btn-default #{"active" if params[:scope] == "are_private"}" do
-      Private
+    %li{ class: ("active" if params[:scope] == "are_private") }
-      %span.badge
+      = link_to dashboard_snippets_path(scope: 'are_private') do
-        = current_user.snippets.are_private.count
+        Private
+        %span.badge
-    = link_to dashboard_snippets_path(scope: 'are_internal'), class: "btn btn-default #{"active" if params[:scope] == "are_internal"}" do
+          = current_user.snippets.are_private.count
-      Internal
-      %span.badge
+    %li{ class: ("active" if params[:scope] == "are_internal") }
-        = current_user.snippets.are_internal.count
+      = link_to dashboard_snippets_path(scope: 'are_internal') do
+        Internal
-    = link_to dashboard_snippets_path(scope: 'are_public'), class: "btn btn-default #{"active" if params[:scope] == "are_public"}" do
+        %span.badge
-      Public
+          = current_user.snippets.are_internal.count
-      %span.badge
-        = current_user.snippets.are_public.count
+    %li{ class: ("active" if params[:scope] == "are_public") }
+      = link_to dashboard_snippets_path(scope: 'are_public') do
+        Public
+        %span.badge
+          = current_user.snippets.are_public.count
 = render 'snippets/snippets'
--- a/app/views/devise/shared/_signin_box.html.haml
+++ b/app/views/devise/shared/_signin_box.html.haml
@@ -7,7 +7,7 @@
      %h3 Sign in
  .login-body
    - if form_based_providers.any?
-      %ul.nav.nav-tabs
+      %ul.nav-links
        - if crowd_enabled?
          %li.active
            = link_to "Crowd", "#tab-crowd", 'data-toggle' => 'tab'

--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
 - header_title group_title(@group, "Settings", edit_group_path(@group))
 - @blank_container = true
-.panel.panel-default
+.panel.panel-default.prepend-top-default
  .panel-heading
    Group settings
  .panel-body

--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -2,7 +2,7 @@
 - header_title group_title(@group, "Members", group_group_members_path(@group))
 - @blank_container = true
-.group-members-page
+.group-members-page.prepend-top-default
  - if current_user && current_user.can?(:admin_group_member, @group)
    .panel.panel-default
      .panel-heading

--- a/app/views/groups/milestones/show.html.haml
+++ b/app/views/groups/milestones/show.html.haml
@@ -54,7 +54,7 @@
    #{@milestone.open_items_count} open
  = milestone_progress_bar(@milestone)
-%ul.center-top-menu.no-top.no-bottom
+%ul.nav-links.no-top.no-bottom
  %li.active
    = link_to '#tab-issues', 'data-toggle' => 'tab' do
      Issues

--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
 - page_title "Projects"
 - header_title group_title(@group, "Projects", projects_group_path(@group))
-.panel.panel-default
+.panel.panel-default.prepend-top-default
  .panel-heading
    %strong= @group.name
    projects:

--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
+- @no_container = true
+- @blank_container = true
 - unless can?(current_user, :read_group, @group)
  - @disable_search_panel = true
@@ -25,8 +28,8 @@
    .cover-desc.description
      = markdown(@group.description, pipeline: :description)
- if can?(current_user, :read_group, @group)
-  %ul.center-top-menu.no-top
+  %ul.nav-links
    %li.active
      = link_to "#activity", 'data-toggle' => 'tab' do
        Activity
@@ -35,20 +38,22 @@
        = link_to "#projects", 'data-toggle' => 'tab' do
          Projects
-  .tab-content
+- if can?(current_user, :read_group, @group)
-    .tab-pane.active#activity
+  %div{ class: container_class }
-      .gray-content-block.activity-filter-block
+    .tab-content
-        - if current_user
+      .tab-pane.active#activity
-          = render "events/event_last_push", event: @last_push
+        .activity-filter-block
+          - if current_user
+            = render "events/event_last_push", event: @last_push
-          = render 'shared/event_filter'
+            = render 'shared/event_filter'
-      .content_list
+        .content_list
-      = spinner
+        = spinner
-    .tab-pane#projects
+      .tab-pane#projects
-      = render "projects", projects: @projects
+        = render "projects", projects: @projects
 - else
-  %p.center-top-menu.no-top
+  %p.nav-links.no-top
    No projects to show
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -139,26 +139,9 @@
  %h2#navs Navigation
  %h4
-    %code .center-top-menu
+    %code .nav-links
  .example
-    %ul.center-top-menu
+    %ul.nav-links
-      %li.active
-        %a Open
-      %li
-        %a Closed
-  %h4
-    %code .btn-group.btn-group-next
-  .example
-    %div.btn-group.btn-group-next
-      %a.btn.active Open
-      %a.btn Closed
-  %h4
-    %code .nav.nav-tabs
-  .example
-    %ul.nav.nav-tabs
      %li.active
        %a Open
      %li

--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -24,7 +24,7 @@
  .content-wrapper
    = render "layouts/flash"
    = yield :flash_message
-    %div{ class: container_class }
+    %div{ class: (container_class unless @no_container) }
      .content
        .clearfix
          = yield
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -6,7 +6,7 @@
  .alert.alert-info
    Some options are unavailable for LDAP accounts
-.account-page
+.account-page.prepend-top-default
  .panel.panel-default.update-token
    .panel-heading
      Reset Private token

--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
-.gray-content-block.activity-filter-block
+.nav-block.activity-filter-block
  - if current_user
-    .pull-right
+    .controls
      = link_to namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "Feed", class: 'btn rss-btn' do
        %i.fa.fa-rss

--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
 #tree-holder.tree-holder.clearfix
-  .gray-content-block.second-block
+  .nav-block
    = render 'projects/tree/tree_header', tree: @tree
  = render 'projects/tree/tree_content', tree: @tree

--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
 .md-area
  .md-header.clearfix
-    %ul.center-top-menu
+    %ul.nav-links
      %li.active
        %a.js-md-write-button(href="#md-write-holder" tabindex="-1")
          Write

--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
-.gray-content-block.top-block
+.nav-block
  .tree-ref-holder
    = render 'shared/ref_switcher', destination: 'blob', path: @path

--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -2,7 +2,7 @@
 = render "header_title"
 .file-editor
-  %ul.center-top-menu.no-bottom.js-edit-mode
+  %ul.nav-links.no-bottom.js-edit-mode
    %li.active
      = link_to '#editor' do
        = icon('edit')

--- a/app/views/projects/builds/index.html.haml
+++ b/app/views/projects/builds/index.html.haml
@@ -8,7 +8,7 @@
        - if @all_builds.running_or_pending.any?
          = link_to 'Cancel running', cancel_all_namespace_project_builds_path(@project.namespace, @project), data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
-  %ul.center-top-menu
+  %ul.nav-links
    %li{class: ('active' if @scope.nil?)}
      = link_to project_builds_path(@project) do
        All

--- a/app/views/projects/builds/show.html.haml
+++ b/app/views/projects/builds/show.html.haml
@@ -14,7 +14,7 @@
  #up-build-trace
  - if @commit.matrix_for_ref?(@build.ref)
-    %ul.center-top-menu.no-top.no-bottom
+    %ul.nav-links.no-top.no-bottom
      - @commit.latest_builds_for_ref(@build.ref).each do |build|
        %li{class: ('active' if build == @build) }
          = link_to namespace_project_build_path(@project.namespace, @project, build) do

--- a/app/views/projects/commit/_ci_menu.html.haml
+++ b/app/views/projects/commit/_ci_menu.html.haml
-%ul.center-top-menu.no-top.no-bottom.commit-ci-menu
+%ul.nav-links.no-top.no-bottom.commit-ci-menu
  = nav_link(path: 'commit#show') do
    = link_to namespace_project_commit_path(@project.namespace, @project, @commit.id) do
      Changes

--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -50,7 +50,7 @@
 .commit-info-row.branches
  %i.fa.fa-spinner.fa-spin
-.commit-box.gray-content-block.middle-block
+.commit-box.content-block
  %h3.commit-title
    = markdown escape_once(@commit.title), pipeline: :single_line
  - if @commit.description.present?

--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -2,7 +2,9 @@
 - page_description  @commit.description
 = render "projects/commits/header_title"
-= render "commit_box"
+.prepend-top-default
+  = render "commit_box"
 - if @ci_commit
  = render "ci_menu"
 - else

--- a/app/views/projects/commits/_head.html.haml
+++ b/app/views/projects/commits/_head.html.haml
-%ul.center-top-menu
+%ul.nav-links
  = nav_link(controller: [:commit, :commits]) do
    = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
      Commits

--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -6,7 +6,7 @@
 = render "head"
-.gray-content-block
+.gray-content-block.second-block
  .tree-ref-holder
    = render 'shared/ref_switcher', destination: 'commits'

--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -3,7 +3,7 @@
 - diff_files = safe_diff_files(diffs)
-.gray-content-block.middle-block.oneline-block
+.content-block.oneline-block
  .inline-parallel-buttons
    .btn-group
      = inline_diff_btn

--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
 - @blank_container = true
-.project-edit-container
+.project-edit-container.prepend-top-default
  .project-edit-errors
  .project-edit-content
    .panel.panel-default

--- a/app/views/projects/graphs/_head.html.haml
+++ b/app/views/projects/graphs/_head.html.haml
-%ul.center-top-menu
+%ul.nav-links
  = nav_link(action: :show) do
    = link_to 'Contributors', namespace_project_graph_path
  = nav_link(action: :commits) do

--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -18,7 +18,7 @@
  = f.hidden_field :target_branch
 .mr-compare.merge-request
-  %ul.merge-request-tabs.center-top-menu.no-top.no-bottom
+  %ul.merge-request-tabs.nav-links.no-top.no-bottom
    %li.commits-tab
      = link_to url_for(params), data: {target: 'div#commits', action: 'commits', toggle: 'tab'} do
        Commits

--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -45,7 +45,7 @@
          = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
    - if @commits.present?
-      %ul.merge-request-tabs.center-top-menu.no-top.no-bottom
+      %ul.merge-request-tabs.nav-links.no-top.no-bottom
        %li.notes-tab
          = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#notes', action: 'notes', toggle: 'tab'} do
            Discussion

--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -57,7 +57,7 @@
    %span.pull-right= @milestone.expires_at
  = milestone_progress_bar(@milestone)
-%ul.center-top-menu.no-top.no-bottom
+%ul.nav-links.no-top.no-bottom
  %li.active
    = link_to '#tab-issues', 'data-toggle' => 'tab' do
      Issues

--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -2,7 +2,7 @@
 = render "header_title"
 - @blank_container = true
-.project-members-page
+.project-members-page.prepend-top-default
  - if can?(current_user, :admin_project_member, @project)
    .panel.panel-default
      .panel-heading

--- a/app/views/projects/runners/index.html.haml
+++ b/app/views/projects/runners/index.html.haml
 - page_title "Runners"
-.light
+.light.prepend-top-default
  %p
    A 'runner' is a process which runs a build.
    You can setup as many runners as you need.

--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
+- @no_container = true
+- @blank_container = true
 = content_for :meta_tags do
  - if current_user
    = auto_discovery_link_tag(:atom, namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "#{@project.name} activity")
@@ -8,11 +11,10 @@
    = render 'shared/no_password'
 = render 'projects/last_push'
 = render "home_panel"
 .project-stats.gray-content-block.second-block
-  %ul.nav.nav-pills
+  %ul.nav
    %li
      = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
        = pluralize(number_with_delimiter(@project.commit_count), 'commit')
@@ -57,15 +59,17 @@
          = link_to add_contribution_guide_path(@project) do
            Add Contribution guide
- if @project.archived?
-  .text-warning.center.prepend-top-20
-    %p
-      = icon("exclamation-triangle fw")
-      Archived project! Repository is read-only
 - if @repository.commit
  .content-block.second-block.white
-    = render 'projects/last_commit', commit: @repository.commit, project: @project
+    %div{ class: container_class }
+      = render 'projects/last_commit', commit: @repository.commit, project: @project
+%div{ class: container_class }
+  - if @project.archived?
+    .text-warning.center.prepend-top-20
+      %p
+        = icon("exclamation-triangle fw")
+        Archived project! Repository is read-only
-%div{class: "project-show-#{default_project_view}"}
+  %div{class: "project-show-#{default_project_view}"}
-  = render default_project_view
+    = render default_project_view
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
 %div.tree-content-holder
  .table-holder
-    %table.table#tree-slider{class: "table_#{@hex_path} tree-table table-striped" }
+    %table.table#tree-slider{class: "table_#{@hex_path} tree-table" }
      %thead
        %tr
          %th Name

--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -5,13 +5,13 @@
    = auto_discovery_link_tag(:atom, namespace_project_commits_url(@project.namespace, @project, @ref, format: :atom, private_token: current_user.private_token), title: "#{@project.name}:#{@ref} commits")
 = render 'projects/last_push'
-.pull-right
+.tree-controls
  = render 'projects/find_file_link'
  - if can? current_user, :download_code, @project
    = render 'projects/repositories/download_archive', ref: @ref, btn_class: 'hidden-xs hidden-sm btn-grouped', split_button: true
 #tree-holder.tree-holder.clearfix
-  .gray-content-block.top-block
+  .nav-block
    = render 'projects/tree/tree_header', tree: @tree
  = render 'projects/tree/tree_content', tree: @tree
--- a/app/views/projects/wikis/_nav.html.haml
+++ b/app/views/projects/wikis/_nav.html.haml
@@ -7,7 +7,7 @@
      = render 'projects/wikis/new'
-  %ul.center-top-menu
+  %ul.nav-links
    = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
      = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)

--- a/app/views/search/_category.html.haml
+++ b/app/views/search/_category.html.haml
-%ul.nav.nav-tabs.search-filter
+%ul.nav-links.search-filter
  - if @project
    %li{class: ("active" if @scope == 'blobs')}
      = link_to search_filter_path(scope: 'blobs') do

--- a/app/views/search/_results.html.haml
+++ b/app/views/search/_results.html.haml
 - if @search_results.empty?
  = render partial: "search/results/empty"
 - else
-  %p.light
+  .gray-content-block
    Search results for
    %code
      = @search_term

--- a/app/views/search/show.html.haml
+++ b/app/views/search/show.html.haml
 - page_title @search_term
-= render 'search/form'
+.prepend-top-default
+  = render 'search/form'
 - if @search_term
  = render 'search/category'
  = render 'search/results'
--- a/app/views/shared/_event_filter.html.haml
+++ b/app/views/shared/_event_filter.html.haml
-.btn-group.btn-group-next.event-filter
+%ul.nav-links.event-filter
  = event_filter_link EventFilter.push, 'Push events'
  = event_filter_link EventFilter.merged, 'Merge events'
  = event_filter_link EventFilter.comments, 'Comments'

--- a/app/views/shared/_milestones_filter.html.haml
+++ b/app/views/shared/_milestones_filter.html.haml
 .milestones-filters
-  %ul.center-top-menu
+  %ul.nav-links
    %li{class: ("active" if params[:state].blank? || params[:state] == 'opened')}
      = link_to milestones_filter_path(state: 'opened') do
        Open

--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
 .issues-filters
  .issues-state-filters
-    %ul.center-top-menu
+    %ul.nav-links
      - if defined?(type) && type == :merge_requests
        - page_context_word = 'merge requests'
      - else

--- a/app/views/sherlock/queries/show.html.haml
+++ b/app/views/sherlock/queries/show.html.haml
 - page_title t('sherlock.title'), t('sherlock.transaction'), t('sherlock.query')
 - header_title t('sherlock.title'), sherlock_transactions_path
-%ul.center-top-menu
+%ul.nav-links
  %li.active
    %a(href="#tab-general" data-toggle="tab")
      = t('sherlock.general')

--- a/app/views/sherlock/transactions/show.html.haml
+++ b/app/views/sherlock/transactions/show.html.haml
 - page_title t('sherlock.title'), t('sherlock.transaction')
 - header_title t('sherlock.title'), sherlock_transactions_path
-%ul.center-top-menu
+%ul.nav-links
  %li.active
    %a(href="#tab-general" data-toggle="tab")
      = t('sherlock.general')

--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
 - page_title       @user.name
 - page_description @user.bio
 - header_title     @user.name, user_path(@user)
+- @no_container = true
+- @blank_container = true
 = content_for :meta_tags do
  = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
@@ -8,6 +10,25 @@
 = render 'shared/show_aside'
 .cover-block
+  .cover-controls
+    - if @user == current_user
+      = link_to profile_path, class: 'btn btn-gray' do
+        = icon('pencil')
+    - elsif current_user
+      %span.report-abuse
+        - if @user.abuse_report
+          %button.btn.btn-danger{ title: 'Already reported for abuse',
+            data: { toggle: 'tooltip', placement: 'left', container: 'body' }}
+            = icon('exclamation-circle')
+        - else
+          = link_to new_abuse_report_path(user_id: @user.id), class: 'btn btn-gray',
+            title: 'Report abuse', data: {toggle: 'tooltip', placement: 'left', container: 'body'} do
+            = icon('exclamation-circle')
+    - if current_user
+      &nbsp;
+      = link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do
+        = icon('rss')
  .avatar-holder
    = link_to avatar_icon(@user, 400), target: '_blank' do
      = image_tag avatar_icon(@user, 90), class: "avatar s90", alt: ''
@@ -47,74 +68,56 @@
        = icon('map-marker')
        = @user.location
+  %ul.nav-links.center
+    %li.active
+      = link_to "#activity", 'data-toggle' => 'tab' do
+        Activity
+    - if @groups.any?
+      %li
+        = link_to "#groups", 'data-toggle' => 'tab' do
+          Groups
+    - if @contributed_projects.present?
+      %li
+        = link_to "#contributed", 'data-toggle' => 'tab' do
+          Contributed projects
+    - if @projects.present?
+      %li
+        = link_to "#personal", 'data-toggle' => 'tab' do
+          Personal projects
-  .cover-controls
+%div{ class: container_class }
-    - if @user == current_user
+  .tab-content
-      = link_to profile_path, class: 'btn btn-gray' do
+    .tab-pane.active#activity
-        = icon('pencil')
+      .gray-content-block.white.second-block
-    - elsif current_user
+        %div{ class: container_class }
-      %span.report-abuse
+          .user-calendar
-        - if @user.abuse_report
+            %h4.center.light
-          %button.btn.btn-danger{ title: 'Already reported for abuse',
+              %i.fa.fa-spinner.fa-spin
-            data: { toggle: 'tooltip', placement: 'left', container: 'body' }}
+        .user-calendar-activities
-            = icon('exclamation-circle')
-        - else
-          = link_to new_abuse_report_path(user_id: @user.id), class: 'btn btn-gray',
-            title: 'Report abuse', data: {toggle: 'tooltip', placement: 'left', container: 'body'} do
-            = icon('exclamation-circle')
-    - if current_user
-      &nbsp;
-      = link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do
-        = icon('rss')
-.gray-content-block.second-block
-  .user-calendar
-    %h4.center.light
-      %i.fa.fa-spinner.fa-spin
-  .user-calendar-activities
-%ul.center-top-menu.no-top.no-bottom.bottom-border.wide
-  %li.active
-    = link_to "#activity", 'data-toggle' => 'tab' do
-      Activity
-  - if @groups.any?
-    %li
-      = link_to "#groups", 'data-toggle' => 'tab' do
-        Groups
-  - if @contributed_projects.present?
-    %li
-      = link_to "#contributed", 'data-toggle' => 'tab' do
-        Contributed projects
-  - if @projects.present?
-    %li
-      = link_to "#personal", 'data-toggle' => 'tab' do
-        Personal projects
-.tab-content
+      .content_list
-  .tab-pane.active#activity
+      = spinner
-    .content_list
-    = spinner
-  - if @groups.any?
+    - if @groups.any?
-    .tab-pane#groups
+      .tab-pane#groups
-      %ul.content-list
+        %ul.content-list
-        - @groups.each do |group|
+          - @groups.each do |group|
-          = render 'shared/groups/group', group: group
+            = render 'shared/groups/group', group: group
-  - if @contributed_projects.present?
+    - if @contributed_projects.present?
-    .tab-pane#contributed
+      .tab-pane#contributed
-      .contributed-projects
+        .contributed-projects
-        = render 'shared/projects/list',
+          = render 'shared/projects/list',
-          projects: @contributed_projects.sort_by(&:star_count).reverse,
+            projects: @contributed_projects.sort_by(&:star_count).reverse,
-          projects_limit: 5, stars: true, avatar: true
+            projects_limit: 10, stars: true, avatar: true
-  - if @projects.present?
+    - if @projects.present?
-    .tab-pane#personal
+      .tab-pane#personal
-      .personal-projects
+        .personal-projects
-        = render 'shared/projects/list',
+          = render 'shared/projects/list',
-          projects: @projects.sort_by(&:star_count).reverse,
+            projects: @projects.sort_by(&:star_count).reverse,
-          projects_limit: 10, stars: true, avatar: true
+            projects_limit: 10, stars: true, avatar: true
 :javascript
  $(".user-calendar").load("#{user_calendar_path}");
--- a/features/steps/shared/active_tab.rb
+++ b/features/steps/shared/active_tab.rb
@@ -6,7 +6,7 @@ module SharedActiveTab
  end
  def ensure_active_sub_tab(content)
-    expect(find('div.content ul.center-top-menu li.active')).to have_content(content)
+    expect(find('div.content ul.nav-links li.active')).to have_content(content)
  end
  def ensure_active_sub_nav(content)
@@ -18,7 +18,7 @@ module SharedActiveTab
  end
  step 'no other sub tabs should be active' do
-    expect(page).to have_selector('div.content ul.center-top-menu li.active', count: 1)
+    expect(page).to have_selector('div.content ul.nav-links li.active', count: 1)
  end
  step 'no other sub navs should be active' do