Skip to content

refactor(mobile): make typography scale desktop-only, revert to pre-bump sizes on mobile #105

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
d3mocide merged 1 commit into from
Jun 11, 2026
Merged

refactor(mobile): make typography scale desktop-only, revert to pre-bump sizes on mobile #105

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
20 changes: 10 additions & 10 deletions frontend/src/components/panels/EnvironmentPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,17 @@ export function EnvironmentPanel() {
<div className="flex items-center justify-between px-6 py-3 border-b border-white/5">
<div className="flex items-center gap-6">
<div className="flex flex-col">
<span className="text-[11px] font-mono text-on-surface-variant uppercase tracking-[0.2em]">Region Center</span>
<span className="text-[11px] font-mono text-on-surface font-bold uppercase tracking-widest">Tualatin, OR · 45.38°N 122.76°W</span>
<span className="text-[8px] lg:text-[11px] font-mono text-on-surface-variant uppercase tracking-[0.2em]">Region Center</span>
<span className="text-[10px] lg:text-[11px] font-mono text-on-surface font-bold uppercase tracking-widest">Tualatin, OR · 45.38°N 122.76°W</span>
</div>
<div className="w-px h-6 bg-white/10" />
<div className="flex flex-col">
<span className="text-[11px] font-mono text-on-surface-variant uppercase tracking-[0.2em]">Last Update</span>
<span className="text-[11px] font-mono text-on-surface font-bold uppercase tracking-widest">DATA LIVE</span>
<span className="text-[8px] lg:text-[11px] font-mono text-on-surface-variant uppercase tracking-[0.2em]">Last Update</span>
<span className="text-[10px] lg:text-[11px] font-mono text-on-surface font-bold uppercase tracking-widest">DATA LIVE</span>
</div>
</div>

<div className="flex items-center gap-4 font-mono text-[11px] text-on-surface-variant uppercase tracking-widest">
<div className="flex items-center gap-4 font-mono text-[9px] lg:text-[11px] text-on-surface-variant uppercase tracking-widest">
<span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-green-500/40" /> NWS</span>
<span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-amber-500/40" /> EPA</span>
<span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-blue-500/40" /> LOCAL SENSORS</span>
Expand All @@ -99,8 +99,8 @@ export function EnvironmentPanel() {
<span className="ms text-[48px] text-green-ais relative" aria-hidden="true" style={{ fontVariationSettings: "'FILL' 1" }}>verified_user</span>
</div>
<div className="flex flex-col items-center">
<p className="font-mono text-[14px] text-on-surface font-bold uppercase tracking-[0.2em]">Systems Nominal</p>
<p className="font-mono text-[11px] text-on-surface-variant uppercase tracking-widest mt-1">No active weather advisories for this region</p>
<p className="font-mono text-[12px] lg:text-[14px] text-on-surface font-bold uppercase tracking-[0.2em]">Systems Nominal</p>
<p className="font-mono text-[9px] lg:text-[11px] text-on-surface-variant uppercase tracking-widest mt-1">No active weather advisories for this region</p>
</div>
</div>
) : (
Expand All @@ -113,7 +113,7 @@ export function EnvironmentPanel() {

{/* Hazard quick cards */}
<div className="mt-6">
<div className="label-caps text-[11px] text-on-surface-variant mb-3 flex items-center gap-2">
<div className="label-caps text-[10px] lg:text-[11px] text-on-surface-variant mb-3 flex items-center gap-2">
<span className="h-px flex-1 bg-white/5" />
HAZARD STATUS INDICATORS
<span className="h-px flex-1 bg-white/5" />
Expand Down Expand Up @@ -143,8 +143,8 @@ export function EnvironmentPanel() {
{h.icon}
</span>
<div className="flex flex-col">
<span className={`text-[11px] font-black uppercase tracking-tight ${h.active ? 'text-on-surface' : 'text-on-surface-variant/60'}`}>{h.label}</span>
<span className={`font-mono text-[11px] font-bold mt-0.5 tracking-widest ${h.active ? 'text-amber-gold' : 'text-on-surface-variant/30'}`}>{h.active ? 'WATCH ACTIVE' : 'SECURE'}</span>
<span className={`text-[10px] lg:text-[11px] font-black uppercase tracking-tight ${h.active ? 'text-on-surface' : 'text-on-surface-variant/60'}`}>{h.label}</span>
<span className={`font-mono text-[8px] lg:text-[11px] font-bold mt-0.5 tracking-widest ${h.active ? 'text-amber-gold' : 'text-on-surface-variant/30'}`}>{h.active ? 'WATCH ACTIVE' : 'SECURE'}</span>
</div>
</div>
))}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/panels/environment/AqiGauge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export function AqiGauge({ aqi }: { aqi: number | undefined }) {
{aqi}
</span>
<div className="flex flex-col">
<span className="font-mono text-[12px] font-bold uppercase tracking-wider" style={{ color }}>{label}</span>
<span className="text-[11px] text-on-surface-variant uppercase tracking-tighter">Current EPA Rating</span>
<span className="font-mono text-[10px] lg:text-[12px] font-bold uppercase tracking-wider" style={{ color }}>{label}</span>
<span className="text-[8px] lg:text-[11px] text-on-surface-variant uppercase tracking-tighter">Current EPA Rating</span>
</div>
</div>

Expand All @@ -48,7 +48,7 @@ export function AqiGauge({ aqi }: { aqi: number | undefined }) {
/>
</div>

<div className="flex justify-between mt-2 font-mono text-[11px] text-on-surface-variant/50 uppercase tracking-tighter">
<div className="flex justify-between mt-2 font-mono text-[7px] lg:text-[11px] text-on-surface-variant/50 uppercase tracking-tighter">
<span>0 Good</span>
<span>100 Mod</span>
<span>200 Unhealthy</span>
Expand Down
34 changes: 17 additions & 17 deletions frontend/src/components/panels/environment/FireStatusCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,12 @@ function renderFireRow(fire: FirePanelEntity) {
<article key={fire.entity_id} className="border border-white/10 bg-white/[0.02] px-3 py-2">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<div className="text-[12px] font-bold text-on-surface truncate">{fire.display_name}</div>
<div className="mt-1 font-mono text-[11px] text-on-surface-variant uppercase tracking-widest">
<div className="text-[10px] lg:text-[12px] font-bold text-on-surface truncate">{fire.display_name}</div>
<div className="mt-1 font-mono text-[8px] lg:text-[11px] text-on-surface-variant uppercase tracking-widest">
{fire.distanceKm != null ? `${Math.round(fire.distanceKm)} KM · ` : ''}{formatRelativeTime(fire.eventTs)}
</div>
</div>
<span className={`font-mono text-[11px] font-bold uppercase tracking-widest ${fire.relevance === 'local' ? 'text-red-500' : 'text-amber-gold'}`}>
<span className={`font-mono text-[8px] lg:text-[11px] font-bold uppercase tracking-widest ${fire.relevance === 'local' ? 'text-red-500' : 'text-amber-gold'}`}>
{fire.relevance === 'local' ? 'ALERT' : 'WATCH'}
</span>
</div>
Expand All @@ -66,7 +66,7 @@ function renderFireRow(fire: FirePanelEntity) {
href={fire.link}
target="_blank"
rel="noopener noreferrer"
className="mt-2 inline-flex text-[11px] font-mono uppercase tracking-widest text-amber-gold hover:text-amber-200"
className="mt-2 inline-flex text-[8px] lg:text-[11px] font-mono uppercase tracking-widest text-amber-gold hover:text-amber-200"
>
SOURCE
</a>
Expand Down Expand Up @@ -107,19 +107,19 @@ export function FireStatusCard({

<div className="grid grid-cols-3 gap-3 mb-4">
<div className="border border-red-500/20 bg-red-500/5 px-3 py-2">
<div className="text-[11px] font-mono text-on-surface-variant uppercase tracking-widest">Alert Radius</div>
<div className="text-[8px] lg:text-[11px] font-mono text-on-surface-variant uppercase tracking-widest">Alert Radius</div>
<div className="mt-1 text-[20px] font-black text-on-surface">{localFires.length}</div>
<div className="font-mono text-[11px] text-red-400 uppercase tracking-widest">Local fires</div>
<div className="font-mono text-[8px] lg:text-[11px] text-red-400 uppercase tracking-widest">Local fires</div>
</div>
<div className="border border-amber-gold/20 bg-amber-gold/5 px-3 py-2">
<div className="text-[11px] font-mono text-on-surface-variant uppercase tracking-widest">Regional Watch</div>
<div className="text-[8px] lg:text-[11px] font-mono text-on-surface-variant uppercase tracking-widest">Regional Watch</div>
<div className="mt-1 text-[20px] font-black text-on-surface">{regionalFires.length}</div>
<div className="font-mono text-[11px] text-amber-gold uppercase tracking-widest">Potential sources</div>
<div className="font-mono text-[8px] lg:text-[11px] text-amber-gold uppercase tracking-widest">Potential sources</div>
</div>
<div className="border border-white/10 bg-white/[0.02] px-3 py-2">
<div className="text-[11px] font-mono text-on-surface-variant uppercase tracking-widest">Smoke Signal</div>
<div className={`mt-1 text-[11px] font-black uppercase tracking-wider ${smokeTone}`}>{smokeRisk}</div>
<div className="font-mono text-[11px] text-on-surface-variant uppercase tracking-widest">
<div className="text-[8px] lg:text-[11px] font-mono text-on-surface-variant uppercase tracking-widest">Smoke Signal</div>
<div className={`mt-1 text-[10px] lg:text-[11px] font-black uppercase tracking-wider ${smokeTone}`}>{smokeRisk}</div>
<div className="font-mono text-[8px] lg:text-[11px] text-on-surface-variant uppercase tracking-widest">
{aqi != null ? `AQI ${aqi}${aqiLabel ? ` · ${aqiLabel}` : ''}` : 'Use smoke overlay + AQI'}
</div>
</div>
Expand All @@ -128,11 +128,11 @@ export function FireStatusCard({
<div className="space-y-4">
<section aria-labelledby="fire-local-heading">
<div className="mb-2 flex items-center justify-between">
<h3 id="fire-local-heading" className="text-[11px] font-mono text-on-surface-variant uppercase tracking-[0.2em]">Local Alert Queue</h3>
<span className="font-mono text-[11px] text-red-400 uppercase tracking-widest">Actionable near region</span>
<h3 id="fire-local-heading" className="text-[9px] lg:text-[11px] font-mono text-on-surface-variant uppercase tracking-[0.2em]">Local Alert Queue</h3>
<span className="font-mono text-[8px] lg:text-[11px] text-red-400 uppercase tracking-widest">Actionable near region</span>
</div>
{localFires.length === 0 ? (
<div className="border border-white/10 bg-white/[0.02] px-3 py-2 font-mono text-[11px] text-on-surface-variant uppercase tracking-widest">
<div className="border border-white/10 bg-white/[0.02] px-3 py-2 font-mono text-[8px] lg:text-[11px] text-on-surface-variant uppercase tracking-widest">
No current fires inside the local alert radius.
</div>
) : (
Expand All @@ -144,11 +144,11 @@ export function FireStatusCard({

<section aria-labelledby="fire-regional-heading">
<div className="mb-2 flex items-center justify-between">
<h3 id="fire-regional-heading" className="text-[11px] font-mono text-on-surface-variant uppercase tracking-[0.2em]">Regional Smoke Watch</h3>
<span className="font-mono text-[11px] text-amber-gold uppercase tracking-widest">Use for drift awareness</span>
<h3 id="fire-regional-heading" className="text-[9px] lg:text-[11px] font-mono text-on-surface-variant uppercase tracking-[0.2em]">Regional Smoke Watch</h3>
<span className="font-mono text-[8px] lg:text-[11px] text-amber-gold uppercase tracking-widest">Use for drift awareness</span>
</div>
{regionalFires.length === 0 ? (
<div className="border border-white/10 bg-white/[0.02] px-3 py-2 font-mono text-[11px] text-on-surface-variant uppercase tracking-widest">
<div className="border border-white/10 bg-white/[0.02] px-3 py-2 font-mono text-[8px] lg:text-[11px] text-on-surface-variant uppercase tracking-widest">
No regional wildfire sources currently inside the watch area.
</div>
) : (
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/components/panels/environment/GdacsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,18 @@ export function GdacsCard() {
{(redCount > 0 || orangeCount > 0) && (
<div className="ml-auto flex items-center gap-2">
{redCount > 0 && (
<span className="font-mono text-[11px] text-red-400">{redCount} RED</span>
<span className="font-mono text-[9px] lg:text-[11px] text-red-400">{redCount} RED</span>
)}
{orangeCount > 0 && (
<span className="font-mono text-[11px] text-orange-400">{orangeCount} ORANGE</span>
<span className="font-mono text-[9px] lg:text-[11px] text-orange-400">{orangeCount} ORANGE</span>
)}
</div>
)}
</div>

<div className="flex items-end justify-between mb-3">
<div className="flex flex-col">
<span className="text-[11px] font-mono text-on-surface-variant uppercase tracking-widest">Last 72 Hours</span>
<span className="text-[8px] lg:text-[11px] font-mono text-on-surface-variant uppercase tracking-widest">Last 72 Hours</span>
<span className="text-[18px] font-black text-on-surface tracking-tight">
{events.length} event{events.length !== 1 ? 's' : ''}
</span>
Expand All @@ -90,7 +90,7 @@ export function GdacsCard() {

{events.length === 0 ? (
<div className="border border-white/10 bg-white/[0.02] px-3 py-2">
<span className="font-mono text-[11px] text-on-surface-variant uppercase tracking-widest">
<span className="font-mono text-[9px] lg:text-[11px] text-on-surface-variant uppercase tracking-widest">
No significant global alerts
</span>
</div>
Expand All @@ -107,16 +107,16 @@ export function GdacsCard() {
return (
<div key={ev.event_id} className={`border px-3 py-2 ${bg}`}>
<div className="flex items-center gap-2">
<span className={`ms text-[14px] leading-none ${color}`} aria-hidden="true">{icon}</span>
<span className="text-[12px] font-bold text-on-surface truncate flex-1">{ev.summary}</span>
<span className={`font-mono text-[11px] ${color} shrink-0`}>{sevText}</span>
<span className={`ms text-[12px] lg:text-[14px] leading-none ${color}`} aria-hidden="true">{icon}</span>
<span className="text-[10px] lg:text-[12px] font-bold text-on-surface truncate flex-1">{ev.summary}</span>
<span className={`font-mono text-[9px] lg:text-[11px] ${color} shrink-0`}>{sevText}</span>
</div>
<div className="flex items-center justify-between mt-1">
<span className="font-mono text-[11px] text-on-surface-variant uppercase tracking-widest">
<span className="font-mono text-[8px] lg:text-[11px] text-on-surface-variant uppercase tracking-widest">
{new Date(ev.ts).toLocaleString()}
</span>
{d.dist_km != null && (
<span className="font-mono text-[11px] text-sky-400/70 shrink-0">
<span className="font-mono text-[8px] lg:text-[11px] text-sky-400/70 shrink-0">
{d.dist_km > 999 ? `${(d.dist_km / 1000).toFixed(1)}k km` : `${Math.round(d.dist_km)} km`}
</span>
)}
Expand Down
Loading
Loading