aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay <[email protected]>2023-07-28 18:42:27 -0400
committerAjay <[email protected]>2023-07-28 18:42:27 -0400
commit882d462849286a83ea6e6a204efd48610bdaaeca (patch)
treee21f15db633fa89fb4bced20d9670e5e6d9fef50
parentfc3710b37b14052ada393882cc863e05c6943c4a (diff)
downloadSponsorBlock-882d462849286a83ea6e6a204efd48610bdaaeca.tar.gz
SponsorBlock-882d462849286a83ea6e6a204efd48610bdaaeca.zip
Add category color to skip notice
-rw-r--r--src/components/NoticeComponent.tsx10
-rw-r--r--src/components/SkipNoticeComponent.tsx4
-rw-r--r--src/svg-icons/sb_svg.tsx55
3 files changed, 64 insertions, 5 deletions
diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx
index b710480e..2f404ba1 100644
--- a/src/components/NoticeComponent.tsx
+++ b/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}
- className="sponsorSkipLogo sponsorSkipObject"
- src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
- </img>
+ <SbSvg
+ id={"sponsorSkipLogo" + this.idSuffix}
+ fill={this.props.logoFill}
+ className="sponsorSkipLogo sponsorSkipObject"/>
}
<span id={"sponsorSkipMessage" + this.idSuffix}
diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index 9615db74..2ee1018c 100644
--- a/src/components/SkipNoticeComponent.tsx
+++ b/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() ]}
diff --git a/src/svg-icons/sb_svg.tsx b/src/svg-icons/sb_svg.tsx
new file mode 100644
index 00000000..bb4a2472
--- /dev/null
+++ b/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>
+ );
+} \ No newline at end of file