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);
-  overflow-y: unset;
-  padding: 18px 3px;
+  height: calc(100% - 22px);
+  padding: 22px 3px 0;
   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 {
-  width: 137px;
+#mainControls>label, #additionalButtons>button, div#setUsernameContainer>button {
+  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> |