Added logo and changed up colours to support logo.

Logo by @munadikieh

15 files changed, 48 insertions, 15 deletions

diff --git a/.gitignore b/.gitignore
index 045c879c..a98ca8ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-content-config.js
\ No newline at end of file
+content-config.js
+ignored
\ No newline at end of file
diff --git a/README.md b/README.md
index c9cce414..4da6c78d 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
+![Logo](icons/LogoSponsorBlocker256px.png)
+<sub>Logo by @munadikieh</sub>
+
 # SponsorBlocker
 
 SponsorBlocker is an extension that will skip over sponsored segments of YouTube videos. SponsorBlocker is a crowdsourced browser extension that let's anyone submit the start and end time's of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.
diff --git a/SponsorBlocker144px.png b/SponsorBlocker144px.png
new file mode 100644
index 00000000..5305dd8d
--- /dev/null
+++ b/SponsorBlocker144px.png
diff --git a/background.js b/background.js
index 44c7542c..19e3c83a 100644
--- a/background.js
+++ b/background.js
@@ -69,7 +69,7 @@ function videoIDChange(currentVideoID) {
           type: "basic",
           title: "Do you want to submit the sponsor times for watch?v=" + previousVideoID + "?",
           message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
-          iconUrl: "icon.png"
+          iconUrl: "./icons/LogoSponsorBlocker256px.png"
         });
       }
 
diff --git a/content.css b/content.css
index 13bb025b..e03a976f 100644
--- a/content.css
+++ b/content.css
@@ -2,10 +2,18 @@
     font-family: 'Source Sans Pro', sans-serif;
 }
 
+#sponsorSkipLogo {
+	height: 64px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+}
+
 #sponsorSkipNotice {
     min-height: 120px;
     min-width: 400px;
-    background-color: rgba(217, 255, 220, 0.8);
+    background-color: rgba(255, 217, 217, 0.8);
     position: absolute;
     z-index: 1;
 }
@@ -19,24 +27,24 @@
 }
 
 .sponsorSkipButton {
-	background-color:#44c767;
+	background-color:#ec1c1c;
 	-moz-border-radius:28px;
 	-webkit-border-radius:28px;
 	border-radius:28px;
-	border:1px solid #18ab29;
+	border:1px solid #d31919;
 	display:inline-block;
 	cursor:pointer;
 	color:#ffffff;
 	font-size:14px;
 	padding:4px 15px;
 	text-decoration:none;
-    text-shadow:0px 0px 0px #2f6627;
+    text-shadow:0px 0px 0px #662727;
     
     margin-top: 5px;
     margin-right: 15px;
 }
 .sponsorSkipButton:hover {
-	background-color:#5cbf2a;
+	background-color:#bf2a2a;
 }
 .sponsorSkipButton:active {
 	position:relative;
diff --git a/content.js b/content.js
index 6e2d9b84..674e240c 100644
--- a/content.js
+++ b/content.js
@@ -135,6 +135,10 @@ function openSkipNotice(){
   noticeElement.id = "sponsorSkipNotice";
   noticeElement.className = "sponsorSkipObject";
 
+  var logoElement = document.createElement("img");
+  logoElement.id = "sponsorSkipLogo";
+  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+
   var noticeMessage = document.createElement("p");
   noticeMessage.id = "sponsorSkipMessage";
   noticeMessage.className = "sponsorSkipObject";
@@ -167,6 +171,7 @@ function openSkipNotice(){
   buttonContainer.appendChild(document.createElement("br"));
   buttonContainer.appendChild(dontShowAgainButton);
 
+  noticeElement.appendChild(logoElement);
   noticeElement.appendChild(noticeMessage);
   noticeElement.appendChild(buttonContainer);
 
diff --git a/icons/IconSponsorBlocker16px.png b/icons/IconSponsorBlocker16px.png
new file mode 100644
index 00000000..5217e70b
--- /dev/null
+++ b/icons/IconSponsorBlocker16px.png
diff --git a/icons/IconSponsorBlocker256px.png b/icons/IconSponsorBlocker256px.png
new file mode 100644
index 00000000..9870f586
--- /dev/null
+++ b/icons/IconSponsorBlocker256px.png
diff --git a/icons/IconSponsorBlocker32px.png b/icons/IconSponsorBlocker32px.png
new file mode 100644
index 00000000..c796bb07
--- /dev/null
+++ b/icons/IconSponsorBlocker32px.png
diff --git a/icons/LogoSponsorBlocker128px.png b/icons/LogoSponsorBlocker128px.png
new file mode 100644
index 00000000..dbf305de
--- /dev/null
+++ b/icons/LogoSponsorBlocker128px.png
diff --git a/icons/LogoSponsorBlocker256px.png b/icons/LogoSponsorBlocker256px.png
new file mode 100644
index 00000000..db351b15
--- /dev/null
+++ b/icons/LogoSponsorBlocker256px.png
diff --git a/icons/LogoSponsorBlocker64px.png b/icons/LogoSponsorBlocker64px.png
new file mode 100644
index 00000000..933f635c
--- /dev/null
+++ b/icons/LogoSponsorBlocker64px.png
diff --git a/manifest.json b/manifest.json
index b97d75aa..80be65d4 100644
--- a/manifest.json
+++ b/manifest.json
@@ -17,6 +17,9 @@
       ]
     }
   ],
+  "web_accessible_resources": [
+    "icons/LogoSponsorBlocker256px.png"
+  ],
   "permissions": [
     "tabs",
     "storage",
@@ -29,5 +32,12 @@
   "background": {
     "scripts":["background.js"]
   },
+  "icons": {
+    "16": "icons/IconSponsorBlocker16px.png",
+    "32": "icons/IconSponsorBlocker32px.png",
+    "64": "icons/LogoSponsorBlocker64px.png",
+    "128": "icons/LogoSponsorBlocker128px.png",
+    "256": "icons/LogoSponsorBlocker256px.png"
+  },
   "manifest_version": 2
 }
diff --git a/popup.css b/popup.css
index b48e1904..9d96b3c5 100644
--- a/popup.css
+++ b/popup.css
@@ -4,28 +4,32 @@
   font-family: 'Source Sans Pro', sans-serif;
 }
 
+h1 {
+	margin-top: 0px;
+}
+
 body {
   font-size: 14px;
   width: 300px;
-  background-color: #d9ffdc;
+  background-color: #ffd9d9;
 }
 
 .greenButton {
-  background-color:#44c767;
+	background-color:#ec1c1c;
   -moz-border-radius:28px;
   -webkit-border-radius:28px;
   border-radius:28px;
-  border:1px solid #18ab29;
+  border:1px solid #d31919;
   display:inline-block;
   cursor:pointer;
   color:#ffffff;
   font-size:16px;
   padding:8px 37px;
   text-decoration:none;
-  text-shadow:0px 0px 0px #2f6627;
+  text-shadow:0px 0px 0px #662727;
 }
 .greenButton:hover {
-  background-color:#5cbf2a;
+  background-color:#bf2a2a;
 }
 .greenButton:active {
   position:relative;
@@ -58,11 +62,11 @@ body {
 }
 
 .smallButton {
-	background-color:#2dabf9;
+	background-color:#f9902d;
 	-moz-border-radius:3px;
 	-webkit-border-radius:3px;
 	border-radius:3px;
-	border:1px solid #2dabf9;
+	border:1px solid #f9a72d;
 	display:inline-block;
 	cursor:pointer;
 	color:#ffffff;
@@ -71,7 +75,7 @@ body {
 	text-decoration:none;
 }
 .smallButton:hover {
-	background-color:#0688fa;
+	background-color:#fa9806;
 }
 .smallButton:active {
 	position:relative;
diff --git a/popup.html b/popup.html
index 35809532..54dbeb96 100644
--- a/popup.html
+++ b/popup.html
@@ -6,6 +6,8 @@
 
   <center>
     <div id="app">
+        <img src="icons/LogoSponsorBlocker256px.png" height="64px"/>
+
         <h1>SponsorBlock</h1>
 
         <!-- Loading text -->