Make project page and header more compact

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

app/assets/stylesheets/base/variables.scss

@@ -12,7 +12,7 @@ $code_font_size: 13px;
 $code_line_height: 1.5;
 $border-color: #E7E9ED;
 $background-color: #F8FAFC;
-$header-height: 61px;
+$header-height: 58px;
 $fixed-layout-width: 1200px;
 $gl-gray: #7f8fa4;
 $gl-padding: 16px;

app/assets/stylesheets/generic/avatar.scss

@@ -23,6 +23,7 @@
   &.s24 { width: 24px; height: 24px; margin-right: 8px; }
   &.s26 { width: 26px; height: 26px; margin-right: 8px; }
   &.s32 { width: 32px; height: 32px; margin-right: 10px; }
+  &.s36 { width: 36px; height: 36px; margin-right: 10px; }
   &.s46 { width: 46px; height: 46px; margin-right: 15px; }
   &.s48 { width: 48px; height: 48px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }

app/assets/stylesheets/generic/sidebar.scss

@@ -127,7 +127,7 @@
       width: $sidebar_collapsed_width;
       a {
-        padding-left: 10px;
+        padding-left: 12px;
         .gitlab-text-container {
           display: none;
@@ -151,7 +151,7 @@
     }
     .sidebar-user {
-      padding-left: 10px;
+      padding-left: 12px;
       width: $sidebar_collapsed_width;
       .username {
@@ -214,7 +214,7 @@
     margin-left: 10px;
     width: $sidebar_width - 2 * 10px;
     font-size: 16px;
-    line-height: 36px;
+    line-height: 34px;
   }
 }
@@ -235,8 +235,8 @@
       overflow: hidden;
       img {
-        width: 40px;
-        height: 40px;
+        width: 36px;
+        height: 36px;
         float: left;
       }

app/assets/stylesheets/pages/projects.scss

@@ -41,7 +41,7 @@
   .project-home-desc {
     h1 {
       margin: 0;
-      margin-bottom: 5px;
+      margin-bottom: 10px;
       font-size: 23px;
       font-weight: normal;
     }
@@ -55,6 +55,10 @@
   .git-clone-holder {
     max-width: 600px;
     margin: 20px auto;
+
+    .form-control {
+      background: #FFF;
+    }
   }
   .visibility-level-label {
@@ -65,7 +69,7 @@
   }
   .project-repo-buttons {
-    margin-top: 25px;
+    margin-top: $gl-padding;
     margin-bottom: 25px;
     .btn {
@@ -74,7 +78,7 @@
       text-transform: uppercase;
       font-size: 15px;
       line-height: 20px;
-      padding: 10px 16px;
+      padding: 8px 14px;
       border-radius: 3px;
       margin-left: 10px;

app/views/layouts/_page.html.haml

@@ -14,7 +14,7 @@
       = render partial: 'layouts/collapse_button'
     - if current_user
       = link_to current_user, class: 'sidebar-user' do
-        = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s40'
+        = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s36'
         .username
           = current_user.username
   .content-wrapper

app/views/projects/_home_panel.html.haml

 - empty_repo = @project.empty_repo?
 .project-home-panel.clearfix{:class => ("empty-project" if empty_repo)}
   .project-identicon-holder
-    = project_icon(@project, alt: '', class: 'project-avatar avatar s140')
+    = project_icon(@project, alt: '', class: 'project-avatar avatar s90')
   .project-home-desc
     %h1= @project.name
     - if @project.description.present?