convert styles

add link to SVG
fix(client): balance the 404 credit colour across both themes
2026-09-09 09:35:20 -07:00 · 2026-09-09 09:28:40 -07:00 · 2026-09-08 19:31:22 -04:00 · 2026-09-08 19:23:44 -04:00
2 changed files with 1296 additions and 1579 deletions
@@ -1,4 +1,4 @@
-import NotFoundSvg from "@/assets/Images/sushi_404.svg";
+import NotFoundSvg from "@/assets/Images/sushi_404.svg?react";
 import { Button } from "@/Components/inputs";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
@@ -36,10 +36,11 @@ const NotFoundPage = ({ title, desc }: NotFoundProps) => {
 				alignItems="center"
 			>
 				<Box
-					component="img"
-					src={NotFoundSvg}
-					alt="404"
-					maxHeight={"25rem"}
+					component={NotFoundSvg}
+					role="img"
+					aria-label="404"
+					width="100%"
+					maxHeight="25rem"
 				/>
 				<Typography
 					component="h1"
Author	SHA1	Message	Date
Alex Holliday	64a2c69540	convert styles	2026-09-09 09:35:20 -07:00
Alex Holliday	c4ec14db5d	add link to SVG	2026-09-09 09:28:40 -07:00
gorkem-bwl	4560820649	fix(client): balance the 404 credit colour across both themes The signature was #9a9a9a, picked against the dark ground. The app switches the whole tree between lightTheme and darkTheme at App.tsx:25 and the 404 page sits inside that, so it also renders on the light background - where #9a9a9a manages only 2.64:1 and reads as washed out. #787878 is the balance point: 4.13:1 on the dark ground (#151518) and 4.14:1 on the light one (#F6F8F7), chosen by maximising the worse of the two rather than tuning for either. Checked by rendering on both.	2026-09-08 19:31:22 -04:00
gorkem-bwl	3051bc7edc	fix(client): credit Annie Hsu on the 404 illustration The sushi artwork on the 404 page was designed by Annie Hsu and carried no attribution. Adds her name in the bottom-right corner, in a script face at a size that reads as a signature rather than a label. The glyphs are embedded as vector outlines rather than a `<text>` element. The asset is loaded through an `<img>` tag in Pages/NotFound/index.tsx, and an img-loaded SVG cannot fetch external resources, so a web font would silently fall back to whatever cursive face the viewer happens to have - different on every platform. Outlines render identically everywhere and stay sharp at any size, which a raster export would not. Adds ~21KB to the asset.	2026-09-08 19:23:44 -04:00