Add category color to skip notice

src/components/NoticeComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import Config from "../config";
+import SbSvg from "../svg-icons/sb_svg";
 
 enum CountdownMode {
     Timer,
@@ -28,6 +29,7 @@ export interface NoticeProps {
     extraClass?: string;
     hideLogo?: boolean;
     hideRightInfo?: boolean;
+    logoFill?: string;
 
     // Callback for when this is closed
     closeListener: () => void;
@@ -122,10 +124,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 <td className="noticeLeftIcon">
                                     {/* Logo */}
                                     {!this.props.hideLogo &&
-                                        <img id={"sponsorSkipLogo" + this.idSuffix} 
+                                        <SbSvg
-                                            className="sponsorSkipLogo sponsorSkipObject"
+                                            id={"sponsorSkipLogo" + this.idSuffix} 
-                                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                                            fill={this.props.logoFill}
-                                        </img>
+                                            className="sponsorSkipLogo sponsorSkipObject"/>
                                     }
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}

src/components/SkipNoticeComponent.tsx

@@ -177,7 +177,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         ) : null;
 
         return (
-            <NoticeComponent noticeTitle={this.state.noticeTitle}
+            <NoticeComponent 
+                noticeTitle={this.state.noticeTitle}
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
                 showInSecondSlot={this.showInSecondSlot}
                 idSuffix={this.idSuffix}
@@ -191,6 +192,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 ref={this.noticeRef}
                 closeListener={() => this.closeListener()}
                 smaller={this.state.smaller}
+                logoFill={Config.config.barTypes[this.segments[0].category].color}
                 limitWidth={true}
                 firstColumn={firstColumn}
                 bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}

src/svg-icons/sb_svg.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+export interface SbIconProps {
+  id?: string;
+  fill?: string;
+  className?: string;
+  width?: string;
+  height?: string;
+  onClick?: () => void;
+}
+
+export default function SbSvg({
+  id = "",
+  fill = "#ff0000",
+  className = "",
+  onClick
+}: SbIconProps): JSX.Element {
+  return (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      viewBox="0 0 565.15 568"
+      id={id}
+      className={className}
+      onClick={() => onClick?.() } >
+      <g
+      id="Layer_2"
+      data-name="Layer 2">
+        <g
+          id="Layer_1-2"
+          data-name="Layer 1"
+          style={{
+            fill
+          }}>
+          <path
+            d="M282.58,568a65,65,0,0,1-34.14-9.66C95.41,463.94,2.54,300.46,0,121A64.91,64.91,0,0,1,34,62.91a522.56,522.56,0,0,1,497.16,0,64.91,64.91,0,0,1,34,58.12c-2.53,179.43-95.4,342.91-248.42,437.3A65,65,0,0,1,282.58,568Zm0-548.31A502.24,502.24,0,0,0,43.4,80.22a45.27,45.27,0,0,0-23.7,40.53c2.44,172.67,91.81,330,239.07,420.83a46.19,46.19,0,0,0,47.61,0C453.64,450.73,543,293.42,545.45,120.75a45.26,45.26,0,0,0-23.7-40.54A502.26,502.26,0,0,0,282.58,19.69Z"
+            id="path8"
+            style={{
+              fill
+            }} />
+          <path
+            style={{
+              fill
+            }}
+            d="M 284.70508 42.693359 A 479.9 479.9 0 0 0 54.369141 100.41992 A 22.53 22.53 0 0 0 42.669922 120.41992 C 45.069922 290.25992 135.67008 438.63977 270.83008 522.00977 A 22.48 22.48 0 0 0 294.32031 522.00977 C 429.48031 438.63977 520.08047 290.25992 522.48047 120.41992 A 22.53 22.53 0 0 0 510.7793 100.41992 A 479.9 479.9 0 0 0 284.70508 42.693359 z M 220.41016 145.74023 L 411.2793 255.93945 L 220.41016 366.14062 L 220.41016 145.74023 z "
+            id="path10" />
+        </g>
+      </g>
+      <polygon style={{
+          fill: "#fff"
+        }}
+        points="411.28 255.94 220.41 145.74 220.41 366.14 411.28 255.94"
+      />
+    </svg>
+  );
+}