From 9deb69b71b4e0ce08308dbf7bf71043855735092 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Fri, 3 Oct 2025 00:55:11 -0400
Subject: [PATCH 1/3] Fix layout on donation button

---
 public/popup.css                | 2 ++
 src/popup/YourWorkComponent.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/popup.css b/public/popup.css
index 86e5729b6f..296d6251a9 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -591,6 +591,8 @@
 #sponsorTimesDonateContainer a {
   color: var(--sb-main-fg-color);
   text-decoration: none;
+
+  padding-left: 5px;
 }
 
 /*
diff --git a/src/popup/YourWorkComponent.tsx b/src/popup/YourWorkComponent.tsx
index 568931adaa..e1d1978d0b 100644
--- a/src/popup/YourWorkComponent.tsx
+++ b/src/popup/YourWorkComponent.tsx
@@ -191,7 +191,7 @@ function TimeSavedMessage({ viewCount, minutesSaved }: { viewCount: number; minu
 
 function DonateMessage(props: { onClose: () => void }): JSX.Element {
     return (
-        <div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center" }}>
+        <div id="sponsorTimesDonateContainer" style={{ alignItems: "center", justifyContent: "center", display: "flex" }}>
             <img className="sbHeart" src="/icons/heart.svg" alt="Heart icon" />
             <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noreferrer" onClick={() => {
                 Config.config.donateClicked = Config.config.donateClicked + 1;

From 068307f98a365acdc3346fa951a6a5ecce05b1d4 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Fri, 3 Oct 2025 02:27:21 -0400
Subject: [PATCH 2/3] Colour segment selector based on category colour

---
 src/components/SponsorTimeEditComponent.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index dac96d1656..3b44a9d5e9 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -205,6 +205,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             );
         }
 
+        const borderColor = this.state.selectedCategory ? Config.config.barTypes[this.state.selectedCategory]?.color : null;
+
         return (
             <div id={"sponsorTimeEditContainer" + this.idSuffix} style={style}>
                 
@@ -215,7 +217,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     <select id={"sponsorTimeCategories" + this.idSuffix}
                         className="sponsorTimeEditSelector sponsorTimeCategories"
                         ref={this.categoryOptionRef}
-                        style={{color: "inherit", backgroundColor: "inherit"}}
+                        style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                         value={this.state.selectedCategory}
                         onChange={(event) => this.categorySelectionChange(event)}>
                         {this.getCategoryOptions()}
@@ -240,7 +242,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         <select id={"sponsorTimeActionTypes" + this.idSuffix}
                             className="sponsorTimeEditSelector sponsorTimeActionTypes"
                             value={this.state.selectedActionType}
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             ref={this.actionTypeOptionRef}
                             onChange={(e) => this.actionTypeSelectionChange(e)}>
                             {this.getActionTypeOptions(sponsorTime)}
@@ -269,7 +271,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     <div onBlur={() => this.setState({chapterNameSelectorOpen: false})}>
                         <input id={"chapterName" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput sponsorChapterNameInput"
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             ref={this.descriptionOptionRef}
                             type="text"
                             value={this.state.description}

From e1b18944bb73ed03610692b17d6a2a3f4b540f65 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Fri, 3 Oct 2025 02:29:11 -0400
Subject: [PATCH 3/3] Colour time inputs as well

---
 src/components/SponsorTimeEditComponent.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx
index 3b44a9d5e9..7994b20a0b 100644
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -123,6 +123,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             style.marginTop = "15px";
         }
 
+        const borderColor = this.state.selectedCategory ? Config.config.barTypes[this.state.selectedCategory]?.color : null;
+
         // Create time display
         let timeDisplay: JSX.Element;
         const timeDisplayStyle: React.CSSProperties = {};
@@ -151,7 +153,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         <input id={"submittingTime0" + this.idSuffix}
                             className="sponsorTimeEdit sponsorTimeEditInput"
                             type="text"
-                            style={{color: "inherit", backgroundColor: "inherit"}}
+                            style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                             value={this.state.sponsorTimeEdits[0] ?? ""}
                             onKeyDown={(e) => e.stopPropagation()}
                             onKeyUp={(e) => e.stopPropagation()}
@@ -168,7 +170,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                                 <input id={"submittingTime1" + this.idSuffix}
                                     className="sponsorTimeEdit sponsorTimeEditInput"
                                     type="text"
-                                    style={{color: "inherit", backgroundColor: "inherit"}}
+                                    style={{color: "inherit", backgroundColor: "inherit", borderColor}}
                                     value={this.state.sponsorTimeEdits[1] ?? ""}
                                     onKeyDown={(e) => e.stopPropagation()}
                                     onKeyUp={(e) => e.stopPropagation()}
@@ -205,8 +207,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             );
         }
 
-        const borderColor = this.state.selectedCategory ? Config.config.barTypes[this.state.selectedCategory]?.color : null;
-
         return (
             <div id={"sponsorTimeEditContainer" + this.idSuffix} style={style}>