ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-01-31 20:03:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix styling of graph controls

Browse Source
This commit is contained in:
James
2025-12-22 18:13:52 -05:00
parent 524a9736b4
commit ffcdbf7d75
3 changed files with 36 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/ui/src/components/views/graph-view/components/graph-controls.tsx
View File

@@ -31,7 +31,7 @@ export function GraphControls({
return (
<Panel position="bottom-left" className="flex flex-col gap-2">
<TooltipProvider delayDuration={200}>
<div className="flex flex-col gap-1 p-1.5 rounded-lg bg-popover/90 backdrop-blur-sm border border-border shadow-lg">
<div className="flex flex-col gap-1 p-1.5 rounded-lg bg-popover/90 backdrop-blur-sm border border-border shadow-lg text-popover-foreground">
{/* Zoom controls */}
<Tooltip>
<TooltipTrigger asChild>
@@ -120,22 +120,13 @@ export function GraphControls({
<Button
variant="ghost"
size="sm"
className={cn(
'h-8 w-8 p-0',
isLocked && 'bg-brand-500/20 text-brand-500'
)}
className={cn('h-8 w-8 p-0', isLocked && 'bg-brand-500/20 text-brand-500')}
onClick={onToggleLock}
>
{isLocked ? (
<Lock className="w-4 h-4" />
) : (
<Unlock className="w-4 h-4" />
)}
{isLocked ? <Lock className="w-4 h-4" /> : <Unlock className="w-4 h-4" />}
</Button>
</TooltipTrigger>
<TooltipContent side="right">
{isLocked ? 'Unlock Nodes' : 'Lock Nodes'}
</TooltipContent>
<TooltipContent side="right">{isLocked ? 'Unlock Nodes' : 'Lock Nodes'}</TooltipContent>
</Tooltip>
</div>
</TooltipProvider>

11
apps/ui/src/components/views/graph-view/components/graph-legend.tsx
View File

@@ -1,12 +1,5 @@
import { Panel } from '@xyflow/react';
import {
Clock,
Play,
Pause,
CheckCircle2,
Lock,
AlertCircle,
} from 'lucide-react';
import { Clock, Play, Pause, CheckCircle2, Lock, AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';
const legendItems = [
@@ -51,7 +44,7 @@ const legendItems = [
export function GraphLegend() {
return (
<Panel position="bottom-right" className="pointer-events-none">
<div className="flex flex-wrap gap-3 p-2 rounded-lg bg-popover/90 backdrop-blur-sm border border-border shadow-lg pointer-events-auto">
<div className="flex flex-wrap gap-3 p-2 rounded-lg bg-popover/90 backdrop-blur-sm border border-border shadow-lg pointer-events-auto text-popover-foreground">
{legendItems.map((item) => {
const Icon = item.icon;
return (