bar: scroll hint: adjust color and anim curve

.config/quickshell/modules/bar/Bar.qml

@@ -108,9 +108,11 @@ Scope {
                         ScrollHint {
                             reveal: barLeftSideMouseArea.hovered
                             icon: "light_mode"
+                            tooltipText: "Scroll to change brightness"
                             side: "left"
                             anchors.left: parent.left
                             anchors.verticalCenter: parent.verticalCenter
+                            
                         }
                         
                         RowLayout { // Content
@@ -281,6 +283,7 @@ Scope {
                         ScrollHint {
                             reveal: barRightSideMouseArea.hovered
                             icon: "volume_up"
+                            tooltipText: "Scroll to change volume"
                             side: "right"
                             anchors.right: parent.right
                             anchors.verticalCenter: parent.verticalCenter

.config/quickshell/modules/bar/ScrollHint.qml

@@ -9,31 +9,50 @@ Revealer { // Scroll hint
     id: root
     property string icon
     property string side: "left"
+    property string tooltipText: ""
     
-    ColumnLayout {
+    MouseArea {
         anchors.right: root.side === "left" ? parent.right : undefined
         anchors.left: root.side === "right" ? parent.left : undefined
-        spacing: -5
-        MaterialSymbol {
-            Layout.leftMargin: 5
-            Layout.rightMargin: 5
-            text: "keyboard_arrow_up"
-            iconSize: 14
-            color: Appearance.colors.colOnLayer0
-        }
-        MaterialSymbol {
-            Layout.leftMargin: 5
-            Layout.rightMargin: 5
-            text: root.icon
-            iconSize: 14
-            color: Appearance.colors.colOnLayer0
-        }
-        MaterialSymbol {
-            Layout.leftMargin: 5
-            Layout.rightMargin: 5
-            text: "keyboard_arrow_down"
-            iconSize: 14
-            color: Appearance.colors.colOnLayer0
+        implicitWidth: contentColumnLayout.implicitWidth
+        implicitHeight: contentColumnLayout.implicitHeight
+        property bool hovered: false
+
+        hoverEnabled: true
+        onEntered: hovered = true
+        onExited: hovered = false
+        acceptedButtons: Qt.NoButton
+
+        // StyledToolTip {
+        //     extraVisibleCondition: tooltipText.length > 0
+        //     content: tooltipText
+        // }
+
+        ColumnLayout {
+            id: contentColumnLayout
+            anchors.centerIn: parent
+            spacing: -5
+            MaterialSymbol {
+                Layout.leftMargin: 5
+                Layout.rightMargin: 5
+                text: "keyboard_arrow_up"
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
+            MaterialSymbol {
+                Layout.leftMargin: 5
+                Layout.rightMargin: 5
+                text: root.icon
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
+            MaterialSymbol {
+                Layout.leftMargin: 5
+                Layout.rightMargin: 5
+                text: "keyboard_arrow_down"
+                iconSize: 14
+                color: Appearance.colors.colSubtext
+            }
         }
     }
 }

.config/quickshell/modules/common/widgets/Revealer.qml

@@ -17,17 +17,17 @@ Item {
     Behavior on implicitWidth {
         enabled: !vertical
         NumberAnimation {
-            duration: Appearance.animation.elementMoveFast.duration
-            easing.type: Appearance.animation.elementMoveFast.type
-            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+            duration: Appearance.animation.elementMoveEnter.duration
+            easing.type: Appearance.animation.elementMoveEnter.type
+            easing.bezierCurve: Appearance.animation.elementMoveEnter.bezierCurve
         }
     }
     Behavior on implicitHeight {
         enabled: vertical
         NumberAnimation {
-            duration: Appearance.animation.elementMoveFast.duration
-            easing.type: Appearance.animation.elementMoveFast.type
-            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+            duration: Appearance.animation.elementMoveEnter.duration
+            easing.type: Appearance.animation.elementMoveEnter.type
+            easing.bezierCurve: Appearance.animation.elementMoveEnter.bezierCurve
         }
     }
 }