A vibe coded tangled fork which supports pijul.
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>
authored by
eti
and committed by
tangled.org
6fda67fc
3c5102da
+36
-13
+36
-13
appview/pages/templates/repo/pulls/pull.html
+36
-13
appview/pages/templates/repo/pulls/pull.html
···
269
269
{{ $root := index . 3 }}
270
270
{{ $round := $item.RoundNumber }}
271
271
<div class="
272
-
w-full shadow-sm bg-gray-50 dark:bg-gray-900 border border-t-0
272
+
w-full shadow-sm border overflow-clip
273
+
273
274
{{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }}
274
275
{{ if eq $round $root.ActiveRound }}
275
-
border-blue-200 dark:border-blue-700
276
+
bg-blue-50/25 dark:bg-blue-900/10 border-blue-200 dark:border-blue-900
276
277
{{ else }}
277
-
border-gray-200 dark:border-gray-700
278
+
bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700
278
279
{{ end }}
279
280
">
280
281
{{ template "submissionHeader" $ }}
···
290
291
<div class="
291
292
{{ if ne $round 0 }}rounded-t{{ end }}
292
293
px-6 py-4 pr-2 pt-2
293
-
bg-white dark:bg-gray-800
294
-
295
294
{{ if eq $round $root.ActiveRound }}
296
-
border-t border-t-blue-200 dark:border-t-blue-700
295
+
bg-blue-50 dark:bg-blue-950
297
296
{{ else }}
298
-
border-t border-t-gray-200 dark:border-t-gray-700
297
+
bg-white dark:bg-gray-800
299
298
{{ end }}
300
299
301
300
flex gap-2 sticky top-0 z-20">
···
321
320
{{ $root := index . 3 }}
322
321
{{ $round := $item.RoundNumber }}
323
322
<div class="flex gap-2 items-center justify-between mb-1">
324
-
<span class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2">
323
+
<span class="inline-flex items-center gap-2 text-sm
324
+
{{ if eq $round $root.ActiveRound }}
325
+
text-gray-600 dark:text-gray-300
326
+
{{ else }}
327
+
text-gray-500 dark:text-gray-400
328
+
{{ end }}
329
+
pt-2">
325
330
{{ $handle := resolve $root.Pull.OwnerDid }}
326
-
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
331
+
<a class="
332
+
{{ if eq $round $root.ActiveRound }}
333
+
text-gray-800 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200
334
+
{{ else }}
335
+
text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300
336
+
{{ end }}
337
+
" href="/{{ $handle }}">{{ $handle }}</a>
327
338
submitted
328
-
<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">
339
+
<span class="px-2 py-0.5 rounded font-mono text-xs border
340
+
{{ if eq $round $root.ActiveRound }}
341
+
text-blue-800 dark:text-white bg-blue-100 dark:bg-blue-600 border-blue-200 dark:border-blue-500
342
+
{{ else }}
343
+
text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600
344
+
{{ end }}
345
+
">
329
346
#{{ $round }}
330
347
</span>
331
348
<span class="select-none before:content-['\00B7']"></span>
332
-
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500" href="#round-#{{ $round }}">
349
+
<a class="
350
+
{{ if eq $round $root.ActiveRound }}
351
+
text-gray-600 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-200
352
+
{{ else }}
353
+
text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300
354
+
{{ end }}
355
+
" href="#round-#{{ $round }}">
333
356
{{ template "repo/fragments/shortTime" $item.Created }}
334
357
</a>
335
358
</span>
···
573
596
{{ end }}
574
597
</div>
575
598
{{ if gt $c 0}}
576
-
<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">
577
-
{{ i "circle-chevron-up" "size-4 z-5" }} collapse comment{{ if ne $c 1 }}s{{ end }}
599
+
<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">
600
+
<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 }}
578
601
</button>
579
602
{{ end }}
580
603