From 6caa847e0f715471c8cccb973afd4055b90396af Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 4 Nov 2026 12:15:00 +0000
Subject: [PATCH] design-audit: share heroIconSx for the 48px prompt icons in
 LiveIdView and PhoneStart

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WA2AWgfCwAkJVcM47ohs89
---
 frontend/src/components/batch/phone/PhoneStart.tsx    | 3 ++-
 frontend/src/components/common/layoutSx.ts            | 3 +++
 frontend/src/components/identification/LiveIdView.tsx | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/batch/phone/PhoneStart.tsx b/frontend/src/components/batch/phone/PhoneStart.tsx
index 7ed778dc..c8beaec1 100644
--- a/frontend/src/components/batch/phone/PhoneStart.tsx
+++ b/frontend/src/components/batch/phone/PhoneStart.tsx
@@ -1,6 +1,7 @@
 // Phone layout, before any photos: what the tool does and the way in.
 import { Alert, AlertTitle, Box, Button, CircularProgress, Typography } from "@mui/material";
 import PhotoLibraryIcon from "@mui/icons-material/PhotoLibrary";
+import { heroIconSx } from "../../common/layoutSx";
 import { MAX_BATCH_PHOTOS } from "../../../lib/batchUpload";
 import { formatMegabytes } from "../../../lib/imageSelection";
 import { useMaxPhotoSize } from "../../../lib/query/hooks";
@@ -46,7 +47,7 @@ export function PhoneStart({ onChoosePhotos, converting, stripsLocation }: Phone
           textAlign: "center",
         }}
       >
-        <PhotoLibraryIcon color="primary" sx={{ fontSize: 48 }} />
+        <PhotoLibraryIcon color="primary" sx={heroIconSx} />
         <Button
           variant="contained"
           size="large"
diff --git a/frontend/src/components/common/layoutSx.ts b/frontend/src/components/common/layoutSx.ts
index d78f6881..84584f96 100644
--- a/frontend/src/components/common/layoutSx.ts
+++ b/frontend/src/components/common/layoutSx.ts
@@ -12,6 +12,9 @@ export const detailHeaderSx = {
 /** Inline glyph size for icons embedded in chips, small buttons and caption rows. */
 export const miniIconSx = { fontSize: 14 } as const;
 
+/** Large glyph for full-panel prompts (location permission, empty photo picker). */
+export const heroIconSx = { fontSize: 48 } as const;
+
 /** Glyph size for icons in caption/status rows (batch card status lines). */
 export const captionIconSx = { fontSize: 16 } as const;
 
diff --git a/frontend/src/components/identification/LiveIdView.tsx b/frontend/src/components/identification/LiveIdView.tsx
index 789badda..6c9943e2 100644
--- a/frontend/src/components/identification/LiveIdView.tsx
+++ b/frontend/src/components/identification/LiveIdView.tsx
@@ -18,7 +18,7 @@ import { useAppDispatch } from "../../store";
 import { openUploadModal, setPendingUploadFiles, addToast } from "../../store/uiSlice";
 import { InRangeIndicator } from "../common/InRangeIndicator";
 import { CloseIconButton } from "../common/CloseIconButton";
-import { cornerPinSx } from "../common/layoutSx";
+import { cornerPinSx, heroIconSx } from "../common/layoutSx";
 
 /**
  * Full-screen live camera identifier — point the camera at something and the
@@ -182,7 +182,7 @@ export function LiveIdView() {
           onClick={handleClose}
           sx={[cornerPinSx("top-left"), { color: "common.white" }]}
         />
-        <PlaceIcon sx={{ fontSize: 48, opacity: 0.85 }} />
+        <PlaceIcon sx={{ ...heroIconSx, opacity: 0.85 }} />
         {locationState === "prompting" ? (
           <>
             <Typography variant="h6">Allow location access</Typography>