Hide whitelist button when not necessary and changed size of username

public/popup.css

@@ -6,6 +6,10 @@
   --sb-green-bg: #077B27;
 }
 
+.hidden {
+  display: none;
+}
+
 #sponsorblockPopup {
   color: var(--sb-main-fg-color);
   font-family: 'Source Sans Pro', sans-serif;
@@ -216,7 +220,7 @@ align-items: center;
 }
 
 #usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
-  font-size: 19px;
+  font-size: 16px;
 }
 
 #whitelistButton > label > svg {
@@ -288,7 +292,7 @@ label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
 #usernameInput {
   background: none;
   padding: 0;
-  border: none;
+  border: white 1px solid;
   color: var(--sb-main-fg-color);
   width: calc(100% - 24px);
 }

public/popup.html

@@ -38,7 +38,7 @@
       </div>
       <div id="additionalButtons">
         <!-- grayedOut until loading complete -->
-        <div id="whitelistButton" class="grayedOut bottomSpace" title="__MSG_forceChannelCheckPopup__">
+        <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">

src/popup.ts

@@ -311,7 +311,7 @@ async function runThePopup(messageListener?: MessageListener) {
         if (request != undefined) {
             //remove loading text
             PageElements.mainControls.style.display = "flex";
-            PageElements.whitelistButton.classList.remove("grayedOut");
+            PageElements.whitelistButton.classList.remove("hidden");
             PageElements.loadingIndicator.style.display = "none";
 
             if (request.found) {