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,14 +59,14 @@
 
   .header-content {
     flex: 1;
-  }
 
-  a {
-    color: $gl-gray;
+    a {
+      color: $gl-gray;
 
-    &:hover {
-      color: $gl-link-color;
-      text-decoration: none;
+      &:hover {
+        color: $gl-link-color;
+        text-decoration: none;
+      }
     }
   }
 

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
-        = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
-        with
-        = pluralize pipeline.statuses.count(:id), "build"
-        - if pipeline.ref
-          for
-          = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
-        - if defined?(link_to_commit) && link_to_commit
-          for commit
-          = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
-        - if pipeline.duration
-          in
-          = time_interval_in_words pipeline.duration
+  .oneline.clearfix
+    - if defined?(pipeline_details) && pipeline_details
+      Pipeline
+      = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
+      with
+      = pluralize pipeline.statuses.count(:id), "build"
+      - if pipeline.ref
+        for
+        = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
+      - if defined?(link_to_commit) && link_to_commit
+        for commit
+        = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
+      - if pipeline.duration
+        in
+        = time_interval_in_words pipeline.duration
 
   .tabs-holder
     %ul.nav-links.no-top.no-bottom

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
-  = pluralize @pipeline.statuses.count(:id), "build"
-  - if @pipeline.ref
-    for
-    = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
-  - if @pipeline.duration
-    in
-    = time_interval_in_words(@pipeline.duration)
-  - if @pipeline.queued_duration
-    = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
-
-  .pull-right
+.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-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
-  = 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
+  .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
+        = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
+      - if @pipeline.duration
+        in
+        = time_interval_in_words(@pipeline.duration)
+      - if @pipeline.queued_duration
+        = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
+
+  .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)

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
+  - if @commit
+    = render "projects/pipelines/info"
 
   = render "projects/commit/pipeline", pipeline: @pipeline

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

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