Popup.html redesign

public/popup.css

@@ -11,14 +11,12 @@
   color: var(--sb-main-fg-color);
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 13px;
-  overflow-y: scroll;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   width: calc(100% - 6px);
-  height: calc(100% - 36px);
+  height: calc(100% - 22px);
-  overflow-y: unset;
+  padding: 22px 3px 0;
-  padding: 18px 3px;
   text-align: center;
 }
 
@@ -47,6 +45,7 @@ div.logoText>p, .recordingSubtitle {
   border-radius: 25px;
   text-decoration: none;
   color: black;
+  min-height: 24px;
   height: 24px;
   width: 152px;
   display: block;
@@ -131,10 +130,21 @@ div.logoText>p, .recordingSubtitle {
   justify-content: center;
 }
 
-#videoInfo {
+#mainControls, #sponsorTimesSkipsDoneContainer, .toggleSwitchContainer {
+  margin-bottom: 2px !important;
+}
+
+.recordingSubtitle {
+  margin-bottom: 4px !important;
+}
+
+.logoText {
   margin-bottom: 6px !important;
 }
 
+#videoInfo, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
+  margin-bottom: 12px !important;
+}
 /* additional buttons */
 
 #additionalButtons {
@@ -163,14 +173,15 @@ label>svg>path {
   fill: var(--sb-main-fg-color);
 }
 
-label>p, #disableExtension>p, #usernameValue, #usernameElement > p,#sponsorTimesContributionsContainer > p {
+label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponsorTimesContributionsContainer > div > p, #usernameElement > div > #setUsername > #setUsernameStatusContainer > p {
   margin: 0;
 }
 
-#usernameElement > p, #sponsorTimesContributionsContainer {
+#usernameElement > div > p, #sponsorTimesContributionsContainer {
   text-align: start;
 }
 
+
 .grayedOut>label>svg>path {
   fill: var(--sb-gray-fg-color);
 }
@@ -192,8 +203,19 @@ label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
   flex-flow: row nowrap;
 }
 
-#usernameElement {
+#mainControls>label, #additionalButtons>button, div#setUsernameContainer>button {
-  width: 137px;
+  cursor: pointer;
+}
+
+#usernameElement > div, #sponsorTimesContributionsContainer > div {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+}
+
+.sidebyside > #usernameElement, .sidebyside > #sponsorTimesContributionsContainer {
+  display: flex;
+  align-items: center;
 }
 
 #usernameValue{
@@ -201,21 +223,25 @@ label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
   text-overflow: ellipsis;
 }
 
+#setUsername {
+  display:flex;
+}
+
 #usernameInput {
   background: none;
+  padding: 0;
   border: none;
   color: var(--sb-main-fg-color);
+  width: calc(100% - 24px);
 }
 
 /* footer */
 
+#sbFooter {
+  margin-bottom: 28px;
+}
+
 #sbFooter > a {
   color: var(--sb-main-fg-color);
   text-decoration: none;
 }
-
-/* end reset */
-
-#sponsorBlockPopupLogo {
-  vertical-align: text-bottom;
-}

public/popup.html

@@ -24,7 +24,7 @@
     <div class="sidebyside">
       <div id="disableExtension">
         <!--github: mbledkowski/toggle-switch-->
-        <label for="toggleSwitch" class="toggleSwitchContainer bottomSpace">
+        <label for="toggleSwitch" class="toggleSwitchContainer">
           <input type="checkbox" style="display:none;" id="toggleSwitch" checked>
           <span class="switchBg shadow"></span>
           <span class="switchBg white"></span>
@@ -55,6 +55,7 @@
     <h1 class="recordingSubtitle">__MSG_yourWork__</h1>
     <div class="sidebyside">
       <div id="usernameElement">
+        <div>
         <p>__MSG_Username__</p>
         <div id="setUsernameContainer">
           <p id="usernameValue"></p>
@@ -71,12 +72,15 @@
             <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16">
           </button>
         </div>
+        </div>
       </div>
       <div id="sponsorTimesContributionsContainer" style="display: none">
+        <div>
         <p>__MSG_soFarUHSubmited__</p>
         <span id="sponsorTimesContributionsDisplay">
           0
         </span>
+        </div>
       </div>
     </div>
 
@@ -104,7 +108,6 @@
     </div>
     <a class="discreteLink largeButton" href="https://sponsor.ajay.app/stats"
       target="_blank">__MSG_viewLeaderboard__</a>
-    <button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
     <footer id="sbFooter">
       <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">Website</a> |
       <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a> |

src/popup.ts

@@ -57,7 +57,7 @@ async function runThePopup(messageListener?: MessageListener) {
     "enableSkipping",
     "toggleSwitch",
     // Options
-    "showNoticeAgain",
+    //"showNoticeAgain",
     "optionsButton",
     // More controls
     //"submitTimes",
@@ -71,7 +71,7 @@ async function runThePopup(messageListener?: MessageListener) {
     "sponsorTimesViewsDisplay",
     "sponsorTimesViewsDisplayEndWord",
     // sponsorTimesOthersTimeSaved
-    "sponsorTimesOthersTimeSavedContainer",
+    //"sponsorTimesOthersTimeSavedContainer",
     "sponsorTimesOthersTimeSavedDisplay",
     "sponsorTimesOthersTimeSavedEndWord",
     // sponsorTimesSkipsDone
@@ -125,7 +125,7 @@ async function runThePopup(messageListener?: MessageListener) {
     //PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true));
     //PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false));
     //PageElements.submitTimes.addEventListener("click", submitTimes);
-    PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
+    //PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
     PageElements.setUsernameButton.addEventListener("click", setUsernameButton);
     PageElements.submitUsername.addEventListener("click", submitUsername);
     PageElements.optionsButton.addEventListener("click", openOptions);
@@ -167,9 +167,9 @@ async function runThePopup(messageListener?: MessageListener) {
     //if the don't show notice again variable is true, an option to
     //  disable should be available
     let dontShowNotice = Config.config.dontShowNotice;
-    if (dontShowNotice != undefined && dontShowNotice) {
+    /*if (dontShowNotice != undefined && dontShowNotice) {
         PageElements.showNoticeAgain.style.display = "unset";
-    }
+    }*/
 
     utils.sendRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID, (res) => {
         if (res.status === 200) {
@@ -179,13 +179,13 @@ async function runThePopup(messageListener?: MessageListener) {
 
     //get the amount of times this user has contributed and display it to thank them
     if (Config.config.sponsorTimesContributed != undefined) {
-        if (Config.config.sponsorTimesContributed !== 1) {
+        /*if (Config.config.sponsorTimesContributed !== 1) {
-            //PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
+            PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
         } else {
-            //PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
+            PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
-        }
+        }*/
         PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed;
-        PageElements.sponsorTimesContributionsContainer.style.display = "unset";
+        PageElements.sponsorTimesContributionsContainer.style.display = "flex";
 
         //get the userID
         let userID = Config.config.userID;
@@ -220,7 +220,7 @@ async function runThePopup(messageListener?: MessageListener) {
                         }
 
                         PageElements.sponsorTimesOthersTimeSavedDisplay.innerText = getFormattedHours(minutesSaved);
-                        PageElements.sponsorTimesOthersTimeSavedContainer.style.display = "unset";
+                        //PageElements.sponsorTimesOthersTimeSavedContainer.style.display = "unset";
                     }
                 }
             });
@@ -784,11 +784,11 @@ async function runThePopup(messageListener?: MessageListener) {
         }
     }
   
-    function showNoticeAgain() {
+    /*function showNoticeAgain() {
         Config.config.dontShowNotice = false;
   
         PageElements.showNoticeAgain.style.display = "none";
-    }
+    }*/
 
     function updateStartTimeChosen() {
         //update startTimeChosen letiable
@@ -834,7 +834,7 @@ async function runThePopup(messageListener?: MessageListener) {
                 PageElements.usernameInput.style.display = "unset";
 
                 PageElements.setUsernameContainer.style.display = "none";
-                PageElements.setUsername.style.display = "unset";
+                PageElements.setUsername.style.display = "flex";
                 PageElements
                 PageElements.setUsernameStatusContainer.style.display = "none";
             } else {
@@ -1097,7 +1097,7 @@ async function runThePopup(messageListener?: MessageListener) {
 if (chrome.tabs != undefined) {
     //add the width restriction (because Firefox)
     let link = <HTMLLinkElement> document.getElementById("sponsorBlockStyleSheet");
-    (<CSSStyleSheet> link.sheet).insertRule('.popupBody { width: 325 }', 0);
+    //(<CSSStyleSheet> link.sheet).insertRule('.popupBody { width: 325 }', 0);
 
     //this means it is actually opened in the popup
     runThePopup();