Merge branch 'jh_flash_messages_styling_22992' into 'master'

Update designs of flash messages sitewide

See merge request gitlab-org/gitlab!18369

app/assets/javascripts/flash.js

@@ -37,7 +37,7 @@ const createAction = config => `
 `;
 
 const createFlashEl = (message, type) => `
-  <div class="flash-content flash-${type} rounded">
+  <div class="flash-${type}">
     <div class="flash-text">
       ${_.escape(message)}
       <div class="close-icon-wrapper js-close-icon">

app/assets/stylesheets/bootstrap_migration.scss

@@ -282,8 +282,7 @@ pre code {
   white-space: pre-wrap;
 }
 
-.alert,
-.flash-notice {
+.alert {
   border-radius: 0;
 }
 
@@ -310,12 +309,10 @@ pre code {
 .alert-success,
 .alert-info,
 .alert-warning,
-.alert-danger,
-.flash-notice {
+.alert-danger {
   color: $white-light;
 
   h4,
-  a:not(.btn),
   .alert-link {
     color: $white-light;
   }

app/assets/stylesheets/framework/flash.scss

 $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
 
 .flash-container {
-  margin: 0;
+  margin-top: 10px;
   margin-bottom: $gl-padding;
   font-size: 14px;
   position: relative;
@@ -12,17 +12,22 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     position: -webkit-sticky;
     top: $flash-container-top;
     z-index: 251;
+  }
 
-    .flash-content {
-      box-shadow: 0 2px 4px 0 $notification-box-shadow-color;
-    }
+  &.flash-container-page {
+    margin-bottom: 0;
+  }
+
+  &:empty {
+    margin: 0;
   }
 
   .close-icon-wrapper {
-    padding: ($gl-btn-padding + $gl-padding-4) $gl-padding $gl-btn-padding;
+    padding: ($gl-padding + $gl-padding-4) $gl-padding $gl-padding;
     position: absolute;
     right: 0;
     top: 0;
+    bottom: 0;
     cursor: pointer;
 
     .close-icon {
@@ -31,13 +36,11 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     }
   }
 
-  .flash-notice,
   .flash-alert,
+  .flash-notice,
   .flash-success,
   .flash-warning {
-    border-radius: $border-radius-default;
-    color: $white-light;
-    padding-right: $gl-padding * 2;
+    padding: $gl-padding $gl-padding-32 $gl-padding ($gl-padding + $gl-padding-4);
 
     .container-fluid,
     .container-fluid.container-limited {
@@ -45,75 +48,31 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
     }
   }
 
-  .flash-notice {
-    @extend .alert;
-    background-color: $blue-500;
-    margin: 0;
-
-    &.flash-notice-persistent {
-      background-color: $blue-100;
-      color: $gl-text-color;
+  .flash-alert {
+    background-color: $red-100;
+    color: $red-700;
+  }
 
-      a {
-        color: $blue-600;
+  .flash-notice {
+    background-color: $blue-100;
+    color: $blue-700;
+  }
 
-        &:hover {
-          color: $blue-800;
-          text-decoration: none;
-        }
-      }
-    }
+  .flash-success {
+    background-color: $theme-green-100;
+    color: $green-700;
   }
 
   .flash-warning {
-    @extend .alert;
     background-color: $orange-100;
-    color: $orange-900;
+    color: $orange-800;
     cursor: default;
-    margin: 0;
   }
 
   .flash-text,
   .flash-action {
     display: inline-block;
   }
-
-  .flash-alert {
-    @extend .alert;
-    background-color: $red-500;
-    margin: 0;
-
-    .flash-action {
-      margin-left: 5px;
-      text-decoration: none;
-      font-weight: $gl-font-weight-normal;
-      border-bottom: 1px solid;
-
-      &:hover {
-        border-color: transparent;
-      }
-    }
-  }
-
-  .flash-success {
-    @extend .alert;
-    background-color: $green-500;
-    margin: 0;
-  }
-
-  &.flash-container-page {
-    margin-bottom: 0;
-
-    .flash-notice,
-    .flash-alert,
-    .flash-success {
-      border-radius: 0;
-    }
-  }
-
-  &:empty {
-    margin: 0;
-  }
 }
 
 @include media-breakpoint-down(sm) {

app/assets/stylesheets/framework/layout.scss

@@ -33,7 +33,8 @@ body {
   &.limit-container-width {
     .flash-container.sticky {
       max-width: $limited-layout-width;
-      margin: 0 auto;
+      margin-right: auto;
+      margin-left: auto;
     }
   }
 }

app/views/layouts/_flash.html.haml

@@ -3,7 +3,7 @@
   - flash.each do |key, value|
     -# Don't show a flash message if the message is nil
     - if value
-      %div{ class: "flash-content flash-#{key} rounded" }
+      %div{ class: "flash-#{key}" }
         %span= value
         %div{ class: "close-icon-wrapper js-close-icon" }
           = sprite_icon('close', size: 16, css_class: 'close-icon')

changelogs/unreleased/jh_flash_messages_styling_22992.yml

+---
+title: Update flash messages color sitewide
+merge_request: 18369
+author:
+type: changed