I prefer icons on header

app/assets/javascripts/main.js.coffee

@@ -30,6 +30,10 @@ $ ->
   # Initialize tooltips
   $('.has_tooltip').tooltip()
 
+  # Bottom tooltip
+  $('.has_bottom_tooltip').tooltip(placement: 'bottom')
+
+
   # Disable form buttons while a form is submitting
   $('body').on 'ajax:complete, ajax:beforeSend, submit', 'form', (e) ->
     buttons = $('[type="submit"]', @)

app/assets/stylesheets/sections/header.scss

@@ -12,6 +12,8 @@ header {
       .nav > li > a {
         color: $style_color;
         text-shadow: 0 1px 0 #fff;
+        font-size: 18px;
+        padding: 11px;
       }
 
       /** NAV block with links and profile **/
@@ -51,15 +53,6 @@ header {
         height:40px;
         font-family: 'Korolev', sans-serif;
       }
-
-    }
-    .separator {
-      float: left;
-      height: 60px;
-      width: 1px;
-      background: white;
-      border-left: 1px solid #DDD;
-      margin-top: -10px;
     }
   }
 
@@ -218,5 +211,52 @@ header {
       border-bottom-right-radius: 5px;
       border-bottom-left-radius: 5px;
   border-bottom: 0; } }
+
+
+
+  /*
+   * Dark header
+   *
+   */
+  &.header-dark {
+    &.navbar-gitlab {
+      .navbar-inner {
+        background: #708090;
+        border-bottom: 1px solid #AAA;
+
+        .nav > li > a {
+          color: #fff;
+          text-shadow: 0 1px 0 #111;
+        }
+      }
+    }
+
+    .search {
+      .search-input {
+        background-color: #D2D5DA;
+        background-color: rgba(255, 255, 255, 0.5);
+
+        &:focus {
+          background-color: white;
+        }
+      }
+    }
+    .search-input::-webkit-input-placeholder {
+      color: #666;
+    }
+    .app_logo {
+      a {
+        h1 {
+          background: url('logo_white.png') no-repeat 0px 2px;
+          color:#fff;
+          text-shadow: 0 1px 1px #111;
+        }
+      }
+    }
+    .project_name {
+      color:#fff;
+      text-shadow: 0 1px 1px #111;
+    }
+  }
 }
 

app/assets/stylesheets/themes/ui_basic.scss

@@ -15,4 +15,22 @@
       color: $blue_link;
     }
   }
+
+  .app_logo {
+    .separator {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .separator {
+    float: left;
+    height: 60px;
+    width: 1px;
+    background: white;
+    border-left: 1px solid #DDD;
+    margin-top: -10px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
 }

app/assets/stylesheets/themes/ui_color.scss

@@ -8,61 +8,16 @@
  *
  */
 .ui_color {
-
   /*
    *  Application Header
    *
    */
   header {
-
+    @extend .header-dark;
     &.navbar-gitlab {
       .navbar-inner {
         background: #657;
-        border-bottom: 1px solid #AAA;
-
-        .nav > li > a {
-          color: #fff;
-          text-shadow: 0 1px 0 #111;
       }
     }
   }
-
-    .search {
-      float: right;
-      margin-right: 45px;
-      .search-input {
-        border: 1px solid #aaa;
-        background-color: #D2D5DA;
-        background-color: rgba(255, 255, 255, 0.5);
-
-        &:focus {
-          background-color: white;
-        }
-      }
-    }
-    .search-input::-webkit-input-placeholder {
-      color: #666;
-    }
-    .app_logo {
-      a {
-        h1 {
-          background: url('logo_white.png') no-repeat 0px 2px;
-          color:#fff;
-          text-shadow: 0 1px 1px #111;
-        }
-      }
-      .separator {
-        display:none;
-      }
-
-    }
-    .project_name {
-      color:#fff;
-      text-shadow: 0 1px 1px #111;
-    }
-  }
-  /*
-   *  End of Application Header
-   *
-   */
 }

app/assets/stylesheets/themes/ui_gray.scss

@@ -8,61 +8,16 @@
  *
  */
 .ui_gray {
-
   /*
    *  Application Header
    *
    */
   header {
-
+    @extend .header-dark;
     &.navbar-gitlab {
       .navbar-inner {
         background: #708090;
-        border-bottom: 1px solid #AAA;
-
-        .nav > li > a {
-          color: #fff;
-          text-shadow: 0 1px 0 #111;
       }
     }
   }
-
-    .search {
-      float: right;
-      margin-right: 45px;
-      .search-input {
-        border: 1px solid #aaa;
-        background-color: #D2D5DA;
-        background-color: rgba(255, 255, 255, 0.5);
-
-        &:focus {
-          background-color: white;
-        }
-      }
-    }
-    .search-input::-webkit-input-placeholder {
-      color: #666;
-    }
-    .app_logo {
-      a {
-        h1 {
-          background: url('logo_white.png') no-repeat 0px 2px;
-          color:#fff;
-          text-shadow: 0 1px 1px #111;
-        }
-      }
-      .separator {
-        display:none;
-      }
-
-    }
-    .project_name {
-      color:#fff;
-      text-shadow: 0 1px 1px #111;
-    }
-  }
-  /*
-   *  End of Application Header
-   *
-   */
 }

app/assets/stylesheets/themes/ui_modern.scss

@@ -8,61 +8,16 @@
  *
  */
 .ui_modern {
-
   /*
    *  Application Header
    *
    */
   header {
-
+    @extend .header-dark;
     &.navbar-gitlab {
       .navbar-inner {
         background: #567;
-        border-bottom: 1px solid #AAA;
-
-        .nav > li > a {
-          color: #fff;
-          text-shadow: 0 1px 0 #111;
       }
     }
   }
-
-    .search {
-      float: right;
-      margin-right: 45px;
-      .search-input {
-        border: 1px solid #aaa;
-        background-color: #D2D5DA;
-        background-color: rgba(255, 255, 255, 0.5);
-
-        &:focus {
-          background-color: white;
-        }
-      }
-    }
-    .search-input::-webkit-input-placeholder {
-      color: #666;
-    }
-    .app_logo {
-      a {
-        h1 {
-          background: url('logo_white.png') no-repeat 0px 2px;
-          color:#fff;
-          text-shadow: 0 1px 1px #111;
-        }
-      }
-      .separator {
-        display:none;
-      }
-
-    }
-    .project_name {
-      color:#fff;
-      text-shadow: 0 1px 1px #111;
-    }
-  }
-  /*
-   *  End of Application Header
-   *
-   */
 }

app/views/layouts/_head_panel.html.haml

@@ -9,14 +9,16 @@
       %ul.nav
         - if current_user.is_admin?
           %li
-            = link_to admin_root_path, title: "Admin area" do
+            = link_to admin_root_path, title: "Admin area", class: 'has_bottom_tooltip', 'data-original-title' => 'Admin area' do
-              %i.icon-cog
+              %i.icon-cogs
-              Admin
         - if current_user.can_create_project?
           %li
-            = link_to new_project_path, title: "Create New Project" do
+            = link_to new_project_path, title: "Create New Project", class: 'has_bottom_tooltip', 'data-original-title' => 'New project'  do
               %i.icon-plus
-              Project
+        %li
+          = link_to profile_path, title: "Your Profile", class: 'has_bottom_tooltip', 'data-original-title' => 'Your profile'  do
+            %i.icon-user
+        %span.separator
         %li
           = render "layouts/search"
         %li