Update CSS to match alert specs

cd86aa05 · Annabel Dunstone Gray · 6b523a02 · cd86aa05 · cd86aa05
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -210,26 +210,24 @@ li.note {
 @mixin message($background-color, $border-color, $text-color) {
  border-left: 4px solid $border-color;
  color: $text-color;
-  padding: 10px;
-  margin-bottom: 10px;
-  background: $background-color;
-  padding-left: 20px;
+  padding: $gl-padding $gl-padding-24;
+  margin-bottom: $gl-padding-12;
+  background-color: $background-color;

  &.centered {
    text-align: center;
  }
-}
-
-.warning_message {
-  @include message($orange-100, $orange-200, $orange-700);

  .close {
    font-size: $gl-font-size-large;
-    color: $orange-700;
-    cursor: pointer;
+    color: inherit;
  }
 }

+.warning_message {
+  @include message($orange-100, $orange-200, $orange-800);
+}
+
 .danger_message {
  @include message($red-100, $red-200, $red-900);
 }

--- a/app/views/shared/form_elements/_apply_template_warning.html.haml
+++ b/app/views/shared/form_elements/_apply_template_warning.html.haml
@@ -2,13 +2,13 @@
  .offset-sm-2.col-sm-10

    .warning_message.mb-0{ role: 'alert' }
-      %span.js-close-btn.close{ "aria-hidden": true, "aria-label": _("Close") }
+      %btn.js-close-btn.close{ type: "button", "aria-hidden": true, "aria-label": _("Close") }
        = icon("times")

      %p
        = _("Applying a template will replace the existing issue description. Any changes you have made will be lost.")

-      %button.js-override-template.btn.btn-warning{ type: 'button' }
+      %button.js-override-template.btn.btn-warning.mr-2{ type: 'button' }
        = _("Apply template")
      %button.js-close-btn.btn.btn-inverted{ type: 'button' }
        = _("Cancel")