diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss
index 5c76205095f..e21c32a90df 100644
--- a/app/assets/stylesheets/framework/popup.scss
+++ b/app/assets/stylesheets/framework/popup.scss
@@ -6,10 +6,31 @@
     $popup-triangle-border-size
   );
 
-  padding: $gl-padding;
-  background-color: $gray-lighter;
+  &.small-triangle {
+    @include triangle(
+      $gray-lighter,
+      $gray-darker,
+      $popup-triangle-size / 2,
+      $popup-triangle-border-size /2
+    );
+  }
+
   border: 1px solid $gray-darker;
-  border-radius: $border-radius-default;
   box-shadow: 0 5px 8px $popup-box-shadow-color;
   position: relative;
+
+  .body {
+    background-color: $gray-lighter;
+    padding: $gl-padding;
+    border-top-left-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
+  }
+
+  .footer {
+    background-color: $white-light;
+    padding: $gl-padding;
+    border-bottom-left-radius: $border-radius-default;
+    border-bottom-right-radius: $border-radius-default;
+    border-top: 1px solid $white-dark;
+  }
 }