theme compatibility

css/popup.css

@@ -20,8 +20,8 @@ h2 {font-size:24px;}
 .header {font-size: 16px;display: flex;align-items: center;gap:12px; margin-bottom:14px;}
 .header h1 { font-weight: 600; font-size:24px; }
 #bclogo {height: 30px;width:30px;filter: grayscale(1) brightness(100)}
-#numAssignmentsSlider, #numTodoItemsSlider {display: block;margin-top: 14px;width: 100%;-webkit-appearance: none; appearance: none;background:var(--inputbg);outline: none;height:6px;border-radius:20px;}
+#numAssignmentsSlider, #numTodoItemsSlider, #sidebarScaleSlider {display: block;margin-top: 14px;width: 100%;-webkit-appearance: none; appearance: none;background:var(--inputbg);outline: none;height:6px;border-radius:20px;}
-#numAssignmentsSlider::-webkit-slider-thumb,  #numTodoItemsSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;height: 18px; width: 18px;background: #727272;cursor: pointer;border-radius:30px;}
+#numAssignmentsSlider::-webkit-slider-thumb,  #numTodoItemsSlider::-webkit-slider-thumb, #sidebarScaleSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;height: 18px; width: 18px;background: #727272;cursor: pointer;border-radius:30px;}
 .option-container {font-size: 14px; margin-top: 8px;background: var(--containerbg);padding: 18px;border-radius: 14px;box-sizing:border-box}
 .options .option-container {padding: 14px;}
 a.option-container {display: block;color:#5ca5f6;font-size: 14px;}

html/popup.html

@@ -246,31 +246,9 @@
                         <span class="option-name" data-i18n="better_sidebar">Better Sidebar</span>
                     </div>
                     <div class="sub-options">
-                        <div class="sub-option" style="display:none;">
-                            <input type="checkbox" id="hover_preview" name="hover_preview">
-                            <label for="hover_preview" class="sub-text" data-i18n="hover_preview">Hover to preview
-                                details</label>
-                        </div>
-                        <div class="sub-option">
-                            <input type="checkbox" id="todo_separate_scrollbar" name="todo_separate_scrollbar">
-                            <label for="todo_separate_scrollbar" class="sub-text" data-i18n="todo_separate_scrollbar">Separate Scrollbar</label>
-                        </div>
-                        <div class="sub-option">
-                            <input type="checkbox" id="todo_hr24" name="todo_hr24">
-                            <label for="todo_hr24" class="sub-text" data-i18n="24hrformat">Use 24hr format</label>
-                        </div>
-                        <div class="sub-option">
-                            <input type="checkbox" id="todo_full_height" name="todo_full_height">
-                            <label for="todo_full_height" class="sub-text" data-i18n="todo_full_height">Force Full Height</label> <!-- TO REMOVE and replace with full height -->
-                        </div>
-                        <div class="sub-option">
-                            <input type="checkbox" id="todo_hide_feedback" name="todo_hide_feedback">
-                            <label for="todo_hide_feedback" class="sub-text" data-i18n="todo_hide_feedback">Hide Recent Feedback</label>
-                        </div>
                         <div style="margin-top: 5px">
-                            <span class="sub-text" data-i18n="max_items">Max items to show: </span><span
+                            <span class="sub-text">Sidebar scale: </span><span id="sidebarScaleValue"></span><span class="sub-text">%</span>
-                                id="numTodoItems"></span>
+                            <input type="range" min="70" max="150" id="sidebarScaleSlider">
-                            <input type="range" min="1" max="12" id="numTodoItemsSlider">
                         </div>
                     </div>
                 </div>

js/background.js

@@ -23,7 +23,7 @@ chrome.runtime.onInstalled.addListener(function () {
             },
             "new_install": true,
             "assignments_due": true,
-            "gpa_calc": false,
+            "gpa_calc": true,
             "dark_mode": true,
             "gradent_cards": false,
             "disable_color_overlay": false,
@@ -33,7 +33,7 @@ chrome.runtime.onInstalled.addListener(function () {
             "num_assignments": 4,
             "custom_domain": [""],
             "assignments_done": [],
-            "dashboard_grades": false,
+            "dashboard_grades": true,
             "assignment_date_format": false,
             "dashboard_notes": false,
             "dashboard_notes_text": "",

js/content.js

@@ -411,6 +411,15 @@ function applyOptionsChanges(changes) {
 					document.getElementById("better-sidebar-container").remove();
 				}
 				break;
+            case "sidebar_scale": {
+                const existingSidebar = document.getElementById("better-sidebar-container");
+                if (existingSidebar) {
+                    existingSidebar.remove();
+                    const mode = current_page.match(/^\/courses\/(\d+)\/?$/) ? "course" : "dash";
+                    setupBetterSidebar(mode);
+                }
+                break;
+            }
 		}
     });
 }
@@ -1339,6 +1348,20 @@ function setupBetterTodo() {
     }
 }
 
+function getSidebarScale() {
+    const rawScale = parseInt(options.sidebar_scale || 100);
+    if (isNaN(rawScale)) return 1;
+    return Math.max(0.7, Math.min(1.5, rawScale / 100));
+}
+
+function applySidebarScaleStyles(sidebarList) {
+    const scale = getSidebarScale();
+    sidebarList.style.setProperty("--bc-sidebar-icon-size", `${Math.round(20 * scale)}px`);
+    sidebarList.style.setProperty("--bc-sidebar-btn-height", `${Math.round(30 * scale)}px`);
+    sidebarList.style.setProperty("--bc-sidebar-btn-gap", `${Math.round(8 * scale)}px`);
+    sidebarList.style.setProperty("--bc-sidebar-label-size", `${Math.round(14 * scale)}px`);
+}
+
 function setupBetterSidebar(mode = "dash") {
     if (!options.better_sidebar) return;
     if (document.querySelector('#better-sidebar-container')) return;
@@ -1374,6 +1397,7 @@ function setupBetterSidebar(mode = "dash") {
 		let sidebarContent = makeElement("div", sidebarList, {
 			style: "display:flex;flex-direction:column;gap:20px;width:100%;flex:1;justify-content:flex-start;align-items:center;margin:40px;"
 		});
+        applySidebarScaleStyles(sidebarList);
 		// Populate sidebar from Canvas navigation menu dynamically
 		populateSidebarFromNav(sidebarContent);
 
@@ -1437,11 +1461,11 @@ function setupBetterSidebar(mode = "dash") {
 }
 function createSidebarButton(text, url, parent, icon) {
 	let button = makeElement("a", parent, {
-		style: "width:40%;height:30px;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;color:var(--bctext-0) !important;font-weight:bold;",
+        style: "width:40%;height:var(--bc-sidebar-btn-height,30px);cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:var(--bc-sidebar-btn-gap,8px);color:var(--bctext-0) !important;font-weight:bold;",
 		className: "bettercanvas-custom-btn better-sidebar-btn",
 		href: url,
 	});
-	button.innerHTML = `${icon ? `${icon}<span class="better-sidebar-label" style="font-size:clamp(10px, 2vw, 18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;">${text}</span>` : `<span class="better-sidebar-label">${text}</span>`}`;
+    button.innerHTML = `${icon ? `${icon}<span class="better-sidebar-label" style="font-size:var(--bc-sidebar-label-size,14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;">${text}</span>` : `<span class="better-sidebar-label" style="font-size:var(--bc-sidebar-label-size,14px);">${text}</span>`}`;
 }
 function populateSidebarFromNav(sidebarContent) {
 	const excludeIds = ["global_nav_help_link", "global_nav_history_link"];
@@ -1521,12 +1545,20 @@ function populateSidebarFromNav(sidebarContent) {
 	});
 }
 function updateSidebar(expanded, sidebarList, expander) {
-	sidebarList.style.width = expanded ? "150px" : "50px";
+    const scale = getSidebarScale();
+    sidebarList.style.width = expanded ? `${Math.round(150 * scale)}px` : `${Math.round(50 * scale)}px`;
+    applySidebarScaleStyles(sidebarList);
 	expander.style.transform = expanded ? "rotate(180deg)" : "rotate(0deg)";
+    expander.querySelector("svg").style.width = `${Math.round(30 * scale)}px`;
+    expander.querySelector("svg").style.height = `${Math.round(30 * scale)}px`;
 	const labels = document.querySelectorAll(".better-sidebar-label");
 	labels.forEach(label => label.style.display = expanded ? "block" : "none");
 	const buttons = document.querySelectorAll(".better-sidebar-btn");
 	buttons.forEach(label => label.style.width = expanded ? "80%" : "40%");
+    sidebarList.querySelectorAll(".better-sidebar-btn svg").forEach(svg => {
+        svg.style.width = "var(--bc-sidebar-icon-size,20px)";
+        svg.style.height = "var(--bc-sidebar-icon-size,20px)";
+    });
 	const courseLinksTitle = document.getElementById("better-course-links-title");
 	if (courseLinksTitle) {
 		courseLinksTitle.style.display = expanded ? "block" : "none";

js/popup.js

@@ -27,6 +27,7 @@ const syncedSubOptions = [
 	"cardWidth",
 	"cardHeight",
 	"customBackgroundLink",
+    "sidebar_scale",
 ];
 const localSwitches = [];
 
@@ -54,7 +55,7 @@ const defaultOptions = {
         },
         "new_install": true,
         "assignments_due": true,
-        "gpa_calc": false,
+        "gpa_calc": true,
         "dark_mode": true,
         "gradent_cards": false,
         "disable_color_overlay": false,
@@ -64,12 +65,13 @@ const defaultOptions = {
         "num_assignments": 4,
         "custom_domain": [""],
         "assignments_done": [],
-        "dashboard_grades": false,
+        "dashboard_grades": true,
         "assignment_date_format": false,
         "dashboard_notes": false,
         "dashboard_notes_text": "",
         "better_todo": false,
         "better_sidebar": false,
+        "sidebar_scale": 100,
         "todo_hr24": false,
 		"todo_separate_scrollbar": false,
         "condensed_cards": false,
@@ -192,6 +194,17 @@ function setupTodoSlider(initial) {
     });
 }
 
+function setupSidebarScaleSlider(initial) {
+    let el = document.querySelector("#sidebarScaleSlider");
+    if (!el) return;
+    el.value = initial;
+    document.querySelector("#sidebarScaleValue").textContent = initial;
+    el.addEventListener("input", function () {
+        document.querySelector("#sidebarScaleValue").textContent = this.value;
+        chrome.storage.sync.set({ "sidebar_scale": parseInt(this.value) });
+    });
+}
+
 function setupAutoDarkInput(initial, time) {
     let el = document.querySelector('#' + time);
     el.value = initial.hour + ":" + initial.minute;
@@ -352,6 +365,10 @@ function setup() {
 				identifier: "num_todo_items",
 				setup: (initial) => setupTodoSlider(initial),
 			},
+            {
+                identifier: "sidebar_scale",
+                setup: (initial) => setupSidebarScaleSlider(initial),
+            },
 			{
 				identifier: "card_limit",
 				setup: (initial) => setupCardLimitSlider(initial),
@@ -1061,7 +1078,16 @@ async function submitTheme() { //TODO: remake
     //     return;
     // }
 
-    const theme = await getExport(sync, ["custom_cards", "card_colors", "dark_preset", "custom_font", "gradient_cards", "disable_color_overlay"]);
+    const theme = await getExport(sync, [
+        ...syncedSwitches,
+        ...syncedSubOptions,
+        "custom_cards",
+        "card_colors",
+        "dark_preset",
+        "custom_font",
+        "gradient_cards",
+        "disable_color_overlay",
+    ]);
     const title = document.getElementById("submit-title");
     const credits = document.getElementById("submit-credits");
 
@@ -1150,6 +1176,15 @@ function saveCurrentTheme() {
                 "custom_cards": current["custom_cards"],
                 "card_colors": current["card_colors"] === null ? [current["dark_preset"]["links"]] : current["card_colors"],
                 "custom_font": current["custom_font"],
+                "better_todo": current["better_todo"],
+                "todo_hide_feedback": current["todo_hide_feedback"],
+                "todo_full_height": current["todo_full_height"],
+                "todo_hr24": current["todo_hr24"],
+                "todo_separate_scrollbar": current["todo_separate_scrollbar"],
+                "num_todo_items": current["num_todo_items"],
+                "hover_preview": current["hover_preview"],
+                "better_sidebar": current["better_sidebar"],
+                "sidebar_scale": current["sidebar_scale"],
 				"imageSize": current["imageSize"],
 				"cardRoundness": current["cardRoundness"],
 				"cardSpacing": current["cardSpacing"],