From 76955bde18e1711367b860cf6edcb41c124bdaa2 Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Fri, 16 Jan 2026 09:43:42 +1000 Subject: [PATCH] refactor(web): replace inline SVGs with Icon components - changelog: Replace puzzle and github SVGs with Icon, use Button for CTA - sdk: Replace 4 github SVGs with Icon component - Use design system tokens for version badge colors --- apps/web/src/app/changelog/page.tsx | 46 ++++++++--------------------- apps/web/src/app/sdk/page.tsx | 17 ++++------- 2 files changed, 18 insertions(+), 45 deletions(-) diff --git a/apps/web/src/app/changelog/page.tsx b/apps/web/src/app/changelog/page.tsx index 677c64b..41856dc 100644 --- a/apps/web/src/app/changelog/page.tsx +++ b/apps/web/src/app/changelog/page.tsx @@ -1,5 +1,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { Button } from '@tpmjs/ui/Button/Button'; +import { Icon } from '@tpmjs/ui/Icon/Icon'; import { AppFooter } from '../../components/AppFooter'; import { AppHeader } from '../../components/AppHeader'; @@ -160,9 +162,9 @@ function getChangelogs(): { sdk: PackageChangelog[]; tools: PackageChangelog[] } function VersionBadge({ type }: { type: 'major' | 'minor' | 'patch' }) { const colors = { - major: 'bg-red-500/20 text-red-400 border-red-500/30', - minor: 'bg-blue-500/20 text-blue-400 border-blue-500/30', - patch: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30', + major: 'bg-error/10 text-error border-error/30', + minor: 'bg-info/10 text-info border-info/30', + patch: 'bg-success/10 text-success border-success/30', }; return ( @@ -247,10 +249,10 @@ export default function ChangelogPage() { {/* SDK Packages */}

- +

- + Tool Packages

@@ -315,20 +304,11 @@ export default function ChangelogPage() {

Follow the repository for the latest updates and releases.

- - - View on GitHub + + diff --git a/apps/web/src/app/sdk/page.tsx b/apps/web/src/app/sdk/page.tsx index 06169e2..de649bf 100644 --- a/apps/web/src/app/sdk/page.tsx +++ b/apps/web/src/app/sdk/page.tsx @@ -1,6 +1,7 @@ import { Button } from '@tpmjs/ui/Button/Button'; import { CodeBlock } from '@tpmjs/ui/CodeBlock/CodeBlock'; import { Container } from '@tpmjs/ui/Container/Container'; +import { Icon } from '@tpmjs/ui/Icon/Icon'; import Link from 'next/link'; import { AppHeader } from '~/components/AppHeader'; import { SDKFlowDiagram } from '~/components/SDKFlowDiagram'; @@ -72,9 +73,7 @@ export default function SDKPage(): React.ReactElement { rel="noopener noreferrer" className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-foreground/10 text-foreground rounded-md hover:bg-foreground/20 transition-colors" > - + GitHub @@ -211,9 +210,7 @@ Use registrySearch to find tools, then registryExecute to run them.\`, rel="noopener noreferrer" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium bg-foreground/10 text-foreground rounded-md hover:bg-foreground/20 transition-colors" > - - - + Source @@ -339,9 +336,7 @@ Use registrySearch to find tools, then registryExecute to run them.\`, rel="noopener noreferrer" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium bg-foreground/10 text-foreground rounded-md hover:bg-foreground/20 transition-colors" > - - - + Source @@ -752,9 +747,7 @@ const tools = await tpmjs.loadCollection('my-company/internal-tools');`} rel="noopener noreferrer" className="inline-flex items-center gap-2 px-3 py-1.5 font-medium bg-foreground/10 text-foreground rounded-md hover:bg-foreground/20 transition-colors" > - - - + View on GitHub