From 8f0bcee9d2a58f4922c10db89adb57dd9962902a Mon Sep 17 00:00:00 2001
From: Oliver Roick <oliver@roick.email>
Date: Wed, 24 Jan 2024 16:56:40 +1100
Subject: [PATCH] Return default text color if bgcolor is not set

---
 src/app/utils.js                        | 4 ++++
 src/features/loupe/BoundingBoxLabel.jsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/utils.js b/src/app/utils.js
index bac16834..38bc6017 100644
--- a/src/app/utils.js
+++ b/src/app/utils.js
@@ -126,6 +126,10 @@ export const inViewportTopHalf = (domElement) => {
  * returns a text color with high contrast relative to a given background color
  */
 export const getTextColor = (bgColor) => {
+  if (!bgColor) {
+    return '$textDark';
+  }
+
   const threshold = 0.6
   const [red, green, blue] = [0, 2, 4].map((i) => parseInt(bgColor.slice(i + 1, i + 3), 16));
   const l = (red * 0.299 + green * 0.587 + blue * 0.114) / 255;
diff --git a/src/features/loupe/BoundingBoxLabel.jsx b/src/features/loupe/BoundingBoxLabel.jsx
index a976fd04..5c337734 100644
--- a/src/features/loupe/BoundingBoxLabel.jsx
+++ b/src/features/loupe/BoundingBoxLabel.jsx
@@ -144,7 +144,7 @@ const BoundingBoxLabel = forwardRef(({
           handleCategorySelectorBlur={handleCategorySelectorBlur}
           menuPlacement='bottom'
         />
-        <LabelDisplay css={{ display: catSelectorOpen ? 'none' : 'block', color: getTextColor(displayLabel.color) }}>
+        <LabelDisplay css={{ display: catSelectorOpen ? 'none' : 'block', color: getTextColor(displayLabel?.color) }}>
           <Category>{displayLabel?.name || "ERROR FINDING LABEL"}</Category>
           {!object.locked && <Confidence>{conf}%</Confidence>}
         </LabelDisplay>