added 404 and maintenance pages

5 files changed, 141 insertions, 37 deletions

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 5ce43bb..f7d2491 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -15,7 +15,9 @@ import SearchIcon from '@material-ui/icons/Search';
 import SettingsIcon from '@material-ui/icons/Settings';
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
 
-export function NavBar() {
+export function NavBar(props: {
+	nolinks?: boolean;
+}) {
 	var [loggedIn, setLoggedIn] = useState(false);
 	var [gotData, setGotData] = useState(false);
 
@@ -58,42 +60,45 @@ export function NavBar() {
 		<div className='item'>
 			<Logo />
 		</div>
-		<a href='/' className='item'>
-			<Home />
-		</a>
-		<a href='/game' className='item'>
-			<VideogameAssetIcon />
-		</a>
-		{false && <a href='/' className='item'>
-			<ExtensionIcon />
-		</a>}
-		<a href='/search' className='item'>
-			<SearchIcon />
-		</a>
+		{!props.nolinks
+			&& <>
+				<a href='/' className='item'>
+					<Home />
+				</a>
+				<a href='/game' className='item'>
+					<VideogameAssetIcon />
+				</a>
+				{false && <a href='/' className='item'>
+					<ExtensionIcon />
+				</a>}
+				<a href='/search' className='item'>
+					<SearchIcon />
+				</a>
 
-		<div className='bg-800 bottomArea'>
-			{loggedIn && <a className='notifications item posrel'>
-				<div
-					className='iconWrapper'
-					onClick={() => setNotificationsAreaVisible(!notificationsAreaVisible)}
-				>
-					<NotificationsIcon />
-					{gotNotifications && <div className='notificationDot posabs' />}
+				<div className='bg-800 bottomArea'>
+					{loggedIn && <a className='notifications item posrel'>
+						<div
+							className='iconWrapper'
+							onClick={() => setNotificationsAreaVisible(!notificationsAreaVisible)}
+						>
+							<NotificationsIcon />
+							{gotNotifications && <div className='notificationDot posabs' />}
+						</div>
+						<NotificationsArea
+							visible={notificationsAreaVisible}
+							friendRequests={friendRequests}
+							rerender={getNotifications}
+						/>
+					</a>}
+					<a href={loggedIn ? '/user' : '/login'} className='item'>
+						{loggedIn
+							? <AccountAvatar size={24} round />
+							: <PersonIcon />}
+					</a>
+					{loggedIn && <a href='/settings' className='item'>
+						<SettingsIcon />
+					</a>}
 				</div>
-				<NotificationsArea
-					visible={notificationsAreaVisible}
-					friendRequests={friendRequests}
-					rerender={getNotifications}
-				/>
-			</a>}
-			<a href={loggedIn ? '/user' : '/login'} className='item'>
-				{loggedIn
-					? <AccountAvatar size={24} round />
-					: <PersonIcon />}
-			</a>
-			{loggedIn && <a href='/settings' className='item'>
-				<SettingsIcon />
-			</a>}
-		</div>
+			</>}
 	</div>;
 }
diff --git a/pages/404.tsx b/pages/404.tsx
new file mode 100644
index 0000000..2768428
--- /dev/null
+++ b/pages/404.tsx
@@ -0,0 +1,39 @@
+import { Footer } from '../components/footer';
+import { NavBar } from '../components/navbar';
+import { CenteredPage, PageTitle } from '../components/page';
+import { IconLabelButton, Vierkant } from '../components/ui';
+
+import HomeIcon from '@material-ui/icons/Home';
+
+export default function FourOhFourPage() {
+	return <div>
+		<NavBar />
+		<CenteredPage width={802}>
+			<PageTitle>404</PageTitle>
+			<Vierkant className='w100m2m pad-l bg-800 center messagePage'>
+				<svg
+					className='harry'
+					width='24'
+					height='24'
+					viewBox='0 0 24 24'
+					fill='none'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<path
+						d='M11.0001 15.5003C11.0002 14.9774 11.1702 14.6194 11.3949 14.3946C11.6197 14.1698 11.9775 14 12.5001 14C13.04 14 13.571 14.1833 13.9483 14.4769C14.3149 14.7619 14.5 15.1144 14.5001 15.5003C14.5002 16.0227 14.3303 16.3806 14.1055 16.6053C13.8807 16.8301 13.5226 17 13.0001 17C12.4601 17 11.9289 16.8166 11.5514 16.5231C11.1848 16.238 11 15.8857 11.0001 15.5003Z'
+						fill='var(--foreground)'
+					/>
+					<path
+						fill-rule='evenodd'
+						clip-rule='evenodd'
+						d='M16.0247 2.97633L15.3785 2.38399C13.4669 0.631648 10.5328 0.631649 8.62122 2.38399L7.97503 2.97633C7.82993 3.10935 7.64879 3.19658 7.45432 3.22709L6.58832 3.36298C4.02641 3.76497 2.19705 6.05892 2.37521 8.64605L2.43543 9.52058C2.44896 9.71696 2.40422 9.91297 2.30683 10.084L1.87313 10.8458C0.590097 13.0994 1.24299 15.96 3.37677 17.4337L4.09805 17.9319C4.26002 18.0437 4.38537 18.2009 4.45839 18.3837L4.78358 19.1978C5.74557 21.606 8.38908 22.8791 10.8717 22.1297L11.7109 21.8764C11.8993 21.8195 12.1004 21.8195 12.2888 21.8764L13.128 22.1297C15.6107 22.8791 18.2542 21.606 19.2162 19.1978L19.5413 18.3837C19.6144 18.2009 19.7397 18.0437 19.9017 17.9319L20.623 17.4337C22.7567 15.96 23.4096 13.0994 22.1266 10.8458L21.6929 10.084C21.5955 9.91297 21.5508 9.71696 21.5643 9.52058L21.6245 8.64605C21.8027 6.05892 19.9733 3.76497 17.4114 3.36298L16.5454 3.22709C16.3509 3.19658 16.1698 3.10935 16.0247 2.97633ZM13.0001 7C13.0001 6.44772 12.5523 6 12.0001 6C11.4478 6 11.0001 6.44772 11.0001 7C11.0001 7.6399 11.1544 8.3754 11.3639 9.00373C11.5621 9.59854 11.8713 10.2855 12.293 10.7071C12.6835 11.0976 13.3166 11.0976 13.7072 10.7071C14.0977 10.3166 14.0977 9.68342 13.7072 9.29289C13.6288 9.21453 13.438 8.90146 13.2612 8.37127C13.0957 7.8746 13.0001 7.3601 13.0001 7ZM9.00006 8C9.00006 7.44772 8.55235 7 8.00006 7C7.44778 7 7.00006 7.44772 7.00006 8C7.00006 9.71426 7.57222 10.9864 8.29295 11.7071C8.68348 12.0976 9.31664 12.0976 9.70717 11.7071C10.0977 11.3166 10.0977 10.6834 9.70717 10.2929C9.4279 10.0136 9.00006 9.28575 9.00006 8ZM12.5001 12C11.5229 12 10.6309 12.3302 9.98071 12.9804C9.33051 13.6306 9.00031 14.5226 9.00006 15.4997C8.99977 16.6143 9.56513 17.512 10.3237 18.1019C11.0714 18.6834 12.0404 19 13.0001 19C13.9771 19 14.8693 18.6699 15.5196 18.0197C16.17 17.3694 16.5003 16.4773 16.5001 15.4997C16.4998 14.3856 15.9347 13.4881 15.1762 12.8982C14.4286 12.3167 13.4598 12 12.5001 12Z'
+						fill='var(--foreground)'
+					/>
+				</svg>
+				<p>De pagina die je probeert te bezoeken bestaat niet</p>
+				<IconLabelButton href='/' text='Terug naar homepagina' icon={<HomeIcon />} />
+			</Vierkant>
+		</CenteredPage>
+		<Footer />
+	</div>;
+}
diff --git a/pages/maintenance.tsx b/pages/maintenance.tsx
new file mode 100644
index 0000000..8abecc6
--- /dev/null
+++ b/pages/maintenance.tsx
@@ -0,0 +1,42 @@
+import { NavBar } from '../components/navbar';
+import { CenteredPage, PageTitle } from '../components/page';
+import { IconLabelButton, Vierkant } from '../components/ui';
+
+import { mdiDiscord } from '@mdi/js';
+import Icon from '@mdi/react';
+
+export default function MaintenancePage() {
+	return <div>
+		<NavBar nolinks />
+		<CenteredPage width={802}>
+			<PageTitle>Onderhoud</PageTitle>
+			<Vierkant className='w100m2m pad-l bg-800 center messagePage'>
+				<svg
+					className='harry'
+					width='24'
+					height='24'
+					viewBox='0 0 24 24'
+					fill='none'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<path
+						fill-rule='evenodd'
+						clip-rule='evenodd'
+						d='M16.0247 2.9763L15.3785 2.38396C13.4669 0.631617 10.5328 0.631618 8.62122 2.38396L7.97503 2.9763C7.82993 3.10932 7.64879 3.19655 7.45432 3.22706L6.58832 3.36295C4.02641 3.76494 2.19705 6.05889 2.37521 8.64602L2.43543 9.52055C2.44896 9.71693 2.40422 9.91294 2.30683 10.084L1.87313 10.8458C0.590097 13.0994 1.24299 15.9599 3.37677 17.4337L4.09805 17.9318C4.26002 18.0437 4.38537 18.2009 4.45839 18.3837L4.78358 19.1978C5.74557 21.606 8.38908 22.879 10.8717 22.1296L11.7109 21.8763C11.8993 21.8194 12.1004 21.8194 12.2888 21.8763L13.128 22.1296C15.6107 22.879 18.2542 21.606 19.2162 19.1978L19.5413 18.3837C19.6144 18.2009 19.7397 18.0437 19.9017 17.9318L20.623 17.4337C22.7567 15.9599 23.4096 13.0994 22.1266 10.8458L21.6929 10.084C21.5955 9.91294 21.5508 9.71693 21.5643 9.52055L21.6245 8.64602C21.8027 6.05889 19.9733 3.76494 17.4114 3.36295L16.5454 3.22706C16.3509 3.19655 16.1698 3.10932 16.0247 2.9763ZM13.0004 7C13.0004 6.44772 12.5527 6 12.0004 6C11.4481 6 11.0004 6.44772 11.0004 7C11.0004 7.6399 11.1547 8.3754 11.3642 9.00373C11.5625 9.59854 11.8716 10.2855 12.2933 10.7071C12.6838 11.0976 13.317 11.0976 13.7075 10.7071C14.098 10.3166 14.098 9.68342 13.7075 9.29289C13.6291 9.21452 13.4383 8.90146 13.2616 8.37127C13.096 7.8746 13.0004 7.3601 13.0004 7ZM9.00037 8C9.00037 7.44772 8.55266 7 8.00037 7C7.44809 7 7.00037 7.44772 7.00037 8C7.00037 9.71426 7.57253 10.9864 8.29326 11.7071C8.68379 12.0976 9.31695 12.0976 9.70748 11.7071C10.098 11.3166 10.098 10.6834 9.70748 10.2929C9.42821 10.0136 9.00037 9.28574 9.00037 8ZM6.44567 15.8321C7.46169 16.5094 8.49948 16.5859 9.46978 16.3758C10.3813 16.1784 11.2664 15.7188 12.0242 15.3247C13.6961 14.4553 14.8671 13.888 16.1065 14.4191C16.6141 14.6367 17.202 14.4015 17.4195 13.8939C17.6371 13.3863 17.4019 12.7984 16.8943 12.5809C14.7298 11.6532 12.7317 12.698 11.2902 13.4518C11.2262 13.4853 11.1633 13.5182 11.1015 13.5503C10.2969 13.9687 9.65066 14.2903 9.04659 14.4211C8.50127 14.5391 8.03905 14.4906 7.55507 14.1679C7.09554 13.8616 6.47467 13.9858 6.16832 14.4453C5.86197 14.9048 5.98614 15.5257 6.44567 15.8321Z'
+						fill='var(--foreground)'
+					/>
+				</svg>
+				<p>
+					Er worden momenteel cruciale onderdelen van de website aangepast waardoor de website niet te
+					bezoeken is. Voor updates of details over dit probleem kun je in{" "}
+					<span className='nosel outcome win'>#important</span> kijken op onze Discord server.
+				</p>
+				<IconLabelButton
+					href='https://discord.gg/FnapWQ9P7T'
+					text='Discord server'
+					icon={<Icon path={mdiDiscord} size={1} />}
+				/>
+			</Vierkant>
+		</CenteredPage>
+	</div>;
+}
diff --git a/pages/search.tsx b/pages/search.tsx
index 99f99b0..ceb83f4 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -67,7 +67,7 @@ function BigSearchBar(props: {
 	</Vierkant>;
 }
 
-export default function HomePage() {
+export default function SearchPage() {
 	var [searched, setSearched] = useState(false);
 	var [results, setResults] = useState<Array<userInfo>>([]);
 	var getSearchResults = (event?: FormEvent<HTMLFormElement>) => {
diff --git a/styles/ui.css b/styles/ui.css
index ee71071..31df20a 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -119,3 +119,21 @@ html.dark .dialogbox { background-color: var(--gray-700); }
 	border-radius: 9999999px;
 }
 
+.messagePage .button {
+	float: none;
+}
+
+.messagePage > * { margin-bottom: var(--spacing-large); }
+.messagePage > *:last-child { margin-bottom: 0; }
+
+.messagePage .harry {
+	width: 128px;
+	height: 128px;
+}
+
+.messagePage p {
+	max-width: 623px;
+	margin: 0 auto;
+	margin-bottom: var(--spacing-large);
+}
+