From 6fda67fc884f8e7faf4433073ac613b79b73a5d4 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Mon, 30 Mar 2026 16:35:37 +0200
Subject: [PATCH] appview/pages/templates/repo/pulls: improve round styling and
 contrast

Update the visual styling for pull request rounds to provide better
visual distinction between active and inactive rounds. Changes include:
- Better background colors for active rounds (blue tint)
- Improved text contrast in both light and dark modes
- Consistent border handling and overflow clipping

Signed-off-by: eti <eti@eti.tf>

appview/pages/templates/repo/pulls: fix collapse comments background color in dark mode

Signed-off-by: eti <eti@eti.tf>
---
 appview/pages/templates/repo/pulls/pull.html | 49 ++++++++++++++------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html
index 003eaded..cef864bb 100644
--- a/appview/pages/templates/repo/pulls/pull.html
+++ b/appview/pages/templates/repo/pulls/pull.html
@@ -269,12 +269,13 @@
   {{ $root := index . 3 }}
   {{ $round := $item.RoundNumber }}
   <div class="
-    w-full shadow-sm bg-gray-50 dark:bg-gray-900 border border-t-0
+    w-full shadow-sm  border overflow-clip
+
     {{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }}
     {{ if eq $round $root.ActiveRound }}
-      border-blue-200 dark:border-blue-700
+       bg-blue-50/25 dark:bg-blue-900/10 border-blue-200 dark:border-blue-900
     {{ else }}
-      border-gray-200 dark:border-gray-700
+       bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700
     {{ end }}
     ">
     {{ template "submissionHeader" $ }}
@@ -290,12 +291,10 @@
   <div class="
     {{ if ne $round 0 }}rounded-t{{ end }}
     px-6 py-4 pr-2 pt-2
-    bg-white dark:bg-gray-800
-
     {{ if eq $round $root.ActiveRound }}
-       border-t border-t-blue-200 dark:border-t-blue-700
+      bg-blue-50 dark:bg-blue-950
     {{ else }}
-       border-t border-t-gray-200 dark:border-t-gray-700
+      bg-white dark:bg-gray-800
     {{ end }}
 
     flex gap-2 sticky top-0 z-20">
@@ -321,15 +320,39 @@
   {{ $root := index . 3 }}
   {{ $round := $item.RoundNumber }}
   <div class="flex gap-2 items-center justify-between mb-1">
-    <span class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2">
+<span class="inline-flex items-center gap-2 text-sm
+      {{ if eq $round $root.ActiveRound }}
+      text-gray-600 dark:text-gray-300
+      {{ else }}
+      text-gray-500 dark:text-gray-400
+      {{ end }}
+      pt-2">
       {{ $handle := resolve $root.Pull.OwnerDid }}
-      <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
+      <a class="
+        {{ if eq $round $root.ActiveRound }}
+          text-gray-800 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200
+        {{ else }}
+          text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300
+        {{ end }}
+        " href="/{{ $handle }}">{{ $handle }}</a>
       submitted
-      <span class="px-2 py-0.5 text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded font-mono text-xs border">
+      <span class="px-2 py-0.5 rounded font-mono text-xs border
+        {{ if eq $round $root.ActiveRound }}
+          text-blue-800 dark:text-white bg-blue-100 dark:bg-blue-600 border-blue-200 dark:border-blue-500
+        {{ else }}
+          text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600
+        {{ end }}
+        ">
         #{{ $round }}
       </span>
       <span class="select-none before:content-['\00B7']"></span>
-      <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500" href="#round-#{{ $round }}">
+      <a class="
+        {{ if eq $round $root.ActiveRound }}
+        text-gray-600 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-200
+        {{ else }}
+        text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300
+        {{ end }}
+        " href="#round-#{{ $round }}">
         {{ template "repo/fragments/shortTime" $item.Created }}
       </a>
     </span>
@@ -573,8 +596,8 @@
       {{ end }}
     </div>
     {{ if gt $c 0}}
-      <button class="flex items-center gap-2 -ml-2 relative cursor-pointer text-sm text-gray-500 dark:text-gray-400 group-hover/collapse:text-gray-600 dark:group-hover/collapse:text-gray-300 bg-gray-50 mt-4 pb-4 transition-colors" hx-on:click="this.closest('details').open = false">
-        {{ i "circle-chevron-up" "size-4 z-5" }} collapse comment{{ if ne $c 1 }}s{{ end }}
+      <button class="flex items-center gap-2 -ml-2 relative cursor-pointer text-sm text-gray-500 dark:text-gray-400 group-hover/collapse:text-gray-600 dark:group-hover/collapse:text-gray-300 mt-4 pb-4 transition-colors" hx-on:click="this.closest('details').open = false">
+        <span class="bg-gray-50 dark:bg-slate-900 dark:rounded-full">{{ i "circle-chevron-up" "size-4 z-5" }}</span> collapse comment{{ if ne $c 1 }}s{{ end }}
       </button>
     {{ end }}
 
-- 
2.51.2