Merge pull request #440 from mbledkowski/master

Design change of popup.html

README.md

@@ -97,6 +97,7 @@ The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) was
 
 Originally forked from [YTSponsorSkip](https://github.com/NDevTK/YTSponsorSkip), but zero code remains.
 
-Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+Icons made by:
-
+* <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
-Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+* <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+* <a href="https://iconmonstr.com/about/#creator">Alexander Kahlkopf</a> from <a href="https://iconmonstr.com/">iconmonstr.com</a> and are licensed by <a href="https://iconmonstr.com/license/">iconmonstr License</a>

manifest/manifest.json

@@ -28,6 +28,9 @@
         "icons/PlayerStopIconSponsorBlocker256px.png",
         "icons/PlayerUploadIconSponsorBlocker256px.png",
         "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
+        "icons/settings.svg",
+        "icons/pencil.svg",
+        "icons/check.svg",
         "icons/upvote.png",
         "icons/downvote.png",
         "icons/thumbs_down.svg",

public/_locales/en/messages.json

@@ -86,7 +86,7 @@
         "message": "Segment Ends Now"
     },
     "noVideoID": {
-        "message": "No YouTube video found at this tab. If you know this is a YouTube tab, close this popup and open it again. If that does not work, try reloading the tab."
+        "message": "No YouTube video found.\nIf this is incorrect, refresh the tab."
     },
     "success": {
         "message": "Success!"
@@ -122,31 +122,35 @@
         "message": "Are you sure you want to submit this?"
     },
     "whitelistChannel": {
-         "message": "Whitelist Channel"
+         "message": "Add to whitelist"
     },
     "removeFromWhitelist": {
-         "message": "Remove Channel From Whitelist"
+         "message": "Remove from whitelist"
     },
     "voteOnTime": {
          "message": "Vote On A Segment"
     },
-    "soFarUHSubmited": {
+    "Submissions": {
-         "message": "So far, you've submitted"
+         "message": "Submissions"
     },
     "savedPeopleFrom": {
-         "message": "You have saved people from "
+         "message": "You've saved people from "
     },
     "viewLeaderboard": {
-         "message": "View the leaderboard"
+         "message": "Leaderboard"
     },
     "here": {
         "message": "here"
     },
     "recordTimesDescription": {
-         "message": "Click the button below when the segment starts and ends to record and submit it to the database."
+         "message": "Submit"
+    },
+    "submissionEditHint": {
+        "message": "Section editing will appear after you click submit",
+        "description": "Appears in the popup to inform them that editing has been moved to the video player."
     },
     "popupHint": {
-         "message": "Hint: Press the semicolon key while focused on a video to report the start/end of a segment and quote to submit. (This can be changed in the options)"
+         "message": "Hint: You can setup keybinds for submitting in the options"
     },
     "clearTimesButton": {
         "message": "Clear Times"
@@ -157,6 +161,9 @@
     "publicStats": {
         "message": "This is used on the public stats page to show off how much you've contributed. See it"
     },
+    "Username": {
+        "message": "Username"
+    },
     "setUsername": {
         "message": "Set Username"
     },
@@ -253,10 +260,10 @@
         "message": "Connection Timeout. Check your internet connection. If your internet is working, the server is probably overloaded or down."
     },
     "disableSkipping": {
-        "message": "Disable SponsorBlock"
+        "message": "Skipping is enabled"
     },
     "enableSkipping": {
-        "message": "Enable SponsorBlock"
+        "message": "Skipping is disabled"
     },
     "yourWork": {
         "message": "Your Work",
@@ -296,7 +303,7 @@
         "message": "This time appears in brackets next to the current time on below the seekbar. This shows the total video duration minus any segments. This includes segments marked as only \"Show In Seekbar\"."
     },
     "youHaveSkipped": {
-        "message": "You have skipped "
+        "message": "You've skipped "
     },
     "youHaveSaved": {
         "message": "You have saved yourself "
@@ -314,10 +321,10 @@
         "message": "hours"
     },
     "youHaveSavedTime": {
-        "message": "You have saved people"
+        "message": "You've saved people"
     },
     "youHaveSavedTimeEnd": {
-        "message": " of their lives."
+        "message": " of their lives"
     },
     "statusReminder": {
         "message": "Check status.sponsor.ajay.app for server status."
@@ -634,5 +641,8 @@
     },
     "unsubmittedWarningDescription": {
         "message": "Send a notification when you leave a video with segments that are not uploaded"
+    },
+    "help": {
+        "message": "Help"
     }
 }

public/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M20.3 2L9 13.6l-5.3-5L0 12.3 9 21 24 5.7z"/></svg>

public/icons/pencil.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"/></svg>

public/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg>

public/icons/thumb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M21.4 9.6c-1.2 0-2.9-.3-4-.8.8-3.3 1.3-8.8-2.2-8.8-1.8 0-2.3 1.7-2.8 3.3-1.6 5.4-4 6.9-6.4 7.5V10H0v12h6v-.9a19.2 19.2 0 016.2 1.8c1.2.5 3 1.1 5.3 1.1 2.5 0 4.3-1 5-3.7.5-1.9 1.5-7.2 1.5-8.2 0-1.7-1.2-2.5-2.6-2.5zM4 20H2v-8h2v8zm15.9-5.6h1c1.2 0 1.1 1.5 0 1.6h-1.7c-.7.2-.7 1.3.1 1.2h1.2c1 0 1 1.4 0 1.5l-1.7.1c-.8.1-.7 1.3 0 1.2h.8c.9-.1 1 .8-.3 1.6-1.5.9-4.6.1-6.4-.6-2.2-1-4.4-2-7-2v-6c3.3-.8 6.4-2.3 8.4-9.1.9-3.1 1.7-2 1.7.6 0 2-.5 3.8-1 5.5 1.1.5 3.4 1.4 6.2 1.6 1 0 1 1.4 0 1.5l-1.5.2s-.6 1.1.2 1.1z"/></svg>

public/libs/Source+Sans+Pro.css

@@ -3,7 +3,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
@@ -11,7 +11,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
@@ -19,7 +19,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
@@ -27,7 +27,7 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
@@ -35,15 +35,15 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@@ -51,6 +51,62 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmhduz8A.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwkxduz8A.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmxduz8A.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlBduz8A.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmBduz8A.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwmRduz8A.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

public/popup.css

@@ -1,242 +1,361 @@
-/* reset some properties to default (youtube messes with them */
+:root {
-p.popupElement {
+  --sb-main-bg-color: #222626;
-	margin-block-start: 1em;
+  --sb-main-fg-color: white;
-	margin-block-end: 1em;
+  --sb-gray-fg-color: #444848;
-	margin-inline-start: 0px;
+  --sb-on-white-bg: black;
-	margin-inline-end: 0px;
+  --sb-green-bg: #077B27;
 }
 
-h1.popupElement {
+.hidden {
-	margin-block-start: 0.67em;
+  display: none !important;
-    margin-block-end: 0.67em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    font-weight: bold;
 }
 
-h2.popupElement {
+#sponsorblockPopup {
-	margin-block-start: 0.83em;
+  color: var(--sb-main-fg-color);
-    margin-block-end: 0.83em;
+  font-family: 'Source Sans Pro', sans-serif;
-    margin-inline-start: 0px;
+  font-size: 14px;
-	margin-inline-end: 0px;
+  display: flex;
-	font-weight: bold;
+  flex-flow: column nowrap;
+  align-items: center;
+  width: 330px;
+  margin: 22px;
+  text-align: center;
 }
 
-h3.popupElement {
+#issueReporterTimeButtons > .votingButtons > .segmentTimeButton {
-	margin-block-start: 1em;
+  font-weight: bold;
-    margin-block-end: 1em;
+  color: var(--sb-main-fg-color);
-    margin-inline-start: 0px;
+  background: none;
-	margin-inline-end: 0px;
+  border: none;
-	font-weight: bold;
+  padding: 10px 8px;
+  outline: none;
+
+  cursor: pointer;
 }
 
-sub.popupElement {
+.dot {
-	font-size: smaller;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  display: inline-block;
 }
-/* end reset */
 
-#sponsorBlockPopupLogo {
+.sponsorTimesThanksForVotingText {
-	vertical-align: text-bottom;
+  font-size: large;
+}
+
+.voteButton {
+  height: 20px;
+  padding: 0 5px;
+
+  cursor: pointer;
+}
+
+#videoInfo>p, #videoInfo>div>p {
+  margin: 0;
+}
+
+div.logoText {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  color: var(--sb-main-fg-color);
+}
+
+div.logoText>p, .sbHeader {
+  font-size: 32px;
+  margin: -4px 0 -2px;
+  font-weight: bold;
+}
+
+.sbHeader.sbSubHeader {
+  font-size: 20px;
+}
+
+.largeButton{
+  background: white;
+  /*font-weight: bold;*/
+  padding: 6px 24px;
+  font-size: 20px;
+  border-radius: 25px;
+  border: none;
+  text-decoration: none;
+  color: black;
+  min-height: 26px;
+  min-width: 152px;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+.sponsorBlockPageBody .mediumButton {
+  background-color:#cc1717;
+  -moz-border-radius:28px;
+  -webkit-border-radius:28px;
+  border-radius:28px;
+  border: none;
+  display:inline-block;
+  cursor:pointer;
+  color:#ffffff;
+  font-size:16px;
+  padding:8px 37px;
+  text-decoration:none;
+  text-shadow:0px 0px 0px #662727;
+  font-family: 'Source Sans Pro', sans-serif;
+
+  transition: 0.01s background-color;
+}
+.sponsorBlockPageBody .mediumButton:hover {
+  background-color:#ec1c1c;
+}
+.sponsorBlockPageBody .mediumButton:focus {
+outline: none;
+background-color:#ec1c1c;
+}
+.sponsorBlockPageBody .mediumButton:active {
+  position:relative;
+  top:1px;
+}
+
+/* disable extension */
+
+#disableExtension {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+}
+
+/* switch button */
+
+.toggleSwitchContainer {
+  display: flex;
+  cursor: pointer;
+}
+
+.switchBg {
+  display: block;
+  height: 37px;
+  width: 78px;
+  border-radius: 18.5px;
+}
+
+.switchBg.shadow {
+  background: none;
+  box-shadow: 0.75px 0.75px 10px 0px rgba(50, 50, 50, 0.5);
+  opacity: 1;
+}
+
+.switchBg.white {
+  position: absolute;
+  background: white;
+  opacity: 1;
+}
+
+.switchBg.green {
+  position: absolute;
+  background: #00a205;
+  opacity: 0;
+  transition: opacity .2s ease-out;
+}
+
+.switchDot {
+  width: 25px;
+  height: 25px;
+  margin: 6px;
+  background: white;
+  position: absolute;
+  border-radius: 12.5px;
+  box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45);
+  transition: transform .2s ease-out;
+}
+
+.preload * {
+  transition: none !important;
+}
+
+#toggleSwitch:checked~.switchDot {
+  transform: translateX(40px);
+}
+
+#toggleSwitch:checked~.switchBg.green {
+  opacity: 1 !important;
+}
+
+#toggleSwitch:checked~.switchBg.white {
+  opacity: 0 !important;
+  transition: opacity .2s step-end;
+}
+
+.sidebyside {
+  display: flex;
+  flex-flow: row nowrap;
+  width: 88%;
+  margin: 0 6% 0 6%;
+}
+
+.sidebyside>div {
+  width: 50%;
+  justify-content: center;
+}
+
+#whitelistButton, #sponsorTimesSkipsDoneContainer, .toggleSwitchContainer {
+  margin-bottom: 2px !important;
+}
+
+#whitelistForceCheck {
+  font-weight: bold;
+  text-decoration: underline;
+  font-size: large;
+  cursor: pointer;
+  padding: 10px 0;
+}
+
+.sbHeader {
+  margin-bottom: 5px !important;
 }
 
 .logoText {
-	color: white;
+  margin-bottom: 6px !important;
 }
 
-h1.popupElement {
+#videoInfo, #mainControls, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
-	margin-top: 0px;
+  margin-bottom: 12px !important;
-	margin-bottom: 10px;
+}
+#mainControls{
+  flex-flow: column;
+  align-items: center;
+}
+#submitTimesContainer{
+  flex-flow: column;
+  align-items: center;
+}
+/* additional buttons */
+
+#additionalButtons {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
 }
 
-.popupBody {
+#additionalButtons>button, button#setUsernameButton, #submitUsername {
-	font-size: 14px;
+  background: none;
-	background-color: #333;
+  border: none;
-	padding: 0px 5px;
+  color: white;
+  width: fit-content;
+  padding-left: 0;
 
-	font-family: 'Source Sans Pro', sans-serif;
+  cursor: pointer;
-
-	color: #dddddd;
 }
 
-.outerPopupBody {
+#submitUsername {
-	background-color: #222626;
+  padding-left: 5pt;
-	overflow-y: scroll;
 }
 
-.discreteLink.popupElement {
+#additionalButtons, #additionalButtons>button {
-	color: #dddddd;
+  font-size: 15px;
 }
 
-.recordingSubtitle.popupElement {
+#usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
-	margin-bottom: 10px;
+  font-size: 16px;
 }
 
-.voteButton.popupElement {
+.SBWhitelistIcon {
-	height: 32px;
+  min-width: 16px;
-	margin-right: 15px;
+  min-height: 16px;
-	cursor: pointer;
+  margin-top: auto;
-}
+  margin-bottom: auto;
-.voteButton:hover.popupElement {
+
-	filter: brightness(80%);
+  height: 100%;
 }
 
-#discordButtonContainer.popupElement {
+.SBWhitelistIcon>path {
-	font-size: 12px;
+  fill: var(--sb-main-fg-color);
 }
 
-.sponsorTime.popupElement {
+label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponsorTimesContributionsContainer > div > p, #usernameElement > div > #setUsername > #setUsernameStatusContainer > p {
-	font-size: 20px;
+  margin: 0;
 }
 
-.smallLink.popupElement {
+#usernameElement > div > p, #sponsorTimesContributionsContainer {
-	font-size: 10px;
+  text-align: start;
-	text-decoration: underline;
-	cursor: pointer;
 }
 
-.mediumLink.popupElement {
+.grayedOut>.SBWhitelistIcon>path {
-	font-size: 15px;
+  fill: var(--sb-gray-fg-color);
-	margin-left: 25px;
-	margin-right: 25px;
-	text-decoration: underline;
-	cursor: pointer;
 }
 
-.tinyLink.popupElement {
+.grayedOut>label {
-	font-size: 10px;
+  color: var(--sb-gray-fg-color);
-	text-decoration: underline;
-	cursor: pointer;
 }
 
-.whitelistButton.popupElement {
+.SBWhitelistIcon.rotated {
-	background-color:#27a52d;
+  transform: rotate(45deg);
-	-moz-border-radius:28px;
-	-webkit-border-radius:28px;
-	border-radius:28px;
-	border: none;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:16px;
-	padding:8px 37px;
-	text-decoration:none;
-	text-shadow:0px 0px 0px #27663c;
-
-	transition: 0.01s background-color;
-}
-.whitelistButton:hover.popupElement {
-    background-color:#3acc3a;
-}
-.whitelistButton:focus.popupElement {
-    outline: none;
-    background-color:#3acc3a;
-}
-.whitelistButton:active.popupElement {
-    position:relative;
-    top:1px;
 }
 
-.greenButton.popupElement {
+.SBWhitelistIconContainer, button#optionsButton>img, .logoText>img, #usernameValue {
-    background-color:#cc1717;
+  margin-right: 8px;
-    -moz-border-radius:28px;
-    -webkit-border-radius:28px;
-    border-radius:28px;
-    border: none;
-    display:inline-block;
-    cursor:pointer;
-    color:#ffffff;
-    font-size:16px;
-    padding:8px 37px;
-    text-decoration:none;
-	text-shadow:0px 0px 0px #662727;
-	
-	transition: 0.01s background-color;
-}
-.greenButton:hover.popupElement {
-    background-color:#ec1c1c;
-}
-.greenButton:focus.popupElement {
-	outline: none;
-	background-color:#ec1c1c;
-}
-.greenButton:active.popupElement {
-    position:relative;
-    top:1px;
 }
 
-.dangerButton.popupElement {
+#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer {
-	background-color:#bc3315;
+  display: flex;
-	-moz-border-radius:3px;
+  flex-flow: row nowrap;
-	-webkit-border-radius:3px;
-	border-radius:3px;
-	border: none;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:13px;
-	padding:6px 24px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #854629;
-}
-.dangerButton:hover.popupElement {
-	background-color:#d0451b;
-}
-.dangerButton:focus.popupElement {
-	outline: none;
-	background-color:#d0451b;
-}
-.dangerButton:active.popupElement {
-	position:relative;
-	top:1px;
 }
 
-.warningButton.popupElement {
+#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
-	background-color:#bc8215;
+  cursor: pointer;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	border-radius:3px;
-	border: none;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:13px;
-	padding:6px 24px;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #856829;
-}
-.warningButton:hover.popupElement {
-	background-color:#d0821b;
-}
-.warningButton:focus.popupElement {
-	outline: none;
-	background-color:#d0821b;
-}
-.warningButton:active.popupElement {
-	position:relative;
-	top:1px;
 }
 
-.smallButton.popupElement {
+#usernameElement > div, #sponsorTimesContributionsContainer > div {
-	background-color:#f9902d;
+  display: flex;
-	-moz-border-radius:3px;
+  flex-flow: column nowrap;
-	-webkit-border-radius:3px;
+  align-items: flex-start;
-	border-radius:3px;
-	border:1px solid #f9a72d;
-	display:inline-block;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:14px;
-	padding:6px 10px;
-	text-decoration:none;
 }
-.smallButton:hover.popupElement {
+
-	background-color:#fa9806;
+.sidebyside > #usernameElement, .sidebyside > #sponsorTimesContributionsContainer {
+  display: flex;
+  align-items: center;
 }
-.smallButton:focus.popupElement {
+
-	outline: none;
+#usernameValue{
-	background-color:#fa9806;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 130px;
+}
+
+#setUsername {
+  display:flex;
+}
+
+#usernameInput {
+  background: none;
+  padding: 0;
+  border: white 1px solid;
+  color: var(--sb-main-fg-color);
+  width: calc(100% - 24px);
+
+  text-overflow: ellipsis;
+}
+
+#setUsername.SBExpanded {
+  width: 200%;
+}
+
+/* footer */
+
+#sbFooter > a {
+  color: var(--sb-main-fg-color);
+  text-decoration: none;
+}
+
+#showNoticeAgain {
+  margin-top: 30px;
+
+  color: var(--sb-main-fg-color);
+  background: none;
+  border: 1px solid white;
+  cursor: pointer;
+  padding: 5px;
+
+  border-radius: 5px;
 }
-.smallButton:active.popupElement {
-	position:relative;
-	top:1px;
-}

public/popup.html

@@ -1,203 +1,146 @@
-<html>
+<head>
-  <head>
+  <title>__MSG_openPopup__</title>
-    <link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
+  <link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css">
-    <link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
+  <link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css">
-  </head>
+</head>
 
-  <body class="outerPopupBody">
+<body style="margin: 0; min-width: 320px; background: var(--sb-main-bg-color);">
-    <center>
+  <div id="sponsorblockPopup" class="sponsorBlockPageBody preload">
-      <div id="app" class="popupBody sponsorBlockPageBody">
+    <div class="logoText bottomSpace">
-          <h1 class="popupElement logoText">
+      <img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
-            <img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
+      <p>SponsorBlock</p>
-            SponsorBlock
+    </div>
-          </h1>
+    <div id="videoInfo" class="bottomSpace">
-
+      <div class="bottomSpace">
-          <!-- Loading text -->
+        <!-- Loading text -->
-          <p id="loadingIndicator" class="popupElement">__MSG_noVideoID__</p>
+        <p id="loadingIndicator">__MSG_noVideoID__</p>
-          
+        <!-- If the video was found in the database -->
-          <!-- Hidden until loading complete -->
+        <p id="videoFound"></p>
-          <div id="mainControls" class="main popupElement" style="display: none">
+      </div>
-            <!-- If the video was found in the database -->
+      <div id="issueReporterContainer">
-            <div id="videoFound">
+        <div id="issueReporterTimeButtons"></div>
-                  
+      </div>
+    </div>
+    <div class="sidebyside">
+      <div id="disableExtension">
+        <!--github: mbledkowski/toggle-switch-->
+        <label for="toggleSwitch" class="toggleSwitchContainer">
+          <input type="checkbox" style="display:none;" id="toggleSwitch" checked>
+          <span class="switchBg shadow"></span>
+          <span class="switchBg white"></span>
+          <span class="switchBg green"></span>
+          <span class="switchDot"></span>
+        </label>
+        <p id="disableSkipping">__MSG_disableSkipping__</p>
+        <p id="enableSkipping" style="display: none">__MSG_enableSkipping__</p>
+      </div>
+      <div id="additionalButtons">
+        <!-- grayedOut until loading complete -->
+        <div id="whitelistButton" class="hidden bottomSpace" title="__MSG_forceChannelCheckPopup__">
+          <input type="checkbox" style="display:none;" id="whitelistToggle">
+          <label for="whitelistToggle" class="whitelistToggleText">
+            <div class="SBWhitelistIconContainer">
+              <svg viewBox="0 0 24 24" width="16" height="16" class="SBWhitelistIcon">
+                <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
+              </svg>
             </div>
-
+            <p id="whitelistChannel">__MSG_whitelistChannel__</p>
-            <div id="downloadedSponsorMessageTimes" class="popupElement">
+            <p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
-  
+          </label>
-            </div>
-
-            <p class="popupElement"> 
-              __MSG_recordTimesDescription__
-            </p>
-  
-            <div>
-              <button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button>
-            </div>
-  
-            <sub class="popupElement">__MSG_popupHint__</sub>
-
-            <div id="submissionSection"  class="popupElement" style="display: none">
-              <br/>
-
-              <b>Sponsor Editing has been moved and will appear after you click submit</b>
-
-              <br/>
-      
-              <div id="submitTimesContainer" class="popupElement" style="display: none">
-
-                <button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
-
-              </div>
-
-            </div>
-
-            <div id="discordButtonContainer" class="popupElement" style="display: none">
-              <br/>
-
-              <a href="https://discord.gg/QnmVMpU" class="popupElement" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
-
-              <br/>
-
-                __MSG_discordAdvert__
-
-              <br/>
-
-              <span id="hideDiscordButton" class="smallLink popupElement">__MSG_hideThis__</span>
-            </div>
-
-            <div>
-              <br/>
-
-              <button id="whitelistChannel" class="whitelistButton popupElement">__MSG_whitelistChannel__</button>
-              <button id="unwhitelistChannel" class="whitelistButton popupElement" style="display: none">__MSG_removeFromWhitelist__</button>
-
-              <div id="whitelistForceCheck" style="text-decoration: underline; cursor: pointer;display: none">
-                __MSG_forceChannelCheckPopup__
-              </div>
-            </div>
-
-            <br/>
-
-            <button id="reportAnIssue" class="dangerButton popupElement">__MSG_voteOnTime__</button>
-
-            <div id="issueReporterContainer"  class="popupElement" style="display: none">
-
-              <h3 style="margin-top: 0px" class="popupElement">__MSG_voteOnTime__</h3>
-
-              <div id="issueReporterTimeButtons" class="popupElement">
-
-              </div>
-
-            </div>
-
-            <br/>
-            <br/>
-
-          </div>
-
-          <div>
-            <button id="disableSkipping" class="greenButton popupElement">__MSG_disableSkipping__</button>
-            <button id="enableSkipping" class="whitelistButton popupElement" style="display: none">__MSG_enableSkipping__</button>
-          </div>
-
-          <h2 class="recordingSubtitle popupElement">__MSG_yourWork__</h2>
-
-          <p class="popupElement">
-            <span id="sponsorTimesContributionsContainer"  class="popupElement" style="display: none">
-                __MSG_soFarUHSubmited__
-                <span id="sponsorTimesContributionsDisplay" class="popupElement">
-                  0
-                </span>
-                <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">__MSG_Sponsors__</span>.
-            </span>
-
-            <span id="sponsorTimesViewsContainer"  class="popupElement" style="display: none">
-                __MSG_savedPeopleFrom__
-                <span id="sponsorTimesViewsDisplay" class="popupElement">
-                  0
-                </span>
-                <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">__MSG_Segments__</span>.
-            </span>
-
-            <span id="sponsorTimesOthersTimeSavedContainer"  class="popupElement" style="display: none">
-              __MSG_youHaveSavedTime__
-              <span id="sponsorTimesOthersTimeSavedDisplay" class="popupElement">
-                0
-              </span>
-              <span id="sponsorTimesOthersTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>
-
-              <span class="popupElement">__MSG_youHaveSavedTimeEnd__</span>
-            </span>
-
-            <div id="sponsorTimesSkipsDoneContainer"  class="popupElement" style="display: none">
-              __MSG_youHaveSkipped__
-              <span id="sponsorTimesSkipsDoneDisplay" class="popupElement">
-                0
-              </span>
-              <span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span>
-            </div>
-
-            <div id="sponsorTimeSavedContainer"  class="popupElement" style="display: none">
-              __MSG_youHaveSaved__
-              <span id="sponsorTimeSavedDisplay" class="popupElement">
-                0
-              </span>
-              <span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>.
-
-              </br/>
-              </br/>
-            </div>
-
-            <div class="popupElement">
-              __MSG_viewLeaderboard__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>.
-            </div>
-          </p>
-
-          <div id="setUsernameContainer" class="popupElement">
-  
-            <button id="setUsernameButton" class="warningButton popupElement">__MSG_setUsername__</button>
-            <br/>
-            <sub class="popupElement">
-              __MSG_publicStats__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>.
-            </sub>
-          </div>
-
-          <div id="setUsername" class="popupElement" style="display: none">
-              <h3>__MSG_setUsername__</h3>
-
-              <div id="setUsernameStatusContainer" style="display: none">
-                  <h2 id="setUsernameStatus"></h2>
-              </div>
-
-              <input id="usernameInput" hint="Username"></input>
-
-              <br/>
-              <br/>
-
-              <button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button>
-          </div>
-
-          <div id="optionsButtonContainer" class="popupElement">
-              <br/>
-              <br/>
-    
-              <button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
-
-              <br/>
-              
-              <sub class="popupElement">
-                __MSG_optionsInfo__
-              </sub>
-
-              <br/>
-          </div>
-
-          <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
         </div>
-    </center>
+        <button id="optionsButton" title="__MSG_optionsInfo__">
-  </body>
+          <img src="/icons/settings.svg" alt="Settings icon" width="16" height="16" id="sbPopupIconSettings">
+          __MSG_Options__
+        </button>
+      </div>
+    </div>
 
+    <div id="whitelistForceCheck" class="hidden">
+      __MSG_forceChannelCheckPopup__
+    </div>
+
+    <div id="mainControls" style="display: none">
+      <p class="sbHeader sbSubHeader">
+        __MSG_recordTimesDescription__
+      </p>
+      <sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
+      <div>
+        <button id="sponsorStart" class="mediumButton">__MSG_sponsorStart__</button>
+      </div>
+      <div id="submissionSection" style="display: none">
+        <b style="display: block; margin-top: 12px;">__MSG_submissionEditHint__</b>
+        <div id="submitTimesContainer" style="display: none; margin-top: 12px;">
+          <button id="submitTimes" class="mediumButton">__MSG_submitTimesButton__</button>
+        </div>
+      </div>
+    </div>
+    <h1 class="recordingSubtitle sbHeader sbSubHeader">__MSG_yourWork__</h1>
+    <div class="sidebyside">
+      <div id="usernameElement">
+        <div>
+          <p>__MSG_Username__:</p>
+          <div id="setUsernameContainer">
+            <p id="usernameValue"></p>
+            <button id="setUsernameButton" title="__MSG_setUsername__">
+              <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
+            </button>
+          </div>
+          <div id="setUsername" style="display: none">
+            <div id="setUsernameStatusContainer" style="display: none">
+              <p id="setUsernameStatus"></p>
+            </div>
+            <input id="usernameInput" hint="Username"></input>
+            <button id="submitUsername">
+              <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
+            </button>
+          </div>
+        </div>
+      </div>
+      <div id="sponsorTimesContributionsContainer" class="hidden">
+        <div>
+          <p>__MSG_Submissions__:</p>
+          <span id="sponsorTimesContributionsDisplay">
+            0
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <span id="sponsorTimesViewsContainer" style="display: none">
+      __MSG_savedPeopleFrom__
+      <b><span id="sponsorTimesViewsDisplay">
+          0
+        </span></b>
+      <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
+      <br>
+      (<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
+        <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
+      <span>__MSG_youHaveSavedTimeEnd__</span>).
+    </span>
+    <div id="sponsorTimesSkipsDoneContainer" style="display: none">
+      __MSG_youHaveSkipped__
+      <b><span id="sponsorTimesSkipsDoneDisplay">
+          0
+        </span></b>
+      <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
+      (<b><span id="sponsorTimeSavedDisplay">
+          0
+        </span>
+        <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
+    </div>
+    <footer id="sbFooter">
+      <a href="https://sponsor.ajay.app" target="_blank" rel="noopener">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://discord.gg/QnmVMpU" target="_blank" rel="noopener">Discord</a> |
+      <a href="https://matrix.to/#/+sponsorblock:ajay.app" target="_blank" rel="noopener">Matrix</a> |
+      <a id="helpButton" href="#">__MSG_help__</a>
+    </footer>
+
+    <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
+  </div>
   <!-- Scripts that need to load after the html -->
-  <script src="./js/vendor.js"></script>
+  <script src="./js/vendor.js" async></script>
-  <script src="./js/popup.js"></script>
+  <script src="./js/popup.js" async></script>
-</html>
+</body>

src/background.ts

@@ -31,6 +31,9 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
         case "openConfig":
             chrome.runtime.openOptionsPage();
             return;
+        case "openHelp":
+            window.open(chrome.runtime.getURL('help/index_en.html'));
+            return;
         case "sendRequest":
             sendRequestToCustomServer(request.type, request.url, request.data).then(async (response) => {
                 callback({

src/content.ts

@@ -1125,7 +1125,7 @@ async function createButtons(): Promise<boolean> {
     let createdButton = false;
 
     // Add button if does not already exist in html
-    createdButton = createButton("startSponsor", "sponsorStart", startSponsorClicked, "PlayerStartIconSponsorBlocker256px.png") || createdButton;	  
+    createdButton = createButton("startSponsor", "sponsorStart", startSponsorClicked, "PlayerStartIconSponsorBlocker256px.png") || createdButton;
     createdButton = createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker256px.png") || createdButton;
     createdButton = createButton("delete", "clearTimes", clearSponsorTimes, "PlayerDeleteIconSponsorBlocker256px.png") || createdButton;
     createdButton = createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker256px.png") || createdButton;
@@ -1275,9 +1275,17 @@ function openInfoMenu() {
 
     sendRequestToCustomServer('GET', chrome.extension.getURL("popup.html"), function(xmlhttp) {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-            var popup = document.createElement("div");
+            let popup = document.createElement("div");
             popup.id = "sponsorBlockPopupContainer";
-            popup.innerHTML = xmlhttp.responseText
+
+            let htmlData = xmlhttp.responseText;
+            // Hack to replace head data (title, favicon)
+            htmlData = htmlData.replace(/<head>[\S\s]*<\/head>/gi, "");
+            // Hack to replace body tag with div
+            htmlData = htmlData.replace(/<body/gi, "<div");
+            htmlData = htmlData.replace(/<\/body/gi, "</div");
+
+            popup.innerHTML = htmlData;
 
             //close button
             let closeButton = document.createElement("div");
@@ -1302,16 +1310,18 @@ function openInfoMenu() {
                 //old youtube theme
                 parentNode = document.getElementById("watch7-sidebar-contents");
             }
-                
 
             //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
             let logo = <HTMLImageElement> popup.querySelector("#sponsorBlockPopupLogo");
+            let settings = <HTMLImageElement> popup.querySelector("#sbPopupIconSettings");
+            let edit = <HTMLImageElement> popup.querySelector("#sbPopupIconEdit");
+            let check = <HTMLImageElement> popup.querySelector("#sbPopupIconCheck");
             logo.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
-
+            settings.src = chrome.extension.getURL("icons/settings.svg");
-            //remove the style sheet and font that are not necessary
+            edit.src = chrome.extension.getURL("icons/pencil.svg");
-            popup.querySelector("#sponsorBlockPopupFont").remove();
+            check.src = chrome.extension.getURL("icons/check.svg");
-            popup.querySelector("#sponsorBlockStyleSheet").remove();
+            check.src = chrome.extension.getURL("icons/thumb.svg");
 
             parentNode.insertBefore(popup, parentNode.firstChild);
 

src/popup.ts

@@ -33,7 +33,7 @@ class MessageHandler {
         } else {
             chrome.tabs.query(config, callback);
         }
-        
+
     }
 }
 
@@ -47,121 +47,109 @@ async function runThePopup(messageListener?: MessageListener) {
 
     var PageElements: any = {};
 
-    ["sponsorStart",
+    [
-    // Top toggles
+        "sponsorblockPopup",
-    "whitelistChannel",
+        "sponsorStart",
-    "unwhitelistChannel",
+        // Top toggles
-    "whitelistForceCheck",
+        "whitelistChannel",
-    "disableSkipping",
+        "unwhitelistChannel",
-    "enableSkipping",
+        "whitelistToggle",
-    // Options
+        "whitelistForceCheck",
-    "showNoticeAgain",
+        "disableSkipping",
-    "optionsButton",
+        "enableSkipping",
-    // More controls
+        "toggleSwitch",
-    "submitTimes",
+        // Options
-    "reportAnIssue",
+        "showNoticeAgain",
-    // sponsorTimesContributions
+        "optionsButton",
-    "sponsorTimesContributionsContainer",
+        "helpButton",
-    "sponsorTimesContributionsDisplay",
+        // More controls
-    "sponsorTimesContributionsDisplayEndWord",
+        "submitTimes",
-    // sponsorTimesViewsDisplay
+        "sponsorTimesContributionsContainer",
-    "sponsorTimesViewsContainer",
+        "sponsorTimesContributionsDisplay",
-    "sponsorTimesViewsDisplay",
+        "sponsorTimesViewsContainer",
-    "sponsorTimesViewsDisplayEndWord",
+        "sponsorTimesViewsDisplay",
-    // sponsorTimesOthersTimeSaved
+        "sponsorTimesViewsDisplayEndWord",
-    "sponsorTimesOthersTimeSavedContainer",
+        "sponsorTimesOthersTimeSavedDisplay",
-    "sponsorTimesOthersTimeSavedDisplay",
+        "sponsorTimesOthersTimeSavedEndWord",
-    "sponsorTimesOthersTimeSavedEndWord",
+        "sponsorTimesSkipsDoneContainer",
-    // sponsorTimesSkipsDone
+        "sponsorTimesSkipsDoneDisplay",
-    "sponsorTimesSkipsDoneContainer",
+        "sponsorTimesSkipsDoneEndWord",
-    "sponsorTimesSkipsDoneDisplay",
+        "sponsorTimeSavedDisplay",
-    "sponsorTimesSkipsDoneEndWord",
+        "sponsorTimeSavedEndWord",
-    // sponsorTimeSaved
+        // Username
-    "sponsorTimeSavedContainer",
+        "setUsernameContainer",
-    "sponsorTimeSavedDisplay",
+        "setUsernameButton",
-    "sponsorTimeSavedEndWord",
+        "setUsernameStatusContainer",
-    // discordButtons
+        "setUsernameStatus",
-    "discordButtonContainer",
+        "setUsername",
-    "hideDiscordButton",
+        "usernameInput",
-    // Username
+        "usernameValue",
-    "setUsernameContainer",
+        "submitUsername",
-    "setUsernameButton",
+        // More
-    "setUsernameStatusContainer",
+        "submissionSection",
-    "setUsernameStatus",
+        "mainControls",
-    "setUsername",
+        "loadingIndicator",
-    "usernameInput",
+        "videoFound",
-    "submitUsername",
+        "sponsorMessageTimes",
-    // More
+        //"downloadedSponsorMessageTimes",
-    "submissionSection",
+        "whitelistButton",
-    "mainControls",
-    "loadingIndicator",
-    "videoFound",
-    "sponsorMessageTimes",
-    "downloadedSponsorMessageTimes",
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
     //setup click listeners
     PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
-    PageElements.whitelistChannel.addEventListener("click", whitelistChannel);
+    PageElements.whitelistToggle.addEventListener("change", function() {
+        if (this.checked) {
+            whitelistChannel();
+        } else {
+            unwhitelistChannel();
+        }
+    });
     PageElements.whitelistForceCheck.addEventListener("click", openOptions);
-    PageElements.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
+    PageElements.toggleSwitch.addEventListener("change", function() {
-    PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true));
+        toggleSkipping(!this.checked);
-    PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false));
+    });
     PageElements.submitTimes.addEventListener("click", submitTimes);
     PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
     PageElements.setUsernameButton.addEventListener("click", setUsernameButton);
+    PageElements.usernameValue.addEventListener("click", setUsernameButton);
     PageElements.submitUsername.addEventListener("click", submitUsername);
     PageElements.optionsButton.addEventListener("click", openOptions);
-    PageElements.reportAnIssue.addEventListener("click", reportAnIssue);
+    PageElements.helpButton.addEventListener("click", openHelp);
-    PageElements.hideDiscordButton.addEventListener("click", hideDiscordButton);
+
-	
     //if true, the button now selects the end time
     let startTimeChosen = false;
-  
+
     //the start and end time pairs (2d)
     let sponsorTimes: SponsorTime[] = [];
-  
+
     //current video ID of this tab
     let currentVideoID = null;
-  
-    //see if discord link can be shown
-    let hideDiscordLink = Config.config.hideDiscordLink;
-    if (hideDiscordLink == undefined || !hideDiscordLink) {
-            let hideDiscordLaunches = Config.config.hideDiscordLaunches;
-            //only if less than 10 launches
-            if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
-                PageElements.discordButtonContainer.style.display = null;
-        
-                if (hideDiscordLaunches == undefined) {
-                    hideDiscordLaunches = 1;
-                }
-                Config.config.hideDiscordLaunches = hideDiscordLaunches + 1;
-            }
-    }
 
     //show proper disable skipping button
     let disableSkipping = Config.config.disableSkipping;
     if (disableSkipping != undefined && disableSkipping) {
         PageElements.disableSkipping.style.display = "none";
         PageElements.enableSkipping.style.display = "unset";
+        PageElements.toggleSwitch.checked = false;
     }
 
-    //if the don't show notice again variable is true, an option to 
+    //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) {
         PageElements.showNoticeAgain.style.display = "unset";
     }
 
+    utils.sendRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID, (res) => {
+        if (res.status === 200) {
+            PageElements.usernameValue.innerText = JSON.parse(res.responseText).userName
+        }
+    })
+
     //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) {
+        PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed.toLocaleString();
-            PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
+        PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
-        } else {
-            PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
-        }
-        PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed;
-        PageElements.sponsorTimesContributionsContainer.style.display = "unset";
 
         //get the userID
         let userID = Config.config.userID;
@@ -178,7 +166,7 @@ async function runThePopup(messageListener?: MessageListener) {
                             PageElements.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
                         }
 
-                        PageElements.sponsorTimesViewsDisplay.innerText = viewCount;
+                        PageElements.sponsorTimesViewsDisplay.innerText = viewCount.toLocaleString();
                         PageElements.sponsorTimesViewsContainer.style.display = "unset";
                     }
                 }
@@ -196,7 +184,6 @@ async function runThePopup(messageListener?: MessageListener) {
                         }
 
                         PageElements.sponsorTimesOthersTimeSavedDisplay.innerText = getFormattedHours(minutesSaved);
-                        PageElements.sponsorTimesOthersTimeSavedContainer.style.display = "unset";
                     }
                 }
             });
@@ -211,7 +198,7 @@ async function runThePopup(messageListener?: MessageListener) {
             PageElements.sponsorTimesSkipsDoneEndWord.innerText = chrome.i18n.getMessage("Segment");
         }
 
-        PageElements.sponsorTimesSkipsDoneDisplay.innerText = Config.config.skipCount;
+        PageElements.sponsorTimesSkipsDoneDisplay.innerText = Config.config.skipCount.toLocaleString();
         PageElements.sponsorTimesSkipsDoneContainer.style.display = "unset";
     }
 
@@ -224,14 +211,16 @@ async function runThePopup(messageListener?: MessageListener) {
         }
 
         PageElements.sponsorTimeSavedDisplay.innerText = getFormattedHours(Config.config.minutesSaved);
-        PageElements.sponsorTimeSavedContainer.style.display = "unset";
     }
-  
+
+    // Must be delayed so it only happens once loaded
+    setTimeout(() => PageElements.sponsorblockPopup.classList.remove("preload"), 250);
+
     messageHandler.query({
             active: true,
             currentWindow: true
     }, onTabs);
-	
+
     function onTabs(tabs) {
 	  messageHandler.sendMessage(tabs[0].id, {message: 'getVideoID'}, function(result) {
         if (result != undefined && result.videoID) {
@@ -243,15 +232,15 @@ async function runThePopup(messageListener?: MessageListener) {
         }
 	  });
     }
-  
+
     function loadTabData(tabs) {
         if (!currentVideoID) {
             //this isn't a YouTube video then
             displayNoVideo();
             return;
         }
-  
+
-        //load video times for this video 
+        //load video times for this video
         let sponsorTimesStorage = Config.config.segmentTimes.get(currentVideoID);
         if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
             if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].segment.length < 2) {
@@ -266,7 +255,7 @@ async function runThePopup(messageListener?: MessageListener) {
 
             showSubmitTimesIfNecessary();
         }
-  
+
         //check if this video's sponsors are known
         messageHandler.sendMessage(
             tabs[0].id,
@@ -274,18 +263,19 @@ async function runThePopup(messageListener?: MessageListener) {
             infoFound
         );
     }
-  
+
     function infoFound(request: {found: boolean, sponsorTimes: SponsorTime[]}) {
         if(chrome.runtime.lastError) {
             //This page doesn't have the injected content script, or at least not yet
             displayNoVideo();
             return;
         }
-  
+
         //if request is undefined, then the page currently being browsed is not YouTube
         if (request != undefined) {
             //remove loading text
-            PageElements.mainControls.style.display = "unset"
+            PageElements.mainControls.style.display = "flex";
+            PageElements.whitelistButton.classList.remove("hidden");
             PageElements.loadingIndicator.style.display = "none";
 
             if (request.found) {
@@ -309,15 +299,14 @@ async function runThePopup(messageListener?: MessageListener) {
                     if (response.value) {
                         PageElements.whitelistChannel.style.display = "none";
                         PageElements.unwhitelistChannel.style.display = "unset";
-
+                        PageElements.whitelistToggle.checked = true;
-                        PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
+                        document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
-                        PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
                     }
                 });
             }
         );
     }
-  
+
     function sendSponsorStartMessage() {
         //the content script will get the message if a YouTube page is open
         messageHandler.query({
@@ -331,10 +320,10 @@ async function runThePopup(messageListener?: MessageListener) {
             );
         });
     }
-  
+
     function startSponsorCallback(response) {
         let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
-  
+
         if (sponsorTimes[sponsorTimesIndex] == undefined) {
             sponsorTimes[sponsorTimesIndex] = {
                 segment: [],
@@ -342,12 +331,12 @@ async function runThePopup(messageListener?: MessageListener) {
                 UUID: null
             };
         }
-  
+
         sponsorTimes[sponsorTimesIndex].segment[startTimeChosen ? 1 : 0] = response.time;
 
         let localStartTimeChosen = startTimeChosen;
         Config.config.segmentTimes.set(currentVideoID, sponsorTimes);
-        
+
         //send a message to the client script
         if (localStartTimeChosen) {
             messageHandler.query({
@@ -360,391 +349,102 @@ async function runThePopup(messageListener?: MessageListener) {
                 );
             });
         }
-  
+
         updateStartTimeChosen();
-  
+
         //show submission section
         PageElements.submissionSection.style.display = "unset";
-  
+
         showSubmitTimesIfNecessary();
     }
-  
+
     //display the video times from the array at the top, in a different section
     function displayDownloadedSponsorTimes(request: {found: boolean, sponsorTimes: SponsorTime[]}) {
         if (request.sponsorTimes != undefined) {
-            //set it to the message
+
-            if (PageElements.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
+            // Sort list by start time
-                PageElements.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
+            let segmentTimes = request.sponsorTimes
-            }
+                                .sort((a, b) => a.segment[1] - b.segment[1])
+                                .sort((a, b) => a.segment[0] - b.segment[0]);
 
             //add them as buttons to the issue reporting container
             let container = document.getElementById("issueReporterTimeButtons");
-            for (let i = 0; i < request.sponsorTimes.length; i++) {
+            for (let i = 0; i < segmentTimes.length; i++) {
+                let UUID = segmentTimes[i].UUID;
+
                 let sponsorTimeButton = document.createElement("button");
-                sponsorTimeButton.className = "warningButton popupElement";
+                sponsorTimeButton.className = "segmentTimeButton popupElement";
+
+                let prefix = chrome.i18n.getMessage("category_" + segmentTimes[i].category) + ": ";
 
                 let extraInfo = "";
-                if (request.sponsorTimes[i].hidden === SponsorHideType.Downvoted) {
+                if (segmentTimes[i].hidden === SponsorHideType.Downvoted) {
                     //this one is downvoted
                     extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDownvote") + ")";
-                } else if (request.sponsorTimes[i].hidden === SponsorHideType.MinimumDuration) {
+                } else if (segmentTimes[i].hidden === SponsorHideType.MinimumDuration) {
                     //this one is too short
                     extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
                 }
 
-                sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(request.sponsorTimes[i].segment[1]) + extraInfo;
+                sponsorTimeButton.innerText = prefix + getFormattedTime(segmentTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(segmentTimes[i].segment[1]) + extraInfo;
-        
+
+                let categoryColorCircle = document.createElement("span");
+                categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID;
+                categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category].color;
+                categoryColorCircle.classList.add("dot");
+                categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
+
                 let votingButtons = document.createElement("div");
-  
+                votingButtons.classList.add("votingButtons");
-                let UUID = request.sponsorTimes[i].UUID;
+
-  
                 //thumbs up and down buttons
                 let voteButtonsContainer = document.createElement("div");
                 voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
                 voteButtonsContainer.setAttribute("align", "center");
                 voteButtonsContainer.style.display = "none"
-  
+
                 let upvoteButton = document.createElement("img");
                 upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
-                upvoteButton.className = "voteButton popupElement";
+                upvoteButton.className = "voteButton";
-                upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
+                upvoteButton.src = chrome.extension.getURL("icons/thumbs_up.svg");
                 upvoteButton.addEventListener("click", () => vote(1, UUID));
-  
+
                 let downvoteButton = document.createElement("img");
                 downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
-                downvoteButton.className = "voteButton popupElement";
+                downvoteButton.className = "voteButton";
-                downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+                downvoteButton.src = chrome.extension.getURL("icons/thumbs_down.svg");
                 downvoteButton.addEventListener("click", () => vote(0, UUID));
-  
+
                 //add thumbs up and down buttons to the container
-                voteButtonsContainer.appendChild(document.createElement("br"));
-                voteButtonsContainer.appendChild(document.createElement("br"));
                 voteButtonsContainer.appendChild(upvoteButton);
                 voteButtonsContainer.appendChild(downvoteButton);
-  
+
                 //add click listener to open up vote panel
                 sponsorTimeButton.addEventListener("click", function() {
-                    voteButtonsContainer.style.display = "unset";
+                    voteButtonsContainer.style.removeProperty("display");
                 });
-  
+
-                container.appendChild(sponsorTimeButton);
+                // Will contain request status
-                container.appendChild(voteButtonsContainer);
+                let voteStatusContainer = document.createElement("div");
-  
+                voteStatusContainer.id = "sponsorTimesVoteStatusContainer" + UUID;
-                //if it is not the last iteration
+                voteStatusContainer.classList.add("sponsorTimesVoteStatusContainer");
-                if (i != request.sponsorTimes.length - 1) {
+                voteStatusContainer.style.display = "none";
-                    container.appendChild(document.createElement("br"));
+
-                    container.appendChild(document.createElement("br"));
+                let thanksForVotingText = document.createElement("div");
-                }
+                thanksForVotingText.id = "sponsorTimesThanksForVotingText" + UUID;
+                thanksForVotingText.classList.add("sponsorTimesThanksForVotingText");
+                voteStatusContainer.appendChild(thanksForVotingText);
+
+                votingButtons.append(categoryColorCircle);
+                votingButtons.append(sponsorTimeButton);
+                votingButtons.append(voteButtonsContainer);
+                votingButtons.append(voteStatusContainer);
+
+                container.appendChild(votingButtons);
             }
         }
     }
-  
-    //get the message that visually displays the video times
-    function getSponsorTimesMessage(sponsorTimes: SponsorTime[]) {
-        let sponsorTimesMessage = "";
-  
-        for (let i = 0; i < sponsorTimes.length; i++) {
-            for (let s = 0; s < sponsorTimes[i].segment.length; s++) {
-                let timeMessage = getFormattedTime(sponsorTimes[i].segment[s]);
-                //if this is an end time
-                if (s == 1) {
-                    timeMessage = " " + chrome.i18n.getMessage("to") + " " + timeMessage;
-                } else if (i > 0) {
-                    //add commas if necessary
-                    timeMessage = ", " + timeMessage;
-                }
 
-                if (sponsorTimes[i].hidden === SponsorHideType.Downvoted) {
-                    //this one is downvoted
-                    timeMessage += " (" + chrome.i18n.getMessage("hiddenDueToDownvote") + ")";
-                } else if (sponsorTimes[i].hidden === SponsorHideType.MinimumDuration) {
-                    //this one is too short
-                    timeMessage += " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
-                }
-  
-                sponsorTimesMessage += timeMessage;
-            }
-        }
-  
-        return sponsorTimesMessage;
-    }
-  
-    //get the message that visually displays the video times
-    //this version is a div that contains each with delete buttons
-    function getSponsorTimesMessageDiv(sponsorTimes) {
-        // let sponsorTimesMessage = "";
-        let sponsorTimesContainer = document.createElement("div");
-        sponsorTimesContainer.id = "sponsorTimesContainer";
-  
-        for (let i = 0; i < sponsorTimes.length; i++) {
-            let currentSponsorTimeContainer = document.createElement("div");
-            currentSponsorTimeContainer.id = "sponsorTimeContainer" + i;
-            currentSponsorTimeContainer.className = "sponsorTime popupElement";
-            let currentSponsorTimeMessage = "";
-  
-            let deleteButton = document.createElement("span");
-            deleteButton.id = "sponsorTimeDeleteButton" + i;
-            deleteButton.innerText = "Delete";
-            deleteButton.className = "mediumLink popupElement";
-            let index = i;
-            deleteButton.addEventListener("click", () => deleteSponsorTime(index));
-  
-            let previewButton = document.createElement("span");
-            previewButton.id = "sponsorTimePreviewButton" + i;
-            previewButton.innerText = "Preview";
-            previewButton.className = "mediumLink popupElement";
-            previewButton.addEventListener("click", () => previewSponsorTime(index));
-  
-            let editButton = document.createElement("span");
-            editButton.id = "sponsorTimeEditButton" + i;
-            editButton.innerText = "Edit";
-            editButton.className = "mediumLink popupElement";
-            editButton.addEventListener("click", () => editSponsorTime(index));
-  
-            for (let s = 0; s < sponsorTimes[i].length; s++) {
-                let timeMessage = getFormattedTime(sponsorTimes[i][s]);
-                //if this is an end time
-                if (s == 1) {
-                    timeMessage = " " + chrome.i18n.getMessage("to") + " " + timeMessage;
-                } else if (i > 0) {
-                    //add commas if necessary
-                    timeMessage = timeMessage;
-                }
-  
-                currentSponsorTimeMessage += timeMessage;
-            }
-  
-            currentSponsorTimeContainer.innerText = currentSponsorTimeMessage;
-  
-            sponsorTimesContainer.appendChild(currentSponsorTimeContainer);
-            sponsorTimesContainer.appendChild(deleteButton);
-  
-            //only if it is a complete sponsor time
-            if (sponsorTimes[i].length > 1) {
-                sponsorTimesContainer.appendChild(previewButton);
-                sponsorTimesContainer.appendChild(editButton);
-
-                currentSponsorTimeContainer.addEventListener("click", () => editSponsorTime(index));
-            }
-        }
-  
-        return sponsorTimesContainer;
-    }
-
-    function previewSponsorTime(index) {
-        let skipTime = sponsorTimes[index].segment[0];
-
-        if (document.getElementById("startTimeMinutes" + index) != null) {
-            //edit is currently open, use that time
-
-            skipTime = getSponsorTimeEditTimes("startTime", index);
-
-            //save the edit
-            saveSponsorTimeEdit(index, false);
-        }
-
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id, {
-                    message: "skipToTime",
-                    time: skipTime - 2
-                }
-            );
-        });
-    }
-  
-    function editSponsorTime(index) {
-        if (document.getElementById("startTimeMinutes" + index) != null) {
-            //already open
-            return;
-        }
-
-        //hide submit button
-        document.getElementById("submitTimesContainer").style.display = "none";
-  
-        let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index);
-  
-        //the button to set the current time
-        let startTimeNowButton = document.createElement("span");
-        startTimeNowButton.id = "startTimeNowButton" + index;
-        startTimeNowButton.innerText = "(Now)";
-        startTimeNowButton.className = "tinyLink popupElement";
-        startTimeNowButton.addEventListener("click", () => setEditTimeToCurrentTime("startTime", index));
-
-        //get sponsor time minutes and seconds boxes
-        let startTimeMinutes = document.createElement("input");
-        startTimeMinutes.id = "startTimeMinutes" + index;
-        startTimeMinutes.className = "sponsorTime popupElement";
-        startTimeMinutes.type = "text";
-        startTimeMinutes.value = String(getTimeInMinutes(sponsorTimes[index].segment[0]));
-        startTimeMinutes.style.width = "45px";
-    
-        let startTimeSeconds = document.createElement("input");
-        startTimeSeconds.id = "startTimeSeconds" + index;
-        startTimeSeconds.className = "sponsorTime popupElement";
-        startTimeSeconds.type = "text";
-        startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index].segment[0]);
-        startTimeSeconds.style.width = "60px";
-
-        let endTimeMinutes = document.createElement("input");
-        endTimeMinutes.id = "endTimeMinutes" + index;
-        endTimeMinutes.className = "sponsorTime popupElement";
-        endTimeMinutes.type = "text";
-        endTimeMinutes.value = String(getTimeInMinutes(sponsorTimes[index].segment[1]));
-        endTimeMinutes.style.width = "45px";
-    
-        let endTimeSeconds = document.createElement("input");
-        endTimeSeconds.id = "endTimeSeconds" + index;
-        endTimeSeconds.className = "sponsorTime popupElement";
-        endTimeSeconds.type = "text";
-        endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index].segment[1]);
-        endTimeSeconds.style.width = "60px";
-
-        //the button to set the current time
-        let endTimeNowButton = document.createElement("span");
-        endTimeNowButton.id = "endTimeNowButton" + index;
-        endTimeNowButton.innerText = "(Now)";
-        endTimeNowButton.className = "tinyLink popupElement";
-        endTimeNowButton.addEventListener("click", () => setEditTimeToCurrentTime("endTime", index));
-  
-        let colonText = document.createElement("span");
-        colonText.innerText = ":";
-  
-        let toText = document.createElement("span");
-        toText.innerText = " " + chrome.i18n.getMessage("to") + " ";
-  
-        //remove all children to replace
-        while (sponsorTimeContainer.firstChild) {
-            sponsorTimeContainer.removeChild(sponsorTimeContainer.firstChild);
-        }
-  
-        sponsorTimeContainer.appendChild(startTimeNowButton);
-        sponsorTimeContainer.appendChild(startTimeMinutes);
-        sponsorTimeContainer.appendChild(colonText);
-        sponsorTimeContainer.appendChild(startTimeSeconds);
-        sponsorTimeContainer.appendChild(toText);
-        sponsorTimeContainer.appendChild(endTimeMinutes);
-        sponsorTimeContainer.appendChild(colonText);
-        sponsorTimeContainer.appendChild(endTimeSeconds);
-        sponsorTimeContainer.appendChild(endTimeNowButton);
-  
-        //add save button and remove edit button
-        let saveButton = document.createElement("span");
-        saveButton.id = "sponsorTimeSaveButton" + index;
-        saveButton.innerText = "Save";
-        saveButton.className = "mediumLink popupElement";
-        saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
-  
-        let editButton = document.getElementById("sponsorTimeEditButton" + index);
-        let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
-  
-        sponsorTimesContainer.replaceChild(saveButton, editButton);
-    }
-
-    function setEditTimeToCurrentTime(idStartName, index) {
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                {message: "getCurrentTime"},
-                function (response) {
-                    let minutes = <HTMLInputElement> <unknown> document.getElementById(idStartName + "Minutes" + index);
-                    let seconds = <HTMLInputElement> <unknown> document.getElementById(idStartName + "Seconds" + index);
-
-                    minutes.value = String(getTimeInMinutes(response.currentTime));
-                    seconds.value = getTimeInFormattedSeconds(response.currentTime);
-                });
-        });
-    }
-
-    //id start name is whether it is the startTime or endTime
-    //gives back the time in seconds
-    function getSponsorTimeEditTimes(idStartName, index): number {
-        let minutes = <HTMLInputElement> <unknown> document.getElementById(idStartName + "Minutes" + index);
-        let seconds = <HTMLInputElement> <unknown> document.getElementById(idStartName + "Seconds" + index);
-
-        return parseInt(minutes.value) * 60 + parseFloat(seconds.value);
-    }
-  
-    function saveSponsorTimeEdit(index, closeEditMode = true) {
-        sponsorTimes[index].segment[0] = getSponsorTimeEditTimes("startTime", index);
-        sponsorTimes[index].segment[1] = getSponsorTimeEditTimes("endTime", index);
-  
-        //save this
-        Config.config.segmentTimes.set(currentVideoID, sponsorTimes);
-        
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                {message: "sponsorDataChanged"}
-            );
-        });
-  
-        if (closeEditMode) {
-            showSubmitTimesIfNecessary();
-        }
-    }
-  
-    //deletes the sponsor time submitted at an index
-    function deleteSponsorTime(index) {
-        //if it is not a complete sponsor time
-        if (sponsorTimes[index].segment.length < 2) {
-            messageHandler.query({
-                active: true,
-                currentWindow: true
-            }, function(tabs) {
-                messageHandler.sendMessage(tabs[0].id, {
-                    message: "changeStartSponsorButton",
-                    showStartSponsor: true,
-                    uploadButtonVisible: false
-                });
-            });
-  
-            resetStartTimeChosen();
-        }
-  
-        sponsorTimes.splice(index, 1);
-  
-        //save this
-        Config.config.segmentTimes.set(currentVideoID, sponsorTimes);
-        
-        //if they are all removed
-        if (sponsorTimes.length == 0) {
-            //update chrome tab
-            messageHandler.query({
-                active: true,
-                currentWindow: true
-            }, function(tabs) {
-                messageHandler.sendMessage(tabs[0].id, {
-                    message: "changeStartSponsorButton",
-                    showStartSponsor: true,
-                    uploadButtonVisible: false
-                });
-            });
-  
-            //hide submission section
-            document.getElementById("submissionSection").style.display = "none";
-        }
-
-        messageHandler.query({
-            active: true,
-            currentWindow: true
-        }, tabs => {
-            messageHandler.sendMessage(
-                tabs[0].id,
-                {message: "sponsorDataChanged"}
-            );
-        });
-    }
-  
     function submitTimes() {
         if (sponsorTimes.length > 0) {
             messageHandler.query({
@@ -786,7 +486,7 @@ async function runThePopup(messageListener?: MessageListener) {
         //check if an end time has been specified for the latest sponsor time
         if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].segment.length > 1) {
             //show submit times button
-            document.getElementById("submitTimesContainer").style.display = "unset";
+            document.getElementById("submitTimesContainer").style.display = "flex";
         } else {
             //hide submit times button
             document.getElementById("submitTimesContainer").style.display = "none";
@@ -798,29 +498,24 @@ async function runThePopup(messageListener?: MessageListener) {
         chrome.runtime.sendMessage({"message": "openConfig"});
     }
 
+    function openHelp() {
+        chrome.runtime.sendMessage({"message": "openHelp"});
+    }
+
     //make the options username setting option visible
     function setUsernameButton() {
-        //get username from the server
+        PageElements.usernameInput.value = PageElements.usernameValue.innerText;
-        utils.sendRequestToServer("GET", "/api/getUsername?userID=" + Config.config.userID, function (response) {
-            if (response.status == 200) {
-                PageElements.usernameInput.value = JSON.parse(response.responseText).userName;
 
-                PageElements.submitUsername.style.display = "unset";
+        PageElements.submitUsername.style.display = "unset";
-                PageElements.usernameInput.style.display = "unset";
+        PageElements.usernameInput.style.display = "unset";
 
-                PageElements.setUsernameContainer.style.display = "none";
+        PageElements.setUsernameContainer.style.display = "none";
-                PageElements.setUsername.style.display = "unset";
+        PageElements.setUsername.style.display = "flex";
-                PageElements
+        PageElements.setUsername.classList.add("SBExpanded");
-                PageElements.setUsernameStatusContainer.style.display = "none";
+        
-            } else {
+        PageElements.setUsernameStatusContainer.style.display = "none";
-                PageElements.setUsername.style.display = "unset";
-                PageElements.submitUsername.style.display = "none";
-                PageElements.usernameInput.style.display = "none";
 
-                PageElements.setUsernameStatusContainer.style.display = "unset";
+        PageElements.sponsorTimesContributionsContainer.classList.add("hidden");
-                PageElements.setUsernameStatus.innerText = utils.getErrorMessage(response.status);
-            }
-        });
     }
 
     //submit the new username
@@ -829,15 +524,20 @@ async function runThePopup(messageListener?: MessageListener) {
         PageElements.setUsernameStatusContainer.style.display = "unset";
         PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
 
-        //get the userID
         utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
             if (response.status == 200) {
                 //submitted
                 PageElements.submitUsername.style.display = "none";
                 PageElements.usernameInput.style.display = "none";
 
-                PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("success");
+                PageElements.setUsernameContainer.style.removeProperty("display");
-            } else  {
+                PageElements.setUsername.classList.remove("SBExpanded");
+                PageElements.usernameValue.innerText = PageElements.usernameInput.value;
+
+                PageElements.setUsernameStatusContainer.style.display = "none";
+
+                PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
+            } else {
                 PageElements.setUsernameStatus.innerText = utils.getErrorMessage(response.status);
             }
         });
@@ -852,24 +552,15 @@ async function runThePopup(messageListener?: MessageListener) {
         document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
     }
   
-    function reportAnIssue() {
-        document.getElementById("issueReporterContainer").style.display = "unset";
-        PageElements.reportAnIssue.style.display = "none";
-    }
-  
     function addVoteMessage(message, UUID) {
-        let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
+        let voteButtonsContainer = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
-        //remove all children
+        voteButtonsContainer.style.display = "none";
-        while (container.firstChild) {
+
-            container.removeChild(container.firstChild);
+        let voteStatusContainer = document.getElementById("sponsorTimesVoteStatusContainer" + UUID);
-        }
+        voteStatusContainer.style.removeProperty("display");
-  
+        
-        let thanksForVotingText = document.createElement("h2");
+        let thanksForVotingText = document.getElementById("sponsorTimesThanksForVotingText" + UUID);
         thanksForVotingText.innerText = message;
-        //there are already breaks there
-        thanksForVotingText.style.marginBottom = "0px";
-  
-        container.appendChild(thanksForVotingText);
     }
   
     function vote(type, UUID) {
@@ -894,11 +585,6 @@ async function runThePopup(messageListener?: MessageListener) {
         });
     }
   
-    function hideDiscordButton() {
-        Config.config.hideDiscordLink = true;
-        PageElements.discordButtonContainer.style.display = "none";
-    }
-  
     //converts time in seconds to minutes:seconds
     function getFormattedTime(seconds) {
         let minutes = Math.floor(seconds / 60);
@@ -942,10 +628,9 @@ async function runThePopup(messageListener?: MessageListener) {
                     //change button
                     PageElements.whitelistChannel.style.display = "none";
                     PageElements.unwhitelistChannel.style.display = "unset";
-                    if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.style.display = "unset";
+                    document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
 
-                    PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
+                    if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.classList.remove("hidden");
-                    PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
 
                     //save this
                     Config.config.whitelistedChannels = whitelistedChannels;
@@ -990,9 +675,7 @@ async function runThePopup(messageListener?: MessageListener) {
                         //change button
                         PageElements.whitelistChannel.style.display = "unset";
                         PageElements.unwhitelistChannel.style.display = "none";
-
+                        document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated");
-                        PageElements.downloadedSponsorMessageTimes.innerText = "";
-                        PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";
 
                         //save this
                         Config.config.whitelistedChannels = whitelistedChannels;
@@ -1067,10 +750,6 @@ 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);
-
     //this means it is actually opened in the popup
     runThePopup();
 }