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)