From 7c03fa4134ebacb28ade21e34fbcb4f03aae517f Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 31 Jul 2026 16:20:04 +0200
Subject: [PATCH] web/components/repo: improve repo overview look

---
 web/src/lib/components/repo/BranchList.svelte  |  4 ++--
 web/src/lib/components/repo/CommitList.svelte  |  6 +++---
 web/src/lib/components/repo/FileTree.svelte    |  4 +++-
 web/src/lib/components/repo/PanelHeader.svelte |  2 +-
 web/src/lib/components/repo/TagList.svelte     | 10 +++++-----
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/repo/BranchList.svelte b/web/src/lib/components/repo/BranchList.svelte
index dd3f70c8..73e597a0 100644
--- a/web/src/lib/components/repo/BranchList.svelte
+++ b/web/src/lib/components/repo/BranchList.svelte
@@ -20,7 +20,7 @@
 
 <div class="flex flex-col gap-1">
 	{#each branches as branch (branch.name)}
-		<div class="flex items-center justify-between overflow-hidden typography-paragraph-large">
+		<div class="flex items-center justify-between overflow-hidden">
 			<div class="flex min-w-0 flex-1 items-center gap-2">
 				<a
 					href={resolve(`${base}/tree/${encodeURIComponent(branch.name)}` as "/")}
@@ -34,7 +34,7 @@
 					>
 					<TimeAgo
 						value={branch.when}
-						class="shrink-0 typography-paragraph-regular whitespace-nowrap text-foreground-subtle"
+						class="shrink-0 typography-paragraph-small whitespace-nowrap text-foreground-muted"
 					/>
 				{/if}
 				{#if branch.isDefault}
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index 0013a824..c3c755ef 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -24,7 +24,7 @@
 			<div class="flex items-start gap-1">
 				<a
 					href={resolve(`${base}/commit/${commit.hash}` as "/")}
-					class="typography-paragraph-large text-foreground-default no-underline hover:underline"
+					class="no-underline hover:underline"
 				>
 					{commit.subject}
 				</a>
@@ -46,12 +46,12 @@
 			{/if}
 
 			<div
-				class="mt-2 flex flex-wrap items-center gap-2 typography-paragraph-regular text-foreground-subtle"
+				class="mt-2 flex flex-wrap items-center gap-2 typography-paragraph-small text-foreground-muted"
 			>
 				<a
 					href={resolve(`${base}/commit/${commit.hash}` as "/")}
 					title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
-					class="rounded-sm bg-background-inset px-2 py-0.5 font-mono text-foreground-muted no-underline hover:underline"
+					class="rounded-sm bg-background-inset px-2 py-0.5 typography-monospace-small text-foreground-default no-underline hover:underline"
 				>
 					{commit.shortHash}
 				</a>
diff --git a/web/src/lib/components/repo/FileTree.svelte b/web/src/lib/components/repo/FileTree.svelte
index bb03d79d..cb6171c4 100644
--- a/web/src/lib/components/repo/FileTree.svelte
+++ b/web/src/lib/components/repo/FileTree.svelte
@@ -58,7 +58,9 @@
 					withMessage ? "col-span-8 md:col-span-4" : "col-span-2"
 				}`}
 			>
-				<Glyph class={iconClassFor(entry)} aria-hidden="true" />
+				<span class="text-foreground-muted">
+					<Glyph class={iconClassFor(entry)} aria-hidden="true" />
+				</span>
 				<span class="truncate">{entry.name}</span>
 			</a>
 
diff --git a/web/src/lib/components/repo/PanelHeader.svelte b/web/src/lib/components/repo/PanelHeader.svelte
index b4c1d71d..84bf05cc 100644
--- a/web/src/lib/components/repo/PanelHeader.svelte
+++ b/web/src/lib/components/repo/PanelHeader.svelte
@@ -22,7 +22,7 @@
 	<Glyph class="size-4 shrink-0" aria-hidden="true" />
 	{title}
 	{#if count !== undefined}
-		<span class="rounded-sm bg-background-inset px-1 text-sm font-normal">
+		<span class="rounded-sm bg-background-inset px-1 mt-px typography-paragraph-small">
 			{approximate && count > 0 ? `${count}+` : count}
 		</span>
 	{/if}
diff --git a/web/src/lib/components/repo/TagList.svelte b/web/src/lib/components/repo/TagList.svelte
index 8ba5928a..27ed4c62 100644
--- a/web/src/lib/components/repo/TagList.svelte
+++ b/web/src/lib/components/repo/TagList.svelte
@@ -15,23 +15,23 @@
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 </script>
 
-<div class="flex flex-col gap-1">
+<div class="flex flex-col gap-3 py-1">
 	{#each tags as tag, index (tag.name)}
 		<div>
-			<div class="flex items-center gap-2 typography-paragraph-large">
+			<div class="flex items-center">
 				<a
 					href={resolve(`${base}/tags/${encodeURIComponent(tag.name)}` as "/")}
-					class="truncate text-foreground-default no-underline hover:underline"
+					class="truncate no-underline hover:underline"
 				>
 					{tag.name}
 				</a>
 			</div>
 			<div class="flex items-center gap-2">
 				{#if tag.when}
-					<TimeAgo value={tag.when} class="typography-paragraph-regular text-foreground-subtle" />
+					<TimeAgo value={tag.when} class="typography-paragraph-regular text-foreground-muted" />
 				{/if}
 				{#if index === 0}
-					<Tag color="gray" class="font-mono">Latest</Tag>
+					<Tag color="gray" class="typography-monospace-regular">Latest</Tag>
 				{/if}
 			</div>
 		</div>
-- 
2.51.2