Add dismiss button to flashes

And updating the secondary button style to ensure it's always white background

app/views/admin/shared/_flashes.html.haml

@@ -3,4 +3,6 @@
     - flashes.each do |type, msg|
       .animate-show{"data-controller": "flash", "data-flash-auto-close-value": "true"}
         .flash{type: "#{type}", class: "#{type}"}
-          %span= msg
+          .msg= msg
+          .actions
+            %button.secondary{"data-action": "click->flash#close"}= t('.dismiss')

app/webpacker/css/admin/components/messages.scss

@@ -57,6 +57,10 @@
     &:nth-child(3) {
       padding: 20px;
     }
+
+    .actions {
+      display: none; /* avoid adding new button on old design */
+    }
   }
 }
 

app/webpacker/css/admin_v3/components/buttons.scss

@@ -53,14 +53,14 @@ button:not(.plain):not(.trix-button),
   }
 
   &.secondary {
-    background-color: transparent;
+    background-color: $color-btn-secondary-bg;
     border: 1px solid $color-btn-bg;
     color: $color-btn-bg;
 
     &:hover {
       background-color: $color-11;
-      border: 1px solid $color-btn-hover-bg;
-      color: $color-btn-hover-bg;
+      border: 1px solid $color-btn-secondary-hover-bg;
+      color: $color-btn-secondary-hover-bg;
     }
 
     &:active,

app/webpacker/css/admin_v3/components/messages.scss

@@ -35,8 +35,10 @@
 
   .flash {
     position: relative;
+    display: flex;
+    align-items: center;
     bottom: 3.5rem;
-    padding: 1rem;
+    padding: 0.25rem;
     min-width: 24rem;
     max-width: 48.25em;
     font-weight: 600;
@@ -57,6 +59,11 @@
       color: $color-flash-error-text;
       background-color: $color-flash-error-bg;
     }
+
+    .msg {
+      flex-grow: 1;
+      margin: 0.25rem 0.75rem;
+    }
   }
 }
 

app/webpacker/css/admin_v3/globals/variables.scss

@@ -53,6 +53,8 @@ $color-btn-disabled-bg:          $medium-grey !default;
 $color-btn-disabled-text:        $lighter-grey !default;
 $color-btn-red-bg:               $red !default;
 $color-btn-red-hover-bg:         $roof-terracotta !default;
+$color-btn-secondary-bg:         $white !default;
+$color-btn-secondary-hover-bg:   $orient !default;
 
 // Actions colors
 $color-action-edit-bg:           very-light($teal) !default;

config/locales/en.yml

@@ -1502,6 +1502,8 @@ en:
         has_no_payment_methods: "%{enterprise} has no payment methods"
         has_no_shipping_methods: "%{enterprise} has no shipping methods"
         has_no_enterprise_fees: "%{enterprise} has no enterprise fees"
+      flashes:
+        dismiss: Dismiss
       side_menu:
         enterprise:
           primary_details: "Primary Details"

spec/support/request/web_helper.rb

@@ -19,7 +19,7 @@ module WebHelper
   end
 
   def flash_message
-    find('.flash', visible: false).text(:all).strip
+    find('.flash .msg', visible: false).text(:all).strip
   end
 
   def handle_js_confirm(accept = true)