chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style: fix canvas controls visibility and enhance dot grid background

Browse Source 
- Add !important to all React Flow dark theme overrides to ensure they
  win over library default styles (fixes white controls rectangle)
- Add SVG fill inheritance for control button icons
- Use slightly lighter canvas background (bg-accent/30) so dot grid
  is more visible
- Increase dot size and use muted-foreground color for better contrast

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-19 00:23:47 -05:00
parent 699bf59251
commit c05e22dc6d
2 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/tree-editor/FlowCanvas.tsx
View File

@@ -136,9 +136,9 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType }: F
nodesDraggable={false} nodesDraggable={false}
nodesConnectable={false} nodesConnectable={false}
proOptions={{ hideAttribution: true }} proOptions={{ hideAttribution: true }}
className="bg-background" className="bg-accent/30"
> >
<Background variant={BackgroundVariant.Dots} gap={24} size={1} color="hsl(var(--border))" /> <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
<Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" /> <Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" />
{minimapVisible && ( {minimapVisible && (
<MiniMap <MiniMap

31
frontend/src/index.css
View File

@@ -318,30 +318,37 @@
/* React Flow dark theme overrides */ /* React Flow dark theme overrides */
.react-flow__background { .react-flow__background {
background-color: hsl(var(--background)); background-color: transparent !important;
} }
.react-flow__controls { .react-flow__controls {
background-color: hsl(var(--card)); background-color: hsl(var(--card)) !important;
border-color: hsl(var(--border)); border: 1px solid hsl(var(--border)) !important;
border-radius: 0.75rem; border-radius: 0.75rem !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
overflow: hidden;
} }
.react-flow__controls-button { .react-flow__controls-button {
background-color: hsl(var(--card)); background-color: hsl(var(--card)) !important;
border-color: hsl(var(--border)); border-color: hsl(var(--border)) !important;
fill: hsl(var(--muted-foreground)); fill: hsl(var(--muted-foreground)) !important;
color: hsl(var(--muted-foreground)) !important;
} }
.react-flow__controls-button:hover { .react-flow__controls-button:hover {
background-color: hsl(var(--accent)); background-color: hsl(var(--accent)) !important;
fill: hsl(var(--foreground)) !important;
}
.react-flow__controls-button svg {
fill: inherit !important;
} }
.react-flow__minimap { .react-flow__minimap {
background-color: hsl(var(--card)); background-color: hsl(var(--card)) !important;
border-color: hsl(var(--border)); border: 1px solid hsl(var(--border)) !important;
border-radius: 0.75rem; border-radius: 0.75rem !important;
} }
.react-flow__edge-path { .react-flow__edge-path {