engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.4k

refactor(web): replace inline SVGs with Icon components

Browse source 
- 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
This commit is contained in:
Ajax Davis 2026-01-16 09:43:42 +10:00
parent 0770d88815
commit 76955bde18
2 changed files with 18 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

46
apps/web/src/app/changelog/page.tsx
View file

@ -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 */}
<section className="mb-16">
<h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-3">
<span className="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center">
<span className="w-8 h-8 rounded-lg bg-info/10 flex items-center justify-center">
<svg
aria-hidden="true"
className="w-4 h-4 text-blue-400"
className="w-4 h-4 text-info"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@ -280,20 +282,7 @@ export default function ChangelogPage() {
<section>
<h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-3">
<span className="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center">
<svg
aria-hidden="true"
className="w-4 h-4 text-emerald-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"
/>
</svg>
<Icon icon="puzzle" size="sm" className="text-emerald-400" />
</span>
Tool Packages
</h2>
@ -315,20 +304,11 @@ export default function ChangelogPage() {
<p className="text-foreground-secondary mb-4">
Follow the repository for the latest updates and releases.
</p>
<a
href="https://github.com/tpmjs/tpmjs"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 bg-foreground text-background rounded-lg font-medium hover:bg-foreground/90 transition-colors"
>
<svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
View on GitHub
<a href="https://github.com/tpmjs/tpmjs" target="_blank" rel="noopener noreferrer">
<Button size="lg">
<Icon icon="github" size="md" />
View on GitHub
</Button>
</a>
</div>
</div>

17
apps/web/src/app/sdk/page.tsx
View file

@ -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"
>
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<Icon icon="github" size="sm" />
GitHub
</a>
</div>
@ -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"
>
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<Icon icon="github" size="sm" />
Source
</a>
</div>
@ -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"
>
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<Icon icon="github" size="sm" />
Source
</a>
</div>
@ -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"
>
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
<Icon icon="github" size="sm" />
View on GitHub
</a>
</div>