Redesign for mr widget info and pipelines section

6 files changed, 205 insertions, 27 deletions

diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 30314f3d6cb..d1f7ff4438b 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -3,12 +3,20 @@
   svg {
     fill: $green-500;
   }
+
+  &.add-border {
+    @include borderless-status-icon($green-500);
+  }
 }
 
 .ci-status-icon-failed {
   svg {
     fill: $gl-danger;
   }
+
+  &.add-border {
+    @include borderless-status-icon($red-500);
+  }
 }
 
 .ci-status-icon-pending,
@@ -17,12 +25,20 @@
   svg {
     fill: $orange-500;
   }
+
+  &.add-border {
+    @include borderless-status-icon($orange-500);
+  }
 }
 
 .ci-status-icon-running {
   svg {
     fill: $blue-400;
   }
+
+  &.add-border {
+    @include borderless-status-icon($blue-400);
+  }
 }
 
 .ci-status-icon-canceled,
@@ -30,6 +46,10 @@
   svg {
     fill: $gl-text-color;
   }
+
+  &.add-border {
+    @include borderless-status-icon($gl-text-color);
+  }
 }
 
 .ci-status-icon-created,
@@ -38,6 +58,10 @@
   svg {
     fill: $gray-darkest;
   }
+
+  &.add-border {
+    @include borderless-status-icon($gray-darkest);
+  }
 }
 
 .ci-status-icon-manual {
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 0b645eb811b..76ebfc22ef7 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -232,3 +232,10 @@
   word-break: break-word;
   max-width: 100%;
 }
+
+@mixin borderless-status-icon($color) {
+  svg {
+    border: 1px solid $color;
+    border-radius: 50%;
+  }
+}
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 9e77ea03a24..9874c928604 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -350,7 +350,8 @@ code {
 }
 
 .commit-sha,
-.ref-name {
+.ref-name,
+.pipeline-number {
   @extend .monospace;
   font-size: 95%;
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7808f6d3a25..6cfa09b56a7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -743,6 +743,7 @@ Pipeline Graph
 */
 $stage-hover-bg: $gray-darker;
 $ci-action-icon-size: 22px;
+$ci-action-icon-size-lg: 24px;
 $pipeline-dropdown-line-height: 20px;
 $pipeline-dropdown-status-icon-size: 18px;
 $ci-action-dropdown-button-size: 24px;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index efd730af558..c32049e1b33 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -15,16 +15,38 @@
   }
 }
 
+.mr-widget-heading {
+  position: relative;
+  border: 1px solid $border-color;
+  border-radius: 4px;
+
+  &:not(.deploy-heading)::before {
+    content: '';
+    border-left: 1px solid $theme-gray-200;
+    position: absolute;
+    left: 32px;
+    top: -17px;
+    height: 16px;
+  }
+}
+
+.mr-section-container {
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+  border-top: 0;
+}
+
+.mr-widget-heading,
+.mr-widget-section,
+.mr-widget-footer {
+  padding: $gl-padding;
+}
+
 .mr-state-widget {
   color: $gl-text-color;
-  border: 1px solid $border-color;
-  border-radius: 2px;
-  line-height: 28px;
 
-  .mr-widget-heading,
   .mr-widget-section,
   .mr-widget-footer {
-    padding: $gl-padding;
     border-top: solid 1px $border-color;
   }
 
@@ -124,10 +146,17 @@
   .ci-widget {
     color: $gl-text-color;
     display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     @include media-breakpoint-down(xs) {
       flex-wrap: wrap;
     }
+
+    .ci-widget-content {
+      display: flex;
+      align-items: center;
+    }
   }
 
   .mr-widget-icon {
@@ -136,8 +165,6 @@
   }
 
   .ci-status-icon svg {
-    width: $status-icon-size;
-    height: $status-icon-size;
     margin: 3px 0;
     position: relative;
     overflow: visible;
@@ -145,8 +172,6 @@
   }
 
   .mr-widget-pipeline-graph {
-    padding: 0 4px;
-
     .dropdown-menu {
       z-index: 300;
     }
@@ -157,7 +182,7 @@
   }
 
   .normal {
-    line-height: 28px;
+    flex: 1;
   }
 
   .capitalize {
@@ -168,7 +193,7 @@
     @extend .ref-name;
 
     color: $gl-text-color;
-    font-weight: $gl-font-weight-bold;
+    font-weight: normal;
     overflow: hidden;
     word-break: break-all;
 
@@ -192,6 +217,8 @@
   }
 
   .mr-widget-body {
+    line-height: 28px;
+
     @include clearfix;
 
     &.media > *:first-child {
@@ -474,18 +501,66 @@
   }
 }
 
+.merge-request-details .content-block {
+  border-bottom: 0;
+}
+
 .mr-source-target {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  background-color: $gray-light;
-  border-radius: $border-radius-default $border-radius-default 0 0;
-  padding: $gl-padding / 2 $gl-padding;
+  border-radius: $border-radius-default;
+  padding: $gl-padding;
+  border: 1px solid $border-color;
+  min-height: 69px;
+
+  @include media-breakpoint-up(md) {
+    align-items: center;
+  }
 
   .dropdown-toggle .fa {
     color: $gl-text-color;
   }
+
+  .git-merge-icon-container {
+    border: 1px solid $theme-gray-400;
+    border-radius: 50%;
+    height: 32px;
+    width: 32px;
+    color: $theme-gray-700;
+    line-height: 28px;
+
+    .ic-git-merge {
+      vertical-align: middle;
+      width: 31px;
+    }
+  }
+
+  .git-merge-container {
+    justify-content: space-between;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .branch-actions {
+        margin-top: 16px;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      .branch-actions {
+        align-self: center;
+      }
+    }
+  }
+
+  .diverged-commits-count {
+    color: $gl-text-color-secondary;
+    font-size: 12px;
+  }
 }
 
 .card-new-merge-request {
@@ -720,13 +795,25 @@
 }
 
 .deploy-heading {
+  margin-top: -19px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background-color: $gray-light;
+
+  @include media-breakpoint-up(md) {
+    padding: $gl-padding-8 $gl-padding;
+  }
+
   .media-body {
     min-width: 0;
+    font-size: 12px;
+    margin-left: 48px;
   }
 }
 
 .deploy-body {
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
 
   @include media-breakpoint-up(xs) {
@@ -734,6 +821,15 @@
     white-space: nowrap;
   }
 
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .deployment-info {
+      margin-bottom: $gl-padding;
+    }
+  }
+
   > *:not(:last-child) {
     margin-right: .3em;
   }
@@ -741,18 +837,22 @@
   svg {
     vertical-align: text-top;
   }
-}
 
-.deploy-link {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 100px;
-  max-width: 150px;
+  .deployment-info {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 100px;
 
-  @include media-breakpoint-up(xs) {
-    min-width: 0;
-    max-width: 100%;
+    @include media-breakpoint-up(xs) {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  .btn svg {
+    fill: $theme-gray-700;
   }
 }
 
@@ -772,3 +872,33 @@
     }
   }
 }
+
+.ci-widget-container {
+  justify-content: space-between;
+  flex: 1;
+  flex-direction: row;
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+
+    .stage-cell .stage-container {
+      margin-top: 16px;
+    }
+
+    .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
+      transform: initial;
+    }
+  }
+
+  .coverage {
+    font-size: 12px;
+    color: $theme-gray-700;
+    line-height: initial;
+  }
+
+  .mini-pipeline-graph-dropdown-toggle,
+  .stage-cell .mini-pipeline-graph-dropdown-toggle svg {
+    height: $ci-action-icon-size-lg;
+    width: $ci-action-icon-size-lg;
+  }
+}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 52332ac97dd..b68c89c25d8 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -301,6 +301,21 @@
         border-bottom: 2px solid $border-color;
       }
     }
+
+    //delete when all pipelines are updated to new size
+    &.mr-widget-pipeline-stages {
+      + .stage-container {
+        margin-left: 4px;
+      }
+
+      &:not(:last-child) {
+        &::after {
+          width: 4px;
+          right: -4px;
+          top: 11px;
+        }
+      }
+    }
   }
 }