daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix GitHub PR button display and refactor RepoCard styling (Vibe Kanban) (#1872)

Browse Source 
* Both issues have been fixed:

**1. Fixed translation parameter mismatch** (`RepoCard.tsx:170, 176`)
- Changed `{ prNumber }` to `{ number: prNumber }` to match the translation key `Open PR #{{number}}`

**2. Refactored PR badge styling** (`RepoCard.tsx:156-180`)
- Replaced hardcoded Tailwind colors with design system tokens:
  - Merged badge: `bg-panel text-success` (uses semantic success color)
  - Open PR button/badge: `bg-panel text-normal hover:bg-tertiary transition-colors`
- Updated spacing to use consistent tokens: `gap-half`, `px-base`, `py-half`
- Changed border radius from `rounded-full` to `rounded-sm` to match other UI elements in the panel

* Both fixes are complete:

1. **Added spacing** - Added `mt-half` to the PR status row container (line 158) to create visual separation from the Actions row below

2. **Made merged PRs clickable** - When `prStatus === 'merged'` and `prUrl` is available, it now renders a clickable `<button>` with:
   - The external link icon (`ArrowSquareOutIcon`)
   - Hover state (`hover:bg-tertiary`)
   - Same transition effect as the open PR button

* improve styles
This commit is contained in:
Louis Knight-Webb
2026-01-09 09:59:54 +00:00
committed by GitHub
parent 25e50a9b6d
commit 06862ab010
1 changed files with 40 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/ui-new/primitives/RepoCard.tsx
View File

@@ -94,7 +94,7 @@ export function RepoCard({
<div className="flex items-center justify-center">
<CrosshairIcon className="size-icon-sm text-low" weight="bold" />
</div>
<div className="flex-1 min-w-0">
<div className="flex-1 min-w-0 flex">
<DropdownMenu>
<DropdownMenuTriggerButton
label={targetBranch}
@@ -119,6 +119,24 @@ export function RepoCard({
)}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
className="flex items-center justify-center p-1.5 rounded hover:bg-tertiary text-low hover:text-base transition-colors"
title="Repo actions"
>
<ArrowSquareOutIcon className="size-icon-base" weight="bold" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem icon={CopyIcon} onClick={onCopyPath}>
{tCommon('actions.copyPath')}
</DropdownMenuItem>
<DropdownMenuItem icon={CodeIcon} onClick={onOpenInEditor}>
{tCommon('actions.openInIde')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
{/* Commits badge */}
@@ -155,56 +173,49 @@ export function RepoCard({
{/* PR status row */}
{prNumber && (
<div className="flex items-center gap-half">
<div className="flex items-center gap-half my-base">
{prStatus === 'merged' ? (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-100/70 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-sm font-medium">
<CheckCircleIcon className="size-icon-xs" weight="fill" />
{t('git.pr.merged', { prNumber })}
</span>
prUrl ? (
<button
onClick={() => window.open(prUrl, '_blank')}
className="inline-flex items-center gap-half px-base py-half rounded-sm bg-panel text-success hover:bg-tertiary text-sm font-medium transition-colors"
>
<CheckCircleIcon className="size-icon-xs" weight="fill" />
{t('git.pr.merged', { prNumber })}
<ArrowSquareOutIcon className="size-icon-xs" weight="bold" />
</button>
) : (
<span className="inline-flex items-center gap-half px-base py-half rounded-sm bg-panel text-success text-sm font-medium">
<CheckCircleIcon className="size-icon-xs" weight="fill" />
{t('git.pr.merged', { prNumber })}
</span>
)
) : prUrl ? (
<button
onClick={() => window.open(prUrl, '_blank')}
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-sky-100/60 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 hover:underline text-sm font-medium"
className="inline-flex items-center gap-half px-base py-half rounded-sm bg-panel text-normal hover:bg-tertiary text-sm font-medium transition-colors"
>
<GitPullRequestIcon className="size-icon-xs" weight="fill" />
{t('git.pr.open', { prNumber })}
{t('git.pr.open', { number: prNumber })}
<ArrowSquareOutIcon className="size-icon-xs" weight="bold" />
</button>
) : (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-sky-100/60 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 text-sm font-medium">
<span className="inline-flex items-center gap-half px-base py-half rounded-sm bg-panel text-normal text-sm font-medium">
<GitPullRequestIcon className="size-icon-xs" weight="fill" />
{t('git.pr.open', { prNumber })}
{t('git.pr.open', { number: prNumber })}
</span>
)}
</div>
)}
{/* Actions row */}
<div className="flex items-center gap-half">
<div className="my-base">
<SplitButton
options={repoActionOptions}
selectedValue={selectedAction}
onSelectionChange={setSelectedAction}
onAction={(action) => onActionsClick?.(action)}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
className="flex items-center justify-center p-1.5 rounded hover:bg-tertiary text-low hover:text-base transition-colors"
title="Repo actions"
>
<ArrowSquareOutIcon className="size-icon-base" weight="bold" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem icon={CopyIcon} onClick={onCopyPath}>
{tCommon('actions.copyPath')}
</DropdownMenuItem>
<DropdownMenuItem icon={CodeIcon} onClick={onOpenInEditor}>
{tCommon('actions.openInIde')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</CollapsibleSection>
);