Start builds redesign

app/assets/stylesheets/framework/blocks.scss

@@ -18,7 +18,7 @@
   line-height: 36px;
 }
 
-.gray-content-block {
+.row-content-block {
   margin-top: 0;
   margin-bottom: -$gl-padding;
   background-color: $background-color;
@@ -81,6 +81,11 @@
       margin-left: 10px;
     }
   }
+
+  &.build-content {
+    background-color: $white-light;
+    border-top: none;
+  }
 }
 
 .cover-block {
@@ -113,7 +118,7 @@
     line-height: 1.1;
 
     h1 {
-      color: #313236;
+      color: $gl-gray-dark;
       margin-bottom: 6px;
       font-size: 23px;
     }

app/assets/stylesheets/framework/buttons.scss

@@ -59,7 +59,7 @@
 }
 
 @mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, #313236);
+  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark);
 }
 
 @mixin btn-white {

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -81,7 +81,7 @@
 
 // Labels
 .label {
-  padding: 2px 4px;
+  padding: 4px 5px;
   font-size: 13px;
   font-style: normal;
   font-weight: normal;

app/assets/stylesheets/framework/typography.scss

@@ -42,14 +42,14 @@
     margin: 24px 0 12px;
     padding: 0 0 10px;
     border-bottom: 1px solid #e7e9ed;
-    color: #313236;
+    color: $gl-gray-dark;
   }
 
   h2 {
     font-size: 1.2em;
     font-weight: 600;
     margin: 24px 0 12px;
-    color: #313236;
+    color: $gl-gray-dark;
   }
 
   h3 {

app/assets/stylesheets/framework/variables.scss

@@ -20,7 +20,7 @@ $background-color:   #fafafa;
  */
 $gl-font-size:         15px;
 $gl-title-color:       #333;
-$gl-text-color:        #555;
+$gl-text-color:        #5c5c5c;
 $gl-text-green:        #4a2;
 $gl-text-red:          #d12f19;
 $gl-text-orange:       #d90;
@@ -30,6 +30,7 @@ $gl-placeholder-color: #8f8f8f;
 $gl-icon-color:        $gl-placeholder-color;
 $gl-grayish-blue:      #7f8fa4;
 $gl-gray:              $gl-text-color;
+$gl-gray-dark:         #313236;
 $gl-header-color:      $gl-title-color;
 
 /*

app/assets/stylesheets/pages/commit.scss

@@ -31,9 +31,17 @@
   }
   .commit-committer-link,
   .commit-author-link {
-    color: #444;
+    color: $gl-gray;
     font-weight: bold;
   }
+
+  .ci-status {
+    margin-right: 10px;
+  }
+
+  .fa-clipboard {
+    color: $dropdown-title-btn-color;
+  }
 }
 
 .commit-box {
@@ -42,7 +50,7 @@
   .commit-title {
     margin: 0;
     font-size: 23px;
-    color: #313236;
+    color: $gl-gray-dark;
   }
 
   .commit-description {

app/assets/stylesheets/pages/detail_page.scss

@@ -22,7 +22,7 @@
   .title {
     margin: 0;
     font-size: 23px;
-    color: #313236;
+    color: $gl-gray-dark;
   }
 
   .description {

app/assets/stylesheets/pages/merge_requests.scss

@@ -104,7 +104,7 @@
       font-weight: 600;
       font-size: 17px;
       margin: 5px 0;
-      color: #313236;
+      color: $gl-gray-dark;
     }
 
     p:last-child {
@@ -136,7 +136,7 @@
 }
 
 .label-branch {
-  color: #313236;
+  color: $gl-gray-dark;
   font-family: $monospace_font;
   font-weight: bold;
   overflow: hidden;
@@ -272,3 +272,19 @@
   display: inline-block;
   width: 250px;
 }
+
+.table-holder {
+  .builds {
+
+    th {
+      background-color: $white-light;
+      color: $gl-placeholder-color;
+    }
+
+    th,
+    td {
+      padding: 16px;
+    }
+  }
+}
+

app/assets/stylesheets/pages/projects.scss

@@ -178,7 +178,7 @@
     .option-title {
       font-weight: normal;
       display: inline-block;
-      color: #313236;
+      color: $gl-gray-dark;
     }
 
     .option-descr {

app/views/admin/builds/_build.html.haml

@@ -35,15 +35,15 @@
   %td
     #{build.stage} / #{build.name}
 
-    .pull-right
+  %td
-      - if build.tags.any?
+    - if build.tags.any?
-        - build.tags.each do |tag|
+      - build.tags.each do |tag|
-          %span.label.label-primary
+        %span.label.label-primary
-            = tag
+          = tag
-      - if build.try(:trigger_request)
+    - if build.try(:trigger_request)
-        %span.label.label-info triggered
+      %span.label.label-info triggered
-      - if build.try(:allow_failure)
+    - if build.try(:allow_failure)
-        %span.label.label-danger allowed to fail
+      %span.label.label-danger allowed to fail
 
   %td.duration
     - if build.duration
@@ -69,4 +69,4 @@
             %i.fa.fa-remove.cred
         - elsif defined?(allow_retry) && allow_retry && build.retryable?
           = link_to retry_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Retry' do
-            %i.fa.fa-repeat
+            %i.fa.fa-refresh

app/views/admin/builds/index.html.haml

@@ -19,7 +19,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
 
-.gray-content-block.second-block
+.row-content-block.second-block
   #{(@scope || 'running').capitalize} builds
 
 %ul.content-list
@@ -38,6 +38,7 @@
             %th Ref
             %th Runner
             %th Name
+            %th Tags
             %th Duration
             %th Finished at
             %th

app/views/admin/logs/show.html.haml

@@ -7,7 +7,7 @@
     %li{ class: (klass == Gitlab::GitLogger ? 'active' : '') }
       = link_to klass::file_name, "##{klass::file_name_noext}",
           'data-toggle' => 'tab'
-.gray-content-block
+.row-content-block
   To prevent performance issues admin logs output the last 2000 lines
 .tab-content
   - loggers.each do |klass|

app/views/admin/users/index.html.haml

@@ -32,7 +32,7 @@
         Without projects
         %small.badge= number_with_delimiter(User.without_projects.count)
 
-  .gray-content-block.second-block
+  .row-content-block.second-block
     .pull-right
       .dropdown.inline
         %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}

app/views/dashboard/todos/index.html.haml

@@ -25,7 +25,7 @@
         = icon('spinner spin')
 
 .todos-filters
-  .gray-content-block.second-block
+  .row-content-block.second-block
     = form_tag todos_filter_path(without: [:project_id, :author_id, :type, :action_id]), method: :get, class: 'filter-form' do
       .filter-item.inline
         = select_tag('project_id', todo_projects_options,

app/views/events/_event_last_push.html.haml

@@ -1,5 +1,5 @@
 - if show_last_push_widget?(event)
-  .gray-content-block.clear-block.last-push-widget
+  .row-content-block.clear-block.last-push-widget
     .event-last-push
       .event-last-push-text
         %span You pushed to

app/views/explore/groups/index.html.haml

@@ -6,7 +6,7 @@
 - else
   = render 'explore/head'
 
-.gray-content-block.clearfix
+.row-content-block.clearfix
   .pull-left
     = form_tag explore_groups_path, method: :get, class: 'form-inline form-tiny' do |f|
       = hidden_field_tag :sort, @sort

app/views/explore/snippets/index.html.haml

@@ -6,7 +6,7 @@
 - else
   = render 'explore/head'
 
-.gray-content-block
+.row-content-block
   - if current_user
     .pull-right
       = link_to new_snippet_path, class: "btn btn-new", title: "New Snippet" do

app/views/groups/issues.html.haml

@@ -16,7 +16,7 @@
 
 = render 'shared/issuable/filter', type: :issues
 
-.gray-content-block.second-block
+.row-content-block.second-block
   Only issues from
   %strong #{@group.name}
   group are listed here.

app/views/groups/merge_requests.html.haml

@@ -8,7 +8,7 @@
 
 = render 'shared/issuable/filter', type: :merge_requests
 
-.gray-content-block.second-block
+.row-content-block.second-block
   Only merge requests from
   %strong #{@group.name}
   group are listed here.

app/views/groups/milestones/index.html.haml

@@ -10,7 +10,7 @@
         = icon('plus')
         New Milestone
 
-.gray-content-block
+.row-content-block
   Only milestones from
   %strong #{@group.name}
   group are listed here.

app/views/help/ui.html.haml

@@ -48,14 +48,14 @@
 
   .lead
     Gray content block with side padding using
-    %code .gray-content-block
+    %code .row-content-block
 
   .example
-    .gray-content-block
+    .row-content-block
       %h4 Normal block inside content
       = lorem
 
-    .gray-content-block.second-block
+    .row-content-block.second-block
       %h4 Second block
       = lorem
 

app/views/projects/_last_push.html.haml

@@ -1,7 +1,7 @@
 - if event = last_push_event
   - if show_last_push_widget?(event)
 
-    .gray-content-block.top-block.clear-block.hidden-xs
+    .row-content-block.top-block.clear-block.hidden-xs
       .event-last-push
         .event-last-push-text
           %span You pushed to

app/views/projects/_readme.html.haml

@@ -7,7 +7,7 @@
       = cache(readme_cache_key) do
         = render_readme(readme)
 - else
-  .gray-content-block.second-block.center
+  .row-content-block.second-block.center
     %h3.page-title
       This project does not have a README yet
     - if can?(current_user, :push_code, @project)

app/views/projects/artifacts/browse.html.haml

@@ -1,7 +1,7 @@
 - page_title 'Artifacts', "#{@build.name} (##{@build.id})", 'Builds'
 = render 'projects/builds/header_title'
 
-.top-block.gray-content-block.clearfix
+.top-block.row-content-block.clearfix
   .pull-right
     = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build),
       class: 'btn btn-default download' do

app/views/projects/branches/index.html.haml

@@ -1,7 +1,7 @@
 - page_title "Branches"
 = render "projects/commits/header_title"
 = render "projects/commits/head"
-.gray-content-block
+.row-content-block
   .pull-right
     - if can? current_user, :push_code, @project
       = link_to new_namespace_project_branch_path(@project.namespace, @project), class: 'btn btn-create' do

app/views/projects/builds/index.html.haml

@@ -34,7 +34,7 @@
         = icon('wrench')
         %span CI Lint
 
-.gray-content-block
+.row-content-block
   #{(@scope || 'running').capitalize} builds from this project
 
 %ul.content-list
@@ -52,6 +52,7 @@
             %th Ref
             %th Stage
             %th Name
+            %th Tags
             %th Duration
             %th Finished at
             - if @project.build_coverage_enabled?

app/views/projects/builds/show.html.haml

@@ -2,7 +2,7 @@
 = render "header_title"
 
 .build-page
-  .gray-content-block.top-block
+  .row-content-block.top-block
     Build ##{@build.id} for commit
     %strong.monospace= link_to @build.commit.short_sha, ci_status_path(@build.commit)
     from
@@ -34,7 +34,7 @@
             %i.fa.fa-warning
             This build was retried.
 
-  .gray-content-block.middle-block
+  .row-content-block.middle-block
     .build-head
       .clearfix
         = ci_status_with_icon(@build.status)

app/views/projects/ci/builds/_build.html.haml

@@ -40,6 +40,7 @@
   %td
     = build.name
 
+  %td
     .label-container
       - if build.tags.any?
         - build.tags.each do |tag|
@@ -76,4 +77,4 @@
             %i.fa.fa-remove.cred
         - elsif defined?(allow_retry) && allow_retry && build.retryable?
           = link_to retry_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Retry' do
-            %i.fa.fa-repeat
+            %i.fa.fa-refresh

app/views/projects/commit/_ci_commit.html.haml

@@ -1,4 +1,4 @@
-.gray-content-block.middle-block
+.row-content-block.build-content.middle-block
   .pull-right
     - if can?(current_user, :update_build, @project)
       - if ci_commit.builds.latest.failed.any?(&:retryable?)
@@ -40,6 +40,7 @@
         %th Build ID
         %th Stage
         %th Name
+        %th Tags
         %th Duration
         %th Finished at
         - if @project.build_coverage_enabled?
@@ -49,7 +50,7 @@
     = render builds, coverage: @project.build_coverage_enabled?, stage: true, ref: false, allow_retry: true
 
 - if ci_commit.retried.any?
-  .gray-content-block.second-block
+  .row-content-block.second-block
     Retried builds
 
   .table-holder
@@ -61,6 +62,7 @@
           %th Ref
           %th Stage
           %th Name
+          %th Tags
           %th Duration
           %th Finished at
           - if @project.build_coverage_enabled?

app/views/projects/commit/_commit_box.html.haml

@@ -22,10 +22,12 @@
   %div
 
 %p
-  %span.light Commit
-  = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
-  = clipboard_button(clipboard_text: @commit.id)
 .commit-info-row
+  - if @commit.status
+    = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status ci-#{@commit.status}" do
+      = ci_icon_for_status(@commit.status)
+      build:
+      = ci_label_for_status(@commit.status)
   %span.light Authored by
   %strong
     = commit_author_link(@commit, avatar: true, size: 24)
@@ -39,19 +41,15 @@
     #{time_ago_with_tooltip(@commit.committed_date)}
 
 .commit-info-row
+  %span.light Commit
+  = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
+  = clipboard_button(clipboard_text: @commit.id)
   %span.cgray= pluralize(@commit.parents.count, "parent")
   - @commit.parents.each do |parent|
     = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
 
-- if @commit.status
+  %span.commit-info.branches
-  .pull-right
+    %i.fa.fa-spinner.fa-spin
-    = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status ci-#{@commit.status}" do
-      = ci_icon_for_status(@commit.status)
-      build:
-      = ci_label_for_status(@commit.status)
-
-.commit-info-row.branches
-  %i.fa.fa-spinner.fa-spin
 
 .commit-box.content-block
   %h3.commit-title
@@ -61,4 +59,4 @@
       = preserve(markdown(escape_once(@commit.description), pipeline: :single_line))
 
 :javascript
-  $(".commit-info-row.branches").load("#{branches_namespace_project_commit_path(@project.namespace, @project, @commit.id)}");
+  $(".commit-info.branches").load("#{branches_namespace_project_commit_path(@project.namespace, @project, @commit.id)}");

app/views/projects/commits/show.html.haml

@@ -6,7 +6,7 @@
 
 = render "head"
 
-.gray-content-block.second-block
+.row-content-block.second-block
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'commits'
 

app/views/projects/compare/index.html.haml

@@ -2,7 +2,7 @@
 = render "projects/commits/header_title"
 = render "projects/commits/head"
 
-.gray-content-block
+.row-content-block
   Compare branches, tags or commit ranges.
   %br
   Fill input field with commit id like

app/views/projects/compare/show.html.haml

@@ -3,7 +3,7 @@
 = render "projects/commits/head"
 
 
-.gray-content-block
+.row-content-block
   = render "form"
 
 - if @commits.present?

app/views/projects/empty.html.haml

@@ -7,7 +7,7 @@
 
 = render "home_panel"
 
-.gray-content-block.second-block.center
+.row-content-block.second-block.center
   %h3.page-title
     The repository for this project is empty
   - if can?(current_user, :push_code, @project)

app/views/projects/graphs/ci.html.haml

@@ -1,7 +1,7 @@
 - page_title "Continuous Integration", "Graphs"
 = render "header_title"
 = render 'head'
-.gray-content-block.append-bottom-default
+.row-content-block.append-bottom-default
   .oneline
     A collection of graphs for Continuous Integration
 

app/views/projects/graphs/commits.html.haml

@@ -2,7 +2,7 @@
 = render "header_title"
 = render 'head'
 
-.gray-content-block.append-bottom-default
+.row-content-block.append-bottom-default
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'graphs_commits'
   %ul.breadcrumb.repo-breadcrumb

app/views/projects/graphs/languages.html.haml

@@ -2,7 +2,7 @@
 = render "header_title"
 = render 'head'
 
-.gray-content-block.append-bottom-default
+.row-content-block.append-bottom-default
   .oneline
     Programming languages used in this repository
 

app/views/projects/graphs/show.html.haml

@@ -2,7 +2,7 @@
 = render "header_title"
 = render 'head'
 
-.gray-content-block.append-bottom-default
+.row-content-block.append-bottom-default
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'graphs'
   %ul.breadcrumb.repo-breadcrumb

app/views/projects/network/_head.html.haml

@@ -1,4 +1,4 @@
-.gray-content-block.append-bottom-default
+.row-content-block.append-bottom-default
   .tree-ref-holder
     = render partial: 'shared/ref_switcher', locals: {destination: 'graph'}
 

app/views/projects/releases/edit.html.haml

@@ -2,7 +2,7 @@
 = render "projects/commits/header_title"
 = render "projects/commits/head"
 
-.gray-content-block
+.row-content-block
   .oneline
     .title
       Release notes for tag

app/views/projects/show.html.haml

@@ -12,7 +12,7 @@
 = render 'projects/last_push'
 = render "home_panel"
 
-.project-stats.gray-content-block.second-block
+.project-stats.row-content-block.second-block
   %ul.nav
     %li
       = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do

app/views/projects/snippets/index.html.haml

@@ -1,7 +1,7 @@
 - page_title "Snippets"
 = render "header_title"
 
-.gray-content-block.top-block
+.row-content-block.top-block
   .pull-right
     = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new", title: "New Snippet" do
       = icon('plus')

app/views/projects/tags/index.html.haml

@@ -2,7 +2,7 @@
 = render "projects/commits/header_title"
 = render "projects/commits/head"
 
-.gray-content-block
+.row-content-block
   - if can? current_user, :push_code, @project
     .pull-right
       = link_to new_namespace_project_tag_path(@project.namespace, @project), class: 'btn btn-create new-tag-btn' do

app/views/projects/tags/show.html.haml

@@ -2,7 +2,7 @@
 = render "projects/commits/header_title"
 = render "projects/commits/head"
 
-.gray-content-block
+.row-content-block
   .pull-right
     - if can?(current_user, :push_code, @project)
       = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, @tag.name), class: 'btn-grouped btn has-tooltip', title: 'Edit release notes' do

app/views/projects/wikis/git_access.html.haml

@@ -2,7 +2,7 @@
 = render "header_title"
 
 = render 'nav'
-.gray-content-block
+.row-content-block
   %span.oneline
     Git access for
     %strong= @project_wiki.path_with_namespace

app/views/search/_results.html.haml

@@ -1,7 +1,7 @@
 - if @search_objects.empty?
   = render partial: "search/results/empty"
 - else
-  .gray-content-block
+  .row-content-block
     = search_entries_info(@search_objects, @scope, @search_term)
     - unless @show_snippets
       - if @project

app/views/shared/issuable/_filter.html.haml

@@ -1,5 +1,5 @@
 .issues-filters
-  .issues-details-filters.gray-content-block.second-block
+  .issues-details-filters.row-content-block.second-block
     = form_tag page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name]), method: :get, class: 'filter-form' do
       - if controller.controller_name == 'issues' && can?(current_user, :admin_issue, @project)
         .check-all-holder
@@ -48,7 +48,7 @@
             = button_tag "Update issues", class: "btn update_selected_issues btn-save"
 
   - if !@labels.nil?
-    .gray-content-block.second-block.filtered-labels{ class: ("hidden" if !@labels.any?) }
+    .row-content-block.second-block.filtered-labels{ class: ("hidden" if !@labels.any?) }
       - if @labels.any?
         = render "shared/labels_row", labels: @labels
 

app/views/shared/issuable/_form.html.haml

@@ -116,7 +116,7 @@
         = link_to 'Change branches', mr_change_branches_path(@merge_request)
 
 - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
-.gray-content-block{class: (is_footer ? "footer-block" : "middle-block")}
+.row-content-block{class: (is_footer ? "footer-block" : "middle-block")}
   - if issuable.new_record?
     = f.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'btn btn-create'
   - else

app/views/shared/milestones/_top.html.haml

@@ -24,7 +24,7 @@
         - else
           = link_to 'Reopen Milestone', group_milestone_path(group, milestone.safe_title, title: milestone.title, milestone: {state_event: :activate }), method: :put, class: "btn btn-grouped btn-reopen"
 
-.detail-page-description.milestone-detail
+.detail-page-description.milestone-detailrow-content-block.second-block
   %h2.title
     = markdown escape_once(milestone.title), pipeline: :single_line
 

app/views/shared/snippets/_header.html.haml

@@ -20,6 +20,6 @@
     - else
       = render "snippets/actions"
 
-.detail-page-description.gray-content-block.second-block
+.detail-page-description.row-content-block.second-block
   %h2.title
     = markdown escape_once(@snippet.title), pipeline: :single_line

app/views/sherlock/file_samples/show.html.haml

@@ -3,7 +3,7 @@
 
 - header_title t('sherlock.title'), sherlock_transactions_path
 
-.gray-content-block
+.row-content-block
   .pull-right
     = link_to(sherlock_transaction_path(@transaction), class: 'btn') do
       %i.fa.fa-arrow-left

app/views/sherlock/queries/show.html.haml

@@ -9,7 +9,7 @@
     %a(href="#tab-backtrace" data-toggle="tab")
       = t('sherlock.backtrace')
 
-.gray-content-block
+.row-content-block
   .pull-right
     = link_to(sherlock_transaction_path(@transaction), class: 'btn') do
       %i.fa.fa-arrow-left

app/views/sherlock/transactions/index.html.haml

@@ -1,7 +1,7 @@
 - page_title t('sherlock.title')
 - header_title t('sherlock.title'), sherlock_transactions_path
 
-.gray-content-block
+.row-content-block
   .pull-right
     = link_to(destroy_all_sherlock_transactions_path,
       class: 'btn btn-danger',

app/views/sherlock/transactions/show.html.haml

@@ -16,7 +16,7 @@
       %span.badge
         #{@transaction.file_samples.length}
 
-.gray-content-block
+.row-content-block
   .pull-right
     = link_to(sherlock_transactions_path, class: 'btn') do
       %i.fa.fa-arrow-left

app/views/users/show.html.haml

@@ -85,7 +85,7 @@
   %div{ class: container_class }
     .tab-content
       #activity.tab-pane
-        .gray-content-block.calender-block.white.second-block.hidden-xs
+        .row-content-block.calender-block.white.second-block.hidden-xs
           %div{ class: container_class }
             .user-calendar{data: {href: user_calendar_path}}
               %h4.center.light