style(ui): polished typography and switched webfonts to woff2

- Switched bundled browser font references from TTF to WOFF2 and enabled optical sizing.
- Refined heading hierarchy, text wrapping, mobile controls, and numeric alignment.
- Polished notification badges, button underlines, and ligature rendering.
This commit is contained in:
ephraimduncan
2026-07-15 10:05:37 +00:00
parent b16f979eb3
commit 8916092500
18 changed files with 36 additions and 30 deletions
@@ -143,9 +143,9 @@ export default function DocumentsPage() {
<AvatarFallback className="text-muted-foreground text-xs">{team.name.slice(0, 1)}</AvatarFallback>
</Avatar>
<h2 className="font-semibold text-4xl">
<h1 className="font-semibold text-2xl leading-tight tracking-tight md:text-3xl">
<Trans>Documents</Trans>
</h2>
</h1>
</div>
<div className="-m-1 flex flex-wrap gap-x-4 gap-y-6 overflow-hidden p-1">
@@ -172,7 +172,7 @@ export default function DocumentsPage() {
<DocumentStatus status={value} />
{value !== ExtendedDocumentStatus.ALL && (
<span className="ml-1 inline-block opacity-50">
<span className="ml-1 inline-block tabular-nums opacity-50">
{stats[value] >= STATS_COUNT_CAP ? `${STATS_COUNT_CAP.toLocaleString()}+` : stats[value]}
</span>
)}
@@ -101,7 +101,7 @@ export default function TemplatesPage() {
<AvatarFallback className="text-muted-foreground text-xs">{team.name.slice(0, 1)}</AvatarFallback>
</Avatar>
<h1 className="truncate font-semibold text-2xl md:text-3xl">
<h1 className="font-semibold text-2xl leading-tight tracking-tight md:text-3xl">
<Trans>Templates</Trans>
</h1>
</div>
@@ -131,15 +131,15 @@ export default function TemplatesPage() {
<div className="mt-8">
{activeQuery.data && activeQuery.data.count === 0 ? (
<div className="flex h-96 flex-col items-center justify-center gap-y-4 text-muted-foreground/60">
<Bird className="h-12 w-12" strokeWidth={1.5} />
<div className="flex h-96 flex-col items-center justify-center gap-y-4">
<Bird className="h-12 w-12 text-muted-foreground/60" strokeWidth={1.5} />
<div className="text-center">
<h3 className="font-semibold text-lg">
<h3 className="font-semibold text-foreground text-lg">
<Trans>We're all empty</Trans>
</h3>
<p className="mt-2 max-w-[50ch]">
<p className="mt-2 max-w-[50ch] text-muted-foreground [text-wrap:pretty]">
{isOrgView ? (
<Trans>No organisation templates are shared with your team yet.</Trans>
) : (