Fix specs, markup

app/assets/stylesheets/legacy/_layout.scss

@@ -67,20 +67,6 @@ body#admin {
   }
 }
 
-.flash-msg {
-  width: 100%;
-  text-align: center;
-  padding: 2rem 0;
-
-  &.notice {
-    background: $background-color-notice;
-  }
-
-  &.alert {
-    background: $background-color-alert;
-  }
-}
-
 main {
   p {
     line-height: 1.5rem;

app/components/notification_component.html.erb

@@ -1,4 +1,4 @@
-<div class="hidden max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto mt-4"
+<div class="flash-msg <%= @type %> hidden max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto mt-4"
      data-turbo="false"
      data-notification-action-url="<%= @data.dig(:action, :url) %>"
      data-notification-action-method="<%= @data.dig(:action, :method) %>"

app/views/layouts/application.html.erb

@@ -85,9 +85,10 @@
                       class: 'block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-900/30 active:text-white active:bg-gray-900/30' %>
               </div>
             </div>
-          </div>
           <% end %>
+        </div>
       </nav>
+
       <div class="fixed inset-0 px-4 py-6 pointer-events-none sm:px-6 sm:py-4 sm:items-start sm:justify-end">
         <div class="flex flex-col items-end justify-center">
           <% flash.each do |type, data| %>