Add message CSS class that is compatible with admin panel

Author: jissereitsma

view/base/templates/component/messages.phtml

@@ -27,7 +27,7 @@ if ($moduleConfig->isEnabled('MageOS_AlpineMessages')) {
             @keyup.escape.window="removeMessage"
             x-autoremove="timeout"
             class="<?= $escaper->escapeHtml($css('message', 'message')) ?>"
-            :class="message.type">
+            :class="getMessageCss">
             <div
                 class="<?= $escaper->escapeHtml($css('inline-block', 'message-text')) ?>"
                 x-html="message.text"

view/base/templates/script/component/message-component.phtml

@@ -39,6 +39,10 @@ if (false === is_numeric($timeout) || $timeout < 0) {
                 const text = this.$el.getAttribute('data-message-text');
                 Alpine.store('Message').removeMessage(type, text);
             },
+            getMessageCss() {
+                const type = this.$el.getAttribute('data-message-type');
+                return 'message-' + type + ' ' + type;
+            }
         }));
     });
 </script>