Buttons now change color depending on state. Added colorPalette config entry

public/_locales/en/messages.json

@@ -700,7 +700,7 @@
         "message": "Incorrect/Wrong Timing"
     },
     "incorrectCategory": {
-        "message": "Wrong Category"
+        "message": "Change Category"
     },
     "nonMusicCategoryOnMusic": {
         "message": "This video is categorized as music. Are you sure this has a sponsor? If this is actually a \"Non-Music segment\", open up the extension options and enable this category. Then, you can submit this segment as \"Non-Music\" instead of sponsor. Please read the guidelines if you are confused."
@@ -822,5 +822,8 @@
     },
 	"ContinueVoting": {
         "message": "Continue Voting"
+    },
+	"ChangeCategoryTooltip": {
+        "message": "This will instantly apply to your segments"
     }
 }

public/content.css

@@ -254,12 +254,16 @@
 
 .sponsorTimesVoteButtonsContainer {
 	float: left;
-	
+	vertical-align:middle;
 	padding: 2px 5px;
 
 	margin-right: 4px;
 }
 
+.sponsorTimesVoteButtonsContainer div{
+	display: inline-block;
+}
+
 .sponsorSkipNoticeRightSection {
     right: 0;
 	position: absolute;
@@ -330,7 +334,8 @@
 }
 
 .voteButton {
-	height: 17px;
+	height: 24px;
+	width: 24px;
 	cursor: pointer;
 }
 .voteButton:hover {

src/components/SkipNoticeComponent.tsx

@@ -8,6 +8,10 @@ import SubmissionNotice from "../render/SubmissionNotice";
 
 import { getCategoryActionType, getSkippingText } from "../utils/categoryUtils";
 
+import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
+import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
+import PencilSvg from "../svg-icons/pencil_svg";
+
 export enum SkipNoticeAction {
     None,
     Upvote,
@@ -96,7 +100,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             this.segments.sort((a, b) => a.segment[0] - b.segment[0]);
         }
     
-        //this is the suffix added at the end of every id
+        // This is the suffix added at the end of every id
         for (const segment of this.segments) {
             this.idSuffix += segment.UUID;
         }
@@ -193,31 +197,32 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         className="sponsorTimesVoteButtonsContainer">
 
                         {/* Upvote Button */}
-                        <img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
+                        <div id={"sponsorTimesDownvoteButtonsContainerUpvote" + this.idSuffix}
-                            className="sponsorSkipObject voteButton"
+                                className="voteButton"
-                            style={{marginRight: "10px"}}
+                                style={{marginRight: "5px"}}
-                            src={chrome.extension.getURL("icons/thumbs_up.svg")}
                                 title={chrome.i18n.getMessage("upvoteButtonInfo")}
                                 onClick={() => this.prepAction(SkipNoticeAction.Upvote)}>
-                        
+                            <ThumbsUpSvg fill={(this.state.actionState === SkipNoticeAction.Upvote) ? Config.config.colorPalette.get("SponsorBlockRed") : Config.config.colorPalette.get("SponsorBlockWhite")} />
-                        </img>
+                        </div>
 
                         {/* Report Button */}
-                        <img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
+                        <div id={"sponsorTimesDownvoteButtonsContainerDownvote" + this.idSuffix}
-                            className="sponsorSkipObject voteButton"
+                                className="voteButton"
-                            style={{marginRight: "10px"}}
+                                style={{marginRight: "5px", marginLeft: "5px"}}
-                            src={chrome.extension.getURL("icons/thumbs_down.svg")}
                                 title={chrome.i18n.getMessage("reportButtonInfo")}
                                 onClick={() => this.prepAction(SkipNoticeAction.Downvote)}>
-                        </img>
+                            <ThumbsDownSvg fill={(this.state.actionState === SkipNoticeAction.Downvote) ? Config.config.colorPalette.get("SponsorBlockRed") : Config.config.colorPalette.get("SponsorBlockWhite")} />
+                        </div>
 
                         {/* Copy and Downvote Button */}
-                        <img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
+                        <div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
-                            className="sponsorSkipObject voteButton voteButtonImageCopyDownvote"
+                                className="voteButton"
-                            title={chrome.i18n.getMessage("CopyDownvoteButtonInfo")}
+                                style={{marginLeft: "5px"}}
-                            src={chrome.extension.getURL("icons/pencil.svg")}
                                 onClick={() => this.adjustEditingState(true)}>
-                        </img>
+                            <PencilSvg fill={(this.state.editing === true ||
+                                            this.state.actionState === SkipNoticeAction.CopyDownvote ||
+                                            this.state.choosingCategory === true) ? Config.config.colorPalette.get("SponsorBlockRed") : Config.config.colorPalette.get("SponsorBlockWhite")} />
+                        </div>
                     </td>
 
                     :
@@ -250,7 +255,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         key={1}>
                         <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
                             onClick={this.contentContainer().dontShowNoticeAgain}>
-
                             {chrome.i18n.getMessage("Hide")}
                         </button>
                     </td>
@@ -265,14 +269,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
                         {/* Copy Segment */}
                         <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                                title={chrome.i18n.getMessage("CopyDownvoteButtonInfo")}
                                 onClick={() => this.prepAction(SkipNoticeAction.CopyDownvote)}>
                             {chrome.i18n.getMessage("CopyAndDownvote")}
                         </button>
 
                         {/* Category vote */}
                         <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                                title={chrome.i18n.getMessage("ChangeCategoryTooltip")}
                                 onClick={() => this.openCategoryChooser()}>
-
                             {chrome.i18n.getMessage("incorrectCategory")}
                         </button>
                     </td>

src/config.ts

@@ -44,7 +44,8 @@ interface SBConfig {
     autoHideInfoButton: boolean,
     autoSkipOnMusicVideos: boolean,
     highlightCategoryUpdate: boolean,
-    wikiPages: SBMap<string, string>
+    wikiPages: SBMap<string, string>,
+    colorPalette: SBMap<string, string>
 
     // What categories should be skipped
     categorySelections: CategorySelection[],
@@ -211,6 +212,11 @@ const Config: SBObject = {
             ["mute", "https://wiki.sponsor.ajay.app/w/Mute_Segment"],
             ]),
 
+        colorPalette: new SBMap("colorPalette", [
+            ["SponsorBlockRed", "#780303"],
+            ["SponsorBlockWhite", "#ffffff"]
+            ]),
+
         // Preview bar
         barTypes: {
             "preview-chooseACategory": {

src/svg-icons/pencil_svg.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+const pencilSvg = ({
+  fill = "#ffffff"
+}) => (
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="18"
+  viewBox="0 0 24 24"
+  fill={fill}
+  >
+  <path 
+      d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"></path>
+</svg>
+);
+
+export default pencilSvg;

src/svg-icons/thumbs_down_svg.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+const thumbsDownSvg = ({
+  fill = "#ffffff"
+}) => (
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="18"
+  fill={fill}
+  viewBox="0 0 24 24"
+  >
+  <path
+      fill="none"
+      d="M0 0h24v24H0z">
+  </path>
+  <path
+      d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
+  ></path>
+</svg>
+);
+
+export default thumbsDownSvg;

src/svg-icons/thumbs_up_svg.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+const thumbsUpSvg = ({
+  fill = "#ffffff"
+}) => (
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="18"
+  height="18"
+  fill={fill}
+  viewBox="0 0 24 24"
+  >
+  <path
+    fill="none"
+    d="M0 0h24v24H0V0z"></path>
+  <path
+      d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
+  ></path>
+</svg>
+);
+
+export default thumbsUpSvg;