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

fix: improve diagram node contrast and move tooltip to top

Browse source
This commit is contained in:
Ajax Davis 2025-12-28 13:02:01 +10:00
parent b992b6064a
commit 62ec33f092
1 changed files with 4 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

9
apps/web/src/components/ArchitectureDiagram.tsx
View file

@ -393,7 +393,7 @@ export function ArchitectureDiagram(): React.ReactElement {
// Determine colors based on type // Determine colors based on type
let strokeColor = 'var(--color-border)'; let strokeColor = 'var(--color-border)';
let fillOpacity = 0.5; let fillColor = 'var(--color-background)';
if (node.type === 'source') { if (node.type === 'source') {
strokeColor = 'var(--color-foreground)'; strokeColor = 'var(--color-foreground)';
} else if (node.type === 'process') { } else if (node.type === 'process') {
@ -404,7 +404,7 @@ export function ArchitectureDiagram(): React.ReactElement {
strokeColor = 'var(--color-foreground-secondary)'; strokeColor = 'var(--color-foreground-secondary)';
} else if (node.type === 'output') { } else if (node.type === 'output') {
strokeColor = 'var(--color-foreground)'; strokeColor = 'var(--color-foreground)';
fillOpacity = 1; fillColor = 'var(--color-foreground)';
} }
// Main rectangle // Main rectangle
@ -416,8 +416,7 @@ export function ArchitectureDiagram(): React.ReactElement {
.attr('width', node.width) .attr('width', node.width)
.attr('height', node.height) .attr('height', node.height)
.attr('rx', node.type === 'output' ? 4 : 8) .attr('rx', node.type === 'output' ? 4 : 8)
.attr('fill', node.type === 'output' ? 'var(--color-foreground)' : 'var(--color-surface)') .attr('fill', fillColor)
.attr('fill-opacity', fillOpacity)
.attr('stroke', strokeColor) .attr('stroke', strokeColor)
.attr('stroke-width', 1.5) .attr('stroke-width', 1.5)
.attr('filter', 'url(#arch-shadow)'); .attr('filter', 'url(#arch-shadow)');
@ -497,7 +496,7 @@ export function ArchitectureDiagram(): React.ReactElement {
{/* Tooltip */} {/* Tooltip */}
{hoveredInfo && ( {hoveredInfo && (
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-3 bg-background border border-border rounded-lg shadow-lg text-sm max-w-sm"> <div className="absolute top-4 left-1/2 -translate-x-1/2 px-4 py-3 bg-background border border-border rounded-lg shadow-lg text-sm max-w-sm z-10">
<div className="text-foreground-secondary"> <div className="text-foreground-secondary">
<span className="font-semibold text-foreground">{hoveredInfo.title}</span> —{' '} <span className="font-semibold text-foreground">{hoveredInfo.title}</span> —{' '}
{hoveredInfo.description} {hoveredInfo.description}