minor changes

Added highlight for warranty repairs
Updated 'update' buttons to use local image
Begin work on fancy notifications

manifest.json

@@ -1,8 +1,10 @@
 {
 	"manifest_version": 3,
 
-	"name": "ServiceHub Plus",
+	"name": "ServiceHub+",
-	"version": "0.1.2",
+	"author": "Charles Danesi",
+	"homepage_url": "https://charlesdanesi.net",
+	"version": "0.1.3",
 	"description": "Improvements to Service Hub for TRG techs",
 
 	"content_scripts": [
@@ -11,5 +13,19 @@
 			"js": ["script.js"],
 			"matches": ["https://portal.trgrepair.com/*"]
 		}
-	]
+	],
+
+	"web_accessible_resources": [
+		{
+			"resources": [
+				"fonts/MaterialIcons-Regular.ttf",
+				"fonts/MaterialIconsOutlined-Regular.otf",
+				"img/autorenew.png"
+			],
+			"matches": ["<all_urls>"],
+			"extensions": ["lmeeejhdmpakenhgdfmgjcbdmeppjpam"]
+		}
+	],
+
+	"permissions": ["storage", "activeTab", "scripting"]
 }

script.js

@@ -0,0 +1,29 @@
+"use strict";
+
+/*
+TODO: insert a reset button into search form
+TODO: style menubar and keep it sticky on the window
+TODO: style/move the location scan to float with the RO
+TODO: implement facebook-style notifications
+*/
+
+// Warranty Highlight
+const isWarranty = document.getElementById("chkWarrantee");
+isWarranty.addEventListener("change", updateBackground);
+updateBackground();
+function updateBackground() {
+	isWarranty.nextElementSibling.style.backgroundColor = isWarranty.checked
+		? "red"
+		: "transparent";
+}
+
+// Notification system
+// https://portal.trgrepair.com/task_manager.asp?rnd=0.9996227368620352
+
+const notifCountStr = document.getElementById("lblTask").innerText;
+const notifCount = parseInt(notifCountStr.split(" ")[2]); // Total task count
+const notifCountNew = parseInt(notifCountStr.split(" ")[5].slice(1)); // New task count
+
+// Insert notification button
+const insertButton = document.getElementById("exitBtn");
+insertButton.innerHTML = `<div id='newBtn'><a href='#' id='notification-button'><span class='material-icons-outlined notification-icon'>notifications</span></a><span id='notification-badge'>${notifCountNew}</span></div>`;

style.css

@@ -10,10 +10,25 @@
 	HACK display tiny images next to parts list?
 	TODO shrink navbar/header/location on scroll
 	TODO fancy button animations
+	TODO choose file on upload window
 */
 
 @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
 
+@font-face {
+	font-family: "Material Icons Outlined";
+	font-style: normal;
+	font-weight: 400;
+	src: url("chrome-extension://__MSG_@@extension_id__/fonts/MaterialIconsOutlined-Regular.otf");
+}
+
+@font-face {
+	font-family: "Material Icons";
+	font-style: normal;
+	font-weight: 700;
+	src: url("chrome-extension://__MSG_@@extension_id__/fonts/MaterialIcons-Regular.ttf");
+}
+
 :root {
 	--white: #f4f4f9;
 	--darkgray: #696969;
@@ -73,7 +88,6 @@ input[id="btnSubmitForApproval"]:hover {
 input[value="Mark Complete"]:hover {
 	background-color: var(--green);
 	color: var(--darkgray);
-	/*font-weight: bolder;*/
 }
 
 input[name="btnParts"] {
@@ -83,11 +97,11 @@ input[name="btnParts"] {
 
 input[name="btnIssue4Eval"] {
 	background-color: var(--darkgreen);
-	color: var(--lightgray);
+	color: var(--green);
 }
 
 input[name="btnContract"] {
-	padding: .3em 0;
+	padding: 0.3em 0;
 	background-color: var(--green);
 	color: var(--darkgray);
 }
@@ -114,12 +128,62 @@ input[value="Remove Repair"] {
 	padding: 4px 0;
 }
 
+label {
+	transition: background-color 250ms ease;
+}
+
 /* Images */
 
 img[id="Img1"],
 img[id="Img2"] {
 	position: absolute;
-	content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Plus_symbol.svg/500px-Plus_symbol.svg.png");
+	content: url("chrome-extension://__MSG_@@extension_id__/img/autorenew.png");
-	width: 20px;
+	width: 18px;
-	height: 20px;
+	height: 18px;
+	/* BUG: The below lines aren't working.. */
+	outline: none;
+	border: none;
+}
+
+img[id="Img3"] {
+	content: url("chrome-extension://__MSG_@@extension_id__/img/autorenew.png");
+	width: 16px;
+	height: 16px;
+	outline: none;
+	border: none;
+}
+
+/* Fancy Notifications */
+
+#newBtn {
+	position: relative;
+}
+
+.material-icons-outlined {
+	font-family: "Material Icons Outlined";
+}
+
+#notification-button {
+	position: relative;
+	color: var(--lightblue);
+	cursor: pointer;
+	text-decoration: none;
+	outline: none;
+}
+
+#notification-button:hover {
+	color: var(--lightgray);
+}
+
+.notification-icon {
+	font-size: 2.5em;
+	position: absolute;
+	top: 5;
+	right: 3;
+}
+
+#notification-badge {
+	position: absolute;
+	top: 0;
+	right: 0;
 }