Added colored text if a category is locked for submitting and changing category

src/components/SponsorTimeEditComponent.tsx

@@ -23,6 +23,7 @@ export interface SponsorTimeEditProps {
 export interface SponsorTimeEditState {
     editing: boolean;
     sponsorTimeEdits: [string, string];
+    selectedCategory: Category;
 }
 
 const DEFAULT_CATEGORY = "chooseACategory";
@@ -46,7 +47,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
 
         this.state = {
             editing: false,
-            sponsorTimeEdits: [null, null]
+            sponsorTimeEdits: [null, null],
+            selectedCategory: DEFAULT_CATEGORY as Category
         };
     }
 
@@ -251,7 +253,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         for (const category of (this.props.categoryList ?? CompileConfig.categoryList)) {
             elements.push(
                 <option value={category}
-                        key={category}>
+                        key={category}
+                        className={this.categoryLockedClass(category)}>
                     {chrome.i18n.getMessage("category_" + category)}
                 </option>
             );
@@ -260,6 +263,10 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
         return elements;
     }
 
+    categoryLockedClass(category: string): string {
+        return(this.props.contentContainer().lockedCategories.includes(category)) ? "SponsorBlockLockedColor" : ""
+    }
+
     categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
         // See if show more categories was pressed
         if (event.target.value !== DEFAULT_CATEGORY && !Config.config.categorySelections.some((category) => category.name === event.target.value)) {