From 6f79e986ba4fc9be602151c8108256fcd78e632a Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Sat, 19 Mar 2022 10:27:09 +0000
Subject: [PATCH 01/10] Reduce "cursor: pointer" repetition and tidy

---
 public/popup.css | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index 48af762e..96f0d621 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -45,6 +45,10 @@
   text-align: center;
 }
 
+#sponsorblockPopup button {
+  cursor: pointer;
+}
+
 /*
  * Disable transition on all elements until the extension has loaded
  */
@@ -98,7 +102,6 @@
   background: transparent;
   border: 0;
   border-radius: 50%;
-  cursor: pointer;
   display: flex;
   padding: 5px;
   margin: 5px auto;
@@ -182,9 +185,8 @@
 }
 
 .sbControlsMenu-item {
-  background-color: var(--sb-grey-bg-color);
+  background: transparent;
   border: 0;
-  padding: 0;
   cursor: pointer;
   user-select: none;
   padding: 10px 15px;
@@ -323,7 +325,6 @@
   -webkit-border-radius: 28px;
   border-radius: 28px;
   display: inline-block;
-  cursor: pointer;
   color: var(--sb-main-fg-color);
   font-size: 16px;
   padding: 8px 37px;
@@ -381,11 +382,10 @@
  */
 
 #setUsernameButton,
-#submitUsername,
-#copyUserID {
+#copyUserID,
+#submitUsername {
   background: transparent;
   border: 0;
-  cursor: pointer;
   padding: 0;
   color: var(--sb-main-fg-color);
   width: fit-content;
@@ -524,7 +524,6 @@
   border: 1px solid #fff;
   border-radius: 5px;
   color: var(--sb-main-fg-color);
-  cursor: pointer;
   margin-bottom: 20px;
   padding: 5px;
 }

From c5b00f67a153286e0e8c528bc121898afa5e6f44 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Sat, 19 Mar 2022 11:14:57 +0000
Subject: [PATCH 02/10] Refine "consider force channel check" alert

---
 public/popup.css  | 16 +++++++++-------
 public/popup.html |  6 +++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index 96f0d621..7096bbe4 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -45,6 +45,7 @@
   text-align: center;
 }
 
+#sponsorblockPopup a,
 #sponsorblockPopup button {
   cursor: pointer;
 }
@@ -210,7 +211,6 @@
  */
 
 .toggleSwitchContainer {
-  cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -297,11 +297,14 @@
  */
 
 #whitelistForceCheck {
-  font-weight: bold;
-  text-decoration: underline;
-  font-size: large;
-  cursor: pointer;
-  padding: 10px 0;
+  background-color: #fff3cd;
+  color: #664d03;
+  display: block;
+  padding: 10px 15px;
+}
+
+#whitelistForceCheck:hover {
+  background-color: #f2e4b7;
 }
 
 /*
@@ -511,7 +514,6 @@
 
 #sbFooter a {
   color: var(--sb-main-fg-color);
-  cursor: pointer;
   text-decoration: none;
 }
 
diff --git a/public/popup.html b/public/popup.html
index c94dddbc..5f07649d 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -34,7 +34,7 @@
       </div>
 
       <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
+        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
           <input type="checkbox" style="display:none;" id="whitelistToggle">
           <svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
             <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
@@ -60,9 +60,9 @@
         </button>
       </div>
 
-      <p id="whitelistForceCheck" class="u-mZ hidden">
+      <a id="whitelistForceCheck" class="hidden">
         __MSG_forceChannelCheckPopup__
-      </p>
+      </a>
 
       <div id="mainControls" style="display: none">
         <p class="sbHeader">

From 9b4c4afa35775d52c02e616cfc4cb06a109adfe5 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Sat, 19 Mar 2022 11:15:32 +0000
Subject: [PATCH 03/10] Hide "consider force channel check" alert when removed
 from whitelist

---
 src/popup.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/popup.ts b/src/popup.ts
index e06db4d1..3df1eade 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -691,6 +691,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     PageElements.unwhitelistChannel.style.display = "unset";
                     document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
 
+                    //show 'consider force channel check' alert
                     if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.classList.remove("hidden");
 
                     //save this
@@ -738,6 +739,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     PageElements.unwhitelistChannel.style.display = "none";
                     document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated");
 
+                    //hide 'consider force channel check' alert
+                    PageElements.whitelistForceCheck.classList.add("hidden");
+
                     //save this
                     Config.config.whitelistedChannels = whitelistedChannels;
 

From d19fcd2a4cbcc27b1ce2527f4677f2175b77c36c Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Sat, 19 Mar 2022 11:47:34 +0000
Subject: [PATCH 04/10] Fix spacing regression

closes #1235
---
 public/popup.css  | 10 +++-------
 public/popup.html |  2 +-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index 7096bbe4..737fa33a 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -475,7 +475,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 130px;
-  margin-right: 8px;
+  margin: 0 8px 0 0;
 }
 
 /*
@@ -531,17 +531,13 @@
 }
 
 /*
- * Generic spacing classes
+ * Generic utilities
  */
 
-.u-mZ {
+ #sponsorBlockPopupBody .u-mZ {
   margin: 0 !important;
 }
 
-/*
- * Generic hide utility classes
- */
-
 #sponsorBlockPopupBody .hidden {
   display: none !important;
 }
diff --git a/public/popup.html b/public/popup.html
index 5f07649d..e50071db 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -84,7 +84,7 @@
           <div>
             <p class="u-mZ">__MSG_Username__:</p>
             <div id="setUsernameContainer">
-              <p id="usernameValue" class="u-mZ"></p>
+              <p id="usernameValue"></p>
               <button id="setUsernameButton" title="__MSG_setUsername__">
                 <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
               </button>

From d937a2ae593c8ff08120e6cfbb576d83d390f9dd Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Sat, 19 Mar 2022 12:13:04 +0000
Subject: [PATCH 05/10] Remove unnecessary flexbox usage

---
 public/popup.css  | 7 +++++--
 public/popup.html | 2 +-
 src/popup.ts      | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index 737fa33a..0dbb9dff 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -312,8 +312,11 @@
  */
 
 #mainControls {
-  flex-flow: column;
-  align-items: center;
+  margin-bottom: 12px;
+}
+
+.sponsorStartHint {
+  display: block;
   margin-bottom: 12px;
 }
 
diff --git a/public/popup.html b/public/popup.html
index e50071db..b1a241c4 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -68,7 +68,7 @@
         <p class="sbHeader">
           __MSG_recordTimesDescription__
         </p>
-        <sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
+        <sub class="sponsorStartHint">__MSG_popupHint__</sub>
         <div>
           <button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
         </div>
diff --git a/src/popup.ts b/src/popup.ts
index 3df1eade..c778c5f9 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -304,7 +304,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         //if request is undefined, then the page currently being browsed is not YouTube
         if (request != undefined) {
             //remove loading text
-            PageElements.mainControls.style.display = "flex";
+            PageElements.mainControls.style.display = "block";
             if (request.onMobileYouTube) PageElements.mainControls.classList.add("hidden");
             PageElements.whitelistButton.classList.remove("hidden");
             PageElements.loadingIndicator.style.display = "none";

From 7c4f649016189d3bfb6c13097b220acd39dc6983 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Sat, 19 Mar 2022 12:43:37 +0000
Subject: [PATCH 06/10] Fix gutter when popup is very narrow

---
 public/popup.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index 0dbb9dff..884f812e 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -317,7 +317,7 @@
 
 .sponsorStartHint {
   display: block;
-  margin-bottom: 12px;
+  padding: 0 10px 12px;
 }
 
 /*
@@ -379,7 +379,7 @@
 .sbYourWorkCols > div {
   display: flex;
   align-items: center;
-  width: 50%;
+  flex-basis: 50%;
   justify-content: center;
 }
 

From 82bdc28305924b43a71826e7f85cf174ded121b6 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Sat, 19 Mar 2022 21:01:11 +0000
Subject: [PATCH 07/10] Fix popup width issues in Firefox

fixes #778
---
 public/popup.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/popup.css b/public/popup.css
index 884f812e..83ab9fcd 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -34,6 +34,7 @@
 #sponsorBlockPopupBody {
   margin: 0;
   width: 374px;
+  max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */
   font-family: var(--sb-main-font-family);
   font-size: 14px;
   background-color: var(--sb-main-bg-color);

From d7d12e161858e456275f95ebae5930d96fc20133 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Sun, 20 Mar 2022 17:33:00 +0000
Subject: [PATCH 08/10] Set max height on popup

#778
---
 public/popup.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/popup.css b/public/popup.css
index 83ab9fcd..d311eb47 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -29,6 +29,8 @@
 
 #sponsorBlockPopupHTML {
   color-scheme: dark;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 #sponsorBlockPopupBody {

From fa0c89063337fc24dc5e5dad0229797a62b74f3e Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Mon, 21 Mar 2022 12:43:58 +0000
Subject: [PATCH 09/10] Disable popup max height when displayed in-page

---
 public/popup.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/public/popup.css b/public/popup.css
index d311eb47..a9938321 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -15,6 +15,14 @@
   margin-bottom: 16px;
 }
 
+/*
+ * Disable popup max height when displayed in-page
+ */
+
+#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
+  max-height: none;
+}
+
 /*
  * Disable fixed popup width when displayed in-page
  */

From a47fa2065294aa09e8c8fe0339c028bd385a3e42 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Fri, 15 Apr 2022 16:20:48 +0100
Subject: [PATCH 10/10] Integrate new "beta server alert" into popup CSS

---
 public/popup.css | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index a9938321..1f1dd637 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -88,6 +88,19 @@
   opacity: 1;
 }
 
+/*
+ * Alert indicating that Beta server is enabled
+ */
+
+#sbBetaServerWarning {
+  padding: 8px;
+  font-size: 1em;
+  font-weight: 700;
+  color: var(--sb-main-fg-color);
+  background-color: var(--sb-red-bg-color);
+  cursor: pointer;
+}
+
 /*
  * Header logo
  */
@@ -555,13 +568,3 @@
 #sponsorBlockPopupBody .hidden {
   display: none !important;
 }
-
-#sbBetaServerWarning {
-  padding: 8px;
-  font-size: 1em;
-  font-weight: 700;
-  word-break: break-word;
-  color: var(--sb-main-fg-color);
-  background: var(--sb-red-bg-color);
-  cursor: pointer;
-}