tangled.org / core
Monorepo for Tangled tangled.org
fork atom

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

merged opened by eti.tf targeting master from eti.tf/core: eti/tan-355-current-round-selection-indicator

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

Labels

None yet.

assignee

None yet.

Participants 2
AT URI
at://did:plc:xu5apv6kmu5jp7g5hwdnej42/sh.tangled.repo.pull/3mhxwojrh3d22
+36 -16
Diff #0
+36 -16
appview/pages/templates/repo/pulls/pull.html
··· 100 100 101 101 {{ define "contentAfter" }} 102 102 <input type="hidden" id="round-link-base" value="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ .ActiveRound }}" /> 103 - {{ if .IsInterdiff }} 104 - <input type="hidden" id="is-interdiff" value="1" /> 105 - {{ end }} 106 103 {{ template "repo/fragments/diff" (list .Diff .DiffOpts $) }} 107 104 {{ end }} 108 105 ··· 119 116 {{ $id := index . 0 }} 120 117 {{ $target := index . 1 }} 121 118 {{ $direction := index . 2 }} 122 - <div id="{{ $id }}" 119 + <div id="{{ $id }}" 123 120 data-resizer="vertical" 124 121 data-target="{{ $target }}" 125 122 data-direction="{{ $direction }}" ··· 265 262 {{ $root := index . 3 }} 266 263 {{ $round := $item.RoundNumber }} 267 264 <div class=" 268 - w-full shadow-sm bg-gray-50 dark:bg-gray-900 border border-t-0 265 + w-full shadow-sm border overflow-clip 266 + 269 267 {{ if eq $round 0 }}rounded-b{{ else }}rounded{{ end }} 270 268 {{ if eq $round $root.ActiveRound }} 271 - border-blue-200 dark:border-blue-700 269 + bg-blue-50/25 dark:bg-blue-900/10 border-blue-200 dark:border-blue-900 272 270 {{ else }} 273 - border-gray-200 dark:border-gray-700 271 + bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 274 272 {{ end }} 275 273 "> 276 274 {{ template "submissionHeader" $ }} ··· 286 284 <div class=" 287 285 {{ if ne $round 0 }}rounded-t{{ end }} 288 286 px-6 py-4 pr-2 pt-2 289 - bg-white dark:bg-gray-800 290 - 291 287 {{ if eq $round $root.ActiveRound }} 292 - border-t border-t-blue-200 dark:border-t-blue-700 288 + bg-blue-50 dark:bg-blue-950 293 289 {{ else }} 294 - border-t border-t-gray-200 dark:border-t-gray-700 290 + bg-gray-50 dark:bg-gray-900 295 291 {{ end }} 296 292 297 293 flex gap-2 sticky top-0 z-20"> ··· 317 313 {{ $root := index . 3 }} 318 314 {{ $round := $item.RoundNumber }} 319 315 <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> 316 + <span class="inline-flex items-center gap-2 text-sm 317 + {{ if eq $round $root.ActiveRound }} 318 + text-gray-600 dark:text-gray-300 319 + {{ else }} 320 + text-gray-500 dark:text-gray-400 321 + {{ end }} 322 + pt-2"> 323 + {{ $handle := resolve $root.Pull.OwnerDid }} 324 + <a class=" 325 + {{ if eq $round $root.ActiveRound }} 326 + text-gray-800 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 327 + {{ else }} 328 + text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 329 + {{ end }} 330 + " href="/{{ $handle }}">{{ $handle }}</a> 323 331 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"> 332 + <span class="px-2 py-0.5 rounded font-mono text-xs border 333 + {{ if eq $round $root.ActiveRound }} 334 + text-blue-800 dark:text-white bg-blue-100 dark:bg-blue-600 border-blue-200 dark:border-blue-500 335 + {{ else }} 336 + text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 337 + {{ end }} 338 + "> 325 339 #{{ $round }} 326 340 </span> 327 341 <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 }}"> 342 + <a class=" 343 + {{ if eq $round $root.ActiveRound }} 344 + text-gray-600 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-200 345 + {{ else }} 346 + text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 347 + {{ end }} 348 + " href="#round-#{{ $round }}"> 329 349 {{ template "repo/fragments/shortTime" $item.Created }} 330 350 </a> 331 351 </span>

History

5 rounds 5 comments
sign up or login to add to the discussion
eti.tf submitted #4
diff interdiff
1 commit
expand
45309cd7
appview/pages/templates/repo/pulls: improve round styling and contrast
expand 0 comments
pull request successfully merged
eti.tf submitted #3
diff interdiff
1 commit
expand
ba3a36ba
appview/pages/templates/repo/pulls: improve round styling and contrast
expand 2 comments
eti.tf

@oppi.li squashed!

oppi.li

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

eti.tf submitted #2
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
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

thanks! can you squash and rebase?

eti.tf submitted #0
1 commit
expand
67bd0f03
appview/pages/templates/repo/pulls: improve round styling and contrast
expand 2 comments
oppi.li

largely lgtm!

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

eti.tf

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