Move alert component to header

Position it above the search box.

client/src/App.tsx

@@ -1,7 +1,6 @@
 import { Box, Container } from '@mui/material';
 import { useState } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import AlertComponent from './components/Alert';
 import Footer from './components/Footer';
 import Header from './components/Header/Header';
 import { SearchState, SearchStateDefaults } from './data/SearchState';
@@ -25,7 +24,6 @@ export function App() {
         searchState={searchState}
         setSearchState={setSearchState}
       />
-      <AlertComponent />
       <Container className="grow p-0">
         <Box className="m-2">
           <Routes>

client/src/components/Alert.tsx

@@ -1,8 +1,10 @@
 import { Alert, Box, Collapse } from '@mui/material';
 import { useLoadingContext } from '../context/LoadingContext';
+import { useThemeModeContext } from '../context/ThemeContext';
 
 export default function AlertComponent() {
   const { alert, showAlert } = useLoadingContext();
+  const { themeMode } = useThemeModeContext();
 
   return (
     <Box className="m-0">
@@ -13,6 +15,7 @@ export default function AlertComponent() {
             onClose={() => showAlert(null)}
             variant="filled"
             className="py-0"
+            sx={{ boxShadow: themeMode === 'light' ? 8 : 3 }}
             square
           >
             {alert.message}

client/src/components/Header/Header.tsx

@@ -15,6 +15,7 @@ import { useLoadingContext } from '../../context/LoadingContext';
 import { useThemeModeContext } from '../../context/ThemeContext';
 import { SearchState } from '../../data/SearchState';
 import { ServerData } from '../../data/ServerData';
+import AlertComponent from '../Alert';
 import AddServer from './AddServer';
 import SearchServers from './SearchServers';
 
@@ -69,7 +70,10 @@ export default function Header({
 
   return (
     <Box>
-      <AppBar position="static" elevation={themeMode === 'light' ? 8 : 3}>
+      <AppBar
+        position="static"
+        sx={{ boxShadow: themeMode === 'light' ? 8 : 3 }}
+      >
         <Toolbar className="min-h-min py-1">
           <Typography
             component={Link}
@@ -103,6 +107,7 @@ export default function Header({
           height: progress === 0 ? 0 : '1px',
         }}
       />
+      <AlertComponent />
       <SearchServers
         showSearchServer={showSearchServer}
         searchState={searchState}