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

Normalize dashboard page headers: add divider line and align button layout

Browse Source 
Add consistent mt-6 border-b divider to Capsules, Metrics, and Templates
headers. Align Channels header to match Keys page pattern (items-center,
description inside the title group).
This commit is contained in:
Rafeed M. Bhuiyan
2026-04-13 04:59:40 +06:00
parent bbdb44afee
commit d828a6be08
4 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/routes/dashboard/capsules/+layout.svelte
View File

@ -44,7 +44,7 @@
</div> </div>
{:else} {:else}
<!-- Default list header --> <!-- Default list header -->
<div class="px-7 pt-8 pb-6"> <div class="px-7 pt-8">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]"> <h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]">
@ -70,6 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mt-6 border-b border-[var(--color-border)]"></div>
</div> </div>
{/if} {/if}

12
frontend/src/routes/dashboard/channels/+page.svelte
View File

@ -352,7 +352,8 @@
<main class="flex-1 overflow-y-auto bg-[var(--color-bg-0)]"> <main class="flex-1 overflow-y-auto bg-[var(--color-bg-0)]">
<!-- Header --> <!-- Header -->
<div class="px-7 pt-8"> <div class="px-7 pt-8">
<div class="flex items-start justify-between"> <div class="flex items-center justify-between">
<div>
<div class="flex items-baseline gap-4"> <div class="flex items-baseline gap-4">
<h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]"> <h1 class="font-serif text-page tracking-[-0.02em] text-[var(--color-text-bright)]">
Channels Channels
@ -361,6 +362,10 @@
<span class="font-serif text-[1.75rem] tracking-[-0.03em] text-[var(--color-text-muted)]">{channels.length}</span> <span class="font-serif text-[1.75rem] tracking-[-0.03em] text-[var(--color-text-muted)]">{channels.length}</span>
{/if} {/if}
</div> </div>
<p class="mt-2 text-ui text-[var(--color-text-secondary)]">
Route capsule events to Discord, Slack, Telegram, and other destinations.
</p>
</div>
<button <button
onclick={() => { showCreate = true; resetCreateForm(); }} onclick={() => { showCreate = true; resetCreateForm(); }}
@ -372,11 +377,8 @@
New Channel New Channel
</button> </button>
</div> </div>
<p class="mt-2 text-ui text-[var(--color-text-secondary)]">
Route capsule events to Discord, Slack, Telegram, and other destinations.
</p>
<div class="mt-5 border-b border-[var(--color-border)]"></div> <div class="mt-6 border-b border-[var(--color-border)]"></div>
</div> </div>
<!-- Content --> <!-- Content -->

2
frontend/src/routes/dashboard/metrics/+page.svelte
View File

@ -29,6 +29,8 @@
<p class="mt-2 text-ui text-[var(--color-text-secondary)]"> <p class="mt-2 text-ui text-[var(--color-text-secondary)]">
Resource usage and performance across all capsules. Resource usage and performance across all capsules.
</p> </p>
<div class="mt-6 border-b border-[var(--color-border)]"></div>
</div> </div>
<StatsPanel <StatsPanel

2
frontend/src/routes/dashboard/templates/+page.svelte
View File

@ -175,7 +175,7 @@
</div> </div>
<!-- Page-level tabs --> <!-- Page-level tabs -->
<div class="mt-5 flex gap-0 border-b border-[var(--color-border)]"> <div class="mt-6 flex gap-0 border-b border-[var(--color-border)]">
<!-- Snapshots tab (active) --> <!-- Snapshots tab (active) -->
<button <button
onclick={() => (pageTab = 'snapshots')} onclick={() => (pageTab = 'snapshots')}