popup styling requested adjustments

public/popup.css

@@ -1,6 +1,6 @@
 :root {
   --sb-main-font-family: "Source Sans Pro", sans-serif;
-  --sb-main-bg-color: #111;
+  --sb-main-bg-color: #212121;
   --sb-main-fg-color: #fff;
   --sb-grey-bg-color: #333;
   --sb-grey-fg-color: #999;
@@ -10,6 +10,9 @@
 .grey-text {
   color: var(--sb-grey-fg-color);
 }
+.white-text {
+  color: var(--sb-main-fg-color);
+}
 
 /*
  * Container when popup displayed in-page
@@ -74,25 +77,6 @@
   transition: none !important;
 }
 
-/*
- * Close popup button when displayed in-page
- */
-
-.sbCloseButton {
-  background: transparent;
-  border: 0;
-  padding: 8px;
-  cursor: pointer;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  opacity: 0.5;
-}
-
-.sbCloseButton:hover {
-  opacity: 1;
-}
-
 /*
  * Alert indicating that Beta server is enabled
  */
@@ -118,15 +102,34 @@
   font-weight: bold;
   justify-content: center;
   user-select: none;
-  padding: 1rem;
+  padding-top: 16px;
 }
 
 .sbPopupLogo img {
-  margin: 0.5rem 0;
+  margin: 0.5rem;
 }
 
 /*
- * Options button
+ * Close popup button when displayed in-page (top-left corner)
+ */
+
+.sbCloseButton {
+  background: transparent;
+  border: 0;
+  padding: 8px;
+  cursor: pointer;
+  position: absolute;
+  top: 26px;
+  left: 26px;
+  opacity: 0.5;
+}
+
+.sbCloseButton:hover {
+  opacity: 1;
+}
+
+/* 
+ * Options button (top-right corner)
  */
 
 #optionsButton {
@@ -141,8 +144,8 @@
   right: 26px;
   padding: 5px;
   z-index: 69;
-  height: 2rem;
+  height: 32px;
-  width: 2rem;
+  width: 32px;
 }
 #optionsButton svg {
   transition: transform 0.15s ease-in-out !important;
@@ -205,6 +208,8 @@
  */
 
 .votingButtons {
+  margin: 4px 16px;
+  border-radius: 8px;
   font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -221,19 +226,32 @@
  */
 
 .segmentSummary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   cursor: pointer;
   font-weight: bold;
-  padding: 7px;
+  padding: 4px 8px;
   list-style: none;
   white-space: nowrap;
 }
 
+.segmentSummary > div {
+  text-align: left;
+}
+
+.summaryLabel {
+  overflow-wrap: break-word !important;
+  max-width: 50px !important;
+  white-space: normal;
+}
+
 /*
  * Category dot in segment
  */
 
 .sponsorTimesCategoryColorCircle {
-  margin: 0 8px;
+  margin-right: 8px;
 }
 
 .dot {
@@ -266,10 +284,12 @@
  */
 
 .sbControlsMenu {
-  background-color: var(--sb-grey-bg-color);
+  margin: 16px;
+  border-radius: 8px;
+  overflow: hidden;
   display: flex;
   justify-content: space-evenly;
-  margin-top: 10px;
+  background-color: var(--sb-grey-bg-color);
 }
 
 .sbControlsMenu-item {
@@ -283,6 +303,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  trasition: background-color 0.2s ease-in-out;
 }
 
 .sbControlsMenu-item:hover {
@@ -399,12 +420,16 @@
  */
 
 #mainControls {
-  margin-bottom: 12px;
+  margin: 16px;
+  padding: 8px;
+  border-radius: 8px;
+  text-align: left;
+  border: 2px solid var(--sb-grey-bg-color);
 }
 
 .sponsorStartHint {
   display: block;
-  padding: 0 10px 12px;
+  text-align: left;
 }
 
 /*
@@ -420,7 +445,7 @@
   display: inline-block;
   color: var(--sb-main-fg-color);
   font-size: 16px;
-  padding: 8px 37px;
+  padding: 8px 16px;
   font-family: var(--sb-main-font-family);
   transition: 0.01s background-color;
 }
@@ -451,7 +476,8 @@
 .sbHeader {
   font-size: 20px;
   font-weight: bold;
-  margin: 10px 0 5px;
+  text-align: left;
+  margin: 0;
 }
 
 /*
@@ -459,15 +485,23 @@
  */
 
 .sbYourWorkCols {
-  display: flex;
+  margin: 16px;
-  margin: 1rem;
+  border-radius: 8px;
+  border: 2px solid var(--sb-grey-bg-color);
 }
 
 .sbYourWorkCols > div {
   display: flex;
-  align-items: center;
+  border-top: 2px solid var(--sb-grey-bg-color);
-  flex-basis: 50%;
+}
-  justify-content: center;
+
+#usernameElement {
+  z-index: 2;
+  padding: 8px;
+}
+
+#sponsorTimesContributionsContainer {
+  padding: 8px;
 }
 
 /*
@@ -498,7 +532,7 @@
  */
 
 #submitUsername {
-  padding-left: 7px;
+  padding-left: 16px;
 }
 
 /*
@@ -516,11 +550,17 @@
  * Left align "Username" and "Submissions" labels
  */
 
-#usernameElement > div > p,
+#usernameElement > div > span,
 #sponsorTimesContributionsContainer {
   text-align: start;
 }
 
+#sponsorTimesContributionsContainer {
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 2px solid var(--sb-grey-bg-color);
+}
+
 /*
  * Enable flexbox for buttons with SVG icon
  */
@@ -553,8 +593,10 @@
 #usernameElement > div,
 #sponsorTimesContributionsContainer > div {
   display: flex;
-  flex-flow: column nowrap;
+  flex-direction: column;
-  align-items: flex-start;
+  justify-content: start;
+  /* flex-flow: column nowrap; */
+  /* align-items: flex-start; */
 }
 
 /*
@@ -564,20 +606,18 @@
 #usernameValue {
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 130px;
+  white-space: nowrap;
   margin: 0 8px 0 0;
+  max-width: 130px;
 }
 
 /*
  * Set username form container with "expanded" state
  */
 
-#setUsername {
-  display: flex;
-}
-
 #setUsername.SBExpanded {
-  width: 200%;
+  text-align: left;
+  width: calc(200% - 130px);
 }
 
 /*
@@ -585,12 +625,13 @@
  */
 
 #usernameInput {
-  background: transparent;
+  border: none;
-  padding: 2px;
+  padding: 4px 8px;
-  border: var(--sb-main-fg-color) 1px solid;
+  border-radius: 4px;
-  color: var(--sb-main-fg-color);
+  width: calc(100% - 68px);
-  width: calc(100% - 24px);
   text-overflow: ellipsis;
+  color: var(--sb-main-fg-color);
+  background: var(--sb-grey-bg-color);
 }
 
 /*
@@ -598,17 +639,16 @@
  */
 
 #sbFooter {
-  margin-top: 10px;
+  padding: 8px 0;
-  padding-bottom: 20px;
 }
 
 #sbFooter a {
   display: inline-block;
   color: var(--sb-main-fg-color);
   text-decoration: none;
-  background: #222;
+  background: #333;
   cursor: pointer;
-  padding: 5px 16px;
+  padding: 4px 8px;
   border-radius: 4px;
   font-weight: 500;
   transition: background 0.3s ease !important;
@@ -637,6 +677,7 @@
 
 #sponsorBlockPopupBody .u-mZ {
   margin: 0 !important;
+  position: relative;
 }
 
 #sponsorBlockPopupBody .hidden {

public/popup.html

@@ -18,7 +18,7 @@
       
       <header class="sbPopupLogo">
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
-        <p class="u-mZ">SponsorBlock</p>
+        <p class="u-mZ" style="margin: auto;">SponsorBlock</p>
       </header>
       
       <div id="videoInfo">
@@ -68,29 +68,27 @@
         <p class="sbHeader">
           __MSG_recordTimesDescription__
         </p>
-        <sub class="sponsorStartHint">__MSG_popupHint__</sub>
+        <sub class="sponsorStartHint grey-text">__MSG_popupHint__</sub>
-        <div>
+        <div align="center" style="margin: 8px 0;">  
-          <button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
+          <button id="sponsorStart" class="sbMediumButton" style="margin-right: 8px">__MSG_sponsorStart__</button>
-        </div>
+          <button id="submitTimes" class="sbMediumButton" style="display: none; margin: 0 !important;">__MSG_submitTimesButton__</button>
-        <div id="submissionSection" style="display: none">
-          <b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
-          <button id="submitTimes" class="sbMediumButton">__MSG_submitTimesButton__</button>
         </div>
+        <span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
       </div>
 
-      <h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
+      <!-- Your Work -->
-      <div class="sbYourWorkCols">
+      <details class="sbYourWorkCols">
-        <div id="sponsorTimesContributionsContainer" class="hidden">
+        <summary class="recordingSubtitle sbHeader" style="padding: 8px 16px; cursor: pointer;">&nbsp;&nbsp;__MSG_yourWork__</summary>
         <div>
-            <p class="u-mZ grey-text">__MSG_Submissions__:</p>
+          <!-- Username -->
-            <span id="sponsorTimesContributionsDisplay">
-              0
-            </span>
-          </div>
-        </div>
           <div id="usernameElement">
             <div>
-            <p class="u-mZ grey-text">__MSG_Username__:</p>
+              <span class="u-mZ grey-text">__MSG_Username__:
+                <!-- loading/errors -->
+                <span id="setUsernameStatusContainer" style="display: none">
+                  <span id="setUsernameStatus" class="u-mZ white-text"></span>
+                </span>
+              </span>
               <div id="setUsernameContainer">
                 <p id="usernameValue"></p>
                 <button id="setUsernameButton" title="__MSG_setUsername__">
@@ -101,9 +99,6 @@
                 </button>
               </div>
               <div id="setUsername" style="display: none">
-              <div id="setUsernameStatusContainer" style="display: none">
-                <p id="setUsernameStatus" class="u-mZ"></p>
-              </div>
                 <input id="usernameInput" placeholder="Username">
                 <button id="submitUsername">
                   <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
@@ -111,7 +106,17 @@
               </div>
             </div>
           </div>
+          <!-- Submissions -->
+          <div id="sponsorTimesContributionsContainer" class="hidden">
+            <div>
+              <p class="u-mZ grey-text">__MSG_Submissions__:</p>
+              <span id="sponsorTimesContributionsDisplay">
+                0
+              </span>
             </div>
+          </div>
+        </div>
+      </details>
 
       <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
         __MSG_savedPeopleFrom__
@@ -145,13 +150,13 @@
           <img id="sbCloseDonate" src="/icons/close.png" alt="Close icon" height="8" style="padding-left: 5px; cursor: pointer;" />
         </div>
 
+        <a id="helpButton">__MSG_help__</a>
         <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">__MSG_website__</a>
         <a href="https://sponsor.ajay.app/stats" target="_blank" rel="noopener">__MSG_viewLeaderboard__</a>
-        <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
         <br />
+        <a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a>
         <a href="https://discord.gg/SponsorBlock" target="_blank" rel="noopener">Discord</a>
         <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org" target="_blank" rel="noopener">Matrix</a>
-        <a id="helpButton">__MSG_help__</a>
         <a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">$</a>
       </footer>
 

src/content.ts

@@ -1708,7 +1708,6 @@ function openInfoMenu() {
             //make the logo source not 404
             //query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet
             const logo = <HTMLImageElement> popup.querySelector("#sponsorBlockPopupLogo");
-            const settings = <HTMLImageElement> popup.querySelector("#sbPopupIconSettings");
             const edit = <HTMLImageElement> popup.querySelector("#sbPopupIconEdit");
             const copy = <HTMLImageElement> popup.querySelector("#sbPopupIconCopyUserID");
             const check = <HTMLImageElement> popup.querySelector("#sbPopupIconCheck");
@@ -1716,7 +1715,6 @@ function openInfoMenu() {
             const heart = <HTMLImageElement> popup.querySelector(".sbHeart");
             const close = <HTMLImageElement> popup.querySelector("#sbCloseDonate");
             logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
-            settings.src = chrome.extension.getURL("icons/settings.svg");
             edit.src = chrome.extension.getURL("icons/pencil.svg");
             copy.src = chrome.extension.getURL("icons/clipboard.svg");
             check.src = chrome.extension.getURL("icons/check.svg");

src/popup.ts

@@ -100,7 +100,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         "submitUsername",
         "sbPopupIconCopyUserID",
         // More
-        "submissionSection",
+        "submissionHint",
         "mainControls",
         "loadingIndicator",
         "videoFound",
@@ -436,8 +436,17 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 
                 segmentTimeFromToNode.style.margin = "5px";
                 
-                segmentSummary.appendChild(categoryColorCircle);
+                // for inline-styling purposes
-                segmentSummary.appendChild(textNode);
+                const labelContainer = document.createElement("div");
+                labelContainer.appendChild(categoryColorCircle);
+
+                const span = document.createElement('span');
+                span.className = "summaryLabel";
+                span.appendChild(textNode);
+                labelContainer.appendChild(span);
+                // for inline-styling purposes
+
+                segmentSummary.appendChild(labelContainer);
                 segmentSummary.appendChild(segmentTimeFromToNode);
                 
                 const votingButtons = document.createElement("details");
@@ -562,7 +571,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     function updateSegmentEditingUI() {
         PageElements.sponsorStart.innerText = chrome.i18n.getMessage(creatingSegment ? "sponsorEnd" : "sponsorStart");
 
-        PageElements.submissionSection.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
+        PageElements.submitTimes.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
+        PageElements.submissionHint.style.display = sponsorTimes && sponsorTimes.length > 0 ? "unset" : "none";
     }
 
     //make the options div visible