From bff50a13156232212773bd7313a6c3ac47681a28 Mon Sep 17 00:00:00 2001 From: Alex-Gilbert Date: Fri, 20 Feb 2026 15:08:20 -0600 Subject: [PATCH] fix: drawRedactionApproved draws box overlay + distinct green badge The approved draw function was only drawing text with no overlay on the redaction box area, making it look like the redaction disappeared. Now draws a blue semi-transparent box over the redaction area (like other states) plus the merged blue text along the line. Also made the approved CSS badge green (--accent) to distinguish it from the blue analyzed badge. Co-Authored-By: Claude Opus 4.6 --- unredact/static/canvas.js | 10 +++++++++- unredact/static/style.css | 4 ++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/unredact/static/canvas.js b/unredact/static/canvas.js index 038430a..4eda535 100644 --- a/unredact/static/canvas.js +++ b/unredact/static/canvas.js @@ -264,6 +264,14 @@ function drawRedactionApproved(r, isActive) { const fontName = state.fonts.find(f => f.id === (o.fontId ?? a.font.id))?.name ?? a.font.name; const fontSize = o.fontSize ?? a.font.size; + // Always draw a box overlay on the redaction area so it stays visible + ctx.fillStyle = isActive ? "rgba(30, 100, 255, 0.25)" : "rgba(30, 100, 255, 0.12)"; + ctx.fillRect(r.x, r.y, r.w, r.h); + ctx.strokeStyle = isActive ? "rgba(30, 100, 255, 0.8)" : "rgba(30, 100, 255, 0.4)"; + ctx.lineWidth = isActive ? 2 : 1; + ctx.strokeRect(r.x, r.y, r.w, r.h); + + // Draw the full merged text along the line const startX = a.line.x + (o.offsetX ?? 0); const startY = a.line.y + (o.offsetY ?? 0); @@ -273,7 +281,7 @@ function drawRedactionApproved(r, isActive) { ctx.fillText(r.approvedText, startX, startY); if (isActive) { - ctx.strokeStyle = "rgba(30, 100, 255, 0.3)"; + ctx.strokeStyle = "rgba(30, 100, 255, 0.2)"; ctx.lineWidth = 1; ctx.strokeRect(a.line.x, a.line.y, a.line.w, a.line.h); } diff --git a/unredact/static/style.css b/unredact/static/style.css index 9607274..735bfbb 100644 --- a/unredact/static/style.css +++ b/unredact/static/style.css @@ -228,8 +228,8 @@ main { } .redaction-status.status-approved { - color: var(--blue); - background: rgba(66, 165, 245, 0.15); + color: var(--accent); + background: rgba(0, 212, 116, 0.15); } .redaction-status.status-error {