From a7e5d2a6636323613d8bf6d019f9fa5d8760de8c Mon Sep 17 00:00:00 2001
From: Aristotelis <5459332+glutanimate@users.noreply.github.com>
Date: Fri, 13 Oct 2023 00:49:31 +0200
Subject: [PATCH] Change IO text background color to white (#2726)

Co-authored-by: Glutanimate <glutanimate@users.noreply.github.com>
---
 ts/image-occlusion/review.ts          | 4 ++--
 ts/image-occlusion/shapes/text.ts     | 4 ++--
 ts/image-occlusion/tools/lib.ts       | 1 +
 ts/image-occlusion/tools/tool-text.ts | 4 ++--
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/ts/image-occlusion/review.ts b/ts/image-occlusion/review.ts
index ec96c6315..cc715ea88 100644
--- a/ts/image-occlusion/review.ts
+++ b/ts/image-occlusion/review.ts
@@ -10,7 +10,7 @@ import { extractShapesFromRenderedClozes } from "./shapes/from-cloze";
 import { Polygon } from "./shapes/polygon";
 import { Rectangle } from "./shapes/rectangle";
 import { Text } from "./shapes/text";
-import { TEXT_FONT_FAMILY, TEXT_PADDING } from "./tools/lib";
+import { TEXT_BACKGROUND_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "./tools/lib";
 import type { Size } from "./types";
 
 export function setupImageCloze(): void {
@@ -136,7 +136,7 @@ function drawShape(
         ctx.textBaseline = "top";
         ctx.scale(shape.scaleX, shape.scaleY);
         const textMetrics = ctx.measureText(shape.text);
-        ctx.fillStyle = properties.inActiveShapeColor;
+        ctx.fillStyle = TEXT_BACKGROUND_COLOR;
         ctx.fillRect(
             shape.left / shape.scaleX,
             shape.top / shape.scaleY,
diff --git a/ts/image-occlusion/shapes/text.ts b/ts/image-occlusion/shapes/text.ts
index 4315e456e..c61dd6a10 100644
--- a/ts/image-occlusion/shapes/text.ts
+++ b/ts/image-occlusion/shapes/text.ts
@@ -3,7 +3,7 @@
 
 import { fabric } from "fabric";
 
-import { SHAPE_MASK_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "../tools/lib";
+import { TEXT_BACKGROUND_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "../tools/lib";
 import type { ConstructorParams, Size } from "../types";
 import type { ShapeDataForCloze } from "./base";
 import { Shape } from "./base";
@@ -41,7 +41,7 @@ export class Text extends Shape {
         return new fabric.IText(this.text, {
             ...this,
             fontFamily: TEXT_FONT_FAMILY,
-            backgroundColor: SHAPE_MASK_COLOR,
+            backgroundColor: TEXT_BACKGROUND_COLOR,
             padding: TEXT_PADDING,
         });
     }
diff --git a/ts/image-occlusion/tools/lib.ts b/ts/image-occlusion/tools/lib.ts
index bf0178851..2823f2451 100644
--- a/ts/image-occlusion/tools/lib.ts
+++ b/ts/image-occlusion/tools/lib.ts
@@ -9,6 +9,7 @@ import { zoomResetValue } from "../store";
 
 export const SHAPE_MASK_COLOR = "#ffeba2";
 export const BORDER_COLOR = "#212121";
+export const TEXT_BACKGROUND_COLOR = "#ffffff";
 export const TEXT_FONT_FAMILY = "Arial";
 export const TEXT_PADDING = 5;
 
diff --git a/ts/image-occlusion/tools/tool-text.ts b/ts/image-occlusion/tools/tool-text.ts
index 17fd922d5..f81815c52 100644
--- a/ts/image-occlusion/tools/tool-text.ts
+++ b/ts/image-occlusion/tools/tool-text.ts
@@ -6,8 +6,8 @@ import { fabric } from "fabric";
 import {
     disableRotation,
     enableUniformScaling,
-    SHAPE_MASK_COLOR,
     stopDraw,
+    TEXT_BACKGROUND_COLOR,
     TEXT_FONT_FAMILY,
     TEXT_PADDING,
 } from "./lib";
@@ -32,7 +32,7 @@ export const drawText = (canvas: fabric.Canvas): void => {
             strokeWidth: 1,
             noScaleCache: false,
             fontFamily: TEXT_FONT_FAMILY,
-            backgroundColor: SHAPE_MASK_COLOR,
+            backgroundColor: TEXT_BACKGROUND_COLOR,
             padding: TEXT_PADDING,
         });
         disableRotation(text);