From 54ad629adb4592f76286a2555b8963fce070afe5 Mon Sep 17 00:00:00 2001
From: Ayushya Amitabh <ayushyamitabh@gmail.com>
Date: Fri, 4 Sep 2020 19:58:46 -0400
Subject: [PATCH] v1.6.7/release - fix hbo space button - minor reband color

---
 admin/public/manifest.json        |   2 +-
 admin/src/Dashboard.jsx           |   2 +-
 app/package-lock.json             |   2 +-
 app/public/popup.html             |  14 +-
 app/src/App.js                    |   2 +-
 app/src/Thread.css                |  11 +-
 app/src/index.css                 |  22 ++-
 app/src/index.js                  |  11 ++
 functions/gcdeploy.sh             |   0
 functions/modules/createRoom.js   |  13 ++
 functions/package-lock.json       |   2 +-
 functions/webhooks/ask.js         |   6 +-
 package-lock.json                 |  90 +---------
 website/changes/index.html        |   1 +
 website/changes/v1.6.7/index.html | 275 ++++++++++++++++++++++++++++++
 website/styles/extrasmall.css     |   7 +
 16 files changed, 346 insertions(+), 114 deletions(-)
 mode change 100644 => 100755 functions/gcdeploy.sh
 create mode 100644 website/changes/v1.6.7/index.html

diff --git a/admin/public/manifest.json b/admin/public/manifest.json
index c6f2988..48a2e77 100644
--- a/admin/public/manifest.json
+++ b/admin/public/manifest.json
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#c0f300",
+  "theme_color": "#beff94",
   "background_color": "#000000"
 }
diff --git a/admin/src/Dashboard.jsx b/admin/src/Dashboard.jsx
index 58c9443..a79f06c 100644
--- a/admin/src/Dashboard.jsx
+++ b/admin/src/Dashboard.jsx
@@ -431,7 +431,7 @@ export default class Dashboard extends Component {
         ],
         render: (a) =>
           a ? (
-            <CheckCircleTwoTone twoToneColor="#c0f300" id="call-icon" />
+            <CheckCircleTwoTone twoToneColor="#beff94" id="call-icon" />
           ) : (
             <CloseCircleTwoTone twoToneColor="#ff5f5f" id="call-icon" />
           ),
diff --git a/app/package-lock.json b/app/package-lock.json
index d001afa..2fee3c0 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "watch-party-crx",
-  "version": "1.6.3",
+  "version": "1.6.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/app/public/popup.html b/app/public/popup.html
index 8bdaffd..6896852 100644
--- a/app/public/popup.html
+++ b/app/public/popup.html
@@ -18,23 +18,23 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     />
     <style>
       :root {
-        --mdc-theme-primary: #c0f300 !important;
+        --mdc-theme-primary: #beff94 !important;
         --mdc-theme-secondary: #000000 !important;
-        --mdc-theme-background: #c0f300 !important;
+        --mdc-theme-background: #beff94 !important;
         --mdc-theme-surface: #000000 !important;
         --mdc-theme-on-primary: #000000 !important;
-        --mdc-theme-on-secondary: #c0f300 !important;
-        --mdc-theme-on-surface: #c0f300 !important;
+        --mdc-theme-on-secondary: #beff94 !important;
+        --mdc-theme-on-surface: #beff94 !important;
         --mdc-theme-text-primary-on-light: #000000 !important;
         --mdc-theme-text-secondary-on-light: #2c2c2c !important;
         --mdc-theme-text-hint-on-light: #363636 !important;
         --mdc-theme-text-disabled-on-light: #555555 !important;
         --mdc-theme-text-icon-on-light: #000000 !important;
-        --mdc-theme-text-primary-on-dark: #c0f300 !important;
+        --mdc-theme-text-primary-on-dark: #beff94 !important;
         --mdc-theme-text-secondary-on-dark: #f7ff56 !important;
         --mdc-theme-text-hint-on-dark: #fbffb3 !important;
         --mdc-theme-text-disabled-on-dark: #8bc000 !important;
-        --mdc-theme-text-icon-on-dark: #c0f300 !important;
+        --mdc-theme-text-icon-on-dark: #beff94 !important;
       }
       .mdc-button {
         display: block;
@@ -50,7 +50,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         letter-spacing: 2px;
       }
       .mdc-switch {
-        --mdc-theme-secondary: #c0f300 !important;
+        --mdc-theme-secondary: #beff94 !important;
         --mdc-theme-surface: #ffffff !important;
         margin: 10px 5px;
       }
diff --git a/app/src/App.js b/app/src/App.js
index 797c0f8..895b81d 100644
--- a/app/src/App.js
+++ b/app/src/App.js
@@ -36,7 +36,7 @@ const darkTheme = createMuiTheme({
       main: '#FF0000',
     },
     secondary: {
-      main: '#c0f300',
+      main: '#beff94',
     },
   },
 });
diff --git a/app/src/Thread.css b/app/src/Thread.css
index 03b31ec..bc17455 100644
--- a/app/src/Thread.css
+++ b/app/src/Thread.css
@@ -42,7 +42,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 }
 .thread-item.highlight .thread-message img,
 .thread-item.highlight .thread-message p {
-  border: 2px solid #c0f300;
+  border: 2px solid #beff94;
 }
 .thread-item.highlight .thread-message img {
   padding: 7.5px 10px;
@@ -264,9 +264,16 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
   line-height: 1.5 !important;
   padding: 7.5px 0px !important;
   padding-top: 0 !important;
-  text-align: center !important;
+  text-align: left !important;
+  white-space: break-spaces;
+}
+.thread-interactive-question::before {
+  content: '[MESSAGE FROM ADMIN]';
+  display: block;
+  margin-bottom: 10px;
 }
 .thread-interactive-thankyou {
+  font-size: 12px;
   text-align: center !important;
 }
 .thread-interactive-link {
diff --git a/app/src/index.css b/app/src/index.css
index 779b996..c9a8ddd 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -391,10 +391,10 @@ body.funimation.visible header {
 .create-bottom-card * {
   letter-spacing: 1.5px !important;
   font-size: 11px;
-  color: #c0f300 !important;
+  color: #beff94 !important;
 }
 .create-bottom-card a:hover {
-  color: #c0f300;
+  color: #beff94;
 }
 .room-title {
   text-overflow: ellipsis !important;
@@ -467,7 +467,7 @@ textarea::-webkit-scrollbar {
   overflow-y: auto;
 }
 .party-controls-users-container::-webkit-scrollbar-thumb {
-  background-color: #c0f300 !important;
+  background-color: #beff94 !important;
   border-radius: 13px;
 }
 .party-controls-users-container::-webkit-scrollbar {
@@ -641,10 +641,10 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 #mic-highlight {
   width: 320px;
   height: 124px;
-  box-shadow: 0px 0px 520px #c0f300;
+  box-shadow: 0px 0px 520px #beff94;
   left: 107px;
   position: absolute;
-  border: 2px solid #c0f300;
+  border: 2px solid #beff94;
 }
 #mic-text {
   width: 100%;
@@ -772,7 +772,7 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
 }
 .thread-wrapper::-webkit-scrollbar-thumb:hover,
 .giphy-list-wrapper::-webkit-scrollbar-thumb:hover {
-  background-color: #c0f300;
+  background-color: #beff94;
 }
 
 .giphy-search-form {
@@ -873,6 +873,10 @@ button.giphy-list-item {
   background: #202020 !important;
 }
 
+.alerts-stepper-card .MuiCardContent-root {
+  white-space: break-spaces;
+}
+
 .alerts-stepper-card span {
   font-size: 11px !important;
 }
@@ -894,7 +898,7 @@ button.giphy-list-item {
   border-bottom-left-radius: 26px !important;
   border-bottom-right-radius: 26px !important;
   padding: 10px;
-  color: #c0f300 !important;
+  color: #beff94 !important;
 }
 
 .alerts-stepper-controls {
@@ -903,7 +907,7 @@ button.giphy-list-item {
 }
 
 .alerts-stepper-controls .MuiMobileStepper-dot.MuiMobileStepper-dotActive {
-  background-color: #c0f300 !important;
+  background-color: #beff94 !important;
 }
 
 .alerts-stepper-controls button {
@@ -940,7 +944,7 @@ button.giphy-list-item {
 }
 .tutorial-content h6 {
   font-size: 14px;
-  color: #c0f300;
+  color: #beff94;
   letter-spacing: 2.5px;
   font-weight: bold;
   text-transform: uppercase;
diff --git a/app/src/index.js b/app/src/index.js
index 1fe070f..2bbca99 100644
--- a/app/src/index.js
+++ b/app/src/index.js
@@ -98,6 +98,17 @@ switch (getPlayerSource()) {
       },
       { capture: true }
     );
+    window.addEventListener(
+      'keydown',
+      (ev) => {
+        if (ev.target.tagName==='INPUT'||ev.target.tagName==='TEXTAREA') {
+          ev.target.focus();
+        }
+        ev.stopImmediatePropagation();
+        ev.stopPropagation();
+      },
+      {capture: true}
+    )
     break;
   case PLAYER_SOURCE.PEACOCK:
     document.body.classList.add('peacock');
diff --git a/functions/gcdeploy.sh b/functions/gcdeploy.sh
old mode 100644
new mode 100755
diff --git a/functions/modules/createRoom.js b/functions/modules/createRoom.js
index 2a9b22c..dc170ba 100644
--- a/functions/modules/createRoom.js
+++ b/functions/modules/createRoom.js
@@ -62,5 +62,18 @@ module.exports = async (req, res) => {
         err
       );
     });
+    if (bodydata.player.source === 'hbomax.' || bodydata.player.source === 'hbonow.') {
+      admin
+      .firestore()
+      .collection('rooms')
+      .doc(bodydata.partyName)
+      .collection('messages')
+      .add({
+        uid: '<system>',
+        name: '',
+        text: `<Space> is accidentally toggling pause/play on HBO Now / Max. Fix will be available soon. Please consider using voice calls for the time being.`,
+        time: new Date(),
+      });
+    }
   res.status(201).send({ roomId: bodydata.partyName, message: 'Started a party!' });
 };
diff --git a/functions/package-lock.json b/functions/package-lock.json
index adedcfb..b4a2294 100644
--- a/functions/package-lock.json
+++ b/functions/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "watch-party-api",
-  "version": "1.6.3",
+  "version": "1.6.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/functions/webhooks/ask.js b/functions/webhooks/ask.js
index a0781fe..5515d03 100644
--- a/functions/webhooks/ask.js
+++ b/functions/webhooks/ask.js
@@ -55,8 +55,8 @@ body {
 }
 
 #answer {
-  background: #c0f300;
-  background-color: #c0f300;
+  background: #beff94;
+  background-color: #beff94;
   padding: 30px;
   letter-spacing: 1.3px;
 }
@@ -64,7 +64,7 @@ body {
 #container > h5 {
   font-size: 18px;
   content: 'WATCH PARTY | ASK';
-  color: #c0f300;
+  color: #beff94;
   display: block;
   margin-bottom: 30px;
   font-weight: bold;
diff --git a/package-lock.json b/package-lock.json
index 54da2e8..f74e7d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,91 +1,5 @@
 {
   "name": "watch-party",
-  "version": "1.6.2",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@babel/runtime": {
-      "version": "7.11.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
-      "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
-    "clsx": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
-    },
-    "csstype": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz",
-      "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw=="
-    },
-    "dom-helpers": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
-      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
-      "requires": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-    },
-    "prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
-    "react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "react-virtualized": {
-      "version": "9.22.2",
-      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.2.tgz",
-      "integrity": "sha512-5j4h4FhxTdOpBKtePSs1yk6LDNT4oGtUwjT7Nkh61Z8vv3fTG/XeOf8J4li1AYaexOwTXnw0HFVxsV0GBUqwRw==",
-      "requires": {
-        "@babel/runtime": "^7.7.2",
-        "clsx": "^1.0.4",
-        "dom-helpers": "^5.1.3",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
-    "regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-    }
-  }
+  "version": "1.6.7",
+  "lockfileVersion": 1
 }
diff --git a/website/changes/index.html b/website/changes/index.html
index 9c1d8c7..18497f7 100644
--- a/website/changes/index.html
+++ b/website/changes/index.html
@@ -182,6 +182,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <a href="/changes//v1.6.4/" data-font="sans-bold" class="support-card">v1.6.4</a>
       <a href="/changes//v1.6.5/" data-font="sans-bold" class="support-card">v1.6.5</a>
       <a href="/changes//v1.6.6/" data-font="sans-bold" class="support-card">v1.6.6</a>
+      <a href="/changes//v1.6.7/" data-font="sans-bold" class="support-card">v1.6.7</a>
     </div>
 
     <footer>
diff --git a/website/changes/v1.6.7/index.html b/website/changes/v1.6.7/index.html
new file mode 100644
index 0000000..04a6302
--- /dev/null
+++ b/website/changes/v1.6.7/index.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<!-----------------------------------------------------------------------
+Copyright (C) Ayushya Amitabh - All Rights Reserved
+Unauthorized copying of this file, via any medium is strictly prohibited
+Proprietary and confidential
+Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
+https://www.chromewatchparty.com/copyright
+=========================================================================
+ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
+CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
+COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
+------------------------------------------------------------------------->
+<html>
+  <head>
+    <link rel="icon" href="/icons/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="preload" as="font" href="/fonts/glacialindifference-bold-webfont.woff" crossorigin />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-bold-webfont.woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-italic-webfont.woff"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-italic-webfont.woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-regular-webfont.woff"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      as="font"
+      href="/fonts/glacialindifference-regular-webfont.woff2"
+      crossorigin
+    />
+    <style>
+      @import '/styles/variables.css';
+      @import '/styles/variables-dark.css' screen and (prefers-color-scheme: dark);
+
+      @import '/styles/extrasmall.css';
+      @import '/styles/small.css' only screen and (min-width: 768px);
+      @import '/styles/medium.css' only screen and (min-width: 1024px);
+      @import '/styles/large.css' only screen and (min-width: 1366px);
+      @import '/styles/extralarge.css' only screen and (min-width: 1921px);
+
+      @font-face {
+        font-family: 'GlacialBold';
+        src: url('/fonts/glacialindifference-bold-webfont.woff2') format('woff2'),
+          url('/fonts/glacialindifference-bold-webfont.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'GlacialItalic';
+        src: url('/fonts/glacialindifference-italic-webfont.woff2') format('woff2'),
+          url('/fonts/glacialindifference-italic-webfont.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      @font-face {
+        font-family: 'Glacial';
+        src: url('/fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
+          url('/fonts/glacialindifference-regular-webfont.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+      }
+      [data-font='sans'] {
+        font-family: 'Glacial', sans-serif;
+        font-display: swap;
+      }
+      [data-font='sans-bold'] {
+        font-family: 'GlacialBold', sans-serif;
+        font-display: swap;
+      }
+      [data-font='sans-italic'] {
+        font-family: 'GlacialItalic', sans-serif;
+        font-style: italic;
+        font-display: swap;
+      }
+    </style>
+    <title>Watch Party | V1.6.7</title>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'UA-87498806-2');
+    </script>
+  </head>
+  <body>
+    <div class="heading bubble empty right">
+      <a href="/" class="title underlink" data-font="sans-bold">WATCH PARTY</a>
+      <h4 class="sub-title" data-font="sans">
+        WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
+      </h4>
+      <a href="https://get.chromewatchparty.com" class="big-button" data-font="sans">
+        GET CHROME EXTENSION
+      </a>
+    </div>
+    <div style="margin-top: 10rem" class="text-section">
+      <div class="info">
+        <div class="info-text">
+          <a href="/changes" class="title underlink" data-font="sans-bold">CHANGELOG</a>
+        </div>
+      </div>
+      <div class="info">
+        <div class="info-text">
+          <div>
+            <h4 class="sub-title" data-font="sans-bold">V1.6.7</h4>
+          </div>
+          <div>
+            <p data-font="sans" class="body">
+              FIX HBO <code>SPACE</code> KEY TOGGLING PAUSE
+            </p>
+            <p data-font="sans" class="body">
+              FIX TEXT WRAPPING FOR INTERACTIVE SYSTEM MESSAGES AND ALERTS
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="info">
+        <div class="info-text">
+          <div></div>
+          <a
+            href="mailto:admin@chromewatchparty.com?subject=Changelog Questions"
+            class="underlink"
+            data-font="sans-bold"
+          >
+            ASK ABOUT CHANGES
+          </a>
+        </div>
+      </div>
+    </div>
+    <footer>
+      <div class="link-section">
+        <div class="link-list">
+          <h6 class="link-list-title" data-font="sans-bold">FOR USERS</h6>
+          <a class="underlink" href="/welcome#tips" data-font="sans">FAQ</a>
+          <a class="underlink" href="/changes" data-font="sans">Changelog</a>
+          <a
+            class="underlink"
+            target="_blank"
+            href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+            data-font="sans"
+          >
+            Give Feedback
+          </a>
+          <a class="underlink" href="/welcome" data-font="sans">Getting Started</a>
+          <a class="underlink" target="_blank" href="https://paypal.me/Ayushya" data-font="sans">
+            Support Watch Party
+          </a>
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://get.chromewatchparty.com"
+            data-font="sans"
+          >
+            Get Chrome Extension
+          </a>
+        </div>
+        <div class="link-list">
+          <h6 class="link-list-title" data-font="sans-bold">FOR DEVELOPERS</h6>
+          <a class="underlink" target="_blank" href="https://firebase.google.com" data-font="sans"
+            >Firebase</a
+          >
+          <a class="underlink" target="_blank" href="https://material-ui.com" data-font="sans"
+            >Material UI</a
+          >
+          <a class="underlink" target="_blank" href="https://dolby.io" data-font="sans"
+            >Dolby Voxeet</a
+          >
+          <a class="underlink" target="_blank" href="https://reactjs.org" data-font="sans"
+            >React JS</a
+          >
+          <a class="underlink" target="_blank" href="https://nodejs.org" data-font="sans"
+            >Node JS</a
+          >
+          <a class="underlink" target="_blank" href="http://developers.giphy.com" data-font="sans"
+            >Giphy</a
+          >
+        </div>
+        <div class="link-list">
+          <h6 class="link-list-title" data-font="sans-bold">LEGAL & OTHER</h6>
+          <a class="underlink" data-font="sans">© 2020, Ayushya Amitabh</a>
+          <a class="underlink" href="/copyright" data-font="sans">Copyright</a>
+          <a
+            class="underlink"
+            target="_blank"
+            href="https://linkedin.com/in/ayushyamitabh"
+            data-font="sans"
+            >About Creator</a
+          >
+        </div>
+      </div>
+      <div class="end-line">
+        <a class="underlink" data-font="sans">Built with ♥ for Google Chrome by Ayushya Amitabh</a>
+        <a class="underlink" target="_blank" href="https://instagram.com/chromewatchparty">
+          <svg
+            height="4rem"
+            viewBox="0 0 511 511.9"
+            width="4rem"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m510.949219 150.5c-1.199219-27.199219-5.597657-45.898438-11.898438-62.101562-6.5-17.199219-16.5-32.597657-29.601562-45.398438-12.800781-13-28.300781-23.101562-45.300781-29.5-16.296876-6.300781-34.898438-10.699219-62.097657-11.898438-27.402343-1.300781-36.101562-1.601562-105.601562-1.601562s-78.199219.300781-105.5 1.5c-27.199219 1.199219-45.898438 5.601562-62.097657 11.898438-17.203124 6.5-32.601562 16.5-45.402343 29.601562-13 12.800781-23.097657 28.300781-29.5 45.300781-6.300781 16.300781-10.699219 34.898438-11.898438 62.097657-1.300781 27.402343-1.601562 36.101562-1.601562 105.601562s.300781 78.199219 1.5 105.5c1.199219 27.199219 5.601562 45.898438 11.902343 62.101562 6.5 17.199219 16.597657 32.597657 29.597657 45.398438 12.800781 13 28.300781 23.101562 45.300781 29.5 16.300781 6.300781 34.898438 10.699219 62.101562 11.898438 27.296876 1.203124 36 1.5 105.5 1.5s78.199219-.296876 105.5-1.5c27.199219-1.199219 45.898438-5.597657 62.097657-11.898438 34.402343-13.300781 61.601562-40.5 74.902343-74.898438 6.296876-16.300781 10.699219-34.902343 11.898438-62.101562 1.199219-27.300781 1.5-36 1.5-105.5s-.101562-78.199219-1.300781-105.5zm-46.097657 209c-1.101562 25-5.300781 38.5-8.800781 47.5-8.601562 22.300781-26.300781 40-48.601562 48.601562-9 3.5-22.597657 7.699219-47.5 8.796876-27 1.203124-35.097657 1.5-103.398438 1.5s-76.5-.296876-103.402343-1.5c-25-1.097657-38.5-5.296876-47.5-8.796876-11.097657-4.101562-21.199219-10.601562-29.398438-19.101562-8.5-8.300781-15-18.300781-19.101562-29.398438-3.5-9-7.699219-22.601562-8.796876-47.5-1.203124-27-1.5-35.101562-1.5-103.402343s.296876-76.5 1.5-103.398438c1.097657-25 5.296876-38.5 8.796876-47.5 4.101562-11.101562 10.601562-21.199219 19.203124-29.402343 8.296876-8.5 18.296876-15 29.398438-19.097657 9-3.5 22.601562-7.699219 47.5-8.800781 27-1.199219 35.101562-1.5 103.398438-1.5 68.402343 0 76.5.300781 103.402343 1.5 25 1.101562 38.5 5.300781 47.5 8.800781 11.097657 4.097657 21.199219 10.597657 29.398438 19.097657 8.5 8.300781 15 18.300781 19.101562 29.402343 3.5 9 7.699219 22.597657 8.800781 47.5 1.199219 27 1.5 35.097657 1.5 103.398438s-.300781 76.300781-1.5 103.300781zm0 0"
+            />
+            <path
+              d="m256.449219 124.5c-72.597657 0-131.5 58.898438-131.5 131.5s58.902343 131.5 131.5 131.5c72.601562 0 131.5-58.898438 131.5-131.5s-58.898438-131.5-131.5-131.5zm0 216.800781c-47.097657 0-85.300781-38.199219-85.300781-85.300781s38.203124-85.300781 85.300781-85.300781c47.101562 0 85.300781 38.199219 85.300781 85.300781s-38.199219 85.300781-85.300781 85.300781zm0 0"
+            />
+            <path
+              d="m423.851562 119.300781c0 16.953125-13.746093 30.699219-30.703124 30.699219-16.953126 0-30.699219-13.746094-30.699219-30.699219 0-16.957031 13.746093-30.699219 30.699219-30.699219 16.957031 0 30.703124 13.742188 30.703124 30.699219zm0 0"
+            />
+          </svg>
+        </a>
+        <a class="underlink" target="_blank" href="https://www.reddit.com/r/ChromeWatchParty/">
+          <svg
+            id="Bold"
+            enable-background="new 0 0 24 24"
+            height="4rem"
+            viewBox="0 0 24 24"
+            width="4rem"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m21.325 9.308c-.758 0-1.425.319-1.916.816-1.805-1.268-4.239-2.084-6.936-2.171l1.401-6.406 4.461 1.016c0 1.108.89 2.013 1.982 2.013 1.113 0 2.008-.929 2.008-2.038s-.889-2.038-2.007-2.038c-.779 0-1.451.477-1.786 1.129l-4.927-1.108c-.248-.067-.491.113-.557.365l-1.538 7.062c-2.676.113-5.084.928-6.895 2.197-.491-.518-1.184-.837-1.942-.837-2.812 0-3.733 3.829-1.158 5.138-.091.405-.132.837-.132 1.268 0 4.301 4.775 7.786 10.638 7.786 5.888 0 10.663-3.485 10.663-7.786 0-.431-.045-.883-.156-1.289 2.523-1.314 1.594-5.115-1.203-5.117zm-15.724 5.41c0-1.129.89-2.038 2.008-2.038 1.092 0 1.983.903 1.983 2.038 0 1.109-.89 2.013-1.983 2.013-1.113.005-2.008-.904-2.008-2.013zm10.839 4.798c-1.841 1.868-7.036 1.868-8.878 0-.203-.18-.203-.498 0-.703.177-.18.491-.18.668 0 1.406 1.463 6.07 1.488 7.537 0 .177-.18.491-.18.668 0 .207.206.207.524.005.703zm-.041-2.781c-1.092 0-1.982-.903-1.982-2.011 0-1.129.89-2.038 1.982-2.038 1.113 0 2.008.903 2.008 2.038-.005 1.103-.895 2.011-2.008 2.011z"
+            />
+          </svg>
+        </a>
+        <a class="underlink" target="_blank" href="mailto:admin@chromewatchparty.com">
+          <svg
+            version="1.1"
+            id="Capa_1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            x="0px"
+            y="0px"
+            width="4rem"
+            height="4rem"
+            viewBox="0 0 512 512"
+            style="enable-background: new 0 0 512 512"
+            xml:space="preserve"
+          >
+            <g>
+              <g>
+                <path
+                  d="M467,61H45C20.218,61,0,81.196,0,106v300c0,24.72,20.128,45,45,45h422c24.72,0,45-20.128,45-45V106
+             C512,81.28,491.872,61,467,61z M460.786,91L256.954,294.833L51.359,91H460.786z M30,399.788V112.069l144.479,143.24L30,399.788z
+              M51.213,421l144.57-144.57l50.657,50.222c5.864,5.814,15.327,5.795,21.167-0.046L317,277.213L460.787,421H51.213z M482,399.787
+             L338.213,256L482,112.212V399.787z"
+                />
+              </g>
+            </g>
+          </svg>
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/website/styles/extrasmall.css b/website/styles/extrasmall.css
index bdf111f..dbae0b6 100644
--- a/website/styles/extrasmall.css
+++ b/website/styles/extrasmall.css
@@ -66,6 +66,13 @@ a.title {
   letter-spacing: 2px;
   margin: 3rem 0px;
 }
+code {
+  border: 1px solid var(--color-dim);
+  border-radius: 10px;
+  padding: 0.5rem 0.75rem;
+  background: var(--color-tertiary);
+  opacity: 0.8;
+}
 
 body {
   padding: 10rem;