diff --git a/app/views/admin/shared/_flashes.html.haml b/app/views/admin/shared/_flashes.html.haml
index 1683d5a1d8..0caad6c2b2 100644
--- a/app/views/admin/shared/_flashes.html.haml
+++ b/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')
diff --git a/app/webpacker/css/admin/components/messages.scss b/app/webpacker/css/admin/components/messages.scss
index 61dd751a55..f92498a599 100644
--- a/app/webpacker/css/admin/components/messages.scss
+++ b/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 */
+ }
}
}
diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index 13ecab6d7b..a5ab9c3b7f 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/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,
diff --git a/app/webpacker/css/admin_v3/components/messages.scss b/app/webpacker/css/admin_v3/components/messages.scss
index a2f9b8d562..4a956cc831 100644
--- a/app/webpacker/css/admin_v3/components/messages.scss
+++ b/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;
+ }
}
}
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index d2da9c519c..e41f2a9597 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/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;
diff --git a/config/locales/en.yml b/config/locales/en.yml
index dddb2f403c..9db09b06a2 100644
--- a/config/locales/en.yml
+++ b/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"
diff --git a/spec/support/request/web_helper.rb b/spec/support/request/web_helper.rb
index 10efa75693..4e8aad2be0 100644
--- a/spec/support/request/web_helper.rb
+++ b/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)