Update About page and persist theme

client/src/App.tsx

@@ -1,15 +1,15 @@
 import { Box, Container } from '@mui/material';
 import { useState } from 'react';
-import { HashRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import AlertComponent from './components/Alert';
 import Footer from './components/Footer';
 import Header from './components/Header';
+import ServerDetails from './components/ServerDetails';
 import SearchState from './data/SearchState';
 import ServerData from './data/ServerData';
 import About from './pages/About';
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
-import ServerDetails from './pages/ServerDetails';
 
 export function App() {
   const [alertInfo, setAlertInfo] = useState<{
@@ -75,8 +75,8 @@ export function App() {
 
 export function WrappedApp() {
   return (
-    <HashRouter>
+    <BrowserRouter>
       <App />
-    </HashRouter>
+    </BrowserRouter>
   );
 }

client/src/components/ServerCard.tsx

@@ -103,12 +103,12 @@ export default function ServerCard({ server }: { server: ServerData }) {
 
     return (
       <Tooltip
+        key={key}
         arrow
         disableInteractive
         title={ServerSettingsInfo[key].description}
       >
         <Chip
-          key={key}
           label={`${ServerSettingsInfo[key].name === '' ? key : ServerSettingsInfo[key].name}`}
           avatar={
             typeof chipValue === 'object' ? undefined : (

client/src/components/ServerDetails.tsx

@@ -19,15 +19,15 @@ import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { fetchData, fetchDemo } from '../apiUtil';
-import { AlertResponse } from '../components/Alert';
-import ErrorCard from '../components/ErrorCard';
-import ExpansionBar from '../components/ExpansionsBar';
 import ServerData, {
   ServerSetting,
   ServerSettings,
   ServerSettingsInfo,
 } from '../data/ServerData';
 import CopyImageIcon from '../images/copy-image.png';
+import { AlertResponse } from './Alert';
+import ErrorCard from './ErrorCard';
+import ExpansionBar from './ExpansionsBar';
 
 interface KeyValueRow {
   id: number;

client/src/context/ThemeContext.tsx

@@ -1,7 +1,7 @@
 import { useMediaQuery } from '@mui/material';
 import { createTheme, StyledEngineProvider } from '@mui/material/styles';
 import ThemeProvider from '@mui/material/styles/ThemeProvider';
-import { createContext, ReactNode, useMemo, useState } from 'react';
+import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';
 
 type ThemeContextType = {
   switchColorMode: () => void;
@@ -18,12 +18,22 @@ export const ThemeContext = createContext<ThemeContextType>({
 export function ThemeContextProvider({ children }: ThemeProviderProps) {
   const rootElement = document.getElementById('root');
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [mode, setMode] = useState<'light' | 'dark'>(
-    prefersDarkMode ? 'dark' : 'light'
-  );
+  const [mode, setMode] = useState<'light' | 'dark'>(() => {
+    const manualTheme = localStorage.getItem('theme');
+    if (manualTheme && (manualTheme === 'light' || manualTheme === 'dark')) {
+      return manualTheme;
+    }
+    return prefersDarkMode ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('theme', mode);
+  }, [mode]);
+
   const switchColorMode = () => {
     setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
   };
+
   const theme = useMemo(
     () =>
       createTheme({

client/src/index.css

@@ -7,3 +7,7 @@
   user-drag: none;
   user-select: none;
 }
+
+code {
+  user-select: text;
+}

client/src/pages/About.tsx

@@ -31,13 +31,10 @@ export default function About() {
               <Link to="https://github.com/LandSandBoat/server">
                 LandSandBoat
               </Link>{' '}
-              software (or serving their API). Servers are updated every hour,
-              and are automatically removed after 24 hours of failed updates.
-              All information is pulled directly from the servers and Ixion
-              makes no guarantees as to how current or correct the information
-              is and is in no way affiliated with any listed server. Always use
-              a different strong and unique password for every server (and just
-              in general).
+              software (or serving their API). Servers are updated at a set
+              interval and are removed after a variable amount of
+              disconnectivity. All information is gathered directly from the
+              listed servers.
             </Typography>
           </Box>
           <Box className="mb-3">
@@ -65,7 +62,8 @@ export default function About() {
               align="justify"
               color={(theme) => alpha(theme.palette.text.primary, 0.87)}
             >
-              Additional servers can be found on the XiPrivateServers{' '}
+              Additional servers and more detailed information can be found on
+              the XiPrivateServers{' '}
               <Link to="https://github.com/XiPrivateServers/Servers/blob/main/SERVERS.md">
                 GitHub
               </Link>
@@ -82,6 +80,72 @@ export default function About() {
               here!
             </Typography>
           </Box>
+          <Box className="mb-3">
+            <Typography align="center" variant="h6">
+              Notes
+            </Typography>
+            <ul className="m-0 pl-4">
+              <Typography
+                component="li"
+                variant="body2"
+                align="justify"
+                color={(theme) => alpha(theme.palette.text.primary, 0.87)}
+                className="mb-2"
+              >
+                Due to the nature of private server customization, only basic
+                details can be gathered from the LSB API. Ixion doesn&apos;t
+                know about EXP table changes or any kind of scripting or core
+                changes, just basic settings. If a server doesn&apos;t have a
+                website linked, check the{' '}
+                <Link to="https://github.com/XiPrivateServers/Servers/blob/main/SERVERS.md">
+                  XiPrivateServers GitHub
+                </Link>{' '}
+                and see if it&apos;s listed there. Server owners see below for
+                how to add a link to your website.
+              </Typography>
+              <Typography
+                component="li"
+                variant="body2"
+                align="justify"
+                color={(theme) => alpha(theme.palette.text.primary, 0.87)}
+                className="mb-2"
+              >
+                The information provided by Ixion is sourced from third-party
+                sources, and while we strive to ensure accuracy, we cannot
+                guarantee its completeness or reliability. Users are encouraged
+                to verify any information independently before making decisions
+                based on it.
+              </Typography>
+              <Typography
+                component="li"
+                variant="body2"
+                align="justify"
+                color={(theme) => alpha(theme.palette.text.primary, 0.87)}
+                className="mb-2"
+              >
+                Ixion may contain links to external websites operated by third
+                parties. These links are provided for convenience and
+                informational purposes only. We do not endorse or control the
+                content of these third-party sites, and we are not responsible
+                for their accuracy, legality, or content. Users access external
+                sites at their own risk.
+              </Typography>
+              <Typography
+                component="li"
+                variant="body2"
+                align="justify"
+                color={(theme) => alpha(theme.palette.text.primary, 0.87)}
+                className="mb-2"
+              >
+                All names, trademarks, and copyrights mentioned on this website
+                belong to their respective owners. Any use of these names,
+                trademarks, and copyrights is for identification purposes only
+                and does not imply endorsement, sponsorship, or affiliation with
+                our website. We acknowledge the ownership of these intellectual
+                properties and respect the rights of their owners.
+              </Typography>
+            </ul>
+          </Box>
         </CardContent>
       </Card>
       <Card>