1 files changed, 33 insertions, 6 deletions

diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 1be66d0ab21..a6b1bf9b099 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -1,15 +1,24 @@
 .modal-header {
+  background-color: $modal-body-bg;
   padding: #{3 * $grid-size} #{2 * $grid-size};
 
   .page-title {
     margin-top: 0;
+
+    .color-label {
+      font-size: $gl-font-size;
+      padding: $gl-vert-padding $label-padding-modal;
+    }
   }
 }
 
 .modal-body {
   background-color: $modal-body-bg;
+  line-height: $line-height-base;
+  min-height: $modal-body-height;
   position: relative;
   padding: #{3 * $grid-size} #{2 * $grid-size};
+  text-align: left;
 
   .form-actions {
     margin: #{2 * $grid-size} #{-2 * $grid-size} #{-2 * $grid-size};
@@ -20,6 +29,30 @@
   }
 }
 
+.modal-footer {
+  display: flex;
+  flex-direction: row;
+
+  .btn + .btn {
+    margin-left: $grid-size;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    flex-direction: column;
+
+    .btn + .btn {
+      margin-left: 0;
+      margin-top: $grid-size;
+    }
+  }
+
+  @media (min-width: $screen-sm-min) {
+    .btn:first-of-type {
+      margin-left: auto;
+    }
+  }
+}
+
 body.modal-open {
   overflow: hidden;
 }
@@ -32,12 +65,6 @@ body.modal-open {
   }
 }
 
-@media (min-width: $screen-md-min) {
-  .modal-dialog {
-    width: 860px;
-  }
-}
-
 @media (min-width: $screen-lg-min) {
   .modal-full {
     width: 98%;