Skip to content

design-audit: share phoneBarTitleSx for the phone batch top-bar titles #1023

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frewsxcv merged 1 commit into from
Nov 10, 2026
Merged

design-audit: share phoneBarTitleSx for the phone batch top-bar titles #1023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion frontend/src/components/batch/phone/PhoneGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
coverImageSx,
miniIconSx,
overlayBadgeSx,
phoneBarTitleSx,
touchTarget,
tallRowMinHeight,
touchTargetLarge,
Expand Down Expand Up @@ -277,7 +278,7 @@ export function PhoneGrid({
<IconButton color="inherit" onClick={onClearSelection} aria-label="Clear selection">
<CloseIcon />
</IconButton>
<Typography role="status" sx={{ flex: 1, fontWeight: 700, fontSize: 18 }}>
<Typography role="status" sx={{ flex: 1, ...phoneBarTitleSx }}>
{picked.length} selected
</Typography>
<Button
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/batch/phone/PhoneStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import type { ReactNode } from "react";
import { Box, Button, IconButton, Typography, type ButtonProps } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { phoneCaptionFontSize } from "../../common/layoutSx";
import { phoneBarTitleSx, phoneCaptionFontSize } from "../../common/layoutSx";

/** Clears the home indicator on phones that draw one over the page. */
const SAFE_BOTTOM = "env(safe-area-inset-bottom, 0px)";
Expand Down Expand Up @@ -112,7 +112,7 @@ export function PhoneStep({
<ArrowBackIcon />
</IconButton>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography component="h1" noWrap sx={{ fontWeight: 700, fontSize: 17 }}>
<Typography component="h1" noWrap sx={phoneBarTitleSx}>
{title}
</Typography>
{subtitle && (
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/components/common/layoutSx.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ export const finePrintFontSize = "0.65rem";
/** Secondary-line font size on the phone batch screens (row labels, subtitles, tab captions). */
export const phoneCaptionFontSize = 13;

/** Title text in the phone batch top bars (step header, selection-mode bar). */
export const phoneBarTitleSx = { fontWeight: 700, fontSize: 17 } as const;

/** Pill-ish corner radius shared by the header action buttons (nav links, "Log in", "Add observation"). */
export const pillButtonSx = { borderRadius: 2 } as const;

Expand Down
Loading