From a13374c23f395e8da33650d3986476c654ce9a44 Mon Sep 17 00:00:00 2001
From: Guy Sandler <guy@sandler.co.il>
Date: Wed, 25 Feb 2026 14:57:31 -0800
Subject: [PATCH] ui revamp 3.5

finished dropdown, might need a bit more
---
 html/popup.html        |  8 +++-----
 icon/dropdownArrow.svg |  2 +-
 js/popup.js            | 13 +++++++++++++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/html/popup.html b/html/popup.html
index 12a1f7b..844295b 100644
--- a/html/popup.html
+++ b/html/popup.html
@@ -900,17 +900,15 @@
             <button class="big-button back-btn" data-i18n="back">Back</button>
         </div>
         <div class="option-container">
-            <h3 class="header-small">
+            <h3 class="header-small" id="fontsDropdown" style="cursor: pointer;">
                 Dashboard Font
-                <!-- <button id="quick-fonts-dropdown-trigger" style="background:none;"> -->
-                    <svg src="../icon/dropdownArrow.svg" width="100px" height="100px"></svg>
-                <!-- </button> -->
+                <img src="../icon/dropdownArrow.svg" width="16px" height="16px">
             </h3>
             
             <div id="quick-fonts"></div>
 
             <div style="margin-top:10px;" class="custom-font">
-                <h3 class="header-small">Custom Font</h3>
+                <h3 class="header-small">Custom Fonts</h3>
                 <p>You can use a custom font from Google fonts here. Make sure to enter only the bold part after "?family="
                 </p>
             </div>
diff --git a/icon/dropdownArrow.svg b/icon/dropdownArrow.svg
index d3d8df9..5879a29 100644
--- a/icon/dropdownArrow.svg
+++ b/icon/dropdownArrow.svg
@@ -1,6 +1,6 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg fill="#000000" width="800px" height="800px" viewBox="-6.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="1.6">
+<svg fill="white" width="800px" height="800px" viewBox="-6.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="1.6">
 
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
 
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
 
<g id="SVGRepo_iconCarrier"> <title>dropdown</title> <path d="M18.813 11.406l-7.906 9.906c-0.75 0.906-1.906 0.906-2.625 0l-7.906-9.906c-0.75-0.938-0.375-1.656 0.781-1.656h16.875c1.188 0 1.531 0.719 0.781 1.656z"/> </g>
diff --git a/js/popup.js b/js/popup.js
index 37e158e..2077320 100644
--- a/js/popup.js
+++ b/js/popup.js
@@ -748,6 +748,19 @@ function setup() {
         document.querySelector("#customBackgroundLink").value = "";
 		sendFromPopup("updateBackground");
     });
+
+    document.getElementById("fontsDropdown").addEventListener("click", (e) => {
+        const el = document.getElementById("quick-fonts");
+        const el2 = document.getElementsByClassName("custom-font")[0];
+        if (el.style.display === "none") {
+            el.style.display = "flex";
+            el2.style.display = "block";
+        } else {
+            el.style.display = "none";
+            el2.style.display = "none";
+        }
+    });
+
 }
 
 function applyGPAPreset(bounds) {