1 files changed, 43 insertions, 8 deletions
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index f75e5b55506..fd9a75bc5b6 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -19,23 +19,31 @@
     }
   }
 
-  // leave enough space for the close icon
   .modal-title {
+    line-height: $gl-line-height-24;
+
+    // leave enough space for the close icon
     &.mw-100,
     &.w-100 {
-      // after upgrading to Bootstrap 4.2 we can use $modal-header-padding-x here
-      // https://github.com/twbs/bootstrap/pull/26976
-      margin-right: -28px;
-      padding-right: 28px;
+      margin-right: -$modal-header-padding-x;
+      padding-right: $modal-header-padding-x;
     }
   }
+
+  .close {
+    font-weight: $gl-font-weight-normal;
+    line-height: $gl-line-height;
+    color: $gray-900;
+    opacity: 1;
+  }
 }
 
 .modal-body {
   background-color: $modal-body-bg;
   line-height: $line-height-base;
   position: relative;
-  padding: #{3 * $grid-size} #{2 * $grid-size};
+  min-height: $modal-body-height;
+  padding: #{2 * $grid-size} #{6 * $grid-size} #{2 * $grid-size} #{2 * $grid-size};
   text-align: left;
   white-space: normal;
 
@@ -52,12 +60,20 @@
   display: flex;
   flex-direction: row;
 
+  .btn {
+    margin: 0;
+  }
+
   .btn + .btn:not(.dropdown-toggle-split),
   .btn + .btn-group,
   .btn-group + .btn {
     margin-left: $grid-size;
   }
 
+  .btn-group .btn + .btn {
+    margin-left: -1px;
+  }
+
   @include media-breakpoint-down(xs) {
     flex-direction: column;
 
@@ -67,6 +83,11 @@
       margin-left: 0;
       margin-top: $grid-size;
     }
+
+    .btn-group .btn + .btn {
+      margin-left: -1px;
+      margin-top: 0;
+    }
   }
 }
 
@@ -85,9 +106,23 @@ body.modal-open {
 .modal {
   background-color: $black-transparent;
 
-  @include media-breakpoint-up(md) {
+  .modal-content {
+    border-radius: $modal-border-radius;
+
+    > :first-child {
+      border-top-left-radius: $modal-border-radius;
+      border-top-right-radius: $modal-border-radius;
+    }
+
+    > :last-child {
+      border-bottom-left-radius: $modal-border-radius;
+      border-bottom-right-radius: $modal-border-radius;
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
     .modal-dialog {
-      margin: 30px auto;
+      margin: 64px auto;
     }
   }
 }