Merge pull request #1450 from AlecRust/refine-popup

Tidy/simplify popup

public/_locales/en/messages.json

@@ -125,6 +125,9 @@
     "closePopup": {
         "message": "Close Popup"
     },
+    "closeIcon": {
+        "message": "Close Icon"
+    },
     "SubmitTimes": {
         "message": "Submit Segments"
     },

public/popup.css

@@ -403,7 +403,7 @@
  */
 #mainControls {
   margin: 16px;
-  padding: 8px 12px;
+  padding: 8px 14px;
   text-align: left;
   border-radius: 8px;
   border: 2px solid var(--sb-grey-bg-color);
@@ -411,6 +411,7 @@
 .sponsorStartHint {
   display: block;
   text-align: left;
+  padding-top: 3px;
 }
 
 /*
@@ -448,24 +449,23 @@
 /*
  * Your Work box
  */
-.sbYourWorkCols {
+.sbYourWorkBox {
   margin: 16px;
   margin-bottom: 8px;
   border-radius: 8px;
   border: 2px solid var(--sb-grey-bg-color);
 }
-.sbYourWorkCols > div {
+.sbYourWorkCols {
   display: flex;
   border-top: 2px solid var(--sb-grey-bg-color);
   border-bottom: 2px solid var(--sb-grey-bg-color);
 }
 
 .sbStatsSentence {
-  padding-top: 5px;
+  padding: 6px 14px;
-  padding-bottom: 5px;
 }
 
-.sbStatsSentence .sbExtraInfo {
+.sbExtraInfo {
   display: inline-block;
 }
 
@@ -473,37 +473,28 @@
  * Increase font size of username input and display
  */
 #usernameValue,
-#usernameInput,
+#usernameInput {
-#sponsorTimesContributionsDisplay {
   font-size: 16px;
   flex: 1 0;
+}
+#sponsorTimesContributionsDisplay {
+  font-size: 16px;
 }
  /*
  * Improve alignment of username and submissions
  */
-#usernameElement,
+#usernameElement > p,
 #sponsorTimesContributionsContainer {
-  display: flex;
+  text-align: left;
-  flex-direction: column;
-  justify-content: start;
-}
-#usernameElement > span,
-#sponsorTimesContributionsContainer {
-  text-align: start;
-}
-
-#sponsorTimesContributionsContainer {
-  margin-left: 8px;
-  padding-left: 8px;
-  border-left: 2px solid var(--sb-grey-bg-color);
 }
 
 /*
  * Username
  */
 #usernameElement {
-  padding: 8px;
+  padding: 8px 14px;
   min-width: 50%;
+  width: 100%;
 }
 #setUsernameContainer {
   display: flex;
@@ -549,14 +540,15 @@
   width: calc(100% - 68px);
   text-overflow: ellipsis;
   color: var(--sb-main-fg-color);
-  background: var(--sb-grey-bg-color);
+  background-color: var(--sb-grey-bg-color);
 }
 
 /*
  * Submissions
 */
 #sponsorTimesContributionsContainer {
-  padding: 8px;
+  padding: 8px 14px;
+  border-left: 2px solid var(--sb-grey-bg-color);
 }
 
 /*
@@ -571,14 +563,13 @@
   display: inline-block;
   text-decoration: none;
   border-radius: 4px;
-  background: #333;
+  background-color: #333;
-  cursor: pointer;
   padding: 4px 8px;
   font-weight: 500;
   margin: 2px 1px;
 }
 #sbFooter a:hover {
-  background: #444;
+  background-color: #444;
 }
 
 #sponsorTimesDonateContainer a {

public/popup.html

@@ -13,7 +13,7 @@
     <div id="sponsorblockPopup" class="sponsorBlockPageBody sb-preload">
 
       <button id="sbCloseButton" title="__MSG_closePopup__" class="sbCloseButton hidden">
-        <img src="icons/close.png" width="15" height="15">
+        <img src="icons/close.png" width="15" height="15" alt="Close icon">
       </button>
 
       <div id="sbBetaServerWarning" class="hidden" title="__MSG_openOptionsPage__">
@@ -24,7 +24,7 @@
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
         <p class="u-mZ">SponsorBlock</p>
       </header>
-      
+
       <div id="videoInfo">
         <!-- Loading text -->
         <p id="loadingIndicator" class="u-mZ grey-text">__MSG_noVideoID__</p>
@@ -64,11 +64,11 @@
           </div>
         </div>
       </div>
-      
+
       <!-- Toggle Box -->
       <div class="sbControlsMenu">
         <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
-          <input type="checkbox" style="display:none;" id="whitelistToggle">
+          <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" />
           </svg>
@@ -78,7 +78,7 @@
         <!--github: mbledkowski/toggle-switch-->
         <label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
           <span class="toggleSwitchContainer-switch">
-            <input type="checkbox" style="display:none;" id="toggleSwitch" checked>
+            <input type="checkbox" style="display: none" id="toggleSwitch" checked>
             <span class="switchBg shadow"></span>
             <span class="switchBg white"></span>
             <span class="switchBg green"></span>
@@ -99,29 +99,29 @@
 
       <!-- Submit box -->
       <div id="mainControls" style="display: none">
-        <p class="sbHeader">
+        <h1 class="sbHeader">
           __MSG_recordTimesDescription__
-        </p>
+        </h1>
         <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
-        <div align="center" style="margin: 8px 0;">  
+        <div style="text-align: center; margin: 8px 0;">
           <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
-          <button id="submitTimes" class="sbMediumButton" style="display: none;">__MSG_submitTimesButton__</button>
+          <button id="submitTimes" class="sbMediumButton" style="display: none">__MSG_submitTimesButton__</button>
         </div>
-        <span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
+        <span id="submissionHint" style="display: none">__MSG_submissionEditHint__</span>
       </div>
 
       <!-- Your Work box -->
-      <div class="sbYourWorkCols">
+      <div class="sbYourWorkBox">
-        <p class="sbHeader" style="padding: 8px 16px;">
+        <h1 class="sbHeader" style="padding: 8px 15px;">
           __MSG_yourWork__
-        </p>
+        </h1>
-        <div>
+        <div class="sbYourWorkCols">
           <!-- Username -->
           <div id="usernameElement">
-            <span class="u-mZ grey-text">__MSG_Username__:
+            <p class="u-mZ grey-text">__MSG_Username__:
               <!-- loading/errors -->
               <span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
-            </span>
+            </p>
             <div id="setUsernameContainer">
               <p id="usernameValue"></p>
               <button id="setUsernameButton" title="__MSG_setUsername__">
@@ -141,7 +141,7 @@
           <!-- Submissions -->
           <div id="sponsorTimesContributionsContainer" class="hidden">
             <p class="u-mZ grey-text">__MSG_Submissions__:</p>
-            <span id="sponsorTimesContributionsDisplay">0</span>
+            <p id="sponsorTimesContributionsDisplay" class="u-mZ">0</p>
           </div>
         </div>
 
@@ -184,7 +184,7 @@
         <a id="sbConsiderDonateLink" href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener">
           __MSG_considerDonating__
         </a>
-        <img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
+        <img id="sbCloseDonate" src="/icons/close.png" alt="__MSG_closeIcon__" height="8" style="padding-left: 5px; cursor: pointer;" />
       </div>
 
       <footer id="sbFooter">