Merge pull request #440 from mbledkowski/master

Design change of popup.html

8 files changed, 545 insertions, 413 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 62ec128c..a13a3165 100644
--- a/public/_locales/en/messages.json
+++ b/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": {
-         "message": "So far, you've submitted"
+    "Submissions": {
+         "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"
     }
 }
diff --git a/public/icons/check.svg b/public/icons/check.svg
new file mode 100644
index 00000000..7ceda54b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/icons/pencil.svg b/public/icons/pencil.svg
new file mode 100644
index 00000000..a14954fb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/icons/settings.svg b/public/icons/settings.svg
new file mode 100644
index 00000000..d2fdae8f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/icons/thumb.svg b/public/icons/thumb.svg
new file mode 100644
index 00000000..c66bcdbd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/libs/Source+Sans+Pro.css b/public/libs/Source+Sans+Pro.css
index 3a00466c..55a505fc 100644
--- a/public/libs/Source+Sans+Pro.css
+++ b/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');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+  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+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;
+}
\ No newline at end of file
diff --git a/public/popup.css b/public/popup.css
index fab03e3d..5a9f7b01 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -1,242 +1,361 @@
-/* reset some properties to default (youtube messes with them */
-p.popupElement {
-	margin-block-start: 1em;
-	margin-block-end: 1em;
-	margin-inline-start: 0px;
-	margin-inline-end: 0px;
+:root {
+  --sb-main-bg-color: #222626;
+  --sb-main-fg-color: white;
+  --sb-gray-fg-color: #444848;
+  --sb-on-white-bg: black;
+  --sb-green-bg: #077B27;
 }
 
-h1.popupElement {
-	margin-block-start: 0.67em;
-    margin-block-end: 0.67em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    font-weight: bold;
+.hidden {
+  display: none !important;
 }
 
-h2.popupElement {
-	margin-block-start: 0.83em;
-    margin-block-end: 0.83em;
-    margin-inline-start: 0px;
-	margin-inline-end: 0px;
-	font-weight: bold;
+#sponsorblockPopup {
+  color: var(--sb-main-fg-color);
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: 14px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  width: 330px;
+  margin: 22px;
+  text-align: center;
 }
 
-h3.popupElement {
-	margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-	margin-inline-end: 0px;
-	font-weight: bold;
+#issueReporterTimeButtons > .votingButtons > .segmentTimeButton {
+  font-weight: bold;
+  color: var(--sb-main-fg-color);
+  background: none;
+  border: none;
+  padding: 10px 8px;
+  outline: none;
+
+  cursor: pointer;
+}
+
+.dot {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.sponsorTimesThanksForVotingText {
+  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;
 }
 
-sub.popupElement {
-	font-size: smaller;
+.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;
 }
-/* end reset */
 
-#sponsorBlockPopupLogo {
-	vertical-align: text-bottom;
+.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;
+}
+
+#videoInfo, #mainControls, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
+  margin-bottom: 12px !important;
+}
+#mainControls{
+  flex-flow: column;
+  align-items: center;
 }
+#submitTimesContainer{
+  flex-flow: column;
+  align-items: center;
+}
+/* additional buttons */
 
-h1.popupElement {
-	margin-top: 0px;
-	margin-bottom: 10px;
+#additionalButtons {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
 }
 
-.popupBody {
-	font-size: 14px;
-	background-color: #333;
-	padding: 0px 5px;
+#additionalButtons>button, button#setUsernameButton, #submitUsername {
+  background: none;
+  border: none;
+  color: white;
+  width: fit-content;
+  padding-left: 0;
 
-	font-family: 'Source Sans Pro', sans-serif;
+  cursor: pointer;
+}
 
-	color: #dddddd;
+#submitUsername {
+  padding-left: 5pt;
 }
 
-.outerPopupBody {
-	background-color: #222626;
-	overflow-y: scroll;
+#additionalButtons, #additionalButtons>button {
+  font-size: 15px;
 }
 
-.discreteLink.popupElement {
-	color: #dddddd;
+#usernameValue, #usernameInput, #sponsorTimesContributionsDisplay{
+  font-size: 16px;
 }
 
-.recordingSubtitle.popupElement {
-	margin-bottom: 10px;
+.SBWhitelistIcon {
+  min-width: 16px;
+  min-height: 16px;
+  margin-top: auto;
+  margin-bottom: auto;
+
+  height: 100%;
 }
 
-.voteButton.popupElement {
-	height: 32px;
-	margin-right: 15px;
-	cursor: pointer;
+.SBWhitelistIcon>path {
+  fill: var(--sb-main-fg-color);
 }
-.voteButton:hover.popupElement {
-	filter: brightness(80%);
+
+label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponsorTimesContributionsContainer > div > p, #usernameElement > div > #setUsername > #setUsernameStatusContainer > p {
+  margin: 0;
 }
 
-#discordButtonContainer.popupElement {
-	font-size: 12px;
+#usernameElement > div > p, #sponsorTimesContributionsContainer {
+  text-align: start;
 }
 
-.sponsorTime.popupElement {
-	font-size: 20px;
+.grayedOut>.SBWhitelistIcon>path {
+  fill: var(--sb-gray-fg-color);
 }
 
-.smallLink.popupElement {
-	font-size: 10px;
-	text-decoration: underline;
-	cursor: pointer;
+.grayedOut>label {
+  color: var(--sb-gray-fg-color);
 }
 
-.mediumLink.popupElement {
-	font-size: 15px;
-	margin-left: 25px;
-	margin-right: 25px;
-	text-decoration: underline;
-	cursor: pointer;
+.SBWhitelistIcon.rotated {
+  transform: rotate(45deg);
 }
 
-.tinyLink.popupElement {
-	font-size: 10px;
-	text-decoration: underline;
-	cursor: pointer;
+.SBWhitelistIconContainer, button#optionsButton>img, .logoText>img, #usernameValue {
+  margin-right: 8px;
 }
 
-.whitelistButton.popupElement {
-	background-color:#27a52d;
-	-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;
+#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer {
+  display: flex;
+  flex-flow: row nowrap;
+}
 
-	transition: 0.01s background-color;
+#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
+  cursor: pointer;
 }
-.whitelistButton:hover.popupElement {
-    background-color:#3acc3a;
+
+#usernameElement > div, #sponsorTimesContributionsContainer > div {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
 }
-.whitelistButton:focus.popupElement {
-    outline: none;
-    background-color:#3acc3a;
+
+.sidebyside > #usernameElement, .sidebyside > #sponsorTimesContributionsContainer {
+  display: flex;
+  align-items: center;
 }
-.whitelistButton:active.popupElement {
-    position:relative;
-    top:1px;
+
+#usernameValue{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 130px;
 }
 
-.greenButton.popupElement {
-    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;
-	
-	transition: 0.01s background-color;
+#setUsername {
+  display:flex;
 }
-.greenButton:hover.popupElement {
-    background-color:#ec1c1c;
+
+#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;
 }
-.greenButton:focus.popupElement {
-	outline: none;
-	background-color:#ec1c1c;
-}
-.greenButton:active.popupElement {
-    position:relative;
-    top:1px;
-}
-
-.dangerButton.popupElement {
-	background-color:#bc3315;
-	-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 #854629;
-}
-.dangerButton:hover.popupElement {
-	background-color:#d0451b;
-}
-.dangerButton:focus.popupElement {
-	outline: none;
-	background-color:#d0451b;
-}
-.dangerButton:active.popupElement {
-	position:relative;
-	top:1px;
-}
-
-.warningButton.popupElement {
-	background-color:#bc8215;
-	-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 {
-	background-color:#f9902d;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	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;
-}
-.smallButton:focus.popupElement {
-	outline: none;
-	background-color:#fa9806;
-}
-.smallButton:active.popupElement {
-	position:relative;
-	top:1px;
-}
\ No newline at end of file
diff --git a/public/popup.html b/public/popup.html
index d977724e..80755e8b 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -1,203 +1,146 @@
-<html>
-  <head>
-    <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"/>
-  </head>
-
-  <body class="outerPopupBody">
-    <center>
-      <div id="app" class="popupBody sponsorBlockPageBody">
-          <h1 class="popupElement logoText">
-            <img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
-            SponsorBlock
-          </h1>
-
-          <!-- Loading text -->
-          <p id="loadingIndicator" class="popupElement">__MSG_noVideoID__</p>
-          
-          <!-- Hidden until loading complete -->
-          <div id="mainControls" class="main popupElement" style="display: none">
-            <!-- If the video was found in the database -->
-            <div id="videoFound">
-                  
-            </div>
-
-            <div id="downloadedSponsorMessageTimes" class="popupElement">
-  
-            </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>
-
+<head>
+  <title>__MSG_openPopup__</title>
+  <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">
+</head>
+
+<body style="margin: 0; min-width: 320px; background: var(--sb-main-bg-color);">
+  <div id="sponsorblockPopup" class="sponsorBlockPageBody preload">
+    <div class="logoText bottomSpace">
+      <img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
+      <p>SponsorBlock</p>
+    </div>
+    <div id="videoInfo" class="bottomSpace">
+      <div class="bottomSpace">
+        <!-- Loading text -->
+        <p id="loadingIndicator">__MSG_noVideoID__</p>
+        <!-- If the video was found in the database -->
+        <p id="videoFound"></p>
+      </div>
+      <div id="issueReporterContainer">
+        <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>
-
-            <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>
+            <p id="whitelistChannel">__MSG_whitelistChannel__</p>
+            <p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
+          </label>
+        </div>
+        <button id="optionsButton" title="__MSG_optionsInfo__">
+          <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>
-
-          <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 id="setUsername" style="display: none">
+            <div id="setUsernameStatusContainer" style="display: none">
+              <p id="setUsernameStatus"></p>
             </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>
+            <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 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>
-  </body>
-
+      </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/popup.js"></script>
-</html>
+  <script src="./js/vendor.js" async></script>
+  <script src="./js/popup.js" async></script>
+</body>
\ No newline at end of file