Skip to content

chore(profile): align dev tools card with shared Card and Button primitives - #5415

Open
IamCoder18 wants to merge 1 commit into
Kilo-Org:mainfrom
IamCoder18:chore/profile-dev-tools-styling
Open

chore(profile): align dev tools card with shared Card and Button primitives#5415
IamCoder18 wants to merge 1 commit into
Kilo-Org:mainfrom
IamCoder18:chore/profile-dev-tools-styling

Conversation

@IamCoder18

@IamCoder18 IamCoder18 commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Summary

The Development Tools card on /profile was the only Cloud surface that hardcoded red/amber utilities, used Comic Sans, painted a clip-path "DEV" banner, hand-rolled a <button> instead of the shared primitive, and labeled the destructive action "Nuke Account".

It also capped to lg:w-1/2 with a heavy shadow while every sibling card was full-width and used surface-role depth. This PR brings the dev card in line with the Cloud design overlay (kilo-design-cloud), no new primitives, no behavior changes, only visual fixes to use the shared Card, the shared Button (apps/web/src/components/ui/button.tsx), and semantic tokens.

Changes

  • apps/web/src/app/(app)/profile/page.tsx: dev Card is now full-width, no shadow, no hardcoded red/amber. Title uses CardTitle, description uses CardDescription, section labels use type-label. Loading-skeleton note updated to call out the intentional dev-only exclusion.
  • apps/web/src/components/dev/DevConsumeCreditsButton.tsx: migrated to the shared Button (variant="secondary").
  • apps/web/src/components/dev/DevNukeAccountButton.tsx: migrated to the shared Button (variant="destructive"); label renamed from "Nuke Account" to "Reset account".
  • apps/web/src/components/dev/CreateKilocodeOrgButton.tsx: comic-sans font stack, clip-path banner, drop-shadow, and hand-rolled primary button removed; replaced with the shared Button (variant="secondary").

Verification

Ran the dev server and verified the UI on /profile.

Visual Changes

Before After
image image

Reviewer Notes

  • Visual-only; no behavior, data, schema, tRPC, or migration changes.

@kilo-code-bot

kilo-code-bot Bot commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (4 files)
  • apps/web/src/app/(app)/profile/page.tsx
  • apps/web/src/components/dev/CreateKilocodeOrgButton.tsx
  • apps/web/src/components/dev/DevConsumeCreditsButton.tsx
  • apps/web/src/components/dev/DevNukeAccountButton.tsx

Reviewed by grok-4.6 · Input: 171.4K · Output: 6.6K · Cached: 151K

Review guidance: REVIEW.md from base branch main

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant