From 262fd8afa09be71774903f45e4c4e7f6f1fdaaa0 Mon Sep 17 00:00:00 2001
From: SomeElse <the@fvcked.life>
Date: Sun, 17 May 2026 01:17:01 +0000
Subject: [PATCH] splitted the code base into more components and implemented
 safety measures to Crypto.qml, also added missing themes and removed
 hardcoded values

---
 bar/modules/Battery.qml         |  28 ++-----
 bar/modules/Clock.qml           |  50 ++++---------
 bar/modules/Crypto.qml          | 125 ++++++++++++++++----------------
 bar/modules/Network.qml         |  26 +------
 bar/modules/Notifications.qml   |  29 ++------
 bar/modules/Tray.qml            |  28 ++-----
 bar/modules/Volume.qml          |  27 +------
 components/PopupCard.qml        |  43 +++++++++++
 components/PopupHideTimer.qml   |   7 ++
 components/PopupPanel.qml       |   3 +-
 components/TimezoneProvider.qml |   1 +
 config/config.qml               |   6 +-
 config/themes/aero.qml          |  17 ++++-
 config/themes/aurora.qml        |  17 ++++-
 config/themes/beach.qml         |  17 ++++-
 config/themes/colorful.qml      |  11 ++-
 config/themes/cosmic.qml        |  17 ++++-
 config/themes/everforest.qml    |  23 ++++--
 config/themes/goldencity.qml    |   8 +-
 config/themes/hummingbird.qml   |   8 +-
 config/themes/metropolitan.qml  |  17 ++++-
 config/themes/neonica.qml       |  17 ++++-
 config/themes/supreme.qml       |  17 ++++-
 config/themes/tropicalnight.qml |  61 +++++++++-------
 launcher/Launcher.qml           |  28 ++-----
 widgets/bgDate/BgDate.qml       |   8 +-
 26 files changed, 344 insertions(+), 295 deletions(-)
 create mode 100644 components/PopupCard.qml
 create mode 100644 components/PopupHideTimer.qml

diff --git a/bar/modules/Battery.qml b/bar/modules/Battery.qml
index 123ab1f..26deca7 100644
--- a/bar/modules/Battery.qml
+++ b/bar/modules/Battery.qml
@@ -13,7 +13,7 @@ ModuleChip {
     readonly property var    bat:        UPower.displayDevice
     readonly property bool   batReady:   bat && bat.ready && bat.isLaptopBattery
 
-    readonly property bool moduleEnabled: false
+    readonly property bool moduleEnabled: batReady
 
     readonly property real pct:       batReady ? bat.percentage * 100 : 72
     readonly property int  state:     batReady ? bat.state             : UPowerDeviceState.Unknown
@@ -173,37 +173,19 @@ ModuleChip {
                 Behavior on opacity   { NumberAnimation { duration: 200 } }
             }
 
-            Rectangle {
+            PopupCard {
                 id: card
-                width:  parent.width
+                popupOpen: batteryPopup.popupOpen
+                isTop: root.isTop
+                animEnabled: batteryPopup.visible
                 height: cardCol.implicitHeight + 28
 
-                anchors.top:    root.isTop ? parent.top    : undefined
-                anchors.bottom: root.isTop ? undefined     : parent.bottom
-
-                transform: Translate {
-                    y: batteryPopup.popupOpen ? 0
-                                             : (root.isTop ? -card.height : card.height)
-                    Behavior on y {
-                        NumberAnimation {
-                            duration:    Cfg.Config.popupAnimDuration
-                            easing.type: Easing.OutExpo
-                        }
-                        enabled: batteryPopup.visible
-                    }
-                }
-
-                opacity: batteryPopup.popupOpen ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation { duration: 220 } }
-
                 color:         root.t.batPopupBg
                 radius:        Cfg.Config.popupRadius
                 border.color:  root.t.batPopupBorder
                 border.width:  Cfg.Config.popupBorderWidth
                 layer.enabled: true
 
-                MouseArea { anchors.fill: parent; propagateComposedEvents: false }
-
                 ColumnLayout {
                     id: cardCol
                     anchors {
diff --git a/bar/modules/Clock.qml b/bar/modules/Clock.qml
index 7570904..c658ac0 100644
--- a/bar/modules/Clock.qml
+++ b/bar/modules/Clock.qml
@@ -9,8 +9,6 @@ import "../../components"
 ModuleChip {
     id: root
 
-    TimezoneProvider { id: timezone }
-
     width:  clockLayout.implicitWidth + 24
     height: Cfg.Config.moduleHeight
     radius: panelRadius
@@ -57,7 +55,7 @@ ModuleChip {
         }
 
         Text {
-            text: timezone.toTz(timeManager.now).toLocaleTimeString(Qt.locale(), "HH:mm")
+            text: TimezoneProvider.toTz(timeManager.now).toLocaleTimeString(Qt.locale(), "HH:mm")
             color: root.t.clockTime
             font.pixelSize: 13
             font.bold: true
@@ -66,7 +64,7 @@ ModuleChip {
 
         Text {
             id: secondsText
-            text: ":" + timezone.toTz(timeManager.now).toLocaleTimeString(Qt.locale(), "ss")
+            text: ":" + TimezoneProvider.toTz(timeManager.now).toLocaleTimeString(Qt.locale(), "ss")
             color: root.t.clockSeconds
             font.pixelSize: 13
             font.bold: true
@@ -88,37 +86,19 @@ ModuleChip {
         chipRoot: root
         cardWidth: 284
 
-            Rectangle {
+            PopupCard {
                 id: card
-                width:  parent.width
+                popupOpen: calendarPopup.popupOpen
+                isTop: root.isTop
+                animEnabled: calendarPopup.visible
                 height: cardCol.implicitHeight + 24
 
-                anchors.top: root.isTop ? parent.top : undefined
-                anchors.bottom: root.isTop ? undefined : parent.bottom
-
-                transform: Translate {
-                    y: calendarPopup.popupOpen ? 0 : (root.isTop ? -card.height : card.height)
-                    
-                    Behavior on y { 
-                        NumberAnimation { 
-                            duration: Cfg.Config.popupAnimDuration; 
-                            easing.type: Easing.OutExpo 
-                        }
-                        enabled: calendarPopup.visible
-                    }
-                }
-
-                opacity: calendarPopup.popupOpen ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation { duration: 200 } }
-
                 color:  root.t.calCardBg
                 radius: Cfg.Config.popupRadius
                 border.color: root.t.calCardBorder
                 border.width: Cfg.Config.popupBorderWidth
                 layer.enabled: true
 
-                MouseArea { anchors.fill: parent; propagateComposedEvents: false }
-
                 component MonthNavButton: Rectangle {
                     id: navBtn
                     required property int direction
@@ -180,7 +160,7 @@ ModuleChip {
                         Layout.fillWidth: true
 
                         Text {
-                            text: timezone.toTz(timeManager.now).toLocaleDateString(Qt.locale(), "dddd")
+                            text: TimezoneProvider.toTz(timeManager.now).toLocaleDateString(Qt.locale(), "dddd")
                             color: root.t.clockPopupDim
                             font.pixelSize: 12
                             font.capitalization: Font.AllUppercase
@@ -189,7 +169,7 @@ ModuleChip {
                         }
 
                         Text {
-                            text: timezone.toTz(timeManager.now).toLocaleDateString(Qt.locale(), "d MMMM yyyy")
+                            text: TimezoneProvider.toTz(timeManager.now).toLocaleDateString(Qt.locale(), "d MMMM yyyy")
                             color: root.t.clockPopupHeader
                             font.pixelSize: 22
                             font.bold: true
@@ -219,8 +199,8 @@ ModuleChip {
                         id: cal
                         Layout.fillWidth: true
                         implicitHeight: gridCol.implicitHeight
-                        property int displayYear:   timezone.toTz(timeManager.now).getFullYear()
-                        property int displayMonth:  timezone.toTz(timeManager.now).getMonth()
+                        property int displayYear:   TimezoneProvider.toTz(timeManager.now).getFullYear()
+                        property int displayMonth:  TimezoneProvider.toTz(timeManager.now).getMonth()
                         property int pendingYear:   displayYear
                         property int pendingMonth:  displayMonth
                         property int slideDir:      1   
@@ -229,7 +209,7 @@ ModuleChip {
                             target: calendarPopup
                             function onPopupOpenChanged() {
                                 if (calendarPopup.popupOpen) {
-                                    let tzd = timezone.toTz(timeManager.now)
+                                    let tzd = TimezoneProvider.toTz(timeManager.now)
                                     cal.displayYear  = tzd.getFullYear()
                                     cal.displayMonth = tzd.getMonth()
                                 }
@@ -291,7 +271,7 @@ ModuleChip {
                                                 readonly property int  dayNum:  (weekRow.weekIndex * 7 + index) - ((new Date(cal.displayYear, cal.displayMonth, 1).getDay() + 6) % 7) + 1
                                                 readonly property bool inMonth: dayNum >= 1 && dayNum <= new Date(cal.displayYear, cal.displayMonth + 1, 0).getDate()
                                                 readonly property bool isToday: {
-                                                    let tzd = timezone.toTz(timeManager.now)
+                                                    let tzd = TimezoneProvider.toTz(timeManager.now)
                                                     return inMonth && dayNum === tzd.getDate()
                                                         && cal.displayYear === tzd.getFullYear()
                                                         && cal.displayMonth === tzd.getMonth()
@@ -300,6 +280,8 @@ ModuleChip {
                                                 Rectangle {
                                                     anchors.centerIn: parent; width: 22; height: 22; radius: 11
                                                     color: isToday ? root.t.accent : "transparent"
+                                                    border.color: isToday ? root.t.borderToday : "transparent"
+                                                    border.width: isToday ? 2 : 0
                                                     visible: inMonth
                                                 }
 
@@ -327,7 +309,7 @@ ModuleChip {
                         Layout.rightMargin: 6
 
                         Text {
-                            text: "UTC " + (timezone.tzOffsetHours() >= 0 ? "+" : "") + timezone.tzOffsetHours()
+                            text: "UTC " + (TimezoneProvider.tzOffsetHours() >= 0 ? "+" : "") + TimezoneProvider.tzOffsetHours()
                             color:          root.t.clockPopupUtc
                             font.pixelSize: 13
                             font.bold:      true
@@ -338,7 +320,7 @@ ModuleChip {
 
                         Text {
                             text: {
-                                let d     = timezone.toTz(timeManager.now)
+                                let d     = TimezoneProvider.toTz(timeManager.now)
                                 let month = d.getMonth() + 1
                                 let day   = d.getDate()
                                 let year  = d.getFullYear()
diff --git a/bar/modules/Crypto.qml b/bar/modules/Crypto.qml
index e459a4f..bf7582f 100644
--- a/bar/modules/Crypto.qml
+++ b/bar/modules/Crypto.qml
@@ -151,6 +151,16 @@ ModuleChip {
         return val.toFixed(2)
     }
 
+    function safeNumber(val, fallback) {
+        const n = Number(val)
+        return (typeof n === "number" && isFinite(n)) ? n : fallback
+    }
+
+    function safeString(val, maxLen, fallback) {
+        if (typeof val !== "string") return fallback
+        return val.slice(0, maxLen).replace(/[\x00-\x1f\x7f-\x9f]/g, "")
+    }
+
     function fetchPrice() {
         if (loading) return
         loading  = true
@@ -164,26 +174,30 @@ ModuleChip {
             "&sparkline=false&price_change_percentage=24h"
 
         const xhr = new XMLHttpRequest()
+        xhr.timeout = 15000
         xhr.onreadystatechange = function () {
             if (xhr.readyState !== XMLHttpRequest.DONE) return
             loading = false
             if (xhr.status !== 200) { hasError = true; return }
             try {
-                const data = JSON.parse(xhr.responseText)
-                if (!data || data.length === 0) { hasError = true; return }
-                const coin  = data[0]
-                price             = coin.current_price               ?? -1
-                change24h         = coin.price_change_percentage_24h ?? 0
-                high24h           = coin.high_24h                    ?? 0
-                low24h            = coin.low_24h                     ?? 0
-                marketCap         = coin.market_cap                  ?? 0
-                volume24h         = coin.total_volume                ?? 0
-                rank              = coin.market_cap_rank             ?? 0
-                circulatingSupply = coin.circulating_supply          ?? 0
-                ath               = coin.ath                         ?? 0
-                athChange         = coin.ath_change_percentage       ?? 0
-                coinSymbol        = (coin.symbol ?? localCoinId).toUpperCase()
-                coinName          = coin.name ?? ""
+                const text = xhr.responseText
+                if (text.length > 65536) { hasError = true; return }
+                const data = JSON.parse(text)
+                if (!Array.isArray(data) || data.length === 0) { hasError = true; return }
+                const coin = data[0]
+                if (typeof coin !== "object" || coin === null) { hasError = true; return }
+                price             = safeNumber(coin.current_price, -1)
+                change24h         = safeNumber(coin.price_change_percentage_24h, 0)
+                high24h           = safeNumber(coin.high_24h, 0)
+                low24h            = safeNumber(coin.low_24h, 0)
+                marketCap         = safeNumber(coin.market_cap, 0)
+                volume24h         = safeNumber(coin.total_volume, 0)
+                rank              = Math.trunc(safeNumber(coin.market_cap_rank, 0))
+                circulatingSupply = safeNumber(coin.circulating_supply, 0)
+                ath               = safeNumber(coin.ath, 0)
+                athChange         = safeNumber(coin.ath_change_percentage, 0)
+                coinSymbol        = safeString(coin.symbol, 8, localCoinId).toUpperCase()
+                coinName          = safeString(coin.name, 50, "")
                 lastUpdated       = new Date().toLocaleTimeString(Qt.locale(), "HH:mm:ss")
                 root.displayCurrency = root.localActiveCurrency
                 root.activeCoinIndex = (root.activeCoinIndex + 1) % Math.max(1, root.localPairs.length)
@@ -282,24 +296,13 @@ ModuleChip {
             _doOpen()
         }
 
-            Rectangle {
+            PopupCard {
                 id: card
-                width:  parent.width
+                popupOpen: cryptoPopup.popupOpen
+                isTop: root.isTop
+                animEnabled: cryptoPopup.visible
                 height: cardCol.implicitHeight + 24
 
-                anchors.top:    root.isTop ? parent.top    : undefined
-                anchors.bottom: root.isTop ? undefined     : parent.bottom
-
-                transform: Translate {
-                    y: cryptoPopup.popupOpen ? 0 : (root.isTop ? -card.height : card.height)
-                    Behavior on y {
-                        NumberAnimation { duration: Cfg.Config.popupAnimDuration; easing.type: Easing.OutExpo }
-                        enabled: cryptoPopup.visible
-                    }
-                }
-
-                opacity: cryptoPopup.popupOpen ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation { duration: 200 } }
                 Behavior on height  { NumberAnimation { duration: 220; easing.type: Easing.OutCubic } }
 
                 color:         t.cryptoPopupBg     ?? t.calCardBg     ?? "#cc0c0e12"
@@ -308,8 +311,6 @@ ModuleChip {
                 border.width:  Cfg.Config.popupBorderWidth
                 layer.enabled: true
 
-                MouseArea { anchors.fill: parent; propagateComposedEvents: false }
-
                 property int activeTab: 0
 
                 ColumnLayout {
@@ -319,11 +320,11 @@ ModuleChip {
                     anchors.topMargin: 16
                     spacing: 10
 
-                    Rectangle {
-                        Layout.fillWidth: true
-                        height: 30
-                        radius: 10
-                        color:  "#15ffffff"
+                        Rectangle {
+                            Layout.fillWidth: true
+                            height: 30
+                            radius: 10
+                            color:  t.cryptoFieldBg ?? "#15ffffff"
 
                         RowLayout {
                             anchors.fill:    parent
@@ -340,13 +341,13 @@ ModuleChip {
                                 readonly property bool active: card.activeTab === tabIndex
                                 color: active
                                        ? (t.accent ?? "#ffc19375")
-                                       : (tm.containsMouse ? "#22ffffff" : "transparent")
+                                       : (tm.containsMouse ? (t.cryptoFieldBgFocus ?? "#22ffffff") : "transparent")
                                 Behavior on color { ColorAnimation { duration: 130 } }
 
                                 Text {
                                     anchors.centerIn: parent
                                     text:             parent.label
-                                    color:            parent.active ? "#ff0c0e12" : (t.cryptoPopupDim ?? t.textDim ?? "#997a8996")
+                                    color:            parent.active ? (t.cryptoTextOnAccent ?? "#ff0c0e12") : (t.cryptoPopupDim ?? t.textDim ?? "#997a8996")
                                     font.pixelSize:   11
                                     font.bold:        parent.active
                                     Behavior on color { ColorAnimation { duration: 130 } }
@@ -412,7 +413,7 @@ ModuleChip {
                             Rectangle {
                                 width:  badge.implicitWidth + 12
                                 height: 22; radius: 11
-                                color:  root.change24h >= 0 ? "#22b4c9a1" : "#22f38ba8"
+                                color:  root.change24h >= 0 ? (t.cryptoUpBg ?? "#22b4c9a1") : (t.cryptoDownBg ?? "#22f38ba8")
 
                                 Text {
                                     id: badge
@@ -495,7 +496,7 @@ ModuleChip {
                                 Rectangle {
                                     anchors.fill: parent
                                     radius:       3
-                                    color:        "#1affffff"
+                                    color:        t.cryptoRangeTrack ?? "#1affffff"
                                 }
 
                                 Rectangle {
@@ -548,7 +549,7 @@ ModuleChip {
                                 id: refreshBtn
                                 width: 26; height: 26; radius: 8
                                 color: rMouse.containsMouse
-                                       ? (rMouse.pressed ? (t.accent ?? "#ffc19375") : "#22ffffff")
+                                       ? (rMouse.pressed ? (t.accent ?? "#ffc19375") : (t.cryptoFieldBgFocus ?? "#22ffffff"))
                                        : "transparent"
                                 Behavior on color { ColorAnimation { duration: 120 } }
 
@@ -608,7 +609,7 @@ ModuleChip {
                                 Layout.fillWidth: true
                                 height:           30
                                 radius:           8
-                                color:            fi.activeFocus ? "#22ffffff" : "#15ffffff"
+                                color:            fi.activeFocus ? (t.cryptoFieldBgFocus ?? "#22ffffff") : (t.cryptoFieldBg ?? "#15ffffff")
                                 border.color:     fi.activeFocus ? (t.accent ?? "#ffc19375") : "transparent"
                                 border.width:     1
                                 Behavior on color        { ColorAnimation { duration: 120 } }
@@ -626,7 +627,7 @@ ModuleChip {
                                     Text {
                                         anchors.fill:      parent
                                         text:              parent.parent.parent.placeholder
-                                        color:             "#55" + (t.textDim ?? "#7a8996").slice(1)
+                                        color:             t.cryptoPlaceholder ?? "#557a8996"
                                         font.pixelSize:    12
                                         font.family:       "monospace"
                                         visible:           fi.text === "" && !fi.activeFocus
@@ -648,20 +649,20 @@ ModuleChip {
 
                             Rectangle {
                                 width: 24; height: 24; radius: 7
-                                color: mm.containsMouse ? (mm.pressed ? (t.accent ?? "#ffc19375") : "#22ffffff") : "#15ffffff"
+                                color: mm.containsMouse ? (mm.pressed ? (t.accent ?? "#ffc19375") : (t.cryptoFieldBgFocus ?? "#22ffffff")) : (t.cryptoFieldBg ?? "#15ffffff")
                                 Behavior on color { ColorAnimation { duration: 100 } }
                                 Text { anchors.centerIn: parent; text: "−"; font.pixelSize: 14; font.bold: true; color: t.cryptoPopupText ?? t.textMain ?? "#ffe8eef2" }
                                 MouseArea { id: mm; anchors.fill: parent; hoverEnabled: true; cursorShape: Qt.PointingHandCursor; onClicked: if (value > minVal) stepped(value - 1) }
                             }
 
                             Rectangle {
-                                width: 54; height: 24; radius: 6; color: "#15ffffff"
+                                width: 54; height: 24; radius: 6; color: t.cryptoFieldBg ?? "#15ffffff"
                                 Text { anchors.centerIn: parent; text: value; color: t.cryptoPopupText ?? t.textMain ?? "#ffe8eef2"; font.pixelSize: 12; font.bold: true; font.family: "monospace" }
                             }
 
                             Rectangle {
                                 width: 24; height: 24; radius: 7
-                                color: pm.containsMouse ? (pm.pressed ? (t.accent ?? "#ffc19375") : "#22ffffff") : "#15ffffff"
+                                color: pm.containsMouse ? (pm.pressed ? (t.accent ?? "#ffc19375") : (t.cryptoFieldBgFocus ?? "#22ffffff")) : (t.cryptoFieldBg ?? "#15ffffff")
                                 Behavior on color { ColorAnimation { duration: 100 } }
                                 Text { anchors.centerIn: parent; text: "+"; font.pixelSize: 14; font.bold: true; color: t.cryptoPopupText ?? t.textMain ?? "#ffe8eef2" }
                                 MouseArea { id: pm; anchors.fill: parent; hoverEnabled: true; cursorShape: Qt.PointingHandCursor; onClicked: if (value < maxVal) stepped(value + 1) }
@@ -678,7 +679,7 @@ ModuleChip {
 
                             Rectangle {
                                 width: 36; height: 20; radius: 10
-                                color: checked ? (t.accent ?? "#ffc19375") : "#22ffffff"
+                                color: checked ? (t.accent ?? "#ffc19375") : (t.cryptoFieldBgFocus ?? "#22ffffff")
                                 Behavior on color { ColorAnimation { duration: 150 } }
 
                                 Rectangle {
@@ -783,7 +784,7 @@ ModuleChip {
                                                         anchors { right: parent.right
                                                                   verticalCenter: parent.verticalCenter }
                                                         width: 14; height: 14; radius: 4
-                                                        color: rmChipMouse.containsMouse ? "#44f38ba8" : "transparent"
+                                                        color: rmChipMouse.containsMouse ? (t.cryptoChipRemoveBg ?? "#44f38ba8") : "transparent"
                                                         Behavior on color { ColorAnimation { duration: 100 } }
                                                         Text {
                                                             anchors.centerIn: parent
@@ -817,7 +818,7 @@ ModuleChip {
                                     Rectangle {
                                         anchors.fill: parent
                                         radius: 2
-                                        color: "#15ffffff"
+                                        color: t.cryptoFieldBg ?? "#15ffffff"
                                     }
 
                                     Rectangle {
@@ -853,7 +854,7 @@ ModuleChip {
                                 Rectangle {
                                     Layout.fillWidth: true
                                     height: 30; radius: 8
-                                    color:        addCoinInput.activeFocus ? "#22ffffff" : "#15ffffff"
+                                    color:        addCoinInput.activeFocus ? (t.cryptoFieldBgFocus ?? "#22ffffff") : (t.cryptoFieldBg ?? "#15ffffff")
                                     border.color: addCoinInput.activeFocus ? (t.accent ?? "#ffc19375") : "transparent"
                                     border.width: 1
                                     Behavior on color        { ColorAnimation { duration: 120 } }
@@ -870,7 +871,7 @@ ModuleChip {
                                         Text {
                                             anchors.fill:      parent
                                             text:              "e.g. bitcoin, monero, solana"
-                                            color:             "#55" + (t.textDim ?? "#7a8996").slice(1)
+                                            color:             t.cryptoPlaceholder ?? "#557a8996"
                                             font.pixelSize:    12; font.family: "monospace"
                                             visible:           parent.text === "" && !parent.activeFocus
                                             verticalAlignment: Text.AlignVCenter
@@ -899,7 +900,7 @@ ModuleChip {
                                     Rectangle {
                                         Layout.fillWidth: true
                                         height: 30; radius: 8
-                                        color:        addCurrencyInput.activeFocus ? "#22ffffff" : "#15ffffff"
+                                        color:        addCurrencyInput.activeFocus ? (t.cryptoFieldBgFocus ?? "#22ffffff") : (t.cryptoFieldBg ?? "#15ffffff")
                                         border.color: addCurrencyInput.activeFocus ? (t.accent ?? "#ffc19375") : "transparent"
                                         border.width: 1
                                         Behavior on color        { ColorAnimation { duration: 120 } }
@@ -916,7 +917,7 @@ ModuleChip {
                                             Text {
                                                 anchors.fill:      parent
                                                 text:              "e.g. usd, eur, brl"
-                                                color:             "#55" + (t.textDim ?? "#7a8996").slice(1)
+                                                color:             t.cryptoPlaceholder ?? "#557a8996"
                                                 font.pixelSize:    12; font.family: "monospace"
                                                 visible:           parent.text === "" && !parent.activeFocus
                                                 verticalAlignment: Text.AlignVCenter
@@ -937,8 +938,8 @@ ModuleChip {
                                     Rectangle {
                                         width: 30; height: 30; radius: 8
                                         color: addPairMouse.containsMouse
-                                               ? (addPairMouse.pressed ? (t.accent ?? "#ffc19375") : "#22ffffff")
-                                               : "#15ffffff"
+                                               ? (addPairMouse.pressed ? (t.accent ?? "#ffc19375") : (t.cryptoFieldBgFocus ?? "#22ffffff"))
+                                               : (t.cryptoFieldBg ?? "#15ffffff")
                                         Behavior on color { ColorAnimation { duration: 100 } }
                                         Text {
                                             anchors.centerIn: parent; text: "+"
@@ -985,8 +986,8 @@ ModuleChip {
                             Rectangle {
                                 width: 24; height: 24; radius: 7
                                 color: decMouse.containsMouse
-                                       ? (decMouse.pressed ? (t.accent ?? "#ffc19375") : "#22ffffff")
-                                       : "#15ffffff"
+                                       ? (decMouse.pressed ? (t.accent ?? "#ffc19375") : (t.cryptoFieldBgFocus ?? "#22ffffff"))
+                                       : (t.cryptoFieldBg ?? "#15ffffff")
                                 Behavior on color { ColorAnimation { duration: 100 } }
                                 Text { anchors.centerIn: parent; text: "−"; font.pixelSize: 14; font.bold: true; color: t.cryptoPopupText ?? t.textMain ?? "#ffe8eef2" }
                                 MouseArea {
@@ -998,7 +999,7 @@ ModuleChip {
 
                             Rectangle {
                                 width: 54; height: 24; radius: 6
-                                color:        refreshInput.activeFocus ? "#22ffffff" : "#15ffffff"
+                                color:        refreshInput.activeFocus ? (t.cryptoFieldBgFocus ?? "#22ffffff") : (t.cryptoFieldBg ?? "#15ffffff")
                                 border.color: refreshInput.activeFocus ? (t.accent ?? "#ffc19375") : "transparent"
                                 border.width: 1
                                 Behavior on color        { ColorAnimation { duration: 120 } }
@@ -1047,8 +1048,8 @@ ModuleChip {
                             Rectangle {
                                 width: 24; height: 24; radius: 7
                                 color: incMouse.containsMouse
-                                       ? (incMouse.pressed ? (t.accent ?? "#ffc19375") : "#22ffffff")
-                                       : "#15ffffff"
+                                       ? (incMouse.pressed ? (t.accent ?? "#ffc19375") : (t.cryptoFieldBgFocus ?? "#22ffffff"))
+                                       : (t.cryptoFieldBg ?? "#15ffffff")
                                 Behavior on color { ColorAnimation { duration: 100 } }
                                 Text { anchors.centerIn: parent; text: "+"; font.pixelSize: 14; font.bold: true; color: t.cryptoPopupText ?? t.textMain ?? "#ffe8eef2" }
                                 MouseArea {
@@ -1081,7 +1082,7 @@ ModuleChip {
                             Text {
                                 anchors.centerIn: parent
                                 text:           "Apply & Refresh"
-                                color:          applyMouse.containsMouse ? "#ff0c0e12" : (t.cryptoPopupText ?? t.textMain ?? "#ffe8eef2")
+                                color:          applyMouse.containsMouse ? (t.cryptoTextOnAccent ?? "#ff0c0e12") : (t.cryptoPopupText ?? t.textMain ?? "#ffe8eef2")
                                 font.pixelSize: 12
                                 font.bold:      true
                                 Behavior on color { ColorAnimation { duration: 130 } }
diff --git a/bar/modules/Network.qml b/bar/modules/Network.qml
index 0b5922b..bd683a9 100644
--- a/bar/modules/Network.qml
+++ b/bar/modules/Network.qml
@@ -163,36 +163,18 @@ ModuleChip {
                 root.wifiDevice.scannerEnabled = true
         }
 
-            Rectangle {
-                id: card
-                width:  parent.width
+            PopupCard {
+                popupOpen: netPopup.popupOpen
+                isTop: root.isTop
+                animEnabled: netPopup.visible
                 height: cardBody.implicitHeight + 24
 
-                anchors.top:    root.isTop ? parent.top    : undefined
-                anchors.bottom: root.isTop ? undefined     : parent.bottom
-
-                transform: Translate {
-                    y: netPopup.popupOpen ? 0 : (root.isTop ? -card.height : card.height)
-                    Behavior on y {
-                        NumberAnimation {
-                            duration:    Cfg.Config.popupAnimDuration
-                            easing.type: Easing.OutExpo
-                        }
-                        enabled: netPopup.visible
-                    }
-                }
-
-                opacity: netPopup.popupOpen ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation { duration: 200 } }
-
                 color:         root.t.netPopupBg
                 radius:        Cfg.Config.popupRadius
                 border.color:  root.t.netPopupBorder
                 border.width:  Cfg.Config.popupBorderWidth
                 layer.enabled: true
 
-                MouseArea { anchors.fill: parent; propagateComposedEvents: false }
-
                 ColumnLayout {
                     id: cardBody
                     anchors {
diff --git a/bar/modules/Notifications.qml b/bar/modules/Notifications.qml
index b9bf64a..aaa6721 100644
--- a/bar/modules/Notifications.qml
+++ b/bar/modules/Notifications.qml
@@ -529,9 +529,8 @@ ModuleChip {
         function open()  { hideTimer.stop(); visible = true; popupOpen = true }
         function close() { popupOpen = false; hideTimer.restart() }
 
-        Timer {
+        PopupHideTimer {
             id: hideTimer
-            interval: Cfg.Config.popupAnimDuration + 70
             onTriggered: historyPopup.visible = false
         }
 
@@ -566,36 +565,18 @@ ModuleChip {
 
             clip: true
 
-            Rectangle {
+            PopupCard {
                 id: historyCard
-                width:  parent.width
+                popupOpen: historyPopup.popupOpen
+                isTop: root.isTop
+                animEnabled: historyPopup.visible
                 height: Math.min(histHeader.implicitHeight + 56 + (notifHistory.count > 0 ? histCol.implicitHeight : 90), 520)
 
-                anchors.top:    root.isTop ? parent.top    : undefined
-                anchors.bottom: root.isTop ? undefined     : parent.bottom
-
-                transform: Translate {
-                    y: historyPopup.popupOpen ? 0 : (root.isTop ? -historyCard.height : historyCard.height)
-
-                    Behavior on y {
-                        NumberAnimation {
-                            duration: Cfg.Config.popupAnimDuration;
-                            easing.type: Easing.OutExpo
-                        }
-                        enabled: historyPopup.visible
-                    }
-                }
-
-                opacity: historyPopup.popupOpen ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation { duration: 200 } }
-
                 color:        t.notifHistoryBg
                 radius:       Cfg.Config.popupRadius
                 border.color: t.notifHistoryBorder
                 border.width: Cfg.Config.popupBorderWidth
 
-                MouseArea { anchors.fill: parent; propagateComposedEvents: false }
-
                 RowLayout {
                     id: histHeader
                     anchors { left: parent.left; right: parent.right; top: parent.top }
diff --git a/bar/modules/Tray.qml b/bar/modules/Tray.qml
index 5db96b0..ae0fbcd 100644
--- a/bar/modules/Tray.qml
+++ b/bar/modules/Tray.qml
@@ -6,6 +6,7 @@ import Quickshell.Services.SystemTray
 import Quickshell.Widgets
 
 import "../../config" as Cfg
+import "../../components"
 
 Item {
     id: root
@@ -217,9 +218,8 @@ Item {
             }
         }
 
-        Timer {
+        PopupHideTimer {
             id: hideTimer
-            interval: Cfg.Config.popupAnimDuration + 70
             onTriggered: {
                 trayMenuPopup.visible = false
                 rootMenuOpener.menu = null
@@ -389,29 +389,13 @@ Item {
             anchors.bottomMargin: root.isTop ? 0 : (Cfg.Config.barHeight + 8)
             height: parent.height - Cfg.Config.barHeight - 8
 
-            Rectangle {
+            PopupCard {
                 id: menuCard
-                width: parent.width
+                popupOpen: trayMenuPopup.popupOpen
+                isTop: root.isTop
+                animEnabled: true
                 height: menuCol.height + 12
 
-
-                anchors.top:    root.isTop ? parent.top    : undefined
-                anchors.bottom: root.isTop ? undefined     : parent.bottom
-
-                transform: Translate {
-                    y: trayMenuPopup.popupOpen ? 0
-                        : (root.isTop ? -menuCard.height : menuCard.height)
-                    Behavior on y {
-                        NumberAnimation {
-                            duration: Cfg.Config.popupAnimDuration
-                            easing.type: Easing.OutExpo
-                        }
-                    }
-                }
-
-                opacity: trayMenuPopup.popupOpen ? 1 : 0
-                Behavior on opacity { NumberAnimation { duration: 200 } }
-
                 color: root.tmBg
                 radius: Cfg.Config.popupRadius
                 border.color: root.tmBorder
diff --git a/bar/modules/Volume.qml b/bar/modules/Volume.qml
index 1904790..bf96574 100644
--- a/bar/modules/Volume.qml
+++ b/bar/modules/Volume.qml
@@ -165,36 +165,17 @@ ModuleChip {
         chipRoot: root
         cardWidth: Cfg.Config.volumePopupWidth
 
-            Rectangle {
-                id: volCard
-                width:  parent.width
+            PopupCard {
+                popupOpen: volumePopup.popupOpen
+                isTop: root.isTop
+                animEnabled: volumePopup.visible
                 height: popupCol.implicitHeight + 32
 
-                anchors.top:    root.isTop ? parent.top    : undefined
-                anchors.bottom: root.isTop ? undefined     : parent.bottom
-
-                transform: Translate {
-                    y: volumePopup.popupOpen ? 0 : (root.isTop ? -volCard.height : volCard.height)
-                    
-                    Behavior on y { 
-                        NumberAnimation { 
-                            duration: Cfg.Config.popupAnimDuration; 
-                            easing.type: Easing.OutExpo 
-                        }
-                        enabled: volumePopup.visible
-                    }
-                }
-
-                opacity: volumePopup.popupOpen ? 1.0 : 0.0
-                Behavior on opacity { NumberAnimation { duration: 200 } }
-
                 radius: Cfg.Config.popupRadius
                 color:  root.t.volPopupBg
                 border.color: root.t.volPopupBorder
                 border.width: Cfg.Config.popupBorderWidth
 
-                MouseArea { anchors.fill: parent; propagateComposedEvents: false }
-
                 ColumnLayout {
                     id: popupCol
                     anchors { left: parent.left; right: parent.right; top: parent.top }
diff --git a/components/PopupCard.qml b/components/PopupCard.qml
new file mode 100644
index 0000000..939295b
--- /dev/null
+++ b/components/PopupCard.qml
@@ -0,0 +1,43 @@
+import QtQuick
+import "../config" as Cfg
+
+Rectangle {
+    id: card
+
+    required property bool popupOpen
+    required property bool isTop
+    property bool animEnabled: true
+
+    width: parent.width
+
+    anchors.top: isTop ? parent.top : undefined
+    anchors.bottom: isTop ? undefined : parent.bottom
+
+    transform: Translate {
+        y: popupOpen ? 0 : (isTop ? -card.height : card.height)
+        Behavior on y {
+            NumberAnimation {
+                duration: Cfg.Config.popupAnimDuration
+                easing.type: Easing.OutExpo
+            }
+            enabled: animEnabled
+        }
+    }
+
+    opacity: popupOpen ? 1.0 : 0.0
+    Behavior on opacity { NumberAnimation { duration: 200 } }
+
+    default property alias _popupCardContent: _content.data
+
+    Item {
+        id: _content
+        anchors.fill: parent
+        z: 2
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        propagateComposedEvents: false
+        z: 1
+    }
+}
diff --git a/components/PopupHideTimer.qml b/components/PopupHideTimer.qml
new file mode 100644
index 0000000..4480e5c
--- /dev/null
+++ b/components/PopupHideTimer.qml
@@ -0,0 +1,7 @@
+import QtQuick
+import "../config" as Cfg
+
+Timer {
+    id: timer
+    interval: Cfg.Config.popupAnimDuration + 70
+}
diff --git a/components/PopupPanel.qml b/components/PopupPanel.qml
index 2113a78..6ef5316 100644
--- a/components/PopupPanel.qml
+++ b/components/PopupPanel.qml
@@ -30,9 +30,8 @@ PanelWindow {
     function close()  { popupOpen = false; hideTimer.restart() }
     function toggle() { popupOpen ? close() : open() }
 
-    Timer {
+    PopupHideTimer {
         id: hideTimer
-        interval: Cfg.Config.popupAnimDuration + 70
         onTriggered: popup.visible = false
     }
 
diff --git a/components/TimezoneProvider.qml b/components/TimezoneProvider.qml
index f0f18d1..b845cee 100644
--- a/components/TimezoneProvider.qml
+++ b/components/TimezoneProvider.qml
@@ -1,3 +1,4 @@
+pragma Singleton
 import QtQuick
 import Quickshell
 import Quickshell.Io
diff --git a/config/config.qml b/config/config.qml
index a76d0ab..dcae508 100644
--- a/config/config.qml
+++ b/config/config.qml
@@ -6,7 +6,7 @@ import "themes"
 QtObject {
     id: root
 
-    readonly property var theme: Tropicalnight
+    readonly property var theme: Goldencity
 
     // ────────────────────────────────────────────────────────────────────────
     // Widgets
@@ -49,7 +49,7 @@ QtObject {
 
     // ── Timezone (IANA name, e.g. "America/New_York", "Europe/London") ──────────
     // Leave empty to use the system timezone.
-    property string timezone: "America/New_York"
+    property string timezone: none
 
     // Date format used in the clock popup and background date widget.
     // "MDY" → month/day/year   (e.g. May 14, 2026)
@@ -76,7 +76,7 @@ QtObject {
     property int volumeSliderHeight: 2
     property int volumeHandleSize:   20
     property int volumePopupWidth:   280
-    property int volumeOutputMax:    100
+    property int volumeOutputMax:    140
     property int volumeInputMax:     200
 
 
diff --git a/config/themes/aero.qml b/config/themes/aero.qml
index 1428760..de2117f 100644
--- a/config/themes/aero.qml
+++ b/config/themes/aero.qml
@@ -39,8 +39,6 @@ QtObject {
     // ── Stats Module (Aurora Tones) ───────────────────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ffb2d8d8"
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#cbdc3d" // Lime green
     readonly property color statsMemColor:    "#4db6ac" // Teal
     readonly property color statsDiskColor:   "#81d4fa" // Sky blue
@@ -139,6 +137,15 @@ QtObject {
     readonly property color trayBorderHover: "#22ffffff"
     readonly property color trayIcon:        textMain
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#22cbdc3d"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher (Fresh Aero) ──────────────────────────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#44cbdc3d"
@@ -226,6 +233,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0b3333"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── BgDate Module ──────────────────────────────────────────────────────────
     readonly property color bgDateText: textMain
     readonly property color bgDateShadow: "#66000000"
diff --git a/config/themes/aurora.qml b/config/themes/aurora.qml
index 71bbffd..1aa07fb 100644
--- a/config/themes/aurora.qml
+++ b/config/themes/aurora.qml
@@ -39,8 +39,6 @@ QtObject {
     // ── Stats Module (Variation: Cosmic Cyan) ──────────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ff82e6ff" 
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#ff00f2ff" 
     readonly property color statsMemColor:    "#ffbc7fff" // Trail violet
     readonly property color statsDiskColor:   "#ff7fbaff" // Sky blue
@@ -139,6 +137,15 @@ QtObject {
     readonly property color trayBorderHover: "#22ffffff"
     readonly property color trayIcon:        textMain
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#2200d9ff"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher (Variation: Starfield Navy) ───────────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#4400d9ff"
@@ -226,6 +233,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff050a14"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── BgDate Module ──────────────────────────────────────────────────────────
     readonly property color bgDateText: textMain
     readonly property color bgDateShadow: "#88000000"
diff --git a/config/themes/beach.qml b/config/themes/beach.qml
index 49789c2..f497c43 100644
--- a/config/themes/beach.qml
+++ b/config/themes/beach.qml
@@ -39,8 +39,6 @@ QtObject {
     // ── Stats Module (Variation: Shoreline Tones) ──────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ffa5b9c4"
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#ffebc6a0" // Sunset gold
     readonly property color statsMemColor:    "#ff8fa3b0" // Ocean mist
     readonly property color statsDiskColor:   "#ffc2d1d9" // Bright sky blue
@@ -139,6 +137,15 @@ QtObject {
     readonly property color trayBorderHover: "#22ffffff"
     readonly property color trayIcon:        textMain
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#22ebc6a0"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher (Variation: Morning Mist) ─────────────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#33ebc6a0"
@@ -226,6 +233,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff1a212e"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── BgDate Module ──────────────────────────────────────────────────────────
     readonly property color bgDateText: textMain
     readonly property color bgDateShadow: "#66000000"
diff --git a/config/themes/colorful.qml b/config/themes/colorful.qml
index ee783fc..460254c 100644
--- a/config/themes/colorful.qml
+++ b/config/themes/colorful.qml
@@ -39,8 +39,6 @@ QtObject {
     // ── Stats Module (Variation: Alpenglow) ────────────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ff8da0c4"
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#fff0a1ba" // Pink
     readonly property color statsMemColor:    "#ffffcc99" // Horizon orange
     readonly property color statsDiskColor:   "#ff8da0c4" // Water blue
@@ -139,6 +137,15 @@ QtObject {
     readonly property color trayBorderHover: "#22ffffff"
     readonly property color trayIcon:        textMain
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#22f0a1ba"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher (Variation: Dusk Gradient) ────────────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#33f0a1ba"
diff --git a/config/themes/cosmic.qml b/config/themes/cosmic.qml
index 8c8fdd4..c05d425 100644
--- a/config/themes/cosmic.qml
+++ b/config/themes/cosmic.qml
@@ -39,8 +39,6 @@ QtObject {
     // ── Stats Module (Variation: Comet Trail) ──────────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ffa2d2ff"
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#ffbdf0ff" 
     readonly property color statsMemColor:    "#ffcfb3ff" // Nebula purple
     readonly property color statsDiskColor:   "#ffffc2e0" // Horizon pink
@@ -139,6 +137,15 @@ QtObject {
     readonly property color trayBorderHover: "#22ffffff"
     readonly property color trayIcon:        textMain
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#22bdf0ff"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher (Variation: Midnight Starfield) ───────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#33bdf0ff"
@@ -226,6 +233,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0d1326"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── BgDate Module ──────────────────────────────────────────────────────────
     readonly property color bgDateText: textMain
     readonly property color bgDateShadow: "#66000000"
diff --git a/config/themes/everforest.qml b/config/themes/everforest.qml
index 3abd462..016fbf3 100644
--- a/config/themes/everforest.qml
+++ b/config/themes/everforest.qml
@@ -39,11 +39,9 @@ QtObject {
     // ── Stats Module ───────────────────────────────────────────────────────────
     readonly property color statsBg:         bgPanel
     readonly property color statsBorder:     border
-    readonly property color statsText:       textMain
-    readonly property color statsRingColor:  "#ff83c092"
-    readonly property color statsCpuColor:   statsRingColor
-    readonly property color statsMemColor:   statsRingColor
-    readonly property color statsDiskColor:  statsRingColor
+    readonly property color statsCpuColor:   "#ff83c092"
+    readonly property color statsMemColor:   "#ff83c092"
+    readonly property color statsDiskColor:  "#ff83c092"
     readonly property color statsTrackColor: "#28ffffff"
 
     // ── Volume Module ──────────────────────────────────────────────────────────
@@ -139,6 +137,15 @@ QtObject {
     readonly property color trayBorderHover: clockBorderHover
     readonly property color trayIcon:        clockIcon
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#224a8c5c"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher ───────────────────────────────────────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#22ffffff"
@@ -226,6 +233,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0e1410"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── BgDate Module ──────────────────────────────────────────────────────────
     readonly property color bgDateText: textMain
     readonly property color bgDateShadow: "#44000000"
diff --git a/config/themes/goldencity.qml b/config/themes/goldencity.qml
index 5cf3598..4413342 100644
--- a/config/themes/goldencity.qml
+++ b/config/themes/goldencity.qml
@@ -40,8 +40,6 @@ QtObject {
     // ── Stats Module (Variation: Skyline Pulse) ───────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ff7a8996"
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#ffc19375" // Horizon gold
     readonly property color statsMemColor:    "#ff89b4fa" // Building window blue
     readonly property color statsDiskColor:   "#ff94e2d5" // Teal office light
@@ -242,6 +240,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0c0e12"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── Polkit Dialog ──────────────────────────────────────────────────────────
     // Overlay
     readonly property color polkitOverlayBg:          "#bb000000"    // dim backdrop behind the card
diff --git a/config/themes/hummingbird.qml b/config/themes/hummingbird.qml
index c67f858..2dc8724 100644
--- a/config/themes/hummingbird.qml
+++ b/config/themes/hummingbird.qml
@@ -40,8 +40,6 @@ QtObject {
     // ── Stats Module (Variation: Canopy Pulse) ───────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ff8bc34a" // Leaf green
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#ffff5722" // Vermilion
     readonly property color statsMemColor:    "#ff8bc34a" // Bright green
     readonly property color statsDiskColor:   "#ff90caf9" // Bokeh sky blue
@@ -238,6 +236,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0d140d"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── Polkit Dialog ──────────────────────────────────────────────────────────
     readonly property color polkitOverlayBg:          "#bb000000"
     readonly property color polkitCardBg:             bgPopup
diff --git a/config/themes/metropolitan.qml b/config/themes/metropolitan.qml
index edc89ef..e4228c8 100644
--- a/config/themes/metropolitan.qml
+++ b/config/themes/metropolitan.qml
@@ -40,8 +40,6 @@ QtObject {
     // ── Stats Module (Variation: Night City Lights) ───────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ff71798a"
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#ffffb86c" // Streetlight gold
     readonly property color statsMemColor:    "#ff9ece6a" // Train stripe green
     readonly property color statsDiskColor:   "#ff7dcfff" // Cyan window light
@@ -140,6 +138,15 @@ QtObject {
     readonly property color trayBorderHover: "#22ffffff"
     readonly property color trayIcon:        textMain
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#22ffb86c"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher (Variation: Neon Horizon) ─────────────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#44ffb86c"
@@ -227,6 +234,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0d1117"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── BgDate Module ──────────────────────────────────────────────────────────
     readonly property color bgDateText: textMain
     readonly property color bgDateShadow: "#aa000000"
diff --git a/config/themes/neonica.qml b/config/themes/neonica.qml
index 1ff3178..ecbe8c9 100644
--- a/config/themes/neonica.qml
+++ b/config/themes/neonica.qml
@@ -39,8 +39,6 @@ QtObject {
     // ── Stats Module (Variation: Cyan/Blue) ────────────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ff9ccfd8" // Soft Cyan text
-    readonly property color statsRingColor:   "#ff31748f" // Deep Blue rings
     readonly property color statsCpuColor:    "#ff9ccfd8" // Light Blue
     readonly property color statsMemColor:    "#ffc4a7e7" // Soft Purple
     readonly property color statsDiskColor:   "#ffebbcba" // Muted Rose
@@ -139,6 +137,15 @@ QtObject {
     readonly property color trayBorderHover: "#44ffffff"
     readonly property color trayIcon:        "#ff9ccfd8" // Cyan icons in tray
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#22ff2e97"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher (Variation: Indigo/Deep Blue) ─────────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#339ccfd8"
@@ -226,6 +233,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0d0b1c"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── BgDate Module ──────────────────────────────────────────────────────────
     readonly property color bgDateText: textMain
     readonly property color bgDateShadow: "#44000000"
diff --git a/config/themes/supreme.qml b/config/themes/supreme.qml
index b25fda9..02d51b1 100644
--- a/config/themes/supreme.qml
+++ b/config/themes/supreme.qml
@@ -39,8 +39,6 @@ QtObject {
     // ── Stats Module (Candy Tones) ─────────────────────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ffefb4c1"
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#ffff7eb9" // Hot pink
     readonly property color statsMemColor:    "#ffee99ff" // Soft purple
     readonly property color statsDiskColor:   "#ff70c5ce" // Cyan pop
@@ -139,6 +137,15 @@ QtObject {
     readonly property color trayBorderHover: "#22ffffff"
     readonly property color trayIcon:        textMain
 
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#22ff7eb9"
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
     // ── Launcher (Pink Mist) ───────────────────────────────────────────────────
     readonly property color launcherBg:               bgPopup
     readonly property color launcherBorder:           "#66ff7eb9"
@@ -226,6 +233,12 @@ QtObject {
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff2d1621"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── BgDate Module ──────────────────────────────────────────────────────────
     readonly property color bgDateText: textMain
     readonly property color bgDateShadow: "#662d1621"
diff --git a/config/themes/tropicalnight.qml b/config/themes/tropicalnight.qml
index 27c5076..a8e0279 100644
--- a/config/themes/tropicalnight.qml
+++ b/config/themes/tropicalnight.qml
@@ -6,7 +6,7 @@ QtObject {
     id: theme
 
     // ── Wallpaper ──────────────────────────────────────────────────────────────
-    readonly property string wallpaper: Quickshell.env("HOME") + "/.config/quickshell/wallpapers/Aaah.png"
+    readonly property string wallpaper: Quickshell.env("HOME") + "/.config/quickshell/wallpapers/tropicalnight.png"
 
     // ── Base Backgrounds ───────────────────────────────────────────────────────
     readonly property color bg:      "#fa161a22" // Deep navy-black from silhouettes
@@ -18,9 +18,10 @@ QtObject {
     readonly property color separator: "#334a5d6e" // Muted sky blue-gray
 
     // ── Text ──────────────────────────────────────────────────────────────────
-    readonly property color textMain:  "#ffe8eef2" // Bright moonlit white
-    readonly property color textDim:   "#ffdfe6ea" // Lighter (closer to white)
-    readonly property color todayText: "#ffffffff"
+    // reduced whiteness — cooler/dimmer grays for primary text
+    readonly property color textMain:  "#ffbfc6c9" // less-white moonlit gray
+    readonly property color textDim:   "#ff92979b" // dimmer gray
+    readonly property color todayText: "#ffccd1d4" // subdued off-white
 
     // ── Accent & Borders ──────────────────────────────────────────────────────
     readonly property color accent:       "#ff89b4fa" // Summer sky blue (Main Accent)
@@ -29,7 +30,7 @@ QtObject {
     readonly property color borderPopup:  "transparent" 
     readonly property color borderToday:  accent
 
-    // ── Logo Module ────────────────────────────────────────────────────────
+    // ── Logo Module ───────────────────────────────────────────────────────
     readonly property color logoBg:           bgPanel
     readonly property color logoBgHover:      "#22ffffff"
     readonly property color logoBorder:       border
@@ -40,8 +41,6 @@ QtObject {
     // ── Stats Module ──────────────────────────────────────────────────────────
     readonly property color statsBg:          bgPanel
     readonly property color statsBorder:      border
-    readonly property color statsText:        "#ffdfe6ea"
-    readonly property color statsRingColor:   accent
     readonly property color statsCpuColor:    "#ff89b4fa" 
     readonly property color statsMemColor:    "#ffb4c9a1" // Soft moonlit green
     readonly property color statsDiskColor:   "#ff94e2d5" 
@@ -87,7 +86,7 @@ QtObject {
     readonly property color batPopupSeparator: separator
     readonly property color batPopupHeader:   accent
     readonly property color batPopupText:     textMain
-    readonly property color batPopupDim:      "#ffdfe6ea"
+    readonly property color batPopupDim:      "#ff92979b"
     readonly property color batProgressTrack: separator
     readonly property color batProfileActiveText: bg
 
@@ -102,7 +101,7 @@ QtObject {
     readonly property color netPopupSeparator:  separator
     readonly property color netPopupHeader:     accent
     readonly property color netPopupText:       textMain
-    readonly property color netPopupDim:        "#ffdfe6ea"
+    readonly property color netPopupDim:        "#ff92979b"
     readonly property color netFieldBg:         "#22ffffff"
     readonly property color netCancelBgHover:   "#22ffffff"
     readonly property color netConnectText:     "#ff0c0e12"
@@ -121,10 +120,10 @@ QtObject {
     readonly property color calSeparator:     separator
     readonly property color clockPopupHeader: accent
     readonly property color clockPopupText:   textMain
-    readonly property color clockPopupDim:    "#ffdfe6ea"
+    readonly property color clockPopupDim:    "#ff92979b"
     readonly property color clockPopupDate:   textMain  
-    readonly property color clockPopupUtc:    "#ffdfe6ea"   
-    readonly property color calArrowIcon:      "#ffdfe6ea"             
+    readonly property color clockPopupUtc:    "#ff92979b"   
+    readonly property color calArrowIcon:      "#ff92979b"             
     readonly property color calArrowIconHover: accent         
     readonly property color calArrowBg:        "transparent"       
     readonly property color calArrowBgHover:   "#2289b4fa"         
@@ -138,7 +137,7 @@ QtObject {
     readonly property color wsHoverBg:      "#334a5d6e"
     readonly property color wsActiveText:   "#ff0c0e12" 
     readonly property color wsInactiveText: textMain
-    readonly property color wsHoverText:    "#ffffffff"
+    readonly property color wsHoverText:    "#ffccd1d4"
 
     // ── Tray Module ────────────────────────────────────────────────────────────
     readonly property color trayBg:          bgPanel
@@ -151,7 +150,7 @@ QtObject {
     readonly property color trayMenuBg:        bgPopup
     readonly property color trayMenuBorder:    borderPopup
     readonly property color trayMenuText:      textMain
-    readonly property color trayMenuDim:       "#ffdfe6ea"
+    readonly property color trayMenuDim:       "#ff92979b"
     readonly property color trayMenuHover:     "#2289b4fa"   
     readonly property color trayMenuCheck:     accent
     readonly property color trayMenuSeparator: separator
@@ -163,11 +162,11 @@ QtObject {
     readonly property color launcherInputBorderFocus: accent
     readonly property color launcherPill:             "#444a5d6e"
     readonly property color launcherText:             textMain
-    readonly property color launcherDim:              "#ffdfe6ea"
+    readonly property color launcherDim:              "#ff92979b"
     readonly property color launcherAccent:           accent
     readonly property color launcherHover:            "#2289b4fa"
     readonly property color launcherSelected:         "#4489b4fa"
-    readonly property color launcherModeActiveText:   "#ffffffff"
+    readonly property color launcherModeActiveText:   "#ffccd1d4"
     readonly property color launcherModeActiveBg:     accent
 
     // ── Status Colors ──────────────────────────────────────────────────────────
@@ -184,7 +183,7 @@ QtObject {
     readonly property color notifIcon:         textMain
     readonly property color notifIconActive:   accent
     readonly property color notifBadgeBg:      statusErr
-    readonly property color notifBadgeText:    "#ffffffff"
+    readonly property color notifBadgeText:    "#ffccd1d4"
     readonly property color notifSeparator:    separator
     readonly property color notifDnd:          separator
 
@@ -193,13 +192,13 @@ QtObject {
     readonly property color notifToastBgHover: "#22ffffff"
     readonly property color notifToastBorder:  borderPopup
     readonly property color notifToastText:    textMain
-    readonly property color notifToastDim:     "#ffdfe6ea"
+    readonly property color notifToastDim:     "#ff92979b"
     readonly property color notifToastAppName: "#ff89b4fa"
 
     // ── Urgency colours ───────────────────────────────────────────────────────
     readonly property color notifUrgencyCritical: statusErr
     readonly property color notifUrgencyNormal:   statusInfo
-    readonly property color notifUrgencyLow:      "#ffdfe6ea"
+    readonly property color notifUrgencyLow:      "#ff92979b"
 
     // ── Progress bar ───────────────────────────────────────────────────────────
     readonly property color notifProgressBg:   "#22ffffff"
@@ -209,7 +208,7 @@ QtObject {
     readonly property color notifHistoryBg:     bgPopup
     readonly property color notifHistoryBorder: borderPopup
     readonly property color notifHistoryHover:  "#1189b4fa"
-    readonly property color notifHistoryEmpty:  "#ffdfe6ea"
+    readonly property color notifHistoryEmpty:  "#ff92979b"
 
     // ── BgDate Module ─────────────────────────────────────────────────────────
     readonly property color bgDateText:        accent       
@@ -222,7 +221,7 @@ QtObject {
     readonly property color cryptoBorder:      border
     readonly property color cryptoBorderHover: accent                
     readonly property color cryptoIcon:        accent                 
-    readonly property color cryptoLabel:       "#ffdfe6ea"               
+    readonly property color cryptoLabel:       "#ff92979b"               
     readonly property color cryptoValue:       textMain              
     readonly property color cryptoUp:          "#ffb4c9a1"           
     readonly property color cryptoDown:        "#fff38ba8"           
@@ -230,13 +229,19 @@ QtObject {
     readonly property color cryptoPopupBorder: borderPopup
     readonly property color cryptoPopupHeader: accent           
     readonly property color cryptoPopupText:   textMain
-    readonly property color cryptoPopupDim:    "#ffdfe6ea"
+    readonly property color cryptoPopupDim:    "#ff92979b"
 
     readonly property color cryptoUpBg:          Qt.rgba(cryptoUp.r, cryptoUp.g, cryptoUp.b, 0.13)
     readonly property color cryptoDownBg:        Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.13)
     readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
     readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
 
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0c0e12"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
     // ── Polkit Dialog ──────────────────────────────────────────────────────────
     readonly property color polkitOverlayBg:          "#bb000000"   
     readonly property color polkitCardBg:             bgPopup    
@@ -245,9 +250,9 @@ QtObject {
     readonly property color polkitIconBorder:         "#4489b4fa"    
     readonly property color polkitIconColor:          accent         
     readonly property color polkitTitle:              textMain   
-    readonly property color polkitMessage:            "#cce8eef2"    
+    readonly property color polkitMessage:            "#c2c8cb"    
     readonly property color polkitPillBg:             "#1a4a5d6e"    
-    readonly property color polkitPillText:           "#ffdfe6ea"    
+    readonly property color polkitPillText:           "#ff92979b"    
     readonly property color polkitDivider:            "#334a5d6e"    
     readonly property color polkitSuppErrBg:          "#1af38ba8"    
     readonly property color polkitSuppErrBorder:      "#44f38ba8"    
@@ -256,11 +261,11 @@ QtObject {
     readonly property color polkitSuppOkBorder:       "#44b4c9a1"    
     readonly property color polkitSuppOkText:         statusOk       
     readonly property color polkitFieldBg:            "#44080a0d"    
-    readonly property color polkitFieldBorder:        "#22ffffff"    
+    readonly property color polkitFieldBorder:        "#22929297"    
     readonly property color polkitFieldBorderFocus:   accent         
-    readonly property color polkitUserLabel:          "#ffdfe6ea"    
+    readonly property color polkitUserLabel:          "#ff92979b"    
     readonly property color polkitUserValue:          accent         
-    readonly property color polkitInputPrompt:        "#88dfe6ea"    
+    readonly property color polkitInputPrompt:        "#8892979b"    
     readonly property color polkitInputText:          textMain       
     readonly property color polkitInputSelection:     "#5589b4fa"    
     readonly property color polkitInputSelectedText:  bg             
@@ -272,5 +277,5 @@ QtObject {
     readonly property color polkitCancelBg:           "#0dffffff" 
     readonly property color polkitCancelBgHover:      "#22ffffff"    
     readonly property color polkitCancelBorder:       "#22ffffff"    
-    readonly property color polkitCancelText:         "#cce8eef2" 
+    readonly property color polkitCancelText:         "#c2c8cb" 
 }
diff --git a/launcher/Launcher.qml b/launcher/Launcher.qml
index 75c5f0d..2291398 100644
--- a/launcher/Launcher.qml
+++ b/launcher/Launcher.qml
@@ -7,6 +7,7 @@ import Quickshell.Io
 import Quickshell.Hyprland
 
 import "../config" as Cfg
+import "../components"
 
 PanelWindow {
     id: root
@@ -154,9 +155,8 @@ PanelWindow {
 
     Item { id: fullMask; anchors.fill: parent }
 
-    Timer {
+    PopupHideTimer {
         id: closeTimer
-        interval: Cfg.Config.popupAnimDuration + 70
         onTriggered: {
             root.visible  = false
             root.mode     = "drun"
@@ -209,9 +209,11 @@ PanelWindow {
 
         clip: true 
 
-        Rectangle {
+        PopupCard {
             id: bubble
-            width: parent.width
+            popupOpen: root._isOpen
+            isTop: root.isTop
+            animEnabled: root.visible
             property int targetHeight: Math.min(layout.implicitHeight + 28, 540)
             height: targetHeight
             Behavior on height {
@@ -219,24 +221,6 @@ PanelWindow {
                 NumberAnimation { duration: 154; easing.type: Easing.OutCubic }
             }
 
-            anchors.top:    root.isTop ? parent.top    : undefined
-            anchors.bottom: root.isTop ? undefined     : parent.bottom
-
-            transform: Translate {
-                y: root._isOpen ? 0 : (root.isTop ? -bubble.height : bubble.height)
-                
-                Behavior on y {
-                    NumberAnimation { 
-                        duration: Cfg.Config.popupAnimDuration; 
-                        easing.type: Easing.OutExpo 
-                    }
-                    enabled: root.visible
-                }
-            }
-
-            opacity: root._isOpen ? 1 : 0
-            Behavior on opacity { NumberAnimation { duration: 200 } }
-
             radius:       Cfg.Config.popupRadius
             color:        t.launcherBg
             border.color: t.launcherBorder
diff --git a/widgets/bgDate/BgDate.qml b/widgets/bgDate/BgDate.qml
index c616972..1a9a20b 100644
--- a/widgets/bgDate/BgDate.qml
+++ b/widgets/bgDate/BgDate.qml
@@ -17,8 +17,6 @@ PanelWindow {
     WlrLayershell.exclusiveZone: -1
     mask: Region {}
 
-    TimezoneProvider { id: timezone }
-
     property string fullDateString: ""
     property int    typedChars:     0
     property string secondsString:  ""
@@ -31,14 +29,14 @@ PanelWindow {
 
     function updateDate(d) {
         let now = d || new Date()
-        fullDateString = timezone.toTz(now).toLocaleDateString(Qt.locale(),
+        fullDateString = TimezoneProvider.toTz(now).toLocaleDateString(Qt.locale(),
             Cfg.Config.dateFormat === "DMY" ? "dddd, d MMMM yyyy" : "dddd, MMMM d, yyyy")
         startTyping()
     }
 
     Component.onCompleted: {
         let d = new Date()
-        secondsString = Qt.formatTime(timezone.toTz(d), "hh:mm:ss")
+        secondsString = Qt.formatTime(TimezoneProvider.toTz(d), "hh:mm:ss")
         updateDate(d)
     }
 
@@ -106,7 +104,7 @@ PanelWindow {
         repeat: true
         onTriggered: {
             let d = new Date()
-            let tzd = timezone.toTz(d)
+            let tzd = TimezoneProvider.toTz(d)
             secondsString = Qt.formatTime(tzd, "hh:mm:ss")
             if (tzd.getHours() === 0 && tzd.getMinutes() === 0 && tzd.getSeconds() === 0)
                 updateDate(d)