From 5219237613af5872d96bcff7f3f043928cf0e75f Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Mon, 13 Jul 2026 14:22:07 +0200
Subject: [PATCH] style(ui): redesign error pages and job table empty/loading
 state

No mockup exists for 404/500 pages, so these follow the visual
language already established elsewhere this session: floating-shadow
card, big bold status number (matching the dashboard stat tiles'
bold-number treatment) instead of a small overline.

JobTable's first-run empty state gets an icon chip matching the
landing page's feature-card icon treatment (rounded square, tinted
primary background) instead of plain text -- the filtered "no results"
one-liner stays as-is, that's a different, correctly minimal case.
Main table Paper wrapper gets the same floating-shadow treatment as
every other card this session.

ViewStateNotice (the shared loading/error component used across the
app) reviewed and left untouched -- it's an MUI Alert used as an inline
banner, which is the correct pattern; it was never a "fake card" to
begin with.
---
 job-tracker-ui/src/components/JobTable.tsx  | 28 +++++++++++++++++++--
 job-tracker-ui/src/views/NotFoundPage.tsx   | 11 ++++++--
 job-tracker-ui/src/views/RouteErrorPage.tsx | 13 ++++++++--
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/job-tracker-ui/src/components/JobTable.tsx b/job-tracker-ui/src/components/JobTable.tsx
index 71f933f..fe3fe7d 100644
--- a/job-tracker-ui/src/components/JobTable.tsx
+++ b/job-tracker-ui/src/components/JobTable.tsx
@@ -39,6 +39,7 @@ import RestoreFromTrashOutlinedIcon from "@mui/icons-material/RestoreFromTrashOu
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import ViewColumnIcon from "@mui/icons-material/ViewColumn";
 import SearchIcon from "@mui/icons-material/Search";
+import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
 
 import { api } from "../api";
 import ViewStateNotice from "./ViewStateNotice";
@@ -115,7 +116,22 @@ function EmptyJobsState({ firstTime, onOpenSettings, t }: { firstTime: boolean;
     return <Typography sx={{ py: 2, textAlign: "center", color: "text.secondary" }}>{t("jobTableNoJobsFound")}</Typography>;
   }
   return (
-    <Box sx={{ py: 4, textAlign: "center" }}>
+    <Box sx={{ py: 5, textAlign: "center" }}>
+      <Box
+        sx={{
+          width: 56,
+          height: 56,
+          mx: "auto",
+          mb: 2,
+          borderRadius: 3,
+          display: "grid",
+          placeItems: "center",
+          bgcolor: (theme) => alpha(theme.palette.primary.main, 0.12),
+          color: "primary.main",
+        }}
+      >
+        <WorkOutlineIcon fontSize="medium" />
+      </Box>
       <Typography sx={{ fontWeight: 800, mb: 0.5 }}>{t("jobTableEmptyFirstTimeTitle")}</Typography>
       <Typography sx={{ color: "text.secondary", mb: 1.5, maxWidth: 440, mx: "auto" }}>{t("jobTableEmptyFirstTimeBody")}</Typography>
       <Button variant="text" onClick={onOpenSettings}>{t("jobTableEmptyFirstTimeBookmarklet")}</Button>
@@ -514,7 +530,15 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
         />
       ) : null}
 
-      <Paper sx={{ mt: 2, overflow: "hidden" }}>
+      <Paper
+        sx={{
+          mt: 2,
+          overflow: "hidden",
+          borderRadius: 4,
+          border: "none",
+          boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)",
+        }}
+      >
         {isMobile ? (
           <Stack spacing={1.25} sx={{ p: 1.25 }}>
             <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, px: 0.5 }}>
diff --git a/job-tracker-ui/src/views/NotFoundPage.tsx b/job-tracker-ui/src/views/NotFoundPage.tsx
index 6965f0e..744bbb4 100644
--- a/job-tracker-ui/src/views/NotFoundPage.tsx
+++ b/job-tracker-ui/src/views/NotFoundPage.tsx
@@ -8,9 +8,16 @@ export default function NotFoundPage() {
   const { t } = useI18n();
 
   return (
-    <Paper sx={{ p: { xs: 3, md: 5 }, borderRadius: 4 }}>
+    <Paper
+      sx={{
+        p: { xs: 4, md: 6 },
+        borderRadius: 4,
+        border: "none",
+        boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)",
+      }}
+    >
       <Box sx={{ display: "grid", gap: 1.5, maxWidth: 560 }}>
-        <Typography variant="overline" sx={{ color: "text.secondary", letterSpacing: 1.6 }}>
+        <Typography sx={{ fontWeight: 900, fontSize: { xs: 48, md: 64 }, lineHeight: 1, letterSpacing: "-0.02em", color: "primary.main" }}>
           404
         </Typography>
         <Typography variant="h4" sx={{ fontWeight: 800 }}>
diff --git a/job-tracker-ui/src/views/RouteErrorPage.tsx b/job-tracker-ui/src/views/RouteErrorPage.tsx
index 270f87b..6f2d587 100644
--- a/job-tracker-ui/src/views/RouteErrorPage.tsx
+++ b/job-tracker-ui/src/views/RouteErrorPage.tsx
@@ -16,9 +16,18 @@ export default function RouteErrorPage() {
 
   return (
     <Box sx={{ minHeight: "100vh", display: "grid", placeItems: "center", p: 3 }}>
-      <Paper sx={{ p: { xs: 3, md: 5 }, borderRadius: 4, width: "100%", maxWidth: 640 }}>
+      <Paper
+        sx={{
+          p: { xs: 4, md: 6 },
+          borderRadius: 4,
+          border: "none",
+          boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)",
+          width: "100%",
+          maxWidth: 640,
+        }}
+      >
         <Box sx={{ display: "grid", gap: 1.5 }}>
-          <Typography variant="overline" sx={{ color: "text.secondary", letterSpacing: 1.6 }}>
+          <Typography sx={{ fontWeight: 900, fontSize: { xs: 48, md: 64 }, lineHeight: 1, letterSpacing: "-0.02em", color: "error.main" }}>
             {error?.status || 500}
           </Typography>
           <Typography variant="h4" sx={{ fontWeight: 800 }}>