From 9c8c9fcd6219ab6f82646f1637b6df3b4955bb15 Mon Sep 17 00:00:00 2001
From: rednotsus <Jiayangc1@gmail.com>
Date: Sat, 13 Apr 2024 10:54:24 -0500
Subject: [PATCH] fix premade cloacks

---
 static/assets/css/settings.css | 25 ++++++--------
 static/assets/js/settings.js   | 63 +++++++++++++---------------------
 static/settings.html           |  6 ++--
 3 files changed, 36 insertions(+), 58 deletions(-)

diff --git a/static/assets/css/settings.css b/static/assets/css/settings.css
index 439df4f8..02f9fa5b 100644
--- a/static/assets/css/settings.css
+++ b/static/assets/css/settings.css
@@ -1,6 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
 
-
 .row {
   margin-right: auto;
   grid-gap: 2rem;
@@ -40,7 +39,7 @@
 }
 
 .title {
-  font-family: "Inter", Arial, sans-serif;
+  font-family: Arial, sans-serif;
   margin-top: 20px;
   text-align: center;
   font-weight: bold;
@@ -48,9 +47,9 @@
 }
 
 p {
-  font-family: "Inter", Arial, sans-serif;
+  font-family: Arial, sans-serif;
   margin-top: 6px;
-  font-weight: 5px;
+  font-weight: normal;
 }
 
 .tab-cloak {
@@ -58,7 +57,7 @@ p {
   background-color: #fc8585;
   border: none;
   color: rgb(248, 244, 244);
-  padding: 15px 20px;
+  padding: 10px 20px;
   margin: 3px 6px 3px 6px;
   text-align: center;
   text-decoration: none;
@@ -71,11 +70,7 @@ p {
 }
 
 .tab-cloak:hover {
-  scale: 1.1;
-}
-
-img {
-  border-radius: 5px 5px 0 0;
+  transform: scale(1.1);
 }
 
 button {
@@ -104,8 +99,9 @@ button {
   border-radius: 12px;
 }
 
-select, input {
-  font-family: "Inter", Arial, sans-serif;
+select,
+input {
+  font-family: Arial, sans-serif;
   border: none;
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
@@ -116,7 +112,8 @@ select, input {
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.15);
 }
 
-select:hover, input:hover {
+select:hover,
+input:hover {
   opacity: 0.8;
 }
 
@@ -148,7 +145,7 @@ select {
   padding: 0.5rem;
   border-radius: 0.375rem;
   color: rgb(255, 255, 255);
-  padding: 10px;
+  padding: 5px;
   text-align: center;
 }
 
diff --git a/static/assets/js/settings.js b/static/assets/js/settings.js
index 471a1fde..69e423da 100644
--- a/static/assets/js/settings.js
+++ b/static/assets/js/settings.js
@@ -1,31 +1,32 @@
-var cloakElement = document.getElementById("premadecloaks");
+var cloakElement;
+
+document.addEventListener("DOMContentLoaded", function () {
+  cloakElement = document.getElementById("premadecloaks");
+  var cloak = cloakElement.value;
+});
 
-// thanks 3kh0
 var tab = localStorage.getItem("tab");
 if (tab) {
-  // If there is saved data, try to parse it
   try {
     var tabData = JSON.parse(tab);
   } catch {
-    // If there is an error in parsing, create an empty object
     var tabData = {};
   }
 } else {
-  // If there is no saved data, create an empty object
   var tabData = {};
 }
 
-// Set the title and icon fields to the values saved in tabData, if they exist
-if (tabData.title) document.getElementById("title").value = tabData.title;
-if (tabData.icon) document.getElementById("icon").value = tabData.icon;
+var titleElement = document.getElementById("title");
+var iconElement = document.getElementById("icon");
+
+if (tabData.title && titleElement) titleElement.value = tabData.title;
+if (tabData.icon && iconElement) iconElement.value = tabData.icon;
 
-// Default tab settings
 var settingsDefaultTab = {
   title: "Dashboard",
   icon: "/img/canvas.ico",
 };
 
-// Function to set the document title
 function setTitle(title = "") {
   if (title) {
     document.title = title;
@@ -33,35 +34,27 @@ function setTitle(title = "") {
     document.title = settingsDefaultTab.title;
   }
 
-  // Update the saved tab data with the new title
   var tab = localStorage.getItem("tab");
 
   if (tab) {
-    // If there is saved data, try to parse it
     try {
       var tabData = JSON.parse(tab);
     } catch {
-      // If there is an error in parsing, create an empty object
       var tabData = {};
     }
   } else {
-    // If there is no saved data, create an empty object
     var tabData = {};
   }
 
   if (title) {
-    // If there is a new title, update tabData
     tabData.title = title;
   } else {
-    // If the title is empty, delete the title field from tabData
     delete tabData.title;
   }
 
-  // Save the updated tab data to localStorage
   localStorage.setItem("tab", JSON.stringify(tabData));
 }
 
-// Function to set the favicon
 function setFavicon(icon) {
   if (icon) {
     document.querySelector("link[rel='icon']").href = icon;
@@ -69,86 +62,76 @@ function setFavicon(icon) {
     document.querySelector("link[rel='icon']").href = settingsDefaultTab.icon;
   }
 
-  // Update the saved tab data with the new icon
   var tab = localStorage.getItem("tab");
 
   if (tab) {
-    // If there is saved data, try to parse it
     try {
       var tabData = JSON.parse(tab);
     } catch {
-      // If there is an error in parsing, create an empty object
       var tabData = {};
     }
   } else {
-    // If there is no saved data, create an empty object
     var tabData = {};
   }
 
   if (icon) {
-    // If there is a new icon, update tabData
     tabData.icon = icon;
   } else {
-    // If the icon is empty, delete the icon field from tabData
     delete tabData.icon;
   }
 
-  // Save the updated tab data to localStorage
   localStorage.setItem("tab", JSON.stringify(tabData));
 }
 
 function setCloak() {
-  // applies only to premade cloaks
-  var cloak = cloakElement.value; // cloak seems kind of weird when you spell it out
+  var cloak = cloakElement.value;
   switch (cloak) {
-    case "search": // Google Search
+    case "search":
       setTitle("Google");
       setFavicon("/assets/cloaks/Google Search.ico");
       break;
-    case "wikipedia": // wikipedia
+    case "wikipedia":
       setTitle("Wikipedia, the free encyclopedia");
       setFavicon("/assets/cloaks/Wikipedia.ico");
       break;
-    case "bsite": // billibilli
+    case "bsite":
       setTitle("Billibilli");
       setFavicon("/assets/cloaks/Billibilli.ico");
       break;
-    case "drive": // Google Drive
+    case "drive":
       setTitle("My Drive - Google Drive");
       setFavicon("/assets/cloaks/Google Drive.ico");
       break;
-    case "gmail": // Gmail
+    case "gmail":
       setTitle("Gmail");
       setFavicon("/assets/cloaks/Gmail.ico");
       break;
-    case "calendar": // Google Calendar
+    case "calendar":
       setTitle("Google Calendar");
       setFavicon("/assets/cloaks/Calendar.ico");
       break;
-    case "meets": // Google Meet
+    case "meets":
       setTitle("Google Meet");
       setFavicon("/assets/cloaks/Meet.ico");
       break;
-    case "classroom": // Google Classroom
+    case "classroom":
       setTitle("Classes");
       setFavicon("/assets/cloaks/Classroom.png");
       break;
-    case "canvas": // Canvas
+    case "canvas":
       setTitle("Dashboard");
       setFavicon("/assets/cloaks/Canvas.ico");
       break;
-    case "zoom": // Zoom
+    case "zoom":
       setTitle("Zoom");
       setFavicon("/assets/cloaks/Zoom.ico");
       break;
-    case "khan": // Khan Academy
+    case "khan":
       setTitle("Dashboard | Khan Academy");
       setFavicon("/assets/cloaks/Khan Academy.ico");
       break;
   }
 }
-
-// Function to reset the tab settings to default
 function resetTab() {
   document.title = "Dashboard";
   document.querySelector("link[rel='icon']").href = "/img/canvas.ico";
diff --git a/static/settings.html b/static/settings.html
index f571f85b..60ea8456 100644
--- a/static/settings.html
+++ b/static/settings.html
@@ -95,8 +95,6 @@
            <a href="/s"><i class="fa-solid fa-gears">&nbsp;</i>Settings</a>
        </div>
    </nav>
-    <br />
-    <br />
     <h1 style="text-align: center">Settings</h1>
   <body>
     <center>
@@ -106,7 +104,7 @@ <h1 style="text-align: center">Settings</h1>
           <div class="title">
             <h4><b>About:Blank Cloaking</b></h4>
           </div>
-          <br><br>
+          <br>
           <div>
             <button onclick="cloak()" class="cloak center-global tab-cloak tabcloak">Enable</button>
           </div>
@@ -145,7 +143,7 @@ <h4><b>Tab Cloaker</b></h4>
             <option value="zoom">Zoom</option>
             <option value="khan">Khan Academy</option>
           </select>
-          <br><br><button class="center-global tab-cloak tabcloak" onclick="setCloak();">Set</button>
+          <br><button class="center-global tab-cloak tabcloak" onclick="setCloak();">Set</button>
           <button class="center-global tab-cloak tabcloak" onclick="resetTab();">Reset</button>
         </div>
       </div>