From 7f5675c06d72728a2249b66dc18d56221ad5a0c97791edbc86afeb57dcb3392d Mon Sep 17 00:00:00 2001
From: Yuri Becker <hi@yuri.li>
Date: Mon, 24 Mar 2025 12:06:09 +0100
Subject: [PATCH] Add Hover Effect to Buttons

---
 TeroStyle/Button.qml      | 2 +-
 TeroStyle/Colors.qml      | 7 ++++---
 TeroStyle/QuickFilter.qml | 6 +++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/TeroStyle/Button.qml b/TeroStyle/Button.qml
index c96c7cf..2810636 100644
--- a/TeroStyle/Button.qml
+++ b/TeroStyle/Button.qml
@@ -43,7 +43,7 @@ T.Button {
         border.color: Colors.interactive
         border.width: isFieldButton ? 1 : 0
         bottomLeftRadius: topLeftRadius
-        color: Colors.primary
+        color: !control.hovered ? Colors.primary : Colors.primaryLighter
         radius: Dimensions.radius
         topLeftRadius: isFieldButton ? 0 : radius
     }
diff --git a/TeroStyle/Colors.qml b/TeroStyle/Colors.qml
index 3706c3c..bcc1df6 100644
--- a/TeroStyle/Colors.qml
+++ b/TeroStyle/Colors.qml
@@ -8,9 +8,10 @@ QtObject {
 
     property int theme: Application.styleHints.colorScheme === Qt.ColorScheme.Light ? light : dark
 
-    property color primary: "#b81a34"
-    property color primaryContrast: "#fdfdfd"
-    property color foreground: theme === dark ? "#fdfdfd" : "#110b0c"
+    readonly property color primary: "#b81a34"
+    readonly property color primaryContrast: "#fdfdfd"
+    readonly property color primaryLighter: Qt.lighter(primary, 1.5)
+    readonly property color foreground: theme === dark ? "#fdfdfd" : "#110b0c"
     readonly property color background: theme === dark ? "#303136" : "#eff1f5"
     readonly property color mantle: theme === dark ? "#1e1f22" : "#e7e9ef"
     readonly property color interactive: theme === dark ? "#878b97" : "#d9d9da"
diff --git a/TeroStyle/QuickFilter.qml b/TeroStyle/QuickFilter.qml
index e7b1113..05745f4 100644
--- a/TeroStyle/QuickFilter.qml
+++ b/TeroStyle/QuickFilter.qml
@@ -19,6 +19,7 @@ RowLayout {
 
             required property int index
             required property var modelData
+            property bool hovered: false
             property real padding: Dimensions.m
 
             height: text.height + padding * 2
@@ -28,7 +29,7 @@ RowLayout {
                 anchors.fill: parent
                 border.color: modelData.selected ? Colors.transparent : Colors.foreground
                 border.width: 2
-                color: modelData.selected ? Colors.primary : Colors.transparent
+                color: modelData.selected || mouseArea.containsMouse ? Colors.primary : Colors.transparent
                 radius: parent.height
             }
             Text {
@@ -41,6 +42,9 @@ RowLayout {
                 y: parent.padding
             }
             MouseArea {
+                id: mouseArea
+
+                hoverEnabled: true
                 anchors.fill: parent
                 cursorShape: Qt.PointingHandCursor