9 files changed, 55 insertions, 18 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 4ffb3e9ab42..4041f2b4479 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -51,6 +51,7 @@
 @import 'framework/blank';
 @import 'framework/wells';
 @import 'framework/page_header';
+@import 'framework/page_title';
 @import 'framework/awards';
 @import 'framework/images';
 @import 'framework/broadcast_messages';
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 50ebc6d0dd1..b8bb9e1e07b 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -161,6 +161,7 @@
 
   .nav-links li {
     &.active a,
+    &.md-header-tab.active button,
     a.active {
       border-bottom: 2px solid $active-tab-border;
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index c430009bfe0..d1ce3a582bb 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -530,9 +530,6 @@
 
 .header-user {
   &.show .dropdown-menu {
-    width: auto;
-    min-width: unset;
-    max-height: 323px;
     margin-top: 4px;
     color: $gl-text-color;
     left: auto;
@@ -544,15 +541,19 @@
         display: block;
       }
 
-      .user-status-emoji {
+      .user-status {
         margin-right: 0;
-        display: block;
-        vertical-align: text-top;
-        max-width: 148px;
-        font-size: 12px;
+        max-width: 240px;
+        font-size: $gl-font-size-small;
 
         gl-emoji {
-          font-size: $gl-font-size;
+          font-size: $gl-font-size-small;
+        }
+
+        .user-status-emoji {
+          gl-emoji {
+            font-size: $gl-font-size;
+          }
         }
       }
     }
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 554e2b6720a..3142f94b192 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -72,6 +72,7 @@
 .md-header-tab {
   @include media-breakpoint-down(xs) {
     flex: 1;
+    flex-direction: column;
     width: 100%;
     border-bottom: 1px solid $border-color;
     text-align: center;
diff --git a/app/assets/stylesheets/framework/page_title.scss b/app/assets/stylesheets/framework/page_title.scss
new file mode 100644
index 00000000000..e8302953a63
--- /dev/null
+++ b/app/assets/stylesheets/framework/page_title.scss
@@ -0,0 +1,18 @@
+.page-title-holder {
+  @extend .d-flex;
+  @extend .align-items-center;
+
+  padding-top: $gl-padding-top;
+  border-bottom: 1px solid $border-color;
+
+  .page-title {
+    margin: $gl-padding 0;
+    font-size: 1.75em;
+    font-weight: $gl-font-weight-bold;
+    color: $gl-text-color;
+  }
+
+  .page-title-controls {
+    margin-left: auto;
+  }
+}
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 8bab8cf36b1..bf6f66d30ff 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -8,15 +8,17 @@
   height: auto;
   border-bottom: 1px solid $border-color;
 
-  li {
+  li:not(.md-header-toolbar) {
     display: flex;
 
-    a {
+    a,
+    button {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
+      border: 0;
       border-bottom: 2px solid transparent;
       white-space: nowrap;
 
@@ -33,7 +35,12 @@
       }
     }
 
+    button {
+      padding-top: 0;
+    }
+
     &.active a,
+    &.active button,
     a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
@@ -42,6 +49,10 @@
         color: $black;
       }
     }
+
+    &.md-header-tab button {
+      line-height: 19px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 0fde6e18cc7..ad66a0365ed 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -194,6 +194,7 @@ $well-light-text-color: #5b6169;
  * Text
  */
 $gl-font-size: 14px;
+$gl-font-size-small: 12px;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
 $gl-text-color: #2e2e2e;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 895db89f289..2feb7464ecb 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -47,7 +47,6 @@
   }
 }
 
-
 .mr-widget-heading {
   position: relative;
   border: 1px solid $border-color;
@@ -454,7 +453,7 @@
 
 .mr-list {
   .merge-request {
-    padding: 10px  0 10px 15px;
+    padding: 10px 0 10px 15px;
     position: relative;
     display: -webkit-flex;
     display: flex;
@@ -468,7 +467,6 @@
       margin-bottom: 2px;
 
       .ci-status-link {
-
         svg {
           height: 16px;
           width: 16px;
@@ -698,7 +696,6 @@
 
 .table-holder {
   .ci-table {
-
     th {
       background-color: $white-light;
       color: $gl-text-color-secondary;
@@ -775,7 +772,7 @@
 
   &.affix {
     left: 0;
-    transition: right .15s;
+    transition: right 0.15s;
 
     @include media-breakpoint-down(xs) {
       right: 0;
@@ -884,7 +881,7 @@
   }
 
   > *:not(:last-child) {
-    margin-right: .3em;
+    margin-right: 0.3em;
   }
 
   svg {
@@ -907,6 +904,10 @@
   .btn svg {
     fill: $theme-gray-700;
   }
+
+  .dropdown-menu {
+    width: 400px;
+  }
 }
 
 // Hack alert: we've rewritten `btn` class in a way that
@@ -917,7 +918,7 @@
   &[disabled] {
     cursor: not-allowed;
     box-shadow: none;
-    opacity: .65;
+    opacity: 0.65;
 
     &:hover {
       color: $gl-gray-500;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 4268e194ed7..c60bb360a03 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -340,6 +340,8 @@
 }
 
 .note-form-actions {
+  color: $gl-text-color;
+
   @include media-breakpoint-down(xs) {
     .btn {
       float: none;