diff --git a/frontend/src/components/annotation/FullImageSequence.tsx b/frontend/src/components/annotation/FullImageSequence.tsx
index 6d5e15f..ff12327 100644
--- a/frontend/src/components/annotation/FullImageSequence.tsx
+++ b/frontend/src/components/annotation/FullImageSequence.tsx
@@ -178,7 +178,7 @@ export default function FullImageSequence({
return (
= {
+ 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.
diff --git a/frontend/tests/utils/annotation/drawingUtils.test.ts b/frontend/tests/utils/annotation/drawingUtils.test.ts
index c9408a4..59a8b63 100644
--- a/frontend/tests/utils/annotation/drawingUtils.test.ts
+++ b/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');
});
});