feat: upgrade typography — Plus Jakarta Sans headings, JetBrains Mono data, 14px base
Heading font: Plus Jakarta Sans (500/600/700) for all h1-h3, stat values, dialog titles, timer display, and wordmark. Body font: Inter (400/500/600/700) unchanged but base bumped from 13px to 14px. Mono font: JetBrains Mono replaces IBM Plex Mono for code and tabular data.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Reports</h1>
|
||||
<h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary mb-6">Reports</h1>
|
||||
|
||||
<!-- Date Range Selector -->
|
||||
<div class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
|
||||
@@ -38,21 +38,21 @@
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Hours</p>
|
||||
<p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ formatHours(reportData.totalSeconds) }}</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatHours(reportData.totalSeconds) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Earnings</p>
|
||||
<p class="text-[1.25rem] font-mono text-accent-text font-medium">${{ reportData.totalEarnings?.toFixed(2) || '0.00' }}</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">${{ reportData.totalEarnings?.toFixed(2) || '0.00' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Projects</p>
|
||||
<p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ reportData.byProject?.length || 0 }}</p>
|
||||
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ reportData.byProject?.length || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-[1rem] font-medium text-text-primary mb-4">Hours by Project</h2>
|
||||
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Hours by Project</h2>
|
||||
<div class="h-64">
|
||||
<Bar v-if="chartData" :data="chartData" :options="chartOptions" />
|
||||
<div v-else class="flex flex-col items-center justify-center h-full">
|
||||
@@ -64,7 +64,7 @@
|
||||
|
||||
<!-- Project Breakdown -->
|
||||
<div>
|
||||
<h2 class="text-[1rem] font-medium text-text-primary mb-4">Breakdown</h2>
|
||||
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Breakdown</h2>
|
||||
|
||||
<div v-if="reportData.byProject && reportData.byProject.length > 0">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user