Styles for discard alert

app/assets/stylesheets/framework/variables.scss

@@ -56,6 +56,7 @@ $border-gray-light: #dcdcdc;
 $border-gray-normal: #d7d7d7;
 $border-gray-dark: #c6cacf;
 
+$border-green-extra-light: #9adb84;
 $border-green-light: #2faa60;
 $border-green-normal: #2ca05b;
 $border-green-dark: #279654;

app/assets/stylesheets/pages/merge_conflicts.scss

@@ -249,13 +249,11 @@ $colors: (
 
     &.saved {
       .editor {
-        border-top: solid 1px green;
+        border-top: solid 2px $border-green-extra-light;
       }
     }
     
     .editor {
-      border-top: solid 1px yellow;
-
       pre {
         height: 350px;
         border: none;
@@ -268,4 +266,16 @@ $colors: (
       display: none;
     }
   }
+
+  .discard-changes-alert {
+    background-color: $background-color;
+    text-align: right;
+    padding: $gl-padding-top $gl-padding;
+    color: $gl-text-color;
+
+    .discard-actions {
+      display: inline-block;
+      margin-left: 10px;
+    }
+  }
 }

app/views/projects/merge_requests/conflicts/_diff_file_editor.html.haml

@@ -2,8 +2,9 @@
 
 .diff-editor-wrap{ "v-show" => if_condition }
   .discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
-    %p
+    .discard-changes-alert
       Are you sure to discard your changes?
+      .discard-actions
         %button.btn.btn-sm.btn-close{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
         %button.btn.btn-sm{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
   %diff-file-editor{":file" => "file", ":load-file" => if_condition }