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
+        implicitWidth: contentColumnLayout.implicitWidth
-        MaterialSymbol {
+        implicitHeight: contentColumnLayout.implicitHeight
-            Layout.leftMargin: 5
+        property bool hovered: false
-            Layout.rightMargin: 5
+
-            text: "keyboard_arrow_up"
+        hoverEnabled: true
-            iconSize: 14
+        onEntered: hovered = true
-            color: Appearance.colors.colOnLayer0
+        onExited: hovered = false
-        }
+        acceptedButtons: Qt.NoButton
-        MaterialSymbol {
+
-            Layout.leftMargin: 5
+        // StyledToolTip {
-            Layout.rightMargin: 5
+        //     extraVisibleCondition: tooltipText.length > 0
-            text: root.icon
+        //     content: tooltipText
-            iconSize: 14
+        // }
-            color: Appearance.colors.colOnLayer0
+
-        }
+        ColumnLayout {
-        MaterialSymbol {
+            id: contentColumnLayout
-            Layout.leftMargin: 5
+            anchors.centerIn: parent
-            Layout.rightMargin: 5
+            spacing: -5
-            text: "keyboard_arrow_down"
+            MaterialSymbol {
-            iconSize: 14
+                Layout.leftMargin: 5
-            color: Appearance.colors.colOnLayer0
+                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
+            duration: Appearance.animation.elementMoveEnter.duration
-            easing.type: Appearance.animation.elementMoveFast.type
+            easing.type: Appearance.animation.elementMoveEnter.type
-            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+            easing.bezierCurve: Appearance.animation.elementMoveEnter.bezierCurve
         }
     }
     Behavior on implicitHeight {
         enabled: vertical
         NumberAnimation {
-            duration: Appearance.animation.elementMoveFast.duration
+            duration: Appearance.animation.elementMoveEnter.duration
-            easing.type: Appearance.animation.elementMoveFast.type
+            easing.type: Appearance.animation.elementMoveEnter.type
-            easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+            easing.bezierCurve: Appearance.animation.elementMoveEnter.bezierCurve
         }
     }
 }