use ui-box as for all

19 files changed, 142 insertions, 298 deletions

diff --git a/app/assets/stylesheets/gitlab_bootstrap/blocks.scss b/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
index f9c8b7b05ea..3e7aad223a9 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
@@ -1,23 +1,24 @@
 /**
  * ===================================
- * Contain 3 main UI block elements:
- *   .main_box - for show pages
- *   .ui-box   - for simple block & widgets
+ * Contain UI block elements:
+ *   .ui-box   - for any block & widgets
  * ===================================
  */
 
 /**
- *  UI box element
- *  contains top, middle, bottom blocks
+ * UI Block
  *
  */
-.main_box {
-  @extend .borders;
-  @extend .prepend-top-20;
-  @extend .append-bottom-20;
-  border-width: 1px;
+.ui-box {
+  background: #F9F9F9;
+  margin-bottom: 25px;
+  border: 1px solid #CCC;
   @include solid-shade;
 
+  &.ui-box-show {
+    margin:20px 0;
+    background: #FFF;
+  }
 
   img { max-width: 100%; }
 
@@ -27,9 +28,9 @@
     }
   }
 
-  .top_box_content,
-  .middle_box_content,
-  .bottom_box_content {
+  .ui-box-head,
+  .ui-box-body,
+  .ui-box-bottom {
     padding: 15px;
     word-wrap: break-word;
 
@@ -39,19 +40,25 @@
       border: none;
       padding: 0;
     }
+
+    .clearfix {
+      margin: 0;
+    }
   }
 
-  .top_box_content {
+  .ui-box-head {
     .box-title {
       color: $style_color;
       font-size: 18px;
       font-weight: normal;
       line-height: 28px;
     }
+    h3 {
+      margin: 0;
+    }
   }
 
-  .middle_box_content {
-    @include border-radius(0);
+  .ui-box-body {
     border: none;
     font-size: 12px;
     background-color: #f5f5f5;
@@ -59,24 +66,9 @@
     border-top: 1px solid #eee;
   }
 
-  .bottom_box_content {
+  .ui-box-bottom {
     border-top: 1px solid #eee;
   }
-}
-
-/**
- * Big UI Block for show page content
- *
- */
-.ui-box {
-  background: #F9F9F9;
-  margin-bottom: 25px;
-
-  border: 1px solid #eaeaea;
-  @include border-radius(4px);
-
-  border-color: #CCC;
-  @include solid-shade;
 
   &.white {
     background: #fff;
@@ -86,45 +78,14 @@
     margin: 0;
   }
 
-  h5, .title {
+  .title {
     padding: 0 10px;
-    @include border-radius(4px 4px 0 0);
     @include bg-gray-gradient;
-    border-top: 1px solid #eaeaea;
-    border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid #CCC;
 
     > a {
       text-shadow: 0 1px 1px #fff;
     }
-
-    &.small {
-      line-height: 28px;
-      font-size: 14px;
-      line-height: 28px;
-      text-shadow: 0 1px 1px white;
-    }
-
-    form {
-      padding: 9px 0;
-      margin: 0px;
-    }
-
-    .nav-pills {
-      li {
-        padding: 3px 0;
-        &.active a { background-color: $style_color; }
-        a {
-          @include border-radius(7px);
-        }
-      }
-    }
-  }
-
-  .bottom {
-    @include bg-gray-gradient;
-    @include border-radius(0 0 4px 4px);
-    border-bottom: none;
-    border-top: 1px solid #bbb;
   }
 
   &.padded {
@@ -143,6 +104,7 @@
       color: #777;
     }
   }
+
   .row_title {
     font-weight: bold;
     color: #444;
@@ -151,8 +113,4 @@
       text-decoration: underline;
     }
   }
-
-  .ui-box-body {
-    padding: 10px;
-  }
 }
diff --git a/app/assets/stylesheets/gitlab_bootstrap/lists.scss b/app/assets/stylesheets/gitlab_bootstrap/lists.scss
index edaf3cef2cf..7843d30c9c1 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/lists.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/lists.scss
@@ -23,14 +23,8 @@
       border-bottom: 1px solid #ADF;
     }
 
-    &:first-child {
-      @include border-radius(4px 4px 0 0);
-      border-top: none;
-    }
-
     &:last-child {
-      @include border-radius(0 0 4px 4px);
-      border: none;
+      border-bottom: none;
     }
 
     .author { color: #999; }
diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss
index 7ed53333f8c..ebec51c9715 100644
--- a/app/assets/stylesheets/sections/commits.scss
+++ b/app/assets/stylesheets/sections/commits.scss
@@ -1,74 +1,17 @@
-.commit-box {
-  @extend .main_box;
-
-  .commit-head {
-    @extend .top_box_content;
-
-    .commit-title {
-      line-height: 26px;
-      margin: 0;
-    }
-
-    .commit-description {
-      font-size: 14px;
-      border: none;
-      background-color: white;
-      padding-top: 10px;
-    }
-
-    .browse-button {
-      @extend .btn;
-      @extend .btn-small;
-      float: right;
-    }
-  }
-
-  .commit-info {
-    @extend .middle_box_content;
-    @extend .clearfix;
-
-    .sha-block {
-      text-align: right;
-      &:first-child {
-        padding-bottom: 6px;
-      }
-
-      a {
-        border-bottom: 1px solid #aaa;
-        margin-left: 9px;
-      }
-    }
-
-    &.merge-commit .sha-block {
-      clear: right;
-    }
-
-    .committer {
-      padding-left: 32px;
-    }
-
-    .author a,
-    .committer a {
-      font-size: 14px;
-      line-height: 22px;
-      text-shadow: 0 1px 1px #fff;
-      color: #777;
-      &:hover {
-        color: #999;
-      }
-    }
-
-    .avatar {
-      margin-right: 10px;
-    }
-  }
-}
-
 /**
  *
  * COMMIT SHOw
  *
  */
+.commit-committer-link,
+.commit-author-link {
+  font-size: 13px;
+  color: #555;
+  &:hover {
+    color: #999;
+  }
+}
+
 .diff_file {
   border: 1px solid #CCC;
   margin-bottom: 1em;
@@ -255,13 +198,6 @@
     min-width: 65px;
     font-family: $monospace;
   }
-
-  .commit-author-name {
-    color: #777;
-    &:hover {
-      color: #999;
-    }
-  }
 }
 
 .diff_file_header a,
diff --git a/app/assets/stylesheets/sections/issues.scss b/app/assets/stylesheets/sections/issues.scss
index fd995728978..4cfbc371c02 100644
--- a/app/assets/stylesheets/sections/issues.scss
+++ b/app/assets/stylesheets/sections/issues.scss
@@ -1,31 +1,3 @@
-.issue_form_box {
-  @extend .main_box;
-  .issue_title {
-    @extend .top_box_content;
-    .clearfix {
-      margin-bottom: 0px;
-      input {
-        @extend .span8;
-      }
-    }
-  }
-  .issue_middle_block {
-    @extend .middle_box_content;
-    height: 30px;
-    .issue_assignee {
-      @extend .span6;
-      float: left;
-    }
-    .issue_milestone {
-      @extend .span4;
-      float: left;
-    }
-  }
-  .issue_description {
-    @extend .bottom_box_content;
-  }
-}
-
 .issues_table {
   .issue {
     padding: 7px 10px;
diff --git a/app/assets/stylesheets/sections/merge_requests.scss b/app/assets/stylesheets/sections/merge_requests.scss
index 9fb1d14967f..66ec642e057 100644
--- a/app/assets/stylesheets/sections/merge_requests.scss
+++ b/app/assets/stylesheets/sections/merge_requests.scss
@@ -1,17 +1,3 @@
-/**
- * MR form
- *
- */
-
-.mr_branch_box {
-  @extend .ui-box;
-  margin-bottom: 20px;
-
-  .body {
-    background: #f1f1f1;
-  }
-
-}
 
 /**
  * MR -> show: Automerge widget
@@ -121,19 +107,3 @@ li.merge_request {
 .mr_direction_tip {
   margin-top:40px
 }
-
-.merge_requests_form_box {
-  @extend .main_box;
-  .merge_requests_middle_box {
-    @extend .middle_box_content;
-    height: 30px;
-    .merge_requests_assignee {
-      @extend .span6;
-      float: left;
-    }
-    .merge_requests_milestone {
-      @extend .span4;
-      float: left;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/sections/projects.scss b/app/assets/stylesheets/sections/projects.scss
index 717f85024cc..4b6eed92306 100644
--- a/app/assets/stylesheets/sections/projects.scss
+++ b/app/assets/stylesheets/sections/projects.scss
@@ -9,15 +9,17 @@
     .groups_box,
     .projects_box {
       > h5 {
-        color: $style_color;
+        color: #456;
         font-size: 16px;
         text-shadow: 0 1px 1px #fff;
-        padding: 2px 10px;
-        line-height: 32px;
+        padding: 2px 15px;
+        line-height: 36px;
         font-size: 14px;
+        font-weight: normal;
       }
       .nav-projects-tabs li { padding: 0; }
       .well-list {
+        li { padding: 15px; }
         .arrow {
           float: right;
           padding: 10px;
@@ -109,7 +111,7 @@ ul.nav.nav-projects-tabs {
 
   li {
     a {
-      padding: 4px 20px;
+      padding: 6px 25px;
       margin-top: 2px;
       border-color: #DDD;
       background-color: #EEE;
diff --git a/app/views/commit/show.html.haml b/app/views/commit/show.html.haml
index 1a227a5cef4..0144e4754c5 100644
--- a/app/views/commit/show.html.haml
+++ b/app/views/commit/show.html.haml
@@ -1,6 +1,6 @@
 = render "commits/commit_box"
 
-%p.right
+%p.right.cgray
   This commit has
   %span.cgreen #{@commit.stats.additions} additions
   and
diff --git a/app/views/commits/_commit_box.html.haml b/app/views/commits/_commit_box.html.haml
index 8f7826e0c8d..0544a1d10fe 100644
--- a/app/views/commits/_commit_box.html.haml
+++ b/app/views/commits/_commit_box.html.haml
@@ -1,47 +1,50 @@
-.commit-box{class: @commit.parents_count > 1 ? "merge-commit" : ""}
-  .commit-head
+.ui-box.ui-box-show
+  .ui-box-head
     .right
       - if @notes_count > 0
         %span.btn.disabled.grouped
           %i.icon-comment
           = @notes_count
       .left.btn-group
-        %a.btn.small.grouped.dropdown-toggle{ data: {toggle: :dropdown} }
+        %a.btn.grouped.dropdown-toggle{ data: {toggle: :dropdown} }
           %i.icon-download-alt
           Download as
           %span.caret
         %ul.dropdown-menu
           %li= link_to "Email Patches", project_commit_path(@project, @commit, format: :patch)
           %li= link_to "Plain Diff",    project_commit_path(@project, @commit, format: :diff)
-      = link_to project_tree_path(@project, @commit), class: "browse-button primary grouped" do
-        %strong Browse Code »
+      = link_to project_tree_path(@project, @commit), class: "btn primary grouped" do
+        %span Browse Code »
     %h3.commit-title.page_title
       = gfm escape_once(@commit.title)
     - if @commit.description.present?
       %pre.commit-description
         = gfm escape_once(@commit.description)
-  .commit-info
+  .ui-box-body
     .row
       .span5
         .author
-          %strong= @commit.author_link avatar: true, size: 40
+          = @commit.author_link avatar: true, size: 32
           authored
           %time{title: @commit.authored_date.stamp("Aug 21, 2011 9:23pm")}
             #{time_ago_in_words(@commit.authored_date)} ago
         - if @commit.different_committer?
           .committer
             →
-            %strong= @commit.committer_link
+            = @commit.committer_link
             committed
             %time{title: @commit.committed_date.stamp("Aug 21, 2011 9:23pm")}
               #{time_ago_in_words(@commit.committed_date)} ago
-      .span6.right
-        .sha-block
-          %span.cgray commit
-          %code.label_commit= @commit.id
-        .sha-block
-          %span.cgray= pluralize(@commit.parents.count, "parent")
-          - @commit.parents.each do |parent|
-            = link_to parent.id[0...10], project_commit_path(@project, parent)
+      .span6.pull-right
+        .pull-right
+          .sha-block
+            %span.cgray commit
+            %span.label_commit= @commit.id
+        .clearfix
+        .pull-right
+          .sha-block
+            %span.cgray= pluralize(@commit.parents.count, "parent")
+            - @commit.parents.each do |parent|
+              = link_to parent.id[0...10], project_commit_path(@project, parent)
 
 
diff --git a/app/views/commits/_commits.html.haml b/app/views/commits/_commits.html.haml
index c9217989884..9c256ea9a76 100644
--- a/app/views/commits/_commits.html.haml
+++ b/app/views/commits/_commits.html.haml
@@ -1,6 +1,6 @@
 - @commits.group_by { |c| c.committed_date.to_date }.each do |day, commits|
   %div.ui-box
-    %h5.small
+    %h6.title
       %i.icon-calendar
       = day.stamp("28 Aug, 2010")
     %ul.well-list= render commits
diff --git a/app/views/dashboard/_groups.html.haml b/app/views/dashboard/_groups.html.haml
index 5a95ab3fb98..7f544406761 100644
--- a/app/views/dashboard/_groups.html.haml
+++ b/app/views/dashboard/_groups.html.haml
@@ -1,5 +1,5 @@
 .groups_box
-  %h5
+  %h5.title
     Groups
     %small
       (#{groups.count})
diff --git a/app/views/dashboard/_projects.html.haml b/app/views/dashboard/_projects.html.haml
index cffafb5445c..6c1304ee4a8 100644
--- a/app/views/dashboard/_projects.html.haml
+++ b/app/views/dashboard/_projects.html.haml
@@ -1,5 +1,5 @@
 .projects_box
-  %h5
+  %h5.title
     Projects
     %small
       (#{projects.total_count})
diff --git a/app/views/issues/_form.html.haml b/app/views/issues/_form.html.haml
index 030f797c088..02b11b53a95 100644
--- a/app/views/issues/_form.html.haml
+++ b/app/views/issues/_form.html.haml
@@ -6,26 +6,27 @@
         - @issue.errors.full_messages.each do |msg|
           %span= msg
           %br
-    .issue_form_box
-      .issue_title
+    .ui-box.ui-box-show
+      .ui-box-head
         .clearfix
           = f.label :title do
             %strong= "Subject *"
           .input
             = f.text_field :title, maxlength: 255, class: "xxlarge js-gfm-input", autofocus: true, required: true
-      .issue_middle_block
-        .issue_assignee
-          = f.label :assignee_id do
-            %i.icon-user
-            Assign to
-          .input= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { include_blank: "Select a user" }, {class: 'chosen'})
-        .issue_milestone
-          = f.label :milestone_id do
-            %i.icon-time
-            Milestone
-          .input= f.select(:milestone_id, @project.milestones.active.all.collect {|p| [ p.title, p.id ] }, { include_blank: "Select milestone" }, {class: 'chosen'})
+      .ui-box-body
+        .clearfix
+          .issue_assignee.pull-left
+            = f.label :assignee_id do
+              %i.icon-user
+              Assign to
+            .input= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { include_blank: "Select a user" }, {class: 'chosen'})
+          .issue_milestone.pull-left
+            = f.label :milestone_id do
+              %i.icon-time
+              Milestone
+            .input= f.select(:milestone_id, @project.milestones.active.all.collect {|p| [ p.title, p.id ] }, { include_blank: "Select milestone" }, {class: 'chosen'})
 
-      .issue_description
+      .ui-box-bottom
         .clearfix
           = f.label :label_list do
             %i.icon-tag
diff --git a/app/views/issues/show.html.haml b/app/views/issues/show.html.haml
index 1d4d6a13c2b..544817192ab 100644
--- a/app/views/issues/show.html.haml
+++ b/app/views/issues/show.html.haml
@@ -24,14 +24,14 @@
     ← To issues list
 
 
-.main_box
-  .top_box_content
+.ui-box.ui-box-show
+  .ui-box-head
     %h4.box-title
       - if @issue.closed
         .error.status_info Closed
       = gfm escape_once(@issue.title)
 
-  .middle_box_content
+  .ui-box-body
     %cite.cgray
       Created by #{link_to_member(@project, @issue.author)}
       - if @issue.assignee
@@ -44,13 +44,13 @@
 
     .right
       - @issue.labels.each do |label|
-        %span.label.label-issue
+        %span
           %i.icon-tag
           = label.name
          
 
   - if @issue.description.present?
-    .bottom_box_content
+    .ui-box-bottom
       = preserve do
         = markdown @issue.description
 
diff --git a/app/views/merge_requests/_form.html.haml b/app/views/merge_requests/_form.html.haml
index 37cde812298..67444dad5de 100644
--- a/app/views/merge_requests/_form.html.haml
+++ b/app/views/merge_requests/_form.html.haml
@@ -5,45 +5,47 @@
         - @merge_request.errors.full_messages.each do |msg|
           %li= msg
 
-  %h4.cdark 1. Select Branches
-  %br
+  %fieldset
+    %legend 1. Select Branches
 
-  .row
-    .span5
-      .mr_branch_box
-        %h5 From (Head Branch)
-        .body
-          .padded= f.select(:source_branch, @repository.heads.map(&:name), { include_blank: "Select branch" }, {class: 'chosen span4'})
-      .mr_source_commit
+    .row
+      .span5
+        .mr_branch_box
+          %h5 From (Head Branch)
+          .body
+            .padded= f.select(:source_branch, @repository.heads.map(&:name), { include_blank: "Select branch" }, {class: 'chosen span4'})
+        .mr_source_commit
 
-    .span2
-      %center= image_tag "merge.png", class: 'mr_direction_tip'
-    .span5
-      .mr_branch_box
-        %h5 To (Base Branch)
-        .body
-          .padded= f.select(:target_branch, @repository.heads.map(&:name), { include_blank: "Select branch" }, {class: 'chosen span4'})
-      .mr_target_commit
+      .span2
+        %center= image_tag "merge.png", class: 'mr_direction_tip'
+      .span5
+        .mr_branch_box
+          %h5 To (Base Branch)
+          .body
+            .padded= f.select(:target_branch, @repository.heads.map(&:name), { include_blank: "Select branch" }, {class: 'chosen span4'})
+        .mr_target_commit
 
-  %h4.cdark 2. Fill info
+  %fieldset
+    %legend 2. Fill info
 
-  .clearfix
-    .merge_requests_form_box
-      .top_box_content
-        = f.label :title do
-          %strong= "Title *"
-        .input= f.text_field :title, class: "input-xxlarge pad js-gfm-input", maxlength: 255, rows: 5, required: true
-      .merge_requests_middle_box
-        .merge_requests_assignee
-          = f.label :assignee_id do
-            %i.icon-user
-            Assign to
-          .input= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { include_blank: "Select user" }, {class: 'chosen span3'})
-        .merge_requests_milestone
-          = f.label :milestone_id do
-            %i.icon-time
-            Milestone
-          .input= f.select(:milestone_id, @project.milestones.active.all.collect {|p| [ p.title, p.id ] }, { include_blank: "Select milestone" }, {class: 'chosen'})
+    .ui-box.ui-box-show
+      .ui-box-head
+        .clearfix
+          = f.label :title do
+            %strong= "Title *"
+          .input= f.text_field :title, class: "input-xxlarge pad js-gfm-input", maxlength: 255, rows: 5, required: true
+      .ui-box-body
+        .clearfix
+          .left
+            = f.label :assignee_id do
+              %i.icon-user
+              Assign to
+            .input= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { include_blank: "Select user" }, {class: 'chosen span3'})
+          .left
+            = f.label :milestone_id do
+              %i.icon-time
+              Milestone
+            .input= f.select(:milestone_id, @project.milestones.active.all.collect {|p| [ p.title, p.id ] }, { include_blank: "Select milestone" }, {class: 'chosen'})
 
   .control-group
 
diff --git a/app/views/merge_requests/show/_commits.html.haml b/app/views/merge_requests/show/_commits.html.haml
index 796922776d9..671d9b84abf 100644
--- a/app/views/merge_requests/show/_commits.html.haml
+++ b/app/views/merge_requests/show/_commits.html.haml
@@ -1,6 +1,6 @@
 - if @commits.present?
   .ui-box
-    %h5
+    %h6.title
       %i.icon-list
       Commits (#{@commits.count})
     .merge-request-commits
diff --git a/app/views/merge_requests/show/_mr_box.html.haml b/app/views/merge_requests/show/_mr_box.html.haml
index cd33732d191..644d7fcc58e 100644
--- a/app/views/merge_requests/show/_mr_box.html.haml
+++ b/app/views/merge_requests/show/_mr_box.html.haml
@@ -1,5 +1,5 @@
-.main_box
-  .top_box_content
+.ui-box.ui-box-show
+  .ui-box-head
     %h4.box-title
       - if @merge_request.merged
         .error.status_info
@@ -9,7 +9,7 @@
         .error.status_info Closed
       = gfm escape_once(@merge_request.title)
 
-  .middle_box_content
+  .ui-box-body
     %div
       %cite.cgray
         Created at #{@merge_request.created_at.stamp("Aug 21, 2011")} by #{link_to_member(@project, @merge_request.author)}
@@ -22,7 +22,7 @@
 
 
   - if @merge_request.closed
-    .bottom_box_content
+    .ui-box-bottom
       - if @merge_request.merged?
         %span
           Merged by #{link_to_member(@project, @merge_request.merge_event.author)}
diff --git a/app/views/milestones/show.html.haml b/app/views/milestones/show.html.haml
index c4975c72ef2..6d276683fdc 100644
--- a/app/views/milestones/show.html.haml
+++ b/app/views/milestones/show.html.haml
@@ -27,8 +27,8 @@
     %span All issues for this milestone are closed. You may close milestone now.
     = link_to 'Close Milestone', project_milestone_path(@project, @milestone, milestone: {closed: true }), method: :put, class: "btn small danger"
 
-.main_box
-  .top_box_content
+.ui-box.ui-box-show
+  .ui-box-head
     %h4.box-title
       - if @milestone.closed
         .error.status_info Closed
@@ -37,7 +37,7 @@
 
       = gfm escape_once(@milestone.title)
 
-  .middle_box_content
+  .ui-box-body
     %h5
       Progress:
       %small
diff --git a/app/views/repositories/tags.html.haml b/app/views/repositories/tags.html.haml
index 193cb2e30f2..8e52ad1b47d 100644
--- a/app/views/repositories/tags.html.haml
+++ b/app/views/repositories/tags.html.haml
@@ -30,4 +30,10 @@
               Download
 
 - else
-  %h3 No tags
+  %h3.nothing_here_message
+    Repository has no tags yet.
+    %br
+    %small
+      Use git tag command to add a new one:
+      %br
+      %span.monospace git tag -a v1.4 -m 'version 1.4'
diff --git a/app/views/wikis/_form.html.haml b/app/views/wikis/_form.html.haml
index 83b16b138d3..9eb2a571fe5 100644
--- a/app/views/wikis/_form.html.haml
+++ b/app/views/wikis/_form.html.haml
@@ -6,12 +6,12 @@
         - @wiki.errors.full_messages.each do |msg|
           %li= msg
 
-  .main_box
-    .top_box_content
+  .ui-box.ui-box-show
+    .ui-box-head
       = f.label :title
       .input= f.text_field :title, class: 'span8'
       = f.hidden_field :slug
-    .middle_box_content
+    .ui-box-body
       .input
         %span.cgray
           Wiki content is parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
@@ -19,7 +19,7 @@
           %code [Link Title](page-slug)
           \.
 
-    .bottom_box_content
+    .ui-box-bottom
       = f.label :content
       .input= f.text_area :content, class: 'span8 js-gfm-input'
   .actions