Skip to content

Commit 1b6080e

Browse files
jordanlambrechtjordanlambrecht
committed
refactor: unified text sizes
1 parent 11c303a commit 1b6080e

72 files changed

Lines changed: 213 additions & 198 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/app/globals.css‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,14 @@
107107
--radius-lg: 20px;
108108
--radius-xl: 24px;
109109
--radius-pill: 9999px;
110+
111+
/* Sub-xs font sizes for dense data UI.
112+
* text-3xs and text-2xs are intentionally the same value today (10px).
113+
* text-2xs covers former 11px contexts (table cells, pills).
114+
* If dense tables feel too tight, bump --text-2xs to 11px — one-line change. */
115+
--text-4xs: 9px;
116+
--text-3xs: 10px;
117+
--text-2xs: 10px;
110118
}
111119

112120
/* Custom radius utilities matching design system tokens */
@@ -176,7 +184,7 @@
176184

177185
@utility slot-label {
178186
font-family: var(--font-sans);
179-
font-size: 10px;
187+
font-size: var(--text-3xs);
180188
font-weight: 500;
181189
text-transform: uppercase;
182190
letter-spacing: 0.05em;
@@ -430,7 +438,7 @@ select {
430438
background: oklch(40.24% 0.0439 279.12); /* #434660 */
431439
}
432440

433-
/* react-colorful overrides — scoped under wrapper for specificity without !important */
441+
/* react-colorful overrides */
434442
.color-picker-wrapper .react-colorful {
435443
width: 100%;
436444
height: 160px;
@@ -453,7 +461,7 @@ select {
453461
box-shadow: 0 0 4px oklch(0% 0 0 / 0.4); /* #000000 40% */
454462
}
455463

456-
/* Emoji picker theme overrides — scoped under wrapper for specificity without !important */
464+
/* Emoji picker theme overrides */
457465
.emoji-picker-wrapper .EmojiPickerReact.epr-dark-theme {
458466
--epr-bg-color: oklch(31.52% 0.0323 279.44); /* #2e3042 */
459467
--epr-category-label-bg-color: oklch(31.52% 0.0323 279.44); /* #2e3042 */

‎src/components/AddTrackerDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ function TrackerCombobox({ presets, value, onChange }: TrackerComboboxProps) {
160160
✕
161161
</button>
162162
)}
163-
<span className="text-tertiary text-[10px] shrink-0" aria-hidden="true">
163+
<span className="text-tertiary text-3xs shrink-0" aria-hidden="true">
164164
▾
165165
</span>
166166
</div>
@@ -206,7 +206,7 @@ function TrackerCombobox({ presets, value, onChange }: TrackerComboboxProps) {
206206
<span className="flex items-center gap-1 shrink-0">
207207
<TriangleWarningIcon width="13" height="13" className="text-warn" />
208208
{entry.warningNote && (
209-
<span className="text-[10px] text-warn">{entry.warningNote}</span>
209+
<span className="text-3xs text-warn">{entry.warningNote}</span>
210210
)}
211211
</span>
212212
</Tooltip>

‎src/components/DownloadClients.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -232,18 +232,18 @@ function ClientCard({ client, linkedTrackers, onSaved, onRemove, onSetDefault }:
232232
{client.isDefault && <Badge variant="accent">Default</Badge>}
233233
</div>
234234
<div className="flex items-center gap-3 flex-wrap">
235-
<span className="text-[10px] font-mono text-tertiary">
235+
<span className="text-3xs font-mono text-tertiary">
236236
{client.lastPolledAt
237237
? `Last seen: ${formatTimeAgo(client.lastPolledAt)}`
238238
: "Last seen: Never"}
239239
</span>
240240
{client.errorSince && (
241-
<span className="text-[10px] font-mono text-danger">
241+
<span className="text-3xs font-mono text-danger">
242242
Down since {formatTimeAgo(client.errorSince)}
243243
</span>
244244
)}
245245
{client.lastError && !client.errorSince && (
246-
<span className="text-[10px] font-mono text-danger">{client.lastError}</span>
246+
<span className="text-3xs font-mono text-danger">{client.lastError}</span>
247247
)}
248248
</div>
249249
</div>

‎src/components/NotificationTargets.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ function NotificationCard({ target, onSaved, onRemove }: NotificationCardProps)
243243
{typeBadge}
244244
{statusBadge}
245245
</div>
246-
<span className="text-[10px] font-mono text-tertiary">
246+
<span className="text-3xs font-mono text-tertiary">
247247
{target.lastDeliveryAt
248248
? `Last sent: ${formatTimeAgo(target.lastDeliveryAt)}`
249249
: "Last sent: Never"}
@@ -290,7 +290,7 @@ function NotificationCard({ target, onSaved, onRemove }: NotificationCardProps)
290290
content="Encrypted at rest with AES-256-GCM. Never returned in API responses."
291291
docs={DOCS.WEBHOOKS}
292292
>
293-
<span className="text-tertiary cursor-help text-[10px]">?</span>
293+
<span className="text-tertiary cursor-help text-3xs">?</span>
294294
</Tooltip>
295295
</span>
296296
{changingConfig ? (
@@ -344,7 +344,7 @@ function NotificationCard({ target, onSaved, onRemove }: NotificationCardProps)
344344
content="Each event has a snooze window to prevent repeated alerts."
345345
docs={DOCS.WEBHOOKS}
346346
>
347-
<span className="text-tertiary cursor-help text-[10px]">?</span>
347+
<span className="text-tertiary cursor-help text-3xs">?</span>
348348
</Tooltip>
349349
</span>
350350

‎src/components/TrackerHubStatus.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ function TrackerHubStatus({
211211
height={12}
212212
aria-hidden="true"
213213
/>
214-
<span className="text-[10px] font-mono">Powered by TrackerHub</span>
214+
<span className="text-3xs font-mono">Powered by TrackerHub</span>
215215
</a>
216216
</div>
217217
</div>

‎src/components/charts/BufferCandlestickChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ function buildCandlestickOption(
219219
})
220220
.join("")
221221

222-
return `<div style="font-family:${CHART_THEME.fontMono};font-size:11px;">${header}${rows}</div>`
222+
return `<div style="font-family:${CHART_THEME.fontMono};font-size:${CHART_THEME.fontSizeDense}px;">${header}${rows}</div>`
223223
},
224224
}),
225225
xAxis: buildTimeXAxis({ boundaryGap: true }),
@@ -230,7 +230,7 @@ function buildCandlestickOption(
230230
nameTextStyle: {
231231
color: CHART_THEME.textTertiary,
232232
fontFamily: CHART_THEME.fontMono,
233-
fontSize: 10,
233+
fontSize: CHART_THEME.fontSizeCompact,
234234
},
235235
axisLine: { show: false },
236236
axisTick: { show: false },

‎src/components/charts/BufferVelocityChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ function buildBufferVelocityOption(
215215
position: "insideEndTop",
216216
color: CHART_THEME.warn,
217217
fontFamily: CHART_THEME.fontMono,
218-
fontSize: 10,
218+
fontSize: CHART_THEME.fontSizeCompact,
219219
},
220220
lineStyle: {
221221
color: CHART_THEME.warn,
@@ -272,7 +272,7 @@ function buildBufferVelocityOption(
272272
nameTextStyle: {
273273
color: CHART_THEME.textTertiary,
274274
fontFamily: CHART_THEME.fontMono,
275-
fontSize: 10,
275+
fontSize: CHART_THEME.fontSizeCompact,
276276
},
277277
axisLine: { show: false },
278278
axisTick: { show: false },

‎src/components/charts/ComparisonChart.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ function buildComparisonOption(
276276
nameTextStyle: {
277277
color: CHART_THEME.textTertiary,
278278
fontFamily: CHART_THEME.fontMono,
279-
fontSize: 10,
279+
fontSize: CHART_THEME.fontSizeCompact,
280280
},
281281
axisLine: { show: false },
282282
axisTick: { show: false },
@@ -374,7 +374,7 @@ function ComparisonChart({
374374
<button
375375
type="button"
376376
onClick={() => setAverageMode((v) => !v)}
377-
className="nm-raised-sm bg-raised px-2.5 py-1 text-[10px] font-mono text-muted hover:text-secondary active:nm-inset-sm active:scale-[0.97] transition-all duration-150 cursor-pointer flex items-center gap-1.5 rounded-nm-sm"
377+
className="nm-raised-sm bg-raised px-2.5 py-1 text-3xs font-mono text-muted hover:text-secondary active:nm-inset-sm active:scale-[0.97] transition-all duration-150 cursor-pointer flex items-center gap-1.5 rounded-nm-sm"
378378
>
379379
{averageMode ? "Avg" : "Per-Tracker"}
380380
</button>

‎src/components/charts/CrossSeedNetwork.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ function buildNetworkData(
9797
label: {
9898
show: true,
9999
color: CHART_THEME.textSecondary,
100-
fontSize: 11,
100+
fontSize: CHART_THEME.fontSizeDense,
101101
fontFamily: CHART_THEME.fontMono,
102102
},
103103
})

‎src/components/charts/DailyVolumeChart.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ function buildDailyVolumeOption(trackerData: TrackerSnapshotSeries[]): EChartsOp
176176
nameTextStyle: {
177177
color: CHART_THEME.textTertiary,
178178
fontFamily: CHART_THEME.fontMono,
179-
fontSize: 10,
179+
fontSize: CHART_THEME.fontSizeCompact,
180180
},
181181
axisLine: { show: false },
182182
axisTick: { show: false },
@@ -281,7 +281,7 @@ function buildRiverOption(trackerData: TrackerSnapshotSeries[]): EChartsOption {
281281
show: true,
282282
color: CHART_THEME.textSecondary,
283283
fontFamily: CHART_THEME.fontMono,
284-
fontSize: 10,
284+
fontSize: CHART_THEME.fontSizeCompact,
285285
},
286286
emphasis: {
287287
itemStyle: {
@@ -361,7 +361,7 @@ function buildAreaOption(trackerData: TrackerSnapshotSeries[]): EChartsOption {
361361
nameTextStyle: {
362362
color: CHART_THEME.textTertiary,
363363
fontFamily: CHART_THEME.fontMono,
364-
fontSize: 10,
364+
fontSize: CHART_THEME.fontSizeCompact,
365365
},
366366
axisLine: { show: false },
367367
axisTick: { show: false },
@@ -441,7 +441,7 @@ function buildSumsOption(trackerData: TrackerSnapshotSeries[]): EChartsOption {
441441
nameTextStyle: {
442442
color: CHART_THEME.textTertiary,
443443
fontFamily: CHART_THEME.fontMono,
444-
fontSize: 10,
444+
fontSize: CHART_THEME.fontSizeCompact,
445445
},
446446
axisLine: { show: false },
447447
axisTick: { show: false },

0 commit comments

Comments
 (0)