Rearrange and style items on pipeline page

app/assets/stylesheets/framework/buttons.scss

@@ -345,6 +345,10 @@
   }
 }
 
+.retry-build-btn {
+  @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light);
+}
+
 @media (max-width: $screen-xs-max) {
   .btn-wide-on-xs {
     width: 100%;

app/assets/stylesheets/pages/builds.scss

@@ -49,10 +49,6 @@
   min-height: 58px;
   align-items: center;
 
-  .btn-inverted {
-    @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light);
-  }
-
   @media (max-width: $screen-sm-max) {
     padding-right: 40px;
 
@@ -63,7 +59,6 @@
 
   .header-content {
     flex: 1;
-  }
 
     a {
       color: $gl-gray;
@@ -73,6 +68,7 @@
         text-decoration: none;
       }
     }
+  }
 
   code {
     color: $code-color;

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

@@ -14,6 +14,6 @@
       = render "user"
     = time_ago_with_tooltip(@build.created_at)
   - if can?(current_user, :update_build, @build) && @build.retryable?
-    = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-inverted pull-right', method: :post
+    = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn retry-build-btn pull-right', method: :post
   %button.btn.btn-default.pull-right.visible-xs-block.visible-sm-block.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')

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

 .pipeline-graph-container
-  .row-content-block.build-content.middle-block.pipeline-actions
-    .pull-right
-      - if can?(current_user, :update_pipeline, pipeline.project)
-        - if pipeline.builds.latest.failed.any?(&:retryable?)
-          = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
-
-        - if pipeline.builds.running_or_pending.any?
-          = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
-
   .oneline.clearfix
     - if defined?(pipeline_details) && pipeline_details
       Pipeline

app/views/projects/pipelines/_info.html.haml

-%p
-.commit-info-row
-  Pipeline
-  = link_to "##{@pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, @pipeline.id), class: "monospace"
-  with
+.commit-info-row.commit-info-row-header
+  .commit-meta
+    = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), class: "ci-status ci-#{@pipeline.status}" do
+      = ci_icon_for_status(@pipeline.status)
+      = ci_label_for_status(@pipeline.status)
+    %strong Pipeline ##{@commit.pipelines.last.id}
+    triggered #{time_ago_with_tooltip(@commit.authored_date)} by
+    = author_avatar(@commit, size: 24)
+    = commit_author_link(@commit)
+  .commit-action-buttons
+    - if can?(current_user, :update_pipeline, @pipeline.project)
+      - if @pipeline.builds.latest.failed.any?(&:retryable?)
+        = link_to "Retry failed", retry_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'btn btn-grouped retry-build-btn', method: :post
+      - if @pipeline.builds.running_or_pending.any?
+        = link_to "Cancel running", cancel_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
+
+- if @commit
+  .commit-box
+    %h3.commit-title
+      = markdown(@commit.title, pipeline: :single_line)
+    - if @commit.description.present?
+      %pre.commit-description
+        = preserve(markdown(@commit.description, pipeline: :single_line))
+
+.info-well
+  - if @commit.status
+    .well-segment.pipeline-info
+      .icon-container
+        = ci_icon_for_status(@commit.status)
       = pluralize @pipeline.statuses.count(:id), "build"
       - if @pipeline.ref
         for
@@ -13,27 +37,8 @@
       - if @pipeline.queued_duration
         = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
 
-  .pull-right
-    = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), class: "ci-status ci-#{@pipeline.status}" do
-      = ci_icon_for_status(@pipeline.status)
-      = ci_label_for_status(@pipeline.status)
-
-- if @commit
-  .commit-info-row
-    %span.light Authored by
-    %strong
-      = commit_author_link(@commit, avatar: true, size: 24)
-    #{time_ago_with_tooltip(@commit.authored_date)}
-
-.commit-info-row
-  %span.light Commit
+  .well-segment.branch-info
+    .icon-container.commit-icon
+      = custom_icon("icon_commit")
     = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace"
     = clipboard_button(clipboard_text: @pipeline.sha)
-
-- if @commit
-  .commit-box.content-block
-    %h3.commit-title
-      = markdown(@commit.title, pipeline: :single_line)
-    - if @commit.description.present?
-      %pre.commit-description
-        = preserve(markdown(@commit.description, pipeline: :single_line))

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

@@ -3,9 +3,7 @@
 = render "projects/pipelines/head"
 
 %div{ class: container_class }
-  .prepend-top-default
   - if @commit
     = render "projects/pipelines/info"
-    %div.block-connector
 
   = render "projects/commit/pipeline", pipeline: @pipeline

changelogs/unreleased/23637-title-bar-pipelines.yml

+---
+title: 23637-title-bar-pipelines
+merge_request: 
+author: