Tidy/simplify popup

2 files changed, 37 insertions, 47 deletions

diff --git a/public/popup.css b/public/popup.css
index 1a95c861..1944e5e4 100644
--- a/public/popup.css
+++ b/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,24 @@
 /*
  * Your Work box
  */
-.sbYourWorkCols {
+.sbYourWorkBox {
   margin: 16px;
   margin-bottom: 8px;
   border-radius: 8px;
   border: 2px solid var(--sb-grey-bg-color);
 }
-.sbYourWorkCols > div {
-  display: flex;
+.sbYourWorkCols {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   border-top: 2px solid var(--sb-grey-bg-color);
   border-bottom: 2px solid var(--sb-grey-bg-color);
 }
 
 .sbStatsSentence {
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding: 6px 14px;
 }
 
-.sbStatsSentence .sbExtraInfo {
+.sbExtraInfo {
   display: inline-block;
 }
 
@@ -473,37 +474,26 @@
  * Increase font size of username input and display
  */
 #usernameValue,
-#usernameInput,
-#sponsorTimesContributionsDisplay {
+#usernameInput {
   font-size: 16px;
   flex: 1 0;
 }
+#sponsorTimesContributionsDisplay {
+  font-size: 16px;
+}
  /*
  * Improve alignment of username and submissions
  */
-#usernameElement,
-#sponsorTimesContributionsContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-}
-#usernameElement > span,
-#sponsorTimesContributionsContainer {
-  text-align: start;
-}
-
+#usernameElement > p,
 #sponsorTimesContributionsContainer {
-  margin-left: 8px;
-  padding-left: 8px;
-  border-left: 2px solid var(--sb-grey-bg-color);
+  text-align: left;
 }
 
 /*
  * Username
  */
 #usernameElement {
-  padding: 8px;
-  min-width: 50%;
+  padding: 8px 14px;
 }
 #setUsernameContainer {
   display: flex;
@@ -549,14 +539,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 +562,13 @@
   display: inline-block;
   text-decoration: none;
   border-radius: 4px;
-  background: #333;
-  cursor: pointer;
+  background-color: #333;
   padding: 4px 8px;
   font-weight: 500;
   margin: 2px 1px;
 }
 #sbFooter a:hover {
-  background: #444;
+  background-color: #444;
 }
 
 #sponsorTimesDonateContainer a {
diff --git a/public/popup.html b/public/popup.html
index d5a5cbae..99c6471f 100644
--- a/public/popup.html
+++ b/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">
-        <p class="sbHeader" style="padding: 8px 16px;">
+      <div class="sbYourWorkBox">
+        <h1 class="sbHeader" style="padding: 8px 15px;">
           __MSG_yourWork__
-        </p>
-        <div>
+        </h1>
+        <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>