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

fix: use theme-aware colors for tool detail modal

Browse source 
- Change modal background from bg-surface to bg-background for proper dark mode support
- Use bg-surface for nested elements (env vars, code blocks) to create subtle contrast
- Ensures modal respects the application's dark theme

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ajax Davis 2025-12-04 18:43:44 +10:00
parent f50b747e45
commit 07809784db
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/playground/src/components/sidebar/ToolsSidebar.tsx
View file

@ -116,7 +116,7 @@ export function ToolsSidebar(): React.ReactElement {
tabIndex={0}
aria-label="Close modal"
>
<div className="relative mx-4 max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg border border-border bg-surface p-6 shadow-xl">
<div className="relative mx-4 max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg border border-border bg-background p-6 shadow-xl">
{/* Close button */}
<button
type="button"
@ -184,7 +184,7 @@ export function ToolsSidebar(): React.ReactElement {
</h3>
<div className="space-y-2">
{Object.entries(selectedTool.env).map(([key, config]) => (
<div key={key} className="rounded border border-border bg-background p-3">
<div key={key} className="rounded border border-border bg-surface p-3">
<div className="mb-1 flex items-center gap-2">
<code className="text-sm font-mono text-foreground">{key}</code>
{config.required && (
@ -204,7 +204,7 @@ export function ToolsSidebar(): React.ReactElement {
{selectedTool.importUrl && (
<div className="mb-6">
<h3 className="mb-2 text-lg font-semibold text-foreground">Import URL</h3>
<code className="block rounded bg-background p-3 text-xs font-mono text-foreground-secondary break-all">
<code className="block rounded bg-surface p-3 text-xs font-mono text-foreground-secondary break-all">
{selectedTool.importUrl}
</code>
</div>
@ -214,7 +214,7 @@ export function ToolsSidebar(): React.ReactElement {
{selectedTool.toolId && (
<div>
<h3 className="mb-2 text-lg font-semibold text-foreground">Tool ID</h3>
<code className="block rounded bg-background p-3 text-xs font-mono text-foreground-secondary">
<code className="block rounded bg-surface p-3 text-xs font-mono text-foreground-secondary">
{selectedTool.toolId}
</code>
</div>