Update frontend components and styles

inderdeepsinghgill · inderdeepsinghgill · commit 6a113d92498d · 2026-06-24T14:52:42.000-07:00
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -5,6 +5,10 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AI OCR Frontend</title>
+    <script
+      src="https://mcp.figma.com/mcp/html-to-design/capture.js"
+      async
+    ></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/frontend/src/App.css b/apps/frontend/src/App.css
@@ -9,18 +9,26 @@
 }
 
 .app-shell-bcds-header .bcds-header--container {
+  display: flex;
+  align-items: center;
   max-width: none;
   width: 100%;
 }
 
 .app-shell-bcds-header .bcds-header--title {
   flex-grow: 0;
+  margin-right: auto;
 }
 
 .app-shell-bcds-header .app-shell-header-actions {
   display: flex;
   flex-shrink: 0;
   margin-left: auto;
+  justify-content: flex-end;
+}
+
+.app-shell-bcds-header .app-shell-header-actions .mantine-Group-root {
+  flex-wrap: nowrap;
 }
 
 /* Compact name + email in BC header utilities */
@@ -40,6 +48,17 @@
   margin-top: 0.25rem;
 }
 
+/* Tight title/description pairing in standard page headers */
+.bcds-page-header__title-block .bcds-react-aria-Heading,
+.bcds-page-header__title-block .bcds-react-aria-Text {
+  margin: 0 !important;
+}
+
+.bcds-page-header__meta {
+  margin-top: var(--layout-margin-xsmall);
+  min-height: 3rem;
+}
+
 /* BC footer at end of main scroll area (gov.bc.ca pattern — not fixed to viewport) */
 .app-shell-bcds-footer {
   margin-top: var(--layout-margin-medium);
diff --git a/apps/frontend/src/components/upload/DocumentUploadPanel.tsx b/apps/frontend/src/components/upload/DocumentUploadPanel.tsx
@@ -302,8 +302,10 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
     <div className="bcds-upload-panel">
       <PanelCard>
         <div className="bcds-upload-panel__intro">
-          <Title order={3}>Upload images</Title>
-          <Text c="dimmed" size="sm">
+          <Title order={3} mt={0} mb={0}>
+            Upload images
+          </Title>
+          <Text c="dimmed" size="sm" mt={0} mb={0}>
             Select a processing model, then drag and drop scans or mobile
             captures. Click Upload to start OCR processing.
           </Text>
@@ -373,10 +375,10 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
             </Dropzone.Idle>
 
             <div>
-              <Text size="xl" inline>
+              <Text size="xl" mt={0} mb={0}>
                 Drag images or click to browse
               </Text>
-              <Text size="sm" c="dimmed" inline mt={7}>
+              <Text size="sm" c="dimmed" mt="xs" mb={0}>
                 Accepts {SUPPORTED_FILE_TYPES.join(", ")} up to{" "}
                 {Math.round(MAX_FILE_SIZE / (1024 * 1024))} MB
               </Text>
@@ -449,7 +451,7 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
                           <IconFileDescription size={20} />
                         </Avatar>
                         <div className="bcds-upload-queue-row__meta">
-                          <Group gap={4} mb={4} wrap="nowrap">
+                          <Group gap="xs" mb="xs" wrap="nowrap">
                             <Text fw={600} truncate>
                               {item.file.name}
                             </Text>
diff --git a/apps/frontend/src/pages/DocumentsPage.tsx b/apps/frontend/src/pages/DocumentsPage.tsx
@@ -15,7 +15,6 @@ import {
   Table,
   Text,
   TextInput,
-  Title,
   Tooltip,
   UnstyledButton,
 } from "@mantine/core";
@@ -39,6 +38,7 @@ import { useDocuments } from "../data/hooks/useDocuments";
 import { useDocumentThumbnails } from "../data/hooks/useDocumentThumbnails";
 import type { Document, DocumentStatus } from "../shared/types";
 import { formatDate, formatFileSize } from "../shared/utils";
+import { PageHeader } from "../ui";
 
 const statusOptions: { value: DocumentStatus | "all"; label: string }[] = [
   { value: "all", label: "All statuses" },
@@ -188,31 +188,29 @@ export function DocumentsPage() {
   return (
     <>
       <Stack gap="lg">
-        <Group justify="space-between">
-          <div>
-            <Title order={2}>Documents</Title>
-            <Text size="sm" c="dimmed">
-              View and manage all documents in your group
-            </Text>
-          </div>
-          <Group gap="xs">
-            <Tooltip label={statsOpen ? "Hide stats" : "Show stats"}>
-              <ActionIcon variant="light" onClick={toggleStats} size="lg">
-                <IconChartBar size={18} />
-              </ActionIcon>
-            </Tooltip>
-            <Tooltip label="Refresh now">
-              <ActionIcon
-                variant="light"
-                onClick={() => refetch()}
-                loading={isFetching}
-                size="lg"
-              >
-                <IconRefresh size={18} />
-              </ActionIcon>
-            </Tooltip>
-          </Group>
-        </Group>
+        <PageHeader
+          title="Documents"
+          description="View and manage all documents in your group"
+          actions={
+            <Group gap="xs">
+              <Tooltip label={statsOpen ? "Hide stats" : "Show stats"}>
+                <ActionIcon variant="light" onClick={toggleStats} size="lg">
+                  <IconChartBar size={18} />
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip label="Refresh now">
+                <ActionIcon
+                  variant="light"
+                  onClick={() => refetch()}
+                  loading={isFetching}
+                  size="lg"
+                >
+                  <IconRefresh size={18} />
+                </ActionIcon>
+              </Tooltip>
+            </Group>
+          }
+        />
 
         <Collapse in={statsOpen}>
           <SimpleGrid cols={{ base: 1, sm: 2, md: 4, lg: 6 }}>
diff --git a/apps/frontend/src/pages/UploadPage.tsx b/apps/frontend/src/pages/UploadPage.tsx
@@ -3,7 +3,7 @@ import { PageHeader, Stack } from "../ui";
 
 export function UploadPage() {
   return (
-    <Stack gap="lg">
+    <Stack style={{ gap: "var(--layout-margin-large)" }}>
       <PageHeader
         title="Upload documents"
         description="Add new images and track their ingestion progress."
diff --git a/apps/frontend/src/ui/PageHeader.tsx b/apps/frontend/src/ui/PageHeader.tsx
@@ -25,15 +25,20 @@ export function PageHeader({
 }: PageHeaderProps) {
   return (
     <Group justify="space-between" align="flex-start" wrap="wrap">
-      <Stack gap={2}>
-        <Title order={2}>{title}</Title>
+      <Stack
+        className="bcds-page-header__title-block"
+        style={{ gap: "var(--layout-margin-xsmall)" }}
+      >
+        <Title order={2} mt={0} mb={0}>
+          {title}
+        </Title>
         {description ? (
-          <Text c="dimmed" size="sm">
+          <Text c="dimmed" size="sm" mt={0} mb={0}>
             {description}
           </Text>
         ) : null}
       </Stack>
-      <Group gap="md" align="center">
+      <Group gap="md" align="center" className="bcds-page-header__meta">
         {actions}
         {showDateBadge ? (
           <Badge variant="outline" size="lg">
diff --git a/apps/frontend/src/ui/bcds-upload-panel.css b/apps/frontend/src/ui/bcds-upload-panel.css
@@ -12,6 +12,15 @@
   gap: var(--layout-margin-xsmall);
 }
 
+/* Suppress BC DS Heading default bottom margin inside the intro block */
+.bcds-upload-panel__intro .bcds-react-aria-Heading {
+  margin: 0;
+}
+
+.bcds-upload-panel__intro .bcds-react-aria-Text {
+  margin: 0 !important;
+}
+
 .bcds-upload-panel__actions {
   margin-top: var(--layout-margin-medium);
 }
