tksadik92/wrenn-releases
1
0
Fork 0
forked from wrenn/wrenn
Code Pull Requests Activity

Normalize usage page layout and clarify copy

Browse Source 
Separate summary cards with proper surface hierarchy, add staggered
entrance animations, tighten padding, and rewrite labels/descriptions
to be specific and actionable rather than generic.
This commit is contained in:
Rafeed M. Bhuiyan
2026-04-18 14:46:01 +06:00
parent 92aab09104
commit 003453fa3c
1 changed files with 50 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/routes/dashboard/usage/+page.svelte
View File

@ -296,7 +296,7 @@
Usage Usage
</h1> </h1>
<p class="mt-2 text-ui text-[var(--color-text-secondary)]"> <p class="mt-2 text-ui text-[var(--color-text-secondary)]">
Resource consumption and execution metrics across your team. CPU and memory consumed by your capsules, aggregated daily.
</p> </p>
<div class="mt-6 border-b border-[var(--color-border)]"></div> <div class="mt-6 border-b border-[var(--color-border)]"></div>
</div> </div>
@ -307,30 +307,33 @@
<!-- Controls row --> <!-- Controls row -->
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<!-- Preset range selector --> <!-- Preset range selector -->
<div class="flex overflow-hidden rounded-[var(--radius-button)] border border-[var(--color-border)]"> <div class="flex items-center gap-3">
{#each PRESETS as p, i} <span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Period</span>
<button <div class="flex overflow-hidden rounded-[var(--radius-button)] border border-[var(--color-border)]">
onclick={() => applyPreset(p)} {#each PRESETS as p, i}
class="px-3 py-1.5 font-mono text-label transition-colors duration-150 <button
{preset === p onclick={() => applyPreset(p)}
? 'bg-[var(--color-bg-5)] text-[var(--color-text-bright)]' class="px-3 py-1.5 font-mono text-label transition-colors duration-150
: 'text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-secondary)]'} {preset === p
{i > 0 ? 'border-l border-[var(--color-border)]' : ''}" ? 'bg-[var(--color-bg-5)] text-[var(--color-text-bright)]'
> : 'text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-3)] hover:text-[var(--color-text-secondary)]'}
{p} {i > 0 ? 'border-l border-[var(--color-border)]' : ''}"
</button> >
{/each} {p}
</button>
{/each}
</div>
</div> </div>
<!-- Date inputs --> <!-- Date inputs -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2.5">
<input <input
type="date" type="date"
bind:value={fromInput} bind:value={fromInput}
onchange={onDateChange} onchange={onDateChange}
class="rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2.5 py-1.5 font-mono text-label text-[var(--color-text-secondary)] transition-colors duration-150 focus:border-[var(--color-accent)] focus:outline-none" class="rounded-[var(--radius-input)] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2.5 py-1.5 font-mono text-label text-[var(--color-text-secondary)] transition-colors duration-150 focus:border-[var(--color-accent)] focus:outline-none"
/> />
<span class="text-meta text-[var(--color-text-muted)]">to</span> <span class="text-meta text-[var(--color-text-tertiary)]">to</span>
<input <input
type="date" type="date"
bind:value={toInput} bind:value={toInput}
@ -359,7 +362,7 @@
<svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 1 1-6.219-8.56" /> <path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg> </svg>
Loading usage data... Loading usage data…
</div> </div>
</div> </div>
{:else if data && data.points.length === 0} {:else if data && data.points.length === 0}
@ -376,44 +379,44 @@
</div> </div>
</div> </div>
<p class="font-serif text-heading text-[var(--color-text-bright)]"> <p class="font-serif text-heading text-[var(--color-text-bright)]">
No usage data yet No usage recorded
</p> </p>
<p class="mt-1.5 text-ui text-[var(--color-text-tertiary)]"> <p class="mt-1.5 text-ui text-[var(--color-text-tertiary)]">
Usage will appear here once capsules have been running. Metrics appear here once you run a capsule. Create one to get started.
</p> </p>
</div> </div>
{:else if data} {:else if data}
<!-- Summary cards --> <!-- Summary cards -->
<div class="mt-6 grid grid-cols-2 overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]"> <div class="mt-6 grid grid-cols-2 gap-4">
<!-- CPU-minutes total --> <!-- CPU total -->
<div class="border-r border-[var(--color-border)]" style="box-shadow: inset 5px 0 0 #5a9fd4"> <div class="overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]" style="box-shadow: inset 3px 0 0 #5a9fd4; animation: fadeUp 0.35s ease both; animation-delay: 40ms">
<div class="flex items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-bg-3)] px-6 py-3"> <div class="flex items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-bg-3)] px-5 py-2.5">
<span class="h-2 w-2 rounded-full" style="background: #5a9fd4"></span> <span class="h-1.5 w-1.5 rounded-full" style="background: #5a9fd4"></span>
<span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Total CPU-Minutes</span> <span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">CPU time</span>
</div> </div>
<div class="bg-[var(--color-bg-3)] px-6 py-6 transition-colors duration-150 hover:bg-[var(--color-bg-4)]"> <div class="bg-[var(--color-bg-2)] px-5 py-5 transition-colors duration-150 hover:bg-[var(--color-bg-3)]">
<div class="font-serif text-[2.571rem] leading-none tracking-[-0.04em] text-[var(--color-text-bright)]"> <div class="font-serif text-display leading-none tracking-[-0.04em] text-[var(--color-text-bright)]">
{fmtNumber(totalCpuMinutes)} {fmtNumber(totalCpuMinutes)}
</div> </div>
<div class="mt-2 font-mono text-meta text-[var(--color-text-muted)]"> <div class="mt-1.5 font-mono text-meta text-[var(--color-text-tertiary)]">
{fromInput} — {toInput} minutes
</div> </div>
</div> </div>
</div> </div>
<!-- RAM GB-minutes total --> <!-- RAM total -->
<div style="box-shadow: inset 5px 0 0 #d4a73c"> <div class="overflow-hidden rounded-[var(--radius-card)] border border-[var(--color-border)]" style="box-shadow: inset 3px 0 0 #d4a73c; animation: fadeUp 0.35s ease both; animation-delay: 80ms">
<div class="flex items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-bg-3)] px-6 py-3"> <div class="flex items-center gap-2 border-b border-[var(--color-border)] bg-[var(--color-bg-3)] px-5 py-2.5">
<span class="h-2 w-2 rounded-full" style="background: #d4a73c"></span> <span class="h-1.5 w-1.5 rounded-full" style="background: #d4a73c"></span>
<span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Total RAM GB-Minutes</span> <span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Memory</span>
</div> </div>
<div class="bg-[var(--color-bg-3)] px-6 py-6 transition-colors duration-150 hover:bg-[var(--color-bg-4)]"> <div class="bg-[var(--color-bg-2)] px-5 py-5 transition-colors duration-150 hover:bg-[var(--color-bg-3)]">
<div class="font-serif text-[2.571rem] leading-none tracking-[-0.04em] text-[var(--color-text-bright)]"> <div class="font-serif text-display leading-none tracking-[-0.04em] text-[var(--color-text-bright)]">
{fmtNumber(totalRamGBMinutes)} {fmtNumber(totalRamGBMinutes)}
</div> </div>
<div class="mt-2 font-mono text-meta text-[var(--color-text-muted)]"> <div class="mt-1.5 font-mono text-meta text-[var(--color-text-tertiary)]">
{fromInput} — {toInput} GB-minutes
</div> </div>
</div> </div>
</div> </div>
@ -421,14 +424,14 @@
</div> </div>
<!-- Charts --> <!-- Charts -->
<div class="mt-6 flex flex-col gap-5"> <div class="mt-6 flex flex-col gap-6">
<!-- CPU chart --> <!-- CPU chart -->
<div class="flex flex-col rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-bg-2)]"> <div class="flex flex-col rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-bg-2)]" style="animation: fadeUp 0.35s ease both; animation-delay: 120ms">
<div class="border-b border-[var(--color-border)] px-6 py-4"> <div class="border-b border-[var(--color-border)] px-5 py-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full" style="background: #5a9fd4"></span> <span class="h-1.5 w-1.5 rounded-full" style="background: #5a9fd4"></span>
<span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">CPU · Minutes</span> <span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">CPU minutes per day</span>
</div> </div>
</div> </div>
<div class="relative flex-1 px-5 pb-5 pt-3" style="min-height: 260px"> <div class="relative flex-1 px-5 pb-5 pt-3" style="min-height: 260px">
@ -437,11 +440,11 @@
</div> </div>
<!-- RAM chart --> <!-- RAM chart -->
<div class="flex flex-col rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-bg-2)]"> <div class="flex flex-col rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-bg-2)]" style="animation: fadeUp 0.35s ease both; animation-delay: 160ms">
<div class="border-b border-[var(--color-border)] px-6 py-4"> <div class="border-b border-[var(--color-border)] px-5 py-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full" style="background: #d4a73c"></span> <span class="h-1.5 w-1.5 rounded-full" style="background: #d4a73c"></span>
<span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">RAM · GB-Minutes</span> <span class="text-label font-semibold uppercase tracking-[0.06em] text-[var(--color-text-tertiary)]">Memory GB-minutes per day</span>
</div> </div>
</div> </div>
<div class="relative flex-1 px-5 pb-5 pt-3" style="min-height: 260px"> <div class="relative flex-1 px-5 pb-5 pt-3" style="min-height: 260px">