fix(ui): render mantine header correctly (prometheus#5537)

- add missing header class
- add tests

Signed-off-by: Siavash Safi <siavash@cloudflare.com>

Author: siavashs

ui/mantine-ui/src/App.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 
 import App from './App';
+import headerClasses from './components/Header.module.css';
 
 afterEach(() => {
   window.location.hash = '';
@@ -14,4 +15,10 @@ describe('App routing', () => {
 
     expect(screen.getByText('Alerts List')).toBeInTheDocument();
   });
+
+  it('applies the header style class', () => {
+    render(<App />);
+
+    expect(screen.getByRole('banner')).toHaveClass(headerClasses.header);
+  });
 });

ui/mantine-ui/src/components/Header.module.css

@@ -1,3 +1,8 @@
+.header {
+  color: var(--mantine-color-white);
+  background-color: var(--mantine-color-dark-6);
+}
+
 .navMain {
   flex: 1;
 }