appview/pages/templates/repo/pulls: improve current round styling and contrast #1221

Update the styling for pull request rounds cards to provide better 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

the changes in light mode

the changes in dark mode

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

+36 -13

1 changed file

Diff round #3

expand all

appview

pages

templates

repo

pulls

pull.html

+36 -13

appview/pages/templates/repo/pulls/pull.html

··· 119 119 {{ $id := index . 0 }} 120 120 {{ $target := index . 1 }} 121 121 {{ $direction := index . 2 }} 122 - <div id="{{ $id }}" 122 + <div id="{{ $id }}" 123 123 data-resizer="vertical" 124 124 data-target="{{ $target }}" 125 125 data-direction="{{ $direction }}" ··· 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"> 321 - {{ $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> 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"> 326 + {{ $handle := resolve $root.Pull.OwnerDid }} 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>

History

4 rounds 5 comments

eti.tf submitted #3 3d

interdiff

1 commit

expand

ba3a36ba

appview/pages/templates/repo/pulls: improve round styling and contrast

merge conflicts detected

expand

appview/pages/templates/repo/pulls/pull.html:119

expand 2 comments

eti.tf 3d

@oppi.li squashed!

oppi.li 4hrs

lgtm barring merge conflicts! please do rebase when you do fixup the conflicts!

eti.tf submitted #2 3d

diff interdiff

2 commits

expand

86c9d0d1

appview/pages/templates/repo/pulls: improve round styling and contrast

c3e50e12

appview/pages/templates/repo/pulls: fix non-current round card bg color regression & add back missing hunk

expand 0 comments

eti.tf submitted #1 3d

diff interdiff

2 commits

expand

67bd0f03

appview/pages/templates/repo/pulls: improve round styling and contrast

9fa0f667

appview/pages/templates/repo/pulls: fix non-current round card bg color regression & add back missing hunk

expand 1 comment

oppi.li 3d

thanks! can you squash and rebase?

eti.tf submitted #0 3d

diff

1 commit

expand

67bd0f03

appview/pages/templates/repo/pulls: improve round styling and contrast

expand 2 comments

oppi.li 3d

largely lgtm!

appview/pages/templates/repo/pulls/pull.html:103-105: why was this hunk removed?

eti.tf 3d

oops, that wasn't supposed to happen. let me add it back.

i also noticed a regression with how non-selected rounds look. i'll resubmit soon w a fix