fix: remove fill from bbox overlays

frontend/src/components/annotation/FullImageSequence.tsx

@@ -178,7 +178,7 @@ export default function FullImageSequence({
 
     return (
       <div
-        className="absolute border-2 border-red-500 bg-red-500/20 pointer-events-none"
+        className="absolute border-2 border-red-500 pointer-events-none"
         style={{
           left: `${bboxLeft}px`,
           top: `${bboxTop}px`,

frontend/src/components/annotation/ImageOverlays.tsx

@@ -38,7 +38,7 @@ export function BoundingBoxOverlay({ detection, imageInfo }: BoundingBoxOverlayP
           return (
             <div
               key={`bbox-${detection.id}-${index}`}
-              className="absolute border-2 border-red-500 bg-red-500/20 pointer-events-none"
+              className="absolute border-2 border-red-500 pointer-events-none"
               style={{
                 left: `${left}px`,
                 top: `${top}px`,
@@ -108,7 +108,7 @@ export function UserAnnotationOverlay({
           return (
             <div
               key={`user-annotation-${detectionAnnotation.detection_id}-${index}`}
-              className={`absolute border-2 ${colors.border} ${colors.background} pointer-events-none`}
+              className={`absolute border-2 ${colors.border} pointer-events-none`}
               style={{
                 left: `${left}px`,
                 top: `${top}px`,
@@ -204,7 +204,7 @@ export function DrawingOverlay({
         return (
           <div
             key={rect.id}
-            className={`absolute border-2 ${isSelected ? 'border-yellow-400' : colors.border} ${colors.background} pointer-events-auto cursor-pointer`}
+            className={`absolute border-2 ${isSelected ? 'border-yellow-400' : colors.border} pointer-events-auto cursor-pointer`}
             style={{
               left: `${left}px`,
               top: `${top}px`,
@@ -234,7 +234,7 @@ export function DrawingOverlay({
           const { left, top, width, height } = renderRectangle(currentDrawing, 'drawing');
           return (
             <div
-              className="absolute border-2 border-dashed border-blue-400 bg-blue-400/20 pointer-events-none"
+              className="absolute border-2 border-dashed border-blue-400 pointer-events-none"
               style={{
                 left: `${left}px`,
                 top: `${top}px`,

frontend/src/components/sequence/SequencePlayer.tsx

@@ -242,7 +242,7 @@ export default function SequencePlayer({
         return (
           <div
             key={`bbox-${currentDetection.id}-${index}`}
-            className="absolute border-2 border-red-500 bg-red-500/20 pointer-events-none"
+            className="absolute border-2 border-red-500 pointer-events-none"
             style={{
               left: `${left}px`,
               top: `${top}px`,

frontend/src/utils/annotation/drawingUtils.ts

@@ -30,38 +30,34 @@ export interface CurrentDrawing {
  */
 export interface SmokeTypeColors {
   border: string;
-  background: string;
 }
 
 /**
  * Drawing interaction mode.
  */
 export type DrawingMode = 'view' | 'draw' | 'select';
 
+const SMOKE_TYPE_BORDER: Record<SmokeType, string> = {
+  wildfire: 'border-red-500',
+  industrial: 'border-purple-500',
+  other: 'border-blue-500',
+};
+
 /**
  * Gets the color scheme for a specific smoke type.
  *
  * @param smokeType - The smoke type to get colors for
- * @returns Color configuration for borders and backgrounds
+ * @returns Color configuration for the bbox border
  *
  * @example
  * ```typescript
  * const colors = getSmokeTypeColors('wildfire');
- * // Returns: { border: 'border-red-500', background: 'bg-red-500/15' }
+ * // Returns: { border: 'border-red-500' }
  * ```
  */
-export const getSmokeTypeColors = (smokeType: SmokeType): SmokeTypeColors => {
-  switch (smokeType) {
-    case 'wildfire':
-      return { border: 'border-red-500', background: 'bg-red-500/15' };
-    case 'industrial':
-      return { border: 'border-purple-500', background: 'bg-purple-500/15' };
-    case 'other':
-      return { border: 'border-blue-500', background: 'bg-blue-500/15' };
-    default:
-      return { border: 'border-green-500', background: 'bg-green-500/10' };
-  }
-};
+export const getSmokeTypeColors = (smokeType: SmokeType): SmokeTypeColors => ({
+  border: SMOKE_TYPE_BORDER[smokeType],
+});
 
 /**
  * Creates a new DrawnRectangle from current drawing state.

frontend/tests/utils/annotation/drawingUtils.test.ts

@@ -25,19 +25,16 @@ describe('drawingUtils', () => {
     it('should return correct colors for wildfire', () => {
       const colors = getSmokeTypeColors('wildfire');
       expect(colors.border).toBe('border-red-500');
-      expect(colors.background).toBe('bg-red-500/15');
     });
 
     it('should return correct colors for industrial', () => {
       const colors = getSmokeTypeColors('industrial');
       expect(colors.border).toBe('border-purple-500');
-      expect(colors.background).toBe('bg-purple-500/15');
     });
 
     it('should return correct colors for other', () => {
       const colors = getSmokeTypeColors('other');
       expect(colors.border).toBe('border-blue-500');
-      expect(colors.background).toBe('bg-blue-500/15');
     });
   });