From 78f6c66547e7a99e2b896c05ed59087c1bea2c2b Mon Sep 17 00:00:00 2001
From: mini-bomba <55105495+mini-bomba@users.noreply.github.com>
Date: Sat, 25 Mar 2023 13:19:47 +0100
Subject: Reset fvlabel color definitions when segment == null

Without this, we would try to use the color for an 'undefined' category on the first render pass of the element.
It was then immediately re-rendered with a segment set, but DR missed the update, which caused it to stick to that 'undefined' category and the label became transparent.
---
 src/components/CategoryPillComponent.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx
index 123f3e93..e2bbb0dd 100644
--- a/src/components/CategoryPillComponent.tsx
+++ b/src/components/CategoryPillComponent.tsx
@@ -43,7 +43,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
 
         return (
             <span style={style}
-                className={"sponsorBlockCategoryPill"} 
+                className={"sponsorBlockCategoryPill"}
                 aria-label={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}
                 onMouseEnter={() => this.openTooltip()}
@@ -104,8 +104,8 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             await stopAnimation();
 
             if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
-                this.setState({ 
-                    open: false, 
+                this.setState({
+                    open: false,
                     show: type === 1
                 });
             } else if (response.statusCode !== 403) {
@@ -117,13 +117,13 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
     private getColor(): string {
         // Handled by setCategoryColorCSSVariables() of content.ts
         const category = this.state.segment?.category;
-        return `var(--sb-category-preview-${category}, var(--sb-category-${category}))`;
+        return category == null ? null : `var(--sb-category-preview-${category}, var(--sb-category-${category}))`;
     }
 
     private getTextColor(): string {
         // Handled by setCategoryColorCSSVariables() of content.ts
         const category = this.state.segment?.category;
-        return `var(--sb-category-text-preview-${category}, var(--sb-category-text-${category}))`;
+        return category == null ? null : `var(--sb-category-text-preview-${category}, var(--sb-category-text-${category}))`;
     }
 
     private openTooltip(): void {
-- 
cgit v1.2.3