Merge pull request #19 from wompmacho/links-for-cdns-being-dumb

Links for cdns being dumb

.gitignore

@@ -1,4 +1,7 @@
 dev-build
 node_modules
 build
-*.psd
+*.psd
+*.ai
+cdn/
+artwork/

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "Womp",
+  "name": "WompChat",
   "version": "1.0.3",
   "lockfileVersion": 1,
   "requires": true,
@@ -674,14 +674,6 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
-    "axios": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
-      "requires": {
-        "follow-redirects": "1.5.10"
-      }
-    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -1398,15 +1390,11 @@
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
     },
-    "date-fns": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
-      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
-    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
       "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -1883,14 +1871,6 @@
         "readable-stream": "^2.3.6"
       }
     },
-    "follow-redirects": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-      "requires": {
-        "debug": "=3.1.0"
-      }
-    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -2681,7 +2661,8 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
     },
     "nanomatch": {
       "version": "1.2.13",

package.json

@@ -14,8 +14,6 @@
     "url": "git://github.com/wompmacho/live-chat.git"
   },
   "dependencies": {
-    "axios": "^0.19.0",
-    "date-fns": "^1.29.0",
     "lodash": "^4.17.15",
     "preact": "^8.2.7",
     "uglifyjs-webpack-plugin": "^1.3.0"

src/background/Setup.js

@@ -29,9 +29,9 @@ const ensure = () => {
       return true;
     };
 
-    chrome.tabs.create({ url: './html/welcome.html' });
+    chrome.tabs.create({ url: 'html/welcome.html' });
     chrome.runtime.onMessage.addListener(onSetupComplete);
-    console.log('Setup Complete');
+    console.log('Storage Setup Complete, Linking User To Welcome Page.');
   });
 };
 

src/background/index.js

@@ -1,7 +1,5 @@
 import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
-
 import Setup from './Setup';
-
 import CONFIG from 'src/config';
 
 class Main {

src/config.js

@@ -1,4 +1,3 @@
-
 const CONFIG = {
   defaultOptions: {
 
@@ -6,9 +5,9 @@ const CONFIG = {
     enableBTTVEmotes: true,
     enableFrankerEmotes: true,
     enableTwitchEmotes: true,
-    kappaFix: true,
     
     // Chat Options
+    kappaFix: true,
     theaterModeFix: false,
     setAuthorColor: false,
     showTimeStamp: false,
@@ -16,9 +15,11 @@ const CONFIG = {
     hideAuthorIcons: false,
     hideWelcomBanner: false,
     setTwitchColors: false,
-    textSizeSlider: 'inherit',
     setLiveChat: true,
     allowTextSlider: false,
+
+    // Var
+    textSizeSlider: 'inherit',
   }
 };
 

src/content/Message.js

@@ -1,8 +1,6 @@
 import Emotes from './Emotes';
 import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
 
-var colorNumberIndex = 0;
-
 class Message {
   constructor(messageNode) {
     this.node = messageNode;
@@ -178,11 +176,6 @@ class Message {
       
     ///////////////////////////////////////////////////////////////////
   
-    //  Set Alternate message Colors
-    if (PersistentSyncStorage.data.options.alternateLineColor) {
-      this.alternateLineColor();
-    }   
-
   }// end setDefaultSelections
 
   setAuthorColor() {
@@ -210,20 +203,6 @@ class Message {
     }    
   }
 
-  ///////////////////////////////////////////////////////////////////
-  
-  //  changes color every line
-  alternateLineColor(){
-
-      if(colorNumberIndex % 2 == 0){
-        this.node.classList.add("set-background-color-one");
-      }
-      if(colorNumberIndex % 2 !== 0){
-        this.node.classList.add("set-background-color-two");
-      }
-      colorNumberIndex++;
-  }
-  
   ///////////////////////////////////////////////////////////////////
 
   //  removes color attr

src/content/index.js

@@ -17,7 +17,6 @@ document.body.appendChild(theater_wrapper);
 var alreadyTheater = false;
 
 // ---
-
 class Main {
   constructor() {
     this.chatWatcher = null;
@@ -26,14 +25,6 @@ class Main {
     this.onRouteChange = this.onRouteChange.bind(this);
     this.load();
 
-    
-      //  button class - ytp-size-button ytp-button
-      //  right player controls - ytp-right-controls
-      //  player div id - ytd-player
-      //  chatframe id - chatframe
-      //  movieframe id - movie_player_fix
-      //  dono ticker id - ticker
-      //  player-theater-container
   }
 
   load() {
@@ -58,6 +49,11 @@ class Main {
 
   setDefaults() {
 
+      // Set Hide Welcome Banner
+      if (PersistentSyncStorage.data.options.alternateLineColor) {
+        document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer').classList.add('alternateLineColor');
+      }
+    
     ///////////////////////////////////////////////////////////////////
 
     // Welcome Banner

src/helpers/OpenActiveTab.js

@@ -1,5 +1,4 @@
 
-
 /* Open new tab if tab is not already open, otherwise focus that tab */
 export default url => {
   const matchUrl = url.replace(/^(https|http)/i, '*');
@@ -11,10 +10,4 @@ export default url => {
       chrome.tabs.create({ url });
     }
   });
-
-  // for(let i = 0, tab; tab = tabs[i]; i++) {
-  //   if(tab.url && tab.url === url) {
-  //     return;
-  //   }
-  // }
 };

src/html/options.html

@@ -1,31 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <style>
-        body {
-          font-family: sans-serif;
-          padding: 10px;
-          width: 400px;
-        }
-
-        .hideDiv {
-            display: none;
-        }
-    </style>
     <meta charset="UTF-8">
-    <title>Options</title>
+    <title>WompChat Options</title>
   </head>
+
   <body>
 
-    <span style="display:inline-block;vertical-align: middle; margin-right: 2%;">
-      <img src="../assets/icons/icon128.png" alt="🔴" style="height: 2.5em;">
-    </span>
-    <span style="display:inline-block;vertical-align: middle;">
-      <h1>Womp Options</h1>
-    </span>
-    <span class="">
+    <div class="container">  
+      <img src="../assets/icons/logo128.png" alt="🔴">    
+      <h1>WompChat Options</h1>
       <button class="info_button" id="infoButton" >Info</button>
-    </span>
+    </div>
     
     <br>
     <br>
@@ -56,7 +42,7 @@
           </div>
         </div>
 
-        <div class="hr"></div>
+        <hr>
 
         <div class="options-table">
           <div class="option-row">
@@ -67,8 +53,7 @@
 
       </div>
       
-      
-      <div class="hr"></div>
+      <hr>
 
       <div class="section">
         <h2 class="options-heading">Chat Options</h2>
@@ -131,12 +116,10 @@
         </div>
 
       </div>
-      
-      <div class="hr"></div>
-      <h2 class="options-heading">Font Size</h2>
-      <span>
 
-      </span>
+      <hr>
+
+      <h2 class="options-heading">Font Size</h2>
 
       <span>
         <div class="options-table">
@@ -154,11 +137,8 @@
         </div>
       </span>
     <div id="save-status">&nbsp;</div>
-
-    <div class="omega"></div>
-
   </div>
-    
+
     <script src="../options.js"></script>
   </body>
 </html>

src/html/welcome.html

@@ -5,106 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Welcome Page</title>
+    <meta http-equiv="refresh" content="0; URL='https://wompmacho.com/wompchat'" />
   </head>
-  <body>
-
-    <div class="success-overlay">
-      
-      <div class="icon-container">
-        <i class="material-icons">done</i>
-      </div>
-
-    </div>
-    
-    <div class="container">
-      <div class="logo">
-        <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/icons/icon512.png" alt="womp Logo">
-      </div>
-
-      <h1><span class="fw-light">Welcome to the </span><span class="fw-bold">Chat</span></h1>
-
-      <p class="heading-note">Were changing our name!</p>
-      <p class="heading-note">Aparently LIVE CHAT was a bad idea. Now We Are WOMP
-      </p>
-
-      <div class="shields">
-        <a href="https://discord.gg/pVNnTDA">
-          <img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="discord shield.io">
-        </a>
-        <a href="https://cdn.jsdelivr.net/gh/wompmacho/womp/src/assets/img/btc.JPG">
-          <img src="https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red" alt="BTC shield.io">
-        </a>
-        <a href="https://github.com/wompmacho/womp">
-          <img alt="GitHub Release Date" src="https://img.shields.io/github/release-date/wompmacho/womp?label=Latest&style=plastic">
-        </a>
-      </div>
-
-      <hr>
-
-      <div class="links_div">
-        <a class="links_bottom" href="https://discord.gg/pVNnTDA" title="Join our Discord Community">Join our Discord Community</a>
-        <a class="links_bottom" href="https://streamelements.com/wompmacho-5882/tip" title="Donations">Donations</a>
-        <a class="links_bottom" href="https://www.youtube.com/wompmacho" title="Youtube">Youtube</a>
-        <a class="links_bottom" href="mailto:wompmacho@gmail.com">Contact Me</a>
-      </div>
-
-      <hr>
-
-      <h2>
-        Soon to come:
-      </h2>
-
-      <ul>
-        <li>Specific channel Emotes</li>
-        <li>Search for Emote Panel</li>
-        <li>Autocomplete for emote Selection</li>
-        <li><s>Theater Mode Fix for that quality Stream and Chat time</s></li>
-        <li>Moderation Options</li>
-        <li>User Profile Info</li>
-        <li>Other Styling Options</li>
-      </ul>
-
-      <hr>
-      
-      <h2>How To:</h2>
-
-      <p>
-        There is still a lot of stuff I am working on. This is very Beta at the moment so 
-      </p>
-      <h2>Use At Your Own Risk</h2>
-      <p>
-        This is a Chrome Extension for Youtube Live Streams, adding some Quality of Life improvements for the Chat. 
-        Adds Top, Trending and Global (500ish) Emotes from popular sites. These Update with what is Trending. 
-      </p>
-      <p>
-        Don't forget to pin this extension for easy access. 
-      </p>
-      <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/pinYourExtension.gif" alt="pinYourExtension.gif">
-      <p>
-        Youtube Live is slow to load its pages currently. 
-        Give the extension a moment while the page's iframes are loading. 
-        Once you see the Emote Panel Icon you can open the Emote Selection Panel.
-      </p>
-      <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/emotesMenu.gif" alt="emotesMenu.gif">
-      <p>
-        Enhanced Theater Mode Is Now Available. Just click the check in the option panel and refresh your page.
-      </p>
-      <img style="height: 540px; width: 960px;" src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/theaterMode.gif" alt="theaterMode.gif">
-      <p>        
-        Over around 500 Top and Trending Emotes are loaded from popular sites. 
-        You can Enable/Disable them in the Options Menu.
-      </p>
-      <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/optionsMenu.gif" alt="optionsMenu.gif">
-      <p>
-        Can Also Click on UserNames To Autofill an @ Notification
-      </p>
-      <img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif">
-       
-      <h2>Use At Your Own Risk</h2>
-
-      <h1>Enjoy!</h1>
-    </div>
-    
+  <body>   
     <script src="../welcomePage.js"></script>
   </body>
 </html>

src/manifest.json

@@ -1,13 +1,11 @@
 {
   "manifest_version": 2,
 
-  "name": "Womp",
+  "name": "WompChat",
   "version": "1.0.3",
   "description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
   "icons": {
-    "48": "assets/icons/icon48.png",
-    "128": "assets/icons/icon128.png",
-    "512": "assets/icons/icon512.png"
+    "128": "assets/icons/logo128.png"
   },
 
   "permissions": [

src/options.js

@@ -1,11 +1,8 @@
 
 import './stylus/options.styl';
-import dateFormat from 'date-fns/format';
 import { debounce } from 'lodash';
 import PersistentSyncStorage from './helpers/PersistentSyncStorage';
 
-
-
 //  hides element after short timeout
 const hideDebounce = debounce(ele => {
   ele.classList.remove('show');
@@ -30,7 +27,6 @@ const SaveStatusEle = document.getElementById('save-status');
   SaveStatusEle.classList.add('show');
 };
 
-
 ///////////////////////////////////////////////////////////////////////////////
 
 var textSizeSlider = document.getElementById("textSizeSlider");
@@ -51,7 +47,6 @@ allowTextSlider.oninput = function(){
   
 };
 
-
 const optionOnChange = (input) => {
   
   var inputValueKey;
@@ -108,7 +103,6 @@ const optionOnChange = (input) => {
   return onChange;
 };
 
-
 // Executed code
 const OptionInputs = document.querySelectorAll('.option-input');
 
@@ -118,11 +112,11 @@ PersistentSyncStorage.on('ready', () => {
     const inputOnChange = optionOnChange(input);
     input.addEventListener('change', inputOnChange);
 
-
     switch (input.id) {
-      case 'allowTextSlider':
-        input.removeAttribute('disabled');
 
+      case 'enableBTTVEmotes':
+        input.removeAttribute('disabled');
+        break;
 
         if(PersistentSyncStorage.data.options.allowTextSlider == true){
           textSizeSlider.disabled = false;
@@ -132,16 +126,52 @@ PersistentSyncStorage.on('ready', () => {
         break;
 
       case 'theaterModeFix':
-        // do nothing, stay disabled
         input.removeAttribute('disabled');
         break;
 
-      case 'textSizeSlider' :
-        //  do nothing
+      case 'setAuthorColor':
+        input.removeAttribute('disabled');
+        break;
+
+      case 'showTimeStamp':
+        input.removeAttribute('disabled');
+        break;
+      
+      case 'alternateLineColor' :
+        input.removeAttribute('disabled');
+      break;
+
+      case 'hideAuthorIcons' :
+        input.removeAttribute('disabled');
+        break;
+      
+      case 'hideWelcomBanner' :
+        input.removeAttribute('disabled');
+        break;
+      
+      case 'setTwitchColors' :
+        input.removeAttribute('disabled');
+        break;
+
+      case 'setLiveChat' :
+        input.removeAttribute('disabled');
+        break;
+      
+      case 'allowTextSlider' :
+        //
+        break;
+
+      case 'allowTextSlider':
+        input.removeAttribute('disabled');
+        if(PersistentSyncStorage.data.options.allowTextSlider == true){
+          textSizeSlider.disabled = false;
+        }else if(PersistentSyncStorage.data.options.allowTextSlider == false){
+          textSizeSlider.disabled = true;
+        }
         break;
 
       default:
-        input.removeAttribute('disabled');
+        // shouldn't get hete if handled
         break;
     }
   });
@@ -149,7 +179,5 @@ PersistentSyncStorage.on('ready', () => {
 
 var infoButton = document.getElementById('infoButton');
 infoButton.addEventListener('click', function(){
-  chrome.tabs.create({ url: './html/welcome.html' });
-});
-
-
+  chrome.tabs.create({ url: 'https://wompmacho.com/wompchat' });
+});

src/stylus/_chatColors.styl

@@ -69,5 +69,4 @@ colors = {
 
 for id, col in colors
   .chat-color-{id} #content #author-name
-    color: col !important
-
+    color: col !important

src/stylus/content.styl

@@ -12,8 +12,6 @@
     //display: initial;
     //border-radius: inherit;
 
-
-
   // Owner chat messages
   .yt-live-chat-item-list-renderer[author-type="owner"] 
     //background: rgba(#fff, 0.1);
@@ -26,14 +24,12 @@
     //width: 28px !important
     //height: 28px !important
 
-
     // Chat user name
     #author-name.yt-live-chat-text-message-renderer 
       &:after
         //content: ' :'
         //color: #fff
 
-
 .AuthorFix
   #author-photo.yt-live-chat-text-message-renderer
     img.yt-img-shadow
@@ -55,7 +51,6 @@
   #timestamp.yt-live-chat-text-message-renderer
     display: inline-block 
 
-
 .Emote
   img
     height: 1.75em
@@ -66,16 +61,14 @@
 
 emote_div:hover
    background-size: 100% //100% 
-   background-color: rgba(255, 255, 255, .6)
+   background-color: var(--divider-color)
 
 .hideElement
   display: none !important
 
-.set-background-color-one
-  background-color: #303030 !important
-
-.set-background-color-two
-  background-color: transparent !important  
+.alternateLineColor 
+  yt-live-chat-text-message-renderer:nth-child(odd)
+    background-color:  rgba(255, 255, 255, 0.1) !important;
 
 .setTwitchColors
   text-shadow: 0 0 1px #000, 0 0 2px #000 !important
@@ -93,20 +86,20 @@ emote_div:hover
     background-color: transparent
 
 .emoteDivider
-  width: 60vw
-  border: 2px solid #d3d3d3;
+  width: 20vw
+  border: 1px solid red;
   border-radius: 5px;
-  margin-top: 2%;
-  margin-bottom: 2%;
+  margin-top: 1em;
+  margin-bottom: 1em;
   margin-left: auto
   margin-right: auto
   
 .emotePopUpText
   margin-bottom: 2%;
 
-
 .popup
-  background-color: #202020
+  background-color: var(--yt-app-background)
+  color: var(--yt-live-chat-primary-text-color)
   position: absolute; 
   top: 15%
   left: 0
@@ -114,7 +107,7 @@ emote_div:hover
   margin-left: auto
   margin-right: auto
   height 70%
-  width: 75%
+  width: 100%
   z-index: 999
   text-align: center
   border-radius: 5px
@@ -139,7 +132,7 @@ emote_div:hover
   cursor: pointer
 
 .emoteButton:hover 
-  background-color:rgba(255, 255, 255, .8)
+  background-color: #4e4e4e;
   
 .emoteButton:focus 
   outline:0
@@ -219,5 +212,4 @@ emote_div:hover
   position: absolute  !important
   right: 0px  !important
   top: 0px  !important
-  border: 1px solid #4e4e4e
-  
+  border: 1px solid #4e4e4e

src/stylus/options.styl

@@ -1,6 +1,33 @@
 body
   background-color: #1e1e1e
   color: #ffffff
+  font-family: sans-serif;
+  padding: 10px;
+  width: 400px;
+
+h1{
+  padding-left: 1em;
+}
+
+.hideDiv {
+    display: none;
+}
+
+.container{
+  display: flex;
+  vertical-align: middle;
+  height: 3.5em;
+}
+
+img{
+  max-height: 100%;
+}
+
+hr
+  border-color: #f00;
+  margin: auto;
+  margin-top: 1em;
+  margin-bottom: 1em;
 
 .section
   &:nth-child(1)
@@ -26,11 +53,6 @@ table
       width: 20%
       text-align: right
 
-.hr
-  background-color: #d1d1d1
-  height: 1px
-  margin: 10px 0
-
 #save-status
   text-align: center
   opacity: 0
@@ -59,18 +81,9 @@ input[type=checkbox][disabled]
   opacity: .9
 
 .info_button
-  display:inline-block
-  padding:0.3em 1.2em
-  margin:0 0.3em 0.3em 0
   border-radius:2em
-  box-sizing: border-box
-  text-decoration:none
-  font-weight:300
-  color:#1e1e1e
-  text-align:center
-  margin-left: 150px
+  margin-left: 135px;  
   transition: all 0.2s
 
 .info_button:hover
-  color: red
-
+  color: red

src/stylus/setupPage.styl

@@ -1,147 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700|Material+Icons")
-
-body
-  font-family: 'Roboto', Arial, sans-serif
-  font-size: 16px
-  background: #222
-  color: #fff
-  margin: 25px
-
-font-weights = {
-  light: 300,
-  regular: 400, 
-  bold: 700
-}
-for fw, w in font-weights
-  .fw-{fw}
-    font-weight: w
-
-.success-overlay
-  visibility: hidden
-  opacity: 0
-  position: fixed
-  top: 0
-  left: 0
-  z-index: 10
-  background: rgba(#191919, 0.95)
-  display: flex
-  flex-direction: column
-  align-items: center
-  justify-content: center
-  height: 100%
-  width: 100%
-  transition: visibility 0s, opacity 200ms ease
-  &.show
-    visibility: visible
-    opacity: 1
-  .material-icons
-    font-size: 20em
-    opacity: 0
-    &.show
-      opacity: 1
-      animation: jackInTheBox 700ms 1
-  .success-message
-    font-size: 3em
-  .close-message
-    font-size: 0.7em
-    opacity: 0.7
-
-.container
-  display: flex
-  flex-direction: column
-  align-items: center
-  h1
-    margin: 0
-    font-size: 3em
-    letter-spacing: 3px
-  .heading-note
-    font-size: 18px
-    color: #bbb
-  .option
-    text-align: center
-    .option-note
-      font-size: 12px
-      font-style: italic
-      color: #999
-  .complete-setup-button
-    background: #333
-    display: flex
-    justify-content: center
-    align-items: center
-    padding: 10px
-    cursor: pointer
-    text-transform: uppercase
-    border-radius: 3px
-    box-shadow: 0 2px 5px 0 rgba(#000, 0.7)
-    transition: background 50ms ease
-    &:hover
-      background: #404040
-    .material-icons
-      margin-right: 7px
-
-.shields
-  float: left;
-
-.links_bottom
-  display: inline-block;
-  margin: 1%
-  padding-top: 1em;
-  padding-bottom: 1em;
-  text-decoration: none;
-  text-transform: uppercase;
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  border: 1px solid #4e4e4e
-  background-color: #252526;
-  color: white;
-  text-align: center
-
-a 
-  display: inline-block;
-   
-a:hover 
-  background-color: #d3d3d3;
-  color: black
-
-a:active 
-  box-shadow: none;
-  top: 5px;
-
-.links_div
-  width: 20vw
-
-p
-  margin: 2%
-  max-width: 30vw
-
-h2
-  margin: 2%
-
-hr {
-  margin: 2%
-  width: 60vw
-  border: 3px solid #d3d3d3;
-  border-radius: 5px;
-}
-
-
-
-
-// jackInTheBox from animate.css https://github.com/daneden/animate.css
-@keyframes jackInTheBox
-  from
-    opacity: 0
-    transform: scale(0.1) rotate(60deg)
-    transform-origin: center center
-  
-  50%
-    transform: rotate(-20deg)
-  
-  70%
-    opacity: 1
-    transform: rotate(6deg)
-  
-  to
-    transform: scale(1)
-

src/utils/chrome/LocalStorage.js

@@ -7,4 +7,4 @@ class LocalStorage extends Storage {
   }
 }
 
-export default LocalStorage;
+export default LocalStorage;

src/utils/chrome/index.js

@@ -2,12 +2,6 @@ import _LocalStorage from './LocalStorage';
 import _SyncStorage from './SyncStorage';
 import _Notifications from './Notifications';
 
-// export default {
-//   LocalStorage: new _LocalStorage,
-//   SyncStorage: new _SyncStorage,
-//   Notifications: new _Notifications
-// }
-
 export const LocalStorage = new _LocalStorage;
 export const SyncStorage = new _SyncStorage;
 export const Notifications = new _Notifications;

src/welcomePage.js

@@ -1,48 +1,10 @@
-
-import './stylus/setupPage.styl';
 import PersistentSyncStorage from './helpers/PersistentSyncStorage';
 
-
-// THIS IS A JS PAGE FOR SETUP.HTML
-
-
-// --- Definitions ---
-const completeButton = document.querySelector('.complete-setup-button');
-const successOverlay = document.querySelector('.success-overlay');
-const successIcon = successOverlay.querySelector('.material-icons');
-const successCloseMessageCountdown = successOverlay.querySelector('.countdown');
-
 const setupComplete = () => {
 
-  // successOverlay.classList.add('show');
-
-  // setTimeout(() => {
-  //   successIcon.classList.add('show');
-  // }, 100);
-
-
-  //////////////////////////////////// Neat if I ever want to close a window
-  // let closeCountdown = 5; // seconds
-  // const closeTimeout = () => {
-  //   successCloseMessageCountdown.innerHTML = closeCountdown;
-  //   setTimeout(() => {
-  //     if(closeCountdown > 1) {
-  //       closeCountdown -= 1;
-  //       closeTimeout();
-  //     } else {
-  //       chrome.tabs.getCurrent((tab) => {
-  //         chrome.tabs.remove(tab.id);
-  //       });
-  //     }
-  //   }, 1000);
-  // }
-
-  // successCloseMessageCountdown.innerHTML = closeCountdown;
-  // closeTimeout();
 };
 
 // --- Main ---
-
 const main = () => {
 
   PersistentSyncStorage.on('ready', () => {
@@ -58,14 +20,8 @@ const main = () => {
     }, setupComplete);
 
     console.log('Competed setup, sent message');
-
   });
-
-  
 };
 
 // --- Executed ---
-
-main();
-
-
+main();