[US-14.1 / OBT-246] Standardize borderless action buttons with bordered variants

[levigtri]

[US-14.1 / OBT-246] Standardize borderless action buttons with bordered variants

Summary

Several text-labeled action buttons were rendered with variant="ghost", which has no border. Combined with ad-hoc red color overrides (or no color treatment at all), these actions read as plain inline text rather than clickable buttons. This PR introduces a dedicated outline-destructive Button variant and migrates the affected buttons to bordered variants: destructive actions now use outline-destructive, and neutral toggle actions use the existing outline variant. Icon-only table actions and navigation buttons keep the ghost variant, where the borderless look remains correct.

Changes

1. New outline-destructive Button variant — src/components/ui/button.tsx: added a variant right after outline with a red border, bg-surface background, red text, red-tinted hover, and full dark mode support (dark:border-red-800/40 dark:text-red-400 dark:hover:bg-red-950/30). This centralizes the destructive-outline styling that was previously duplicated as className overrides.
2. Delete User button — src/components/pages/UserDetailPage.tsx: switched from ghost with red className overrides to variant="outline-destructive". The overrides (text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/30) were removed; only shrink-0 remains in the className and the Trash2 icon is kept.
3. Deactivate/Activate and Make Admin/Remove Admin buttons — src/components/pages/UserDetailPage.tsx: switched from ghost to variant="outline" so these toggle actions render as visible bordered buttons.
4. Clear Location button — src/components/pages/ProjectDetailPage.tsx: switched from ghost with className="text-red-600 dark:text-red-400" to variant="outline-destructive", removing the ad-hoc className.

Type of Change

• Bug fix
• New feature
• UI change
• Refactor
• Breaking change
• Documentation update

Testing

1. Run npm run dev and log in as a platform admin.
2. Navigate to Users → any user (/app/users/:userId):
   • Delete User (top right of the info card) renders with a red border, red text, and bg-surface background; hover shows a light red background. Trash2 icon still present.
   • Deactivate/Activate (next to the Status badge) renders as a bordered outline button.
   • Make Admin/Remove Admin (next to the Platform Admin badge) renders as a bordered outline button.
3. Navigate to Projects → any project → Location tab, set or type a coordinate so Clear Location appears: it renders with the red bordered style next to Save Location.
4. Toggle dark mode (theme switcher) and re-check all four buttons: outline-destructive buttons show border-red-800/40, text-red-400, and a red-950/30 hover background; outline buttons keep the areia border.
5. Confirm icon-only ghost buttons are unchanged: the revoke (trash) icon in the App Roles table on UserDetailPage and the deactivate icon on LanguagesPage still render borderless.

[coderabbitai]

Warning

Review limit reached

@levigtri, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 42 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: QUIET

Plan: Pro Plus

Run ID: 923fa3b9-a242-4301-8749-47553107d2f2

📥 Commits

Reviewing files that changed from the base of the PR and between 130fc4a and f3b2c2f.

📒 Files selected for processing (3)

• src/components/pages/ProjectDetailPage.tsx
• src/components/pages/UserDetailPage.tsx
• src/components/ui/button.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch levigft/obt-246-us-141-standardize-borderless-action-buttons-with-bordered

---

_{Comment @coderabbitai help to get the list of available commands.}