From df84f328a752272db3453c490ecdac9967b4675a Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Sun, 13 Dec 2020 22:41:59 -0500
Subject: [PATCH] Move whitelisting warning

---
 public/popup.css  | 21 +++++++++++++++------
 public/popup.html | 16 ++++++++++------
 src/popup.ts      | 11 ++++-------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index ea3ce254..e3771b56 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -199,6 +199,14 @@ background-color:#ec1c1c;
   margin-bottom: 2px !important;
 }
 
+#whitelistForceCheck {
+  font-weight: bold;
+  text-decoration: underline;
+  font-size: large;
+  cursor: pointer;
+  padding: 10px 0;
+}
+
 .sbHeader {
   margin-bottom: 5px !important;
 }
@@ -248,14 +256,16 @@ background-color:#ec1c1c;
   font-size: 16px;
 }
 
-#whitelistButton > label > svg {
+.SBWhitelistIcon {
   min-width: 16px;
   min-height: 16px;
   margin-top: auto;
   margin-bottom: auto;
+
+  height: 100%;
 }
 
-label>svg>path {
+.SBWhitelistIcon>path {
   fill: var(--sb-main-fg-color);
 }
 
@@ -267,8 +277,7 @@ label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponso
   text-align: start;
 }
 
-
-.grayedOut>label>svg>path {
+.grayedOut>.SBWhitelistIcon>path {
   fill: var(--sb-gray-fg-color);
 }
 
@@ -276,11 +285,11 @@ label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponso
   color: var(--sb-gray-fg-color);
 }
 
-label>svg.rotated {
+.SBWhitelistIcon.rotated {
   transform: rotate(45deg);
 }
 
-label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
+.SBWhitelistIconContainer, button#optionsButton>img, .logoText>img, #usernameValue {
   margin-right: 8px;
 }
 
diff --git a/public/popup.html b/public/popup.html
index e6e28022..f4cd78d2 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -39,14 +39,13 @@
         <div id="whitelistButton" class="hidden bottomSpace" title="__MSG_forceChannelCheckPopup__">
           <input type="checkbox" style="display:none;" id="whitelistToggle">
           <label for="whitelistToggle" class="whitelistToggleText">
-            <svg viewBox="0 0 24 24" width="16" height="16">
-              <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
-            </svg>
+            <div class="SBWhitelistIconContainer">
+              <svg viewBox="0 0 24 24" width="16" height="16" class="SBWhitelistIcon">
+                <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
+              </svg>
+            </div>
             <p id="whitelistChannel">__MSG_whitelistChannel__</p>
             <p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
-            <div id="whitelistForceCheck" style="text-decoration: underline; cursor: pointer;display: none">
-              __MSG_forceChannelCheckPopup__
-            </div>
           </label>
         </div>
         <button id="optionsButton" title="__MSG_optionsInfo__">
@@ -55,6 +54,11 @@
         </button>
       </div>
     </div>
+
+    <div id="whitelistForceCheck" class="hidden">
+      __MSG_forceChannelCheckPopup__
+    </div>
+
     <div id="mainControls" style="display: none">
       <p class="sbHeader sbSubHeader">
         __MSG_recordTimesDescription__
diff --git a/src/popup.ts b/src/popup.ts
index 563a871d..a8399fcf 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -339,7 +339,7 @@ async function runThePopup(messageListener?: MessageListener) {
                         PageElements.whitelistChannel.style.display = "none";
                         PageElements.unwhitelistChannel.style.display = "unset";
                         PageElements.whitelistToggle.checked = true;
-                        document.querySelectorAll('label > svg')[0].classList.add("rotated");
+                        document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
                     }
                 });
             }
@@ -972,9 +972,9 @@ async function runThePopup(messageListener?: MessageListener) {
                     //change button
                     PageElements.whitelistChannel.style.display = "none";
                     PageElements.unwhitelistChannel.style.display = "unset";
-                    document.querySelectorAll('label > svg')[0].classList.add("rotated");
+                    document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
 
-                    if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.style.display = "unset";
+                    if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.classList.remove("hidden");
 
                     //save this
                     Config.config.whitelistedChannels = whitelistedChannels;
@@ -1019,10 +1019,7 @@ async function runThePopup(messageListener?: MessageListener) {
                         //change button
                         PageElements.whitelistChannel.style.display = "unset";
                         PageElements.unwhitelistChannel.style.display = "none";
-                        document.querySelectorAll('label > svg')[0].classList.remove("rotated");
-
-                        //PageElements.downloadedSponsorMessageTimes.innerText = "";
-                        //PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";
+                        document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated");
 
                         //save this
                         Config.config.whitelistedChannels = whitelistedChannels;