diff options
| -rw-r--r-- | src/components/NoticeComponent.tsx | 10 | ||||
| -rw-r--r-- | src/components/SkipNoticeComponent.tsx | 4 | ||||
| -rw-r--r-- | src/svg-icons/sb_svg.tsx | 55 |
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 |