Add latest changes from gitlab-org/gitlab@master

25 files changed, 781 insertions, 846 deletions

diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index 977da12e8a9..36b9b647af7 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -12,10 +12,10 @@ export default {
 <template>
   <div class="empty-state">
     <div class="text-content">
-      <h4 class="blank-state-title js-blank-state-title">
+      <h4 class="js-blank-state-title">
         {{ s__("Environments|You don't have any environments right now") }}
       </h4>
-      <p class="blank-state-text">
+      <p>
         {{
           s__(`Environments|Environments are places where
         code gets deployed, such as staging or production.`)
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 184bda4410f..e7bac11a27e 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -199,6 +199,7 @@ export default {
       requestAccessEnabled: true,
       highlightChangesClass: false,
       emailsDisabled: false,
+      showDiffPreviewInEmail: true,
       cveIdRequestEnabled: true,
       featureAccessLevelEveryone,
       featureAccessLevelMembers,
@@ -762,6 +763,24 @@ export default {
     </project-setting-row>
     <project-setting-row class="mb-3">
       <input
+        :value="showDiffPreviewInEmail"
+        type="hidden"
+        name="project[project_setting_attributes][show_diff_preview_in_email]"
+      />
+      <gl-form-checkbox
+        v-model="showDiffPreviewInEmail"
+        name="project[project_setting_attributes][show_diff_preview_in_email]"
+      >
+        {{ s__('ProjectSettings|Include diff preview in merge request notification emails') }}
+        <template #help>{{
+          s__(
+            'ProjectSettings|Include the code diff preview on comment threads in merge request notification emails.',
+          )
+        }}</template>
+      </gl-form-checkbox>
+    </project-setting-row>
+    <project-setting-row class="mb-3">
+      <input
         :value="showDefaultAwardEmojis"
         type="hidden"
         name="project[project_setting_attributes][show_default_award_emojis]"
diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js
index bc83844b8b9..b003302ec8e 100644
--- a/app/assets/javascripts/persistent_user_callout.js
+++ b/app/assets/javascripts/persistent_user_callout.js
@@ -7,10 +7,11 @@ const DEFERRED_LINK_CLASS = 'deferred-link';
 
 export default class PersistentUserCallout {
   constructor(container, options = container.dataset) {
-    const { dismissEndpoint, featureId, deferLinks } = options;
+    const { dismissEndpoint, featureId, groupId, deferLinks } = options;
     this.container = container;
     this.dismissEndpoint = dismissEndpoint;
     this.featureId = featureId;
+    this.groupId = groupId;
     this.deferLinks = parseBoolean(deferLinks);
 
     this.init();
@@ -52,6 +53,7 @@ export default class PersistentUserCallout {
     axios
       .post(this.dismissEndpoint, {
         feature_name: this.featureId,
+        group_id: this.groupId,
       })
       .then(() => {
         this.container.remove();
diff --git a/app/assets/javascripts/persistent_user_callouts.js b/app/assets/javascripts/persistent_user_callouts.js
index a7f8704b559..337c204c36a 100644
--- a/app/assets/javascripts/persistent_user_callouts.js
+++ b/app/assets/javascripts/persistent_user_callouts.js
@@ -10,6 +10,7 @@ const PERSISTENT_USER_CALLOUTS = [
   '.js-new-user-signups-cap-reached',
   '.js-eoa-bronze-plan-banner',
   '.js-security-newsletter-callout',
+  '.js-approaching-seats-count-threshold',
 ];
 
 const initCallouts = () => {
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c1c8bfffff7..8e43a9b1b0d 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -46,7 +46,6 @@
 @import 'framework/toggle';
 @import 'framework/typography';
 @import 'framework/zen';
-@import 'framework/blank';
 @import 'framework/wells';
 @import 'framework/page_header';
 @import 'framework/page_title';
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
deleted file mode 100644
index 7dd7ab339dd..00000000000
--- a/app/assets/stylesheets/framework/blank.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.blank-state-parent-container {
-  .section-container {
-    padding: 10px;
-  }
-
-  .section-body {
-    width: 100%;
-    height: 100%;
-    padding-bottom: 25px;
-    border-radius: $border-radius-default;
-  }
-}
-
-.blank-state-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.blank-state-welcome {
-  text-align: center;
-  padding: $gl-padding 0 ($gl-padding * 2);
-
-  .blank-state-welcome-title {
-    font-size: 24px;
-  }
-
-  .blank-state-text {
-    margin-bottom: 0;
-  }
-}
-
-.blank-state-link {
-  color: $gl-text-color;
-  margin-bottom: 15px;
-
-  &:hover {
-    background-color: $gray-light;
-    text-decoration: none;
-    color: $gl-text-color;
-  }
-}
-
-.blank-state-center {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  text-align: center;
-}
-
-.blank-state {
-  display: flex;
-  align-items: center;
-  padding: 20px 50px;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  min-height: 240px;
-  margin-bottom: $gl-padding;
-  width: calc(50% - #{$gl-padding-8});
-
-  @include media-breakpoint-down(sm) {
-    width: 100%;
-    flex-direction: column;
-    justify-content: center;
-    padding: 50px 20px;
-
-    .column-small & {
-      width: 100%;
-    }
-
-  }
-}
-
-.blank-state,
-.blank-state-center {
-  .blank-state-icon {
-    svg {
-      display: block;
-      margin: auto;
-    }
-  }
-
-  .blank-state-title {
-    margin-top: 0;
-    font-size: 18px;
-  }
-
-  .blank-state-body {
-    @include media-breakpoint-down(sm) {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    @include media-breakpoint-up(sm) {
-      padding-left: 20px;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .column-large {
-    flex: 2;
-  }
-
-  .column-small {
-    flex: 1;
-    margin-bottom: 15px;
-
-    .blank-state {
-      max-width: 400px;
-      flex-wrap: wrap;
-      margin-left: 15px;
-    }
-
-    .blank-state-icon {
-      margin-bottom: 30px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f9b0f4f3118..9cf435af726 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -929,8 +929,6 @@ Merge requests
 */
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
-$mr-widget-margin-left: 40px;
-$mr-review-bar-height: calc(2rem + 13px);
 
 /*
 Compare Branches
diff --git a/app/assets/stylesheets/page_bundles/dashboard_projects.scss b/app/assets/stylesheets/page_bundles/dashboard_projects.scss
new file mode 100644
index 00000000000..eb0e1701b7f
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/dashboard_projects.scss
@@ -0,0 +1,35 @@
+@import 'mixins_and_variables_and_functions';
+
+.blank-state {
+  padding: 20px 50px;
+  min-height: 240px;
+  width: calc(50% - #{$gl-padding-8});
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px 20px;
+  }
+}
+
+.blank-state-link {
+  &:hover {
+    background-color: $gray-light;
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+}
+
+.blank-state-icon {
+  svg {
+    display: block;
+  }
+}
+
+.blank-state-body {
+  @include media-breakpoint-down(sm) {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 75b953df791..1ee154f9aeb 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -1,5 +1,10 @@
 @import 'mixins_and_variables_and_functions';
 
+$mr-review-bar-height: calc(2rem + 13px);
+$mr-widget-margin-left: 40px;
+$mr-widget-min-height: 69px;
+$tabs-holder-z-index: 250;
+
 .compare-versions-container {
   min-width: 0;
 }
@@ -108,6 +113,638 @@
   }
 }
 
+.ci-widget-container {
+  justify-content: space-between;
+  flex: 1;
+  flex-direction: row;
+
+  @include media-breakpoint-down(sm) {
+    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: $gray-500;
+    line-height: initial;
+  }
+}
+
+.deploy-body {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  @include media-breakpoint-up(xs) {
+    flex-wrap: nowrap;
+    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: 0.3em;
+  }
+
+  svg {
+    vertical-align: text-top;
+  }
+
+  .deployment-info {
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 100px;
+
+    @include media-breakpoint-up(xs) {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  .dropdown-menu {
+    width: 400px;
+  }
+}
+
+.deploy-heading,
+.merge-train-position-indicator {
+  @include media-breakpoint-up(md) {
+    padding: $gl-padding-8 $gl-padding;
+  }
+
+  .media-body {
+    min-width: 0;
+    font-size: 12px;
+    margin-left: 32px;
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.diff-file-row.is-active {
+  background-color: $gray-50;
+}
+
+.mr-conflict-loader {
+  max-width: 334px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
+
+.mr-info-list {
+  clear: left;
+  position: relative;
+  padding-top: 4px;
+
+  p {
+    margin: 0;
+    position: relative;
+    padding: 4px 0;
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  &.mr-memory-usage {
+    p {
+      float: left;
+    }
+
+    .memory-graph-container {
+      float: left;
+      margin-left: 5px;
+    }
+  }
+}
+
+.mr-memory-usage {
+  width: 100%;
+
+  p.usage-info-loading .usage-info-load-spinner {
+    margin-right: 10px;
+    font-size: 16px;
+  }
+}
+
+.mr-ready-to-merge-loader {
+  max-width: 418px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
+
+.mr-section-container {
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+  background: var(--white, $white);
+
+  > .mr-widget-border-top:first-of-type {
+    border-top: 0;
+  }
+}
+
+.mr-source-target {
+  flex-wrap: wrap;
+  padding: $gl-padding;
+  background: var(--white, $white);
+  min-height: $mr-widget-min-height;
+
+  @include media-breakpoint-up(md) {
+    align-items: center;
+  }
+
+  .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: stretch;
+
+      .branch-actions {
+        margin-top: 16px;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      .branch-actions {
+        align-self: center;
+        margin-left: $gl-padding;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .diverged-commits-count {
+    color: $gl-text-color-secondary;
+  }
+}
+
+.mr-state-widget {
+  color: $gl-text-color;
+
+  .commit-message-edit {
+    border-radius: $border-radius-default;
+  }
+
+  .mr-widget-section:not(:first-child) {
+    border-top: solid 1px $border-color;
+  }
+
+  .mr-widget-alert-container + .mr-widget-section {
+    border-top: 0;
+  }
+
+  .mr-fast-forward-message {
+    padding-left: $gl-padding-50;
+    padding-bottom: $gl-padding;
+  }
+
+  .commits-list {
+    > li {
+      padding: $gl-padding;
+
+      @include media-breakpoint-up(md) {
+        margin-left: $gl-spacing-scale-7;
+      }
+    }
+  }
+
+  .mr-commit-dropdown {
+    .dropdown-menu {
+      @include media-breakpoint-up(md) {
+        width: 150%;
+      }
+    }
+  }
+
+  .mr-report {
+    padding: 0;
+
+    > .media {
+      padding: $gl-padding;
+    }
+  }
+
+  form {
+    margin-bottom: 0;
+
+    .clearfix {
+      margin-bottom: 0;
+    }
+  }
+
+  label {
+    margin-bottom: 0;
+  }
+
+  .btn {
+    font-size: $gl-font-size;
+  }
+
+  .accept-merge-holder {
+    .accept-action {
+      display: inline-block;
+      float: left;
+    }
+  }
+
+  .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;
+      flex: 1;
+    }
+  }
+
+  .mr-widget-icon {
+    font-size: 22px;
+  }
+
+  .mr-loading-icon {
+    margin: 3px 0;
+  }
+
+  .ci-status-icon svg {
+    margin: 3px 0;
+    position: relative;
+    overflow: visible;
+    display: block;
+  }
+
+  .mr-widget-pipeline-graph {
+    .dropdown-menu {
+      z-index: $zindex-dropdown-menu;
+    }
+  }
+
+  .normal {
+    flex: 1;
+    flex-basis: auto;
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  .label-branch {
+    @include gl-font-monospace;
+    font-size: 95%;
+    color: $gl-text-color;
+    font-weight: normal;
+    overflow: hidden;
+    word-break: break-all;
+  }
+
+  .deploy-link,
+  .label-branch {
+    &.label-truncate {
+      // NOTE: This selector targets its children because some of the HTML comes from
+      // 'source_branch_link'. Once this external HTML is no longer used, we could
+      // simplify this.
+      > a,
+      > span {
+        display: inline-block;
+        max-width: 12.5em;
+        margin-bottom: -6px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .mr-widget-body {
+    &:not(.mr-widget-body-line-height-1) {
+      line-height: 28px;
+    }
+
+    @include clearfix;
+
+    .approve-btn {
+      margin-right: 5px;
+    }
+
+    h4 {
+      float: left;
+      font-weight: $gl-font-weight-bold;
+      font-size: 14px;
+      line-height: inherit;
+      margin-top: 0;
+      margin-bottom: 0;
+
+      time {
+        font-weight: $gl-font-weight-normal;
+      }
+    }
+
+    .btn-grouped {
+      margin-left: 0;
+      margin-right: 7px;
+    }
+
+    label {
+      font-weight: $gl-font-weight-normal;
+    }
+
+    .spacing {
+      margin: 0 0 0 10px;
+    }
+
+    .bold,
+    .gl-font-weight-bold {
+      font-weight: $gl-font-weight-bold;
+      color: $gray-600;
+      margin-left: 10px;
+    }
+
+    .state-label {
+      font-weight: $gl-font-weight-bold;
+      padding-right: 10px;
+    }
+
+    .danger {
+      color: $red-500;
+    }
+
+    .spacing,
+    .bold,
+    .gl-font-weight-bold {
+      vertical-align: middle;
+    }
+
+    .dropdown-menu {
+      li a {
+        padding: 5px;
+      }
+
+      .merge-opt-icon {
+        line-height: 1.5;
+      }
+
+      .merge-opt-title {
+        margin-left: 8px;
+      }
+    }
+
+    .has-custom-error {
+      display: inline-block;
+    }
+
+    @include media-breakpoint-down(xs) {
+      p {
+        font-size: 13px;
+      }
+
+      .btn-grouped {
+        float: none;
+        margin-right: 0;
+      }
+
+      .accept-action {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    .commit-message-editor {
+      label {
+        padding: 0;
+      }
+    }
+
+    &.mr-widget-empty-state {
+      line-height: 20px;
+      padding: $gl-padding;
+
+      .artwork {
+
+        @include media-breakpoint-down(md) {
+          margin-bottom: $gl-padding;
+        }
+      }
+
+      .text {
+        p {
+          margin-top: $gl-padding;
+        }
+
+        .highlight {
+          margin: 0 0 $gl-padding;
+          font-weight: $gl-font-weight-bold;
+        }
+      }
+    }
+
+    &.mr-pipeline-suggest {
+      border-radius: $border-radius-default;
+      line-height: 20px;
+      border: 1px solid $border-color;
+
+      .circle-icon-container {
+        color: $gl-text-color-quaternary;
+      }
+    }
+  }
+
+  .ci-coverage {
+    float: right;
+  }
+
+  .stop-env-container {
+    color: $gl-text-color;
+    float: right;
+
+    a {
+      color: $gl-text-color;
+    }
+  }
+}
+
+.mr-widget-alert-container {
+  $radius: $border-radius-default - 1px;
+
+  border-radius: $radius $radius 0 0;
+
+  .gl-alert:not(:last-child) {
+    margin-bottom: 1px;
+  }
+}
+
+.mr-widget-body,
+.mr-widget-content {
+  padding: $gl-padding;
+}
+
+.mr-widget-border-top {
+  border-top: 1px solid $border-color;
+}
+
+.mr-widget-extension {
+  border-top: 1px solid $border-color;
+  background-color: $gray-50;
+
+  &.clickable:hover {
+    background-color: $gray-100;
+    cursor: pointer;
+  }
+}
+
+.mr-widget-extension-icon::before {
+  @include gl-content-empty;
+  @include gl-absolute;
+  @include gl-left-0;
+  @include gl-top-0;
+  @include gl-opacity-3;
+  @include gl-border-solid;
+  @include gl-border-4;
+  @include gl-rounded-full;
+
+  width: 24px;
+  height: 24px;
+}
+
+.mr-widget-heading {
+  position: relative;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+  background: var(--white, $white);
+
+  .gl-skeleton-loader {
+    display: block;
+  }
+}
+
+.mr-widget-info {
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+}
+
+.mr-widget-margin-left {
+  margin-left: $mr-widget-margin-left;
+}
+
+.mr-widget-section {
+  .code-text {
+    flex: 1;
+  }
+}
+
+.mr-widget-workflow {
+  margin-top: $gl-padding;
+  position: relative;
+
+  &::before {
+    content: '';
+    border-left: 1px solid $gray-100;
+    position: absolute;
+    left: 28px;
+    top: -17px;
+    height: 16px;
+  }
+}
+
+.mr-version-controls {
+  position: relative;
+  z-index: $tabs-holder-z-index + 10;
+  background: $white;
+  color: $gl-text-color;
+  margin-top: -1px;
+
+  .mr-version-menus-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 16px;
+    z-index: 199;
+    white-space: nowrap;
+
+    .gl-dropdown-toggle {
+      width: auto;
+      max-width: 170px;
+
+      svg {
+        top: 10px;
+        right: 8px;
+      }
+    }
+  }
+
+  .content-block {
+    padding: $gl-padding;
+    border-bottom: 0;
+  }
+
+  .mr-version-dropdown,
+  .mr-version-compare-dropdown {
+    margin: 0 0.5rem;
+  }
+
+  .dropdown-title {
+    color: $gl-text-color;
+  }
+
+  // Shortening button height by 1px to make compare-versions
+  // header 56px and fit into our 8px design grid
+  .btn {
+    height: 34px;
+  }
+
+  @include media-breakpoint-up(md) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: calc(#{$header-height} + #{$mr-tabs-height});
+
+    .with-system-header & {
+      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
+    }
+
+    .with-system-header.with-performance-bar & {
+      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
+    }
+
+    .mr-version-menus-container {
+      flex-wrap: nowrap;
+    }
+
+    .with-performance-bar & {
+      top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
+    }
+  }
+}
+
 // TODO: Move to GitLab UI
 .mr-extenson-scrim {
   background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1));
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index b858d457969..dc01aea7681 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -2,8 +2,6 @@
  * MR -> show: Automerge widget
  *
  */
-
-$mr-widget-min-height: 69px;
 $tabs-holder-z-index: 250;
 
 .space-children {
@@ -18,12 +16,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-widget-border-top {
-  border-top: 1px solid $border-color;
-}
-
-.mr-widget-margin-left { margin-left: $mr-widget-margin-left; }
-
 .media-section {
   @include media-breakpoint-down(md) {
     align-items: flex-start;
@@ -42,140 +34,9 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-widget-section {
-  .code-text {
-    flex: 1;
-  }
-}
-
-.mr-widget-heading {
-  position: relative;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  background: var(--white, $white);
-
-  .gl-skeleton-loader {
-    display: block;
-  }
-}
-
-.mr-widget-extension {
-  border-top: 1px solid $border-color;
-  background-color: $gray-50;
-
-  &.clickable:hover {
-    background-color: $gray-100;
-    cursor: pointer;
-  }
-}
-
-.mr-widget-workflow {
-  margin-top: $gl-padding;
-  position: relative;
-
-  &::before {
-    content: '';
-    border-left: 1px solid $gray-100;
-    position: absolute;
-    left: 28px;
-    top: -17px;
-    height: 16px;
-  }
-}
-
-.mr-section-container {
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  background: var(--white, $white);
-
-  > .mr-widget-border-top:first-of-type {
-    border-top: 0;
-  }
-}
-
-.mr-widget-body,
-.mr-widget-content,
-.mr-widget-footer {
-  padding: $gl-padding;
-}
-
-.mr-widget-info {
-  padding-left: $gl-padding;
-  padding-right: $gl-padding;
-}
-
 .mr-state-widget {
-  color: $gl-text-color;
-
-  .commit-message-edit {
-    border-radius: $border-radius-default;
-  }
-
-  .mr-widget-section:not(:first-child),
-  .mr-widget-footer {
-    border-top: solid 1px $border-color;
-  }
-
-  .mr-widget-alert-container + .mr-widget-section {
-    border-top: 0;
-  }
-
-  .mr-fast-forward-message {
-    padding-left: $gl-padding-50;
-    padding-bottom: $gl-padding;
-  }
-
-  .commits-list {
-    > li {
-      padding: $gl-padding;
-
-      @include media-breakpoint-up(md) {
-        margin-left: $gl-spacing-scale-7;
-      }
-    }
-  }
-
-  .mr-commit-dropdown {
-    .dropdown-menu {
-      @include media-breakpoint-up(md) {
-        width: 150%;
-      }
-    }
-  }
-
-  .mr-widget-footer {
-    padding: 0;
-  }
-
-  .mr-report {
-    padding: 0;
-
-    > .media {
-      padding: $gl-padding;
-    }
-  }
-
-  form {
-    margin-bottom: 0;
-
-    .clearfix {
-      margin-bottom: 0;
-    }
-  }
-
-  label {
-    margin-bottom: 0;
-  }
-
-  .btn {
-    font-size: $gl-font-size;
-  }
-
   .accept-merge-holder {
     .accept-action {
-      display: inline-block;
-      float: left;
-
       .accept-merge-request {
         &.ci-preparing,
         &.ci-pending,
@@ -192,226 +53,6 @@ $tabs-holder-z-index: 250;
       }
     }
   }
-
-  .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;
-      flex: 1;
-    }
-  }
-
-  .mr-widget-icon {
-    font-size: 22px;
-  }
-
-  .mr-loading-icon {
-    margin: 3px 0;
-  }
-
-  .ci-status-icon svg {
-    margin: 3px 0;
-    position: relative;
-    overflow: visible;
-    display: block;
-  }
-
-  .mr-widget-pipeline-graph {
-    .dropdown-menu {
-      z-index: $zindex-dropdown-menu;
-    }
-  }
-
-  .normal {
-    flex: 1;
-    flex-basis: auto;
-  }
-
-  .capitalize {
-    text-transform: capitalize;
-  }
-
-  .label-branch {
-    @include gl-font-monospace;
-    font-size: 95%;
-    color: $gl-text-color;
-    font-weight: normal;
-    overflow: hidden;
-    word-break: break-all;
-  }
-
-  .deploy-link,
-  .label-branch {
-    &.label-truncate {
-      // NOTE: This selector targets its children because some of the HTML comes from
-      // 'source_branch_link'. Once this external HTML is no longer used, we could
-      // simplify this.
-      > a,
-      > span {
-        display: inline-block;
-        max-width: 12.5em;
-        margin-bottom: -6px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-
-  .mr-widget-body {
-    &:not(.mr-widget-body-line-height-1) {
-      line-height: 28px;
-    }
-
-    @include clearfix;
-
-    .approve-btn {
-      margin-right: 5px;
-    }
-
-    h4 {
-      float: left;
-      font-weight: $gl-font-weight-bold;
-      font-size: 14px;
-      line-height: inherit;
-      margin-top: 0;
-      margin-bottom: 0;
-
-      time {
-        font-weight: $gl-font-weight-normal;
-      }
-    }
-
-    .btn-grouped {
-      margin-left: 0;
-      margin-right: 7px;
-    }
-
-    label {
-      font-weight: $gl-font-weight-normal;
-    }
-
-    .spacing {
-      margin: 0 0 0 10px;
-    }
-
-    .bold,
-    .gl-font-weight-bold {
-      font-weight: $gl-font-weight-bold;
-      color: $gray-600;
-      margin-left: 10px;
-    }
-
-    .state-label {
-      font-weight: $gl-font-weight-bold;
-      padding-right: 10px;
-    }
-
-    .danger {
-      color: $red-500;
-    }
-
-    .spacing,
-    .bold,
-    .gl-font-weight-bold {
-      vertical-align: middle;
-    }
-
-    .dropdown-menu {
-      li a {
-        padding: 5px;
-      }
-
-      .merge-opt-icon {
-        line-height: 1.5;
-      }
-
-      .merge-opt-title {
-        margin-left: 8px;
-      }
-    }
-
-    .has-custom-error {
-      display: inline-block;
-    }
-
-    @include media-breakpoint-down(xs) {
-      p {
-        font-size: 13px;
-      }
-
-      .btn-grouped {
-        float: none;
-        margin-right: 0;
-      }
-
-      .accept-action {
-        width: 100%;
-        text-align: center;
-      }
-    }
-
-    .commit-message-editor {
-      label {
-        padding: 0;
-      }
-    }
-
-    &.mr-widget-empty-state {
-      line-height: 20px;
-      padding: $gl-padding;
-
-      .artwork {
-
-        @include media-breakpoint-down(md) {
-          margin-bottom: $gl-padding;
-        }
-      }
-
-      .text {
-        p {
-          margin-top: $gl-padding;
-        }
-
-        .highlight {
-          margin: 0 0 $gl-padding;
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-    }
-
-    &.mr-pipeline-suggest {
-      border-radius: $border-radius-default;
-      line-height: 20px;
-      border: 1px solid $border-color;
-
-      .circle-icon-container {
-        color: $gl-text-color-quaternary;
-      }
-    }
-  }
-
-  .ci-coverage {
-    float: right;
-  }
-
-  .stop-env-container {
-    color: $gl-text-color;
-    float: right;
-
-    a {
-      color: $gl-text-color;
-    }
-  }
 }
 
 .mr_source_commit,
@@ -477,72 +118,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-info-list {
-  clear: left;
-  position: relative;
-  padding-top: 4px;
-
-  p {
-    margin: 0;
-    position: relative;
-    padding: 4px 0;
-
-    &:last-child {
-      padding-bottom: 0;
-    }
-  }
-
-  &.mr-memory-usage {
-    p {
-      float: left;
-    }
-
-    .memory-graph-container {
-      float: left;
-      margin-left: 5px;
-    }
-  }
-}
-
-.mr-source-target {
-  flex-wrap: wrap;
-  padding: $gl-padding;
-  background: var(--white, $white);
-  min-height: $mr-widget-min-height;
-
-  @include media-breakpoint-up(md) {
-    align-items: center;
-  }
-
-  .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: stretch;
-
-      .branch-actions {
-        margin-top: 16px;
-      }
-    }
-
-    @include media-breakpoint-up(lg) {
-      .branch-actions {
-        align-self: center;
-        margin-left: $gl-padding;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .diverged-commits-count {
-    color: $gl-text-color-secondary;
-  }
-}
-
 .card-new-merge-request {
   .card-header {
     padding: 5px 10px;
@@ -639,75 +214,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-version-controls {
-  position: relative;
-  z-index: $tabs-holder-z-index + 10;
-  background: $white;
-  color: $gl-text-color;
-  margin-top: -1px;
-
-  .mr-version-menus-container {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 16px;
-    z-index: 199;
-    white-space: nowrap;
-
-    .gl-dropdown-toggle {
-      width: auto;
-      max-width: 170px;
-
-      svg {
-        top: 10px;
-        right: 8px;
-      }
-    }
-  }
-
-  .content-block {
-    padding: $gl-padding;
-    border-bottom: 0;
-  }
-
-  .mr-version-dropdown,
-  .mr-version-compare-dropdown {
-    margin: 0 0.5rem;
-  }
-
-  .dropdown-title {
-    color: $gl-text-color;
-  }
-
-  // Shortening button height by 1px to make compare-versions
-  // header 56px and fit into our 8px design grid
-  .btn {
-    height: 34px;
-  }
-
-  @include media-breakpoint-up(md) {
-    position: -webkit-sticky;
-    position: sticky;
-    top: calc(#{$header-height} + #{$mr-tabs-height});
-
-    .with-system-header & {
-      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
-    }
-
-    .with-system-header.with-performance-bar & {
-      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
-    }
-
-    .mr-version-menus-container {
-      flex-wrap: nowrap;
-    }
-
-    .with-performance-bar & {
-      top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
-    }
-  }
-}
-
 .merge-request-tabs-holder,
 .epic-tabs-holder {
   top: $header-height;
@@ -833,80 +339,10 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-memory-usage {
-  width: 100%;
-
-  p.usage-info-loading .usage-info-load-spinner {
-    margin-right: 10px;
-    font-size: 16px;
-  }
-}
-
 .fork-sprite {
   margin-right: -5px;
 }
 
-.deploy-heading,
-.merge-train-position-indicator {
-  @include media-breakpoint-up(md) {
-    padding: $gl-padding-8 $gl-padding;
-  }
-
-  .media-body {
-    min-width: 0;
-    font-size: 12px;
-    margin-left: 32px;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color;
-  }
-}
-
-.deploy-body {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  @include media-breakpoint-up(xs) {
-    flex-wrap: nowrap;
-    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: 0.3em;
-  }
-
-  svg {
-    vertical-align: text-top;
-  }
-
-  .deployment-info {
-    flex: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    min-width: 100px;
-
-    @include media-breakpoint-up(xs) {
-      min-width: 0;
-      max-width: 100%;
-    }
-  }
-
-  .dropdown-menu {
-    width: 400px;
-  }
-}
-
 // Hack alert: we've rewritten `btn` class in a way that
 // we've broken it and it is not possible to use with `btn-link`
 // which causes a blank button when it's disabled and hovering
@@ -924,30 +360,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.ci-widget-container {
-  justify-content: space-between;
-  flex: 1;
-  flex-direction: row;
-
-  @include media-breakpoint-down(sm) {
-    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: $gray-500;
-    line-height: initial;
-  }
-}
-
 .merge-request-details .file-finder-overlay.diff-file-finder {
   position: fixed;
   z-index: 99999;
@@ -963,47 +375,3 @@ $tabs-holder-z-index: 250;
     }
   }
 }
-
-.diff-file-row.is-active {
-  background-color: $gray-50;
-}
-
-.mr-conflict-loader {
-  max-width: 334px;
-
-  > svg {
-    vertical-align: middle;
-  }
-}
-
-.mr-ready-to-merge-loader {
-  max-width: 418px;
-
-  > svg {
-    vertical-align: middle;
-  }
-}
-
-.mr-widget-alert-container {
-  $radius: $border-radius-default - 1px;
-
-  border-radius: $radius $radius 0 0;
-
-  .gl-alert:not(:last-child) {
-    margin-bottom: 1px;
-  }
-}
-
-.mr-widget-extension-icon::before {
-  @include gl-content-empty;
-  @include gl-absolute;
-  @include gl-left-0;
-  @include gl-top-0;
-  @include gl-opacity-3;
-  @include gl-border-solid;
-  @include gl-border-4;
-  @include gl-rounded-full;
-
-  width: 24px;
-  height: 24px;
-}
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index c84d6256339..d2e3c7d0272 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -419,6 +419,7 @@ class ProjectsController < Projects::ApplicationController
     %i[
       show_default_award_emojis
       squash_option
+      show_diff_preview_in_email
       mr_default_target_self
       warn_about_potentially_unwanted_characters
     ]
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index b39cd485fe8..fd0ae40e4dc 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -586,6 +586,7 @@ module ProjectsHelper
       metricsDashboardAccessLevel: feature.metrics_dashboard_access_level,
       operationsAccessLevel: feature.operations_access_level,
       showDefaultAwardEmojis: project.show_default_award_emojis?,
+      showDiffPreviewInEmail: project.show_diff_preview_in_email?,
       warnAboutPotentiallyUnwantedCharacters: project.warn_about_potentially_unwanted_characters?,
       securityAndComplianceAccessLevel: project.security_and_compliance_access_level,
       containerRegistryAccessLevel: feature.container_registry_access_level
diff --git a/app/helpers/users/group_callouts_helper.rb b/app/helpers/users/group_callouts_helper.rb
index b66c7f9f821..0aa4eb89499 100644
--- a/app/helpers/users/group_callouts_helper.rb
+++ b/app/helpers/users/group_callouts_helper.rb
@@ -3,6 +3,7 @@
 module Users
   module GroupCalloutsHelper
     INVITE_MEMBERS_BANNER = 'invite_members_banner'
+    APPROACHING_SEAT_COUNT_THRESHOLD = 'approaching_seat_count_threshold'
 
     def show_invite_banner?(group)
       Ability.allowed?(current_user, :admin_group, group) &&
diff --git a/app/models/deployment.rb b/app/models/deployment.rb
index beee1f90198..46409465209 100644
--- a/app/models/deployment.rb
+++ b/app/models/deployment.rb
@@ -294,10 +294,6 @@ class Deployment < ApplicationRecord
     @stop_action ||= manual_actions.find { |action| action.name == self.on_stop }
   end
 
-  def finished_at
-    read_attribute(:finished_at) || legacy_finished_at
-  end
-
   def deployed_at
     return unless success?
 
@@ -405,10 +401,6 @@ class Deployment < ApplicationRecord
       raise ArgumentError, "The status #{status.inspect} is invalid"
     end
   end
-
-  def legacy_finished_at
-    self.created_at if success? && !read_attribute(:finished_at)
-  end
 end
 
 Deployment.prepend_mod_with('Deployment')
diff --git a/app/models/project.rb b/app/models/project.rb
index abe072a3a6d..2b90f176279 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -433,6 +433,7 @@ class Project < ApplicationRecord
   alias_method :container_registry_enabled, :container_registry_enabled?
   delegate :show_default_award_emojis, :show_default_award_emojis=, :show_default_award_emojis?,
     :warn_about_potentially_unwanted_characters, :warn_about_potentially_unwanted_characters=, :warn_about_potentially_unwanted_characters?,
+    :show_diff_preview_in_email, :show_diff_preview_in_email=, :show_diff_preview_in_email?,
     to: :project_setting, allow_nil: true
   delegate :scheduled?, :started?, :in_progress?, :failed?, :finished?,
     prefix: :import, to: :import_state, allow_nil: true
diff --git a/app/models/users/group_callout.rb b/app/models/users/group_callout.rb
index da9b95fd718..faa5130e6ec 100644
--- a/app/models/users/group_callout.rb
+++ b/app/models/users/group_callout.rb
@@ -9,7 +9,8 @@ module Users
     belongs_to :group
 
     enum feature_name: {
-      invite_members_banner: 1
+      invite_members_banner: 1,
+      approaching_seat_count_threshold: 2 # EE-only
     }
 
     validates :group, presence: true
diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index 4cc5ed06d61..ca7a095b54b 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -229,6 +229,7 @@ class ProjectPolicy < BasePolicy
     enable :set_note_created_at
     enable :set_emails_disabled
     enable :set_show_default_award_emojis
+    enable :set_show_diff_preview_in_email
     enable :set_warn_about_potentially_unwanted_characters
   end
 
diff --git a/app/services/ci/after_requeue_job_service.rb b/app/services/ci/after_requeue_job_service.rb
index ee0ae6651ca..097b29cf143 100644
--- a/app/services/ci/after_requeue_job_service.rb
+++ b/app/services/ci/after_requeue_job_service.rb
@@ -22,13 +22,9 @@ module Ci
     end
 
     def dependent_jobs
-      if ::Feature.enabled?(:ci_order_subsequent_jobs_by_stage, @processable.pipeline.project, default_enabled: :yaml)
-        stage_dependent_jobs
-          .or(needs_dependent_jobs.except(:preload))
-          .ordered_by_stage
-      else
-        stage_dependent_jobs | needs_dependent_jobs
-      end
+      stage_dependent_jobs
+        .or(needs_dependent_jobs.except(:preload))
+        .ordered_by_stage
     end
 
     def process(job)
diff --git a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
index 20bf7d232ce..eba5e7c6e9b 100644
--- a/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_admin_welcome.html.haml
@@ -1,40 +1,42 @@
-.blank-state-row
+- link_classes = "blank-state blank-state-link gl-text-body gl-display-flex gl-align-items-center gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-mb-5"
+
+.gl-display-flex.gl-flex-wrap.gl-justify-content-space-between
   - if has_start_trial?
     = render_if_exists "dashboard/projects/blank_state_ee_trial"
 
-  = link_to new_project_path, class: "blank-state blank-state-link" do
+  = link_to new_project_path, class: link_classes do
     .blank-state-icon
       = custom_icon("add_new_project", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Create a project
-      %p.blank-state-text
-        Projects are where you store your code, access issues, wiki and other features of GitLab.
+    .blank-state-body.gl-sm-pl-0.gl-pl-6
+      %h3.gl-font-size-h2.gl-mt-0
+        = _('Create a project')
+      %p
+        = _('Projects are where you store your code, access issues, wiki and other features of GitLab.')
 
   - if current_user.can_create_group?
-    = link_to new_group_path, class: "blank-state blank-state-link" do
+    = link_to new_group_path, class: link_classes do
       .blank-state-icon
         = custom_icon("add_new_group", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Create a group
-        %p.blank-state-text
-          Groups are a great way to organize projects and people.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Create a group')
+        %p
+          = _('Groups are a great way to organize projects and people.')
 
-    = link_to new_admin_user_path, class: "blank-state blank-state-link" do
+    = link_to new_admin_user_path, class: link_classes do
       .blank-state-icon
         = custom_icon("add_new_user", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Add people
-        %p.blank-state-text
-          Add your team members and others to GitLab.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Add people')
+        %p
+          = _('Add your team members and others to GitLab.')
 
-  = link_to admin_root_path, class: "blank-state blank-state-link" do
+  = link_to admin_root_path, class: link_classes do
     .blank-state-icon
       = custom_icon("configure_server", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Configure GitLab
-      %p.blank-state-text
-        Make adjustments to how your GitLab instance is set up.
+    .blank-state-body.gl-sm-pl-0.gl-pl-6
+      %h3.gl-font-size-h2.gl-mt-0
+        = _('Configure GitLab')
+      %p
+        = _('Make adjustments to how your GitLab instance is set up.')
diff --git a/app/views/dashboard/projects/_blank_state_welcome.html.haml b/app/views/dashboard/projects/_blank_state_welcome.html.haml
index 003e6f18b33..e0b8850357e 100644
--- a/app/views/dashboard/projects/_blank_state_welcome.html.haml
+++ b/app/views/dashboard/projects/_blank_state_welcome.html.haml
@@ -1,48 +1,49 @@
-.blank-state-row
+- link_classes = "blank-state blank-state-link gl-text-body gl-display-flex gl-align-items-center gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-mb-5"
+
+.gl-display-flex.gl-flex-wrap.gl-justify-content-space-between
   - if current_user.can_create_project?
-    = link_to new_project_path, class: "blank-state blank-state-link" do
+    = link_to new_project_path, class: link_classes do
       .blank-state-icon
         = custom_icon("add_new_project", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Create a project
-        %p.blank-state-text
-          Projects are where you store your code, access issues, wiki and other features of GitLab.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Create a project')
+        %p
+          = _('Projects are where you store your code, access issues, wiki and other features of GitLab.')
   - else
-    .blank-state
+    .blank-state.gl-display-flex.gl-align-items-center.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base.gl-mb-5
       .blank-state-icon
         = custom_icon("add_new_project", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Create a project
-        %p.blank-state-text
-          If you are added to a project, it will be displayed here.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Create a project')
+        %p
+          = _('If you are added to a project, it will be displayed here.')
 
   - if current_user.can_create_group?
-    = link_to new_group_path, class: "blank-state blank-state-link" do
+    = link_to new_group_path, class: link_classes do
       .blank-state-icon
         = custom_icon("add_new_group", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Create a group
-        %p.blank-state-text
-          Groups are the best way to manage projects and members.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Create a group')
+        %p
+          = _('Groups are the best way to manage projects and members.')
 
-  = link_to trending_explore_projects_path, class: "blank-state blank-state-link" do
+  = link_to trending_explore_projects_path, class: link_classes do
     .blank-state-icon
       = custom_icon("globe", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Explore public projects
-      %p.blank-state-text
-        Public projects are an easy way to allow
-        everyone to have read-only access.
+    .blank-state-body.gl-sm-pl-0.gl-pl-6
+      %h3.gl-font-size-h2.gl-mt-0
+        = _('Explore public projects')
+      %p
+        = _('Public projects are an easy way to allow everyone to have read-only access.')
 
-  = link_to "https://docs.gitlab.com/", class: "blank-state blank-state-link" do
+  = link_to "https://docs.gitlab.com/", class: link_classes do
     .blank-state-icon
       = custom_icon("lightbulb", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Learn more about GitLab
-      %p.blank-state-text
-        Take a look at the documentation to discover all of GitLab's capabilities.
+    .blank-state-body.gl-sm-pl-0.gl-pl-6
+      %h3.gl-font-size-h2.gl-mt-0
+        = _('Learn more about GitLab')
+      %p
+        = _('Take a look at the documentation to discover all of GitLab’s capabilities.')
diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
index b5f5025b581..e72762f2ae5 100644
--- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml
+++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
@@ -1,13 +1,10 @@
-.blank-state-parent-container
-  .section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
-    .container.section-body
-      .row
-        .blank-state-welcome.w-100
-          %h2.blank-state-welcome-title{ data: { qa_selector: 'welcome_title_content' } }
-            = _('Welcome to GitLab')
-          %p.blank-state-text
-            = _('Faster releases. Better code. Less pain.')
-        - if current_user.admin?
-          = render "blank_state_admin_welcome"
-        - else
-          = render "blank_state_welcome"
+.container
+  .gl-text-center.gl-pt-6.gl-pb-7
+    %h2.gl-font-size-h1{ data: { qa_selector: 'welcome_title_content' } }
+      = _('Welcome to GitLab')
+    %p.gl-m-0
+      = _('Faster releases. Better code. Less pain.')
+  - if current_user.admin?
+    = render "blank_state_admin_welcome"
+  - else
+    = render "blank_state_welcome"
diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml
index 4252b60514a..0d9257e659a 100644
--- a/app/views/dashboard/projects/index.html.haml
+++ b/app/views/dashboard/projects/index.html.haml
@@ -7,6 +7,7 @@
 
 - page_title    _("Projects")
 - header_title  _("Projects"), dashboard_projects_path
+- add_page_specific_style 'page_bundles/dashboard_projects'
 
 = render "projects/last_push"
 - if show_projects?(@projects, params)
diff --git a/app/views/notify/_note_email.html.haml b/app/views/notify/_note_email.html.haml
index ad0c873bf56..1e927b5805d 100644
--- a/app/views/notify/_note_email.html.haml
+++ b/app/views/notify/_note_email.html.haml
@@ -20,8 +20,7 @@
         discussion on #{link_to(discussion.file_path, target_url)}
       - else
         = link_to 'discussion', target_url
-
-- if discussion&.diff_discussion? && discussion.on_text?
+- if discussion&.diff_discussion? && discussion.on_text? && @project.show_diff_preview_in_email?
   = content_for :head do
     = stylesheet_link_tag 'mailers/highlighted_diff_email'
 
diff --git a/app/views/notify/_note_email.text.erb b/app/views/notify/_note_email.text.erb
index 8e2f7e6f76e..e212b165134 100644
--- a/app/views/notify/_note_email.text.erb
+++ b/app/views/notify/_note_email.text.erb
@@ -20,7 +20,7 @@
 <%  end -%>
 
 
-<%  if discussion&.diff_discussion? && discussion.on_text? -%>
+<%  if discussion&.diff_discussion? && discussion.on_text? && @project.show_diff_preview_in_email? -%>
 <%    discussion.truncated_diff_lines(highlight: false, diff_limit: diff_limit).each do |line| -%>
 <%=     "> #{line.text}\n" -%>
 <%    end -%>
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index b123b81b89c..6d60ef92d86 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -14,7 +14,7 @@
         .text-content
           %h4.state-title
             = _("You don't have any deployments right now.")
-          %p.blank-state-text
+          %p
             = html_escape(_("Define environments in the deploy stage(s) in %{code_open}.gitlab-ci.yml%{code_close} to track deployments here.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
           .text-center
             = link_to _("Read more"), help_page_path("ci/environments/index.md"), class: "gl-button btn btn-confirm"