Both themes set `fontFamily: Inter`, and Inter carries no Ge'ez glyphs. So
every Amharic string in a bilingual system — 45-73 KB of locale data per app —
has been rendering in whatever font the OS happened to substitute: different on
Windows, macOS and Android, and matching neither the design nor each other.
Noto Sans Ethiopic goes directly after Inter in one stack rather than being
swapped in under `[lang='am']`. Browsers fall back per glyph, not per element,
so a single stack renders Latin in Inter and Ge'ez in Noto automatically —
including within one string. That is the case that matters here: a registry is
full of mixed-script lines like an Amharic name beside a Latin IMO number, and
a language-scoped swap renders half of those in the wrong face.
Heading line-heights go up a step at the same time. Ge'ez has taller ascenders
and deeper descenders than Latin, so headings set to Inter's natural leading
clip once Ethiopic is actually being rendered. This was deliberately held back
from the theme refactor so that change could prove it altered nothing.
The gallery gains Ge'ez headings and a mixed-script line, so the baselines
cover the case rather than only Latin.
Follow-up: both fonts still load from Google Fonts via a render-blocking CSS
@import. Self-hosting with a subset and preload links is worth doing —
government networks frequently make fonts.googleapis.com slow or unreachable,
and silent Amharic fallback is precisely the failure this commit fixes.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Adds the layer feature code has been missing: tokens that name a role — page
surface, subtle border, danger — instead of a colour. Every one resolves to a
Mantine variable rather than a literal, so they follow the colour scheme for
free and cannot drift from the theme. A parallel palette of raw hexes would
have recreated exactly the problem this exists to fix.
Also closes three accessibility gaps that had no implementation anywhere in the
codebase: no :focus-visible rule, no screen-reader-only utility, and no global
prefers-reduced-motion handling.
The focus work found a real bug, and nearly introduced a worse one. Mantine
already rings its own controls, so the first attempt deferred to it with
`outline: none` on .mantine-focus-auto. That suppressed Mantine's ring without
replacing it, leaving portal buttons with no focus indicator at all — and it
only showed up in one app, because which rule won depended on stylesheet order.
The rules use identical values, so overlapping them is invisible and safe;
opting out is not. The focus test now asserts computed outline width and style,
not just pixels, since a screenshot alone would not have caught this.
`status-tone.ts` establishes the six-tone vocabulary that the 48 scattered
status→colour maps will eventually collapse onto. Nothing consumes it yet.
No visual change: the 8 existing baselines pass unmodified.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Tailwind was configured but had no effect. There is no postcss config anywhere
in the repo, so the three `@tailwind` directives in the backoffice stylesheet
were never expanded — they passed through verbatim into the production CSS
bundle as invalid at-rules for browsers to discard. The portal's copy could not
even do that: nothing imports `apps/portal/src/styles.css`.
The utility classes visible in the built CSS come from the vendored
@tria-plc/iamui package, which ships its own pre-compiled stylesheet and
declares only React as a peer dependency. Removing Tailwind here does not
affect it.
`tailwind-merge` goes too — no file in apps/ or libs/ imports it. postcss and
autoprefixer stay; Vite uses them independently.
Also fixes a bug this uncovered. The orphaned portal stylesheet was not dead
code — it contained scrollbar theming the portal never received, so it has been
rendering raw OS scrollbars while the backoffice got themed ones. Those rules
move to portal.css, which actually loads. Deleting the file without reading it
would have silently kept that gap.
No visual change: all 8 baselines pass unmodified.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The two apps had drifted into unrelated themes. The portal's carried a full
type scale, radius scale, shadow ramp and component defaults; the backoffice's
had none of them — 55 lines defining two colour ramps and little else. With
nothing to inherit, its 23 features each invented their own sizing, which is
the real source of the inconsistency the UI reads with.
Promote the portal's structure to `libs/shared` as `baseTheme`, and reduce both
themes to what they should differ on: brand. The backoffice keeps #1e40af and
the portal keeps Coastal Modern — a distinct accent tells an officer which of
the two systems they are in, and the ramps are not interchangeable in contrast.
Both export names are preserved, so no consumer import changes.
Two properties are deliberately held back rather than shared:
- `colors.gray`: the portal's blue-tinted neutrals retint every dimmed label,
neutral badge and table border. The backoffice adopts them as its own
reviewed change, not as a side effect of sharing a base.
- `primaryShade.dark`: moves every filled control in dark mode; waits until
dark mode is verified end to end.
Also fixes a live bug: PageLoader coloured its primary label `navy.9`, which is
defined in neither theme. Mantine drops unresolved colour keys silently, so the
label in a component used by 20 files had been rendering an inherited colour.
Adds a visual-regression harness to make all of this reviewable. It runs
against a static gallery route rather than real pages, so it needs no API,
database or auth — a theme diff cannot be masked by a migration or an expired
token. The portal is the control group: it is pixel-identical across all four
light/dark × desktop/tablet baselines, which is what makes the refactor
provably lossless.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
- Implement DocumentRequirementsTab for managing document upload requirements.
- Create FieldEditorDrawer and SectionEditorDrawer for editing fields and sections in the form schema.
- Develop FormSchemaTab to handle sections and fields for a license type's form schema.
- Introduce CertificateRequirementsPage to serve as the main interface for configuring license type requirements.
- Add hooks for requirement actions to streamline mutation handling and notifications.
- Implement condition handling for fields and sections to manage visibility based on user input.
- Create schema-paths configuration to facilitate condition target collection.
- Refactor ExamStageActions component to handle eligibility payment and retake exam actions.
- Update MyApplicationsPage to use new retakeExam mutation instead of requestExamPayment.
- Modify licensing API to include retakeExam mutation for handling exam fee requests for failed candidates.
- Adjust mock data to reflect new application statuses and ensure consistency in eligibility and exam payment states.
- Update licensing helpers to include new status labels and colors for eligibility payment states.
- Revise licensing types to replace ELIGIBILITY_APPROVED with ELIGIBILITY_PAYMENT_PENDING and ELIGIBILITY_PAID for clarity in application status flow.
- Split MedicalVerificationPage into MedicalVerificationPage and SeaServiceVerificationPage for better separation of concerns.
- Update navigation to include separate entries for Sea Service Verification and Medical Verification.
- Enhance sea service columns to display additional vessel information and days served.
- Add translations for new and updated labels in both English and Amharic.
- Introduce seaServiceDays helper function to calculate days served based on engagement and discharge dates.
- Remove deprecated MedicalCertificatePage from the portal.
- Update routing to direct to the new sea service and medical pages.
- Remove SeamanBookApplicationPage from router and redirect to Seaman Book page.
- Add new API endpoints for managing seafarer documents, including listing, reviewing, and issuing documents.
- Introduce new SeafarerDocumentQueuePage and SeafarerDocumentReviewPage components for document management.
- Update licensing types to accommodate optional applicationId and documentId in ApplicationPayment.
- Remove unused claimSeafarerRegistration mutation and related constants.
- Update seafarer registration status labels and types to remove 'UNDER_REVIEW'.
- Create new constants and types for seafarer documents, including status labels and colors.
- Implement document payment initiation and confirmation functionalities.
- Enhance UI components for better user experience in document management.
- Implemented SeafarerRegistrationPage component with five-step registration process.
- Added API endpoints for seafarer registration including start, save, and submit functionalities.
- Created necessary types and constants for seafarer registration.
- Updated router to include new registration paths and permissions.
- Integrated profile defaults to pre-fill registration fields where applicable.
- Added validation and error handling for registration steps.
- Enhanced document upload functionality specific to seafarer registration.
