forked from
tangled.org/core
Monorepo for Tangled
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>
+36
-13
+36
-13
appview/pages/templates/repo/pulls/pull.html
+36
-13
appview/pages/templates/repo/pulls/pull.html
···
265
265
{{ $root := index . 3 }}
266
266
{{ $round := $item.RoundNumber }}
267
267
<div class="
268
-
w-full shadow-sm bg-gray-50 dark:bg-gray-900 border border-t-0
268
+
w-full shadow-sm border overflow-clip
269
+
269
270
{{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }}
270
271
{{ if eq $round $root.ActiveRound }}
271
-
border-blue-200 dark:border-blue-700
272
+
bg-blue-50/25 dark:bg-blue-900/10 border-blue-200 dark:border-blue-900
272
273
{{ else }}
273
-
border-gray-200 dark:border-gray-700
274
+
bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700
274
275
{{ end }}
275
276
">
276
277
{{ template "submissionHeader" $ }}
···
286
287
<div class="
287
288
{{ if ne $round 0 }}rounded-t{{ end }}
288
289
px-6 py-4 pr-2 pt-2
289
-
bg-white dark:bg-gray-800
290
-
291
290
{{ if eq $round $root.ActiveRound }}
292
-
border-t border-t-blue-200 dark:border-t-blue-700
291
+
bg-blue-50 dark:bg-blue-950
293
292
{{ else }}
294
-
border-t border-t-gray-200 dark:border-t-gray-700
293
+
bg-white dark:bg-gray-800
295
294
{{ end }}
296
295
297
296
flex gap-2 sticky top-0 z-20">
···
317
316
{{ $root := index . 3 }}
318
317
{{ $round := $item.RoundNumber }}
319
318
<div class="flex gap-2 items-center justify-between mb-1">
320
-
<span class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2">
319
+
<span class="inline-flex items-center gap-2 text-sm
320
+
{{ if eq $round $root.ActiveRound }}
321
+
text-gray-600 dark:text-gray-300
322
+
{{ else }}
323
+
text-gray-500 dark:text-gray-400
324
+
{{ end }}
325
+
pt-2">
321
326
{{ $handle := resolve $root.Pull.OwnerDid }}
322
-
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
327
+
<a class="
328
+
{{ if eq $round $root.ActiveRound }}
329
+
text-gray-800 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200
330
+
{{ else }}
331
+
text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300
332
+
{{ end }}
333
+
" href="/{{ $handle }}">{{ $handle }}</a>
323
334
submitted
324
-
<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">
335
+
<span class="px-2 py-0.5 rounded font-mono text-xs border
336
+
{{ if eq $round $root.ActiveRound }}
337
+
text-blue-800 dark:text-white bg-blue-100 dark:bg-blue-600 border-blue-200 dark:border-blue-500
338
+
{{ else }}
339
+
text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600
340
+
{{ end }}
341
+
">
325
342
#{{ $round }}
326
343
</span>
327
344
<span class="select-none before:content-['\00B7']"></span>
328
-
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-500" href="#round-#{{ $round }}">
345
+
<a class="
346
+
{{ if eq $round $root.ActiveRound }}
347
+
text-gray-600 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-200
348
+
{{ else }}
349
+
text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300
350
+
{{ end }}
351
+
" href="#round-#{{ $round }}">
329
352
{{ template "repo/fragments/shortTime" $item.Created }}
330
353
</a>
331
354
</span>
···
569
592
{{ end }}
570
593
</div>
571
594
{{ if gt $c 0}}
572
-
<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">
573
-
{{ i "circle-chevron-up" "size-4 z-5" }} collapse comment{{ if ne $c 1 }}s{{ end }}
595
+
<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">
596
+
<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 }}
574
597
</button>
575
598
{{ end }}
576
599