added new styling to the `.flash-warning` styles and moved the bundled style definitions up to allow overrides for specific flash-types

2 files changed, 20 insertions, 14 deletions

diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index afa85f0e4ae..e3dd127366d 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -6,6 +6,19 @@
   position: relative;
   z-index: 1;
 
+  .flash-notice,
+  .flash-alert,
+  .flash-success,
+  .flash-warning {
+    border-radius: $border-radius-default;
+    color: $white-light;
+
+    .container-fluid,
+    .container-fluid.container-limited {
+      background: transparent;
+    }
+  }
+
   .flash-notice {
     @extend .alert;
     background-color: $blue-500;
@@ -28,7 +41,8 @@
 
   .flash-warning {
     @extend .alert;
-    background-color: $orange-500;
+    background-color: $orange-100;
+    color: $orange-900;
     margin: 0;
   }
 
@@ -60,19 +74,6 @@
     margin: 0;
   }
 
-  .flash-notice,
-  .flash-alert,
-  .flash-success,
-  .flash-warning {
-    border-radius: $border-radius-default;
-    color: $white-light;
-
-    .container-fluid,
-    .container-fluid.container-limited {
-      background: transparent;
-    }
-  }
-
   &.flash-container-page {
     margin-bottom: 0;
 
diff --git a/changelogs/unreleased/54169-flash-warning-rebrush.yml b/changelogs/unreleased/54169-flash-warning-rebrush.yml
new file mode 100644
index 00000000000..420cc26a8cc
--- /dev/null
+++ b/changelogs/unreleased/54169-flash-warning-rebrush.yml
@@ -0,0 +1,5 @@
+---
+title: "Rebrush of flash-warning according to the new design (brighter background and darker font)"
+merge_request: 28916
+author: Michel Engelen
+type: changed