Merge pull request #484 from CatalystDevOrg/c37-prefs-improve

improvement(preferences) tab icons + slight refresh
CatalystDevOrg · Apr 27, 2024 · 12be501 · 12be501
2 parents 4bb17c6 + f48b35d
commit 12be501
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,8 @@
         "cross-fetch": "^4.0.0",
         "custom-electron-titlebar": "^4.2.8",
         "electron-context-menu": "^3.6.1",
-        "electron-squirrel-startup": "^1.0.0"
+        "electron-squirrel-startup": "^1.0.0",
+        "material-symbols": "^0.17.3"
     },
     "config": {
         "forge": {

diff --git a/src/index.html b/src/index.html
@@ -88,9 +88,9 @@
         <div>
             <button onClick="togglePreferences()" ><img src="../assets/icons/x.svg" alt="this image has not loaded properly"></button>
             <div id="pref-tabs">
-                <button onClick='changePrefTab("basic")'>Basic</button>
-                <button onClick='changePrefTab("advanced")'>Advanced</button>
-                <button onClick='changePrefTab("experiments")'>Experiments</buttons>
+                <button onClick='changePrefTab("basic")'><span class="material-symbols-rounded">build</span>Basic</button>
+                <button onClick='changePrefTab("advanced")'><span class="material-symbols-rounded">construction</span>Advanced</button>
+                <button onClick='changePrefTab("experiments")'><span class="material-symbols-rounded">experiment</span>Experiments</buttons>
             </div>
             <h1 class="font-bold text-xl">Preferences</h1>
             <br />
@@ -116,13 +116,52 @@ <h1 class="font-bold text-xl">Preferences</h1>
                 <input class="text-black p-1.5 rounded-sm" id="pref-strt" class="" />
                 <p class="text-sm">Sets a custom startup page.</p>
                 <br />
-                <label for="pref-usrchr">Custom CSS</label>
-                <input id="pref-usrchr" type="checkbox" class="" />
-                <p class="text-sm">Loads custom css from the userChrome.css file</p>
+                <div id="basic">
+                    <label for="pref-darkmode">Dark Mode? </label>
+                    <input id="pref-darkmode" type="checkbox" class="" />
+                    <p class="text-sm">Toggle dark mode</p>
+                    <br />
+                    <label for="pref-autocomplete">Autocomplete </label>
+                    <input id="pref-autocomplete" type="checkbox" class="" />
+                    <p class="text-sm">Search Autocomplete</p>
+                    <br />
+                    <label for="se">Search Engine</label>
+                    <select name="se" id="se">
+                        <option value="0">Google</option>
+                        <option value="1">DuckDuckGo</option>
+                        <option value="2">Bing</option>
+                        <option value="3">Brave</option>
+                    </select>
+                </div>
+                <div class="hidden" id="advanced">
+                    <label for="pref-strt">Startup Page</label>
+                    <input class="text-black p-1.5 rounded-sm" id="pref-strt" class="" />
+                    <p class="text-sm">Sets a custom startup page.</p>
+                    <br />
+                    <label for="pref-usrchr">Custom CSS</label>
+                    <input id="pref-usrchr" type="checkbox" class="" />
+                    <p class="text-sm">Loads custom css from the userChrome.css file</p>
+                    <br />
+                    <label for="pref-adblk">Enable AD Blocker</label>
+                    <input id="pref-adblk" type="checkbox" class="" />
+                    <p class="text-sm">Enables the ad blocker (RESTART REQUIRED)</p>
+                    <br />
+                    <button id="clearbtn" onclick="clearData()" class="btn">Reset Preferences</button>
+                    <p class="text-sm">Sets all preferences back to their default values.</p>
+                    <br />
+                </div>
+                <div class="hidden" id="experiments">
+                    <label for="pref-dm"><b class="text-emerald-500">Experimental</b> Force Dark Mode</label>
+                    <input id="pref-dm" type="checkbox" class="" />
+                    <p class="text-sm">Toggles forced dark mode for all sites.</p>
+                    <br />
+                    <label for="pref-useragent"><b class="text-emerald-500">Experimental</b> User Agent: </label>
+                    <input id="pref-useragent" type="text" class="dark:text-gray-800 p-1 rounded"
+                        placeholder="Catalyst/{{version}}" value="Catalyst/{{version}}" />
+                    <p class="text-sm">Sets a custom user agent.</p>
+                </div>
                 <br />
-                <label for="pref-adblk">Enable AD Blocker</label>
-                <input id="pref-adblk" type="checkbox" class="" />
-                <p class="text-sm">Enables the ad blocker (RESTART REQUIRED)</p>
+                <i class="text-sm" id="pref-ver"></i>
                 <br />
                 <button id="clearbtn" onclick="clearData()" >Reset Preferences</button>
                 <p class="text-sm">Sets all preferences back to their default values.</p>

diff --git a/styles.css b/styles.css
@@ -117,6 +117,7 @@ button img {
     background-color: #4F46E5;
     /* dark:hover:bg-indigo-600 */
     color: white;
+
 }
 
 .moreMenuItem {