diff --git a/resources/qml/Reactions.qml b/resources/qml/Reactions.qml
index aaf32647..aae42cb1 100644
--- a/resources/qml/Reactions.qml
+++ b/resources/qml/Reactions.qml
@@ -12,10 +12,9 @@ import im.nheko 1.0
Flow {
id: reactionFlow
- // highlight colors for selfReactedEvent background
- property real highlightHue: Nheko.colors.highlight.hslHue
- property real highlightSat: Nheko.colors.highlight.hslSaturation
- property real highlightLight: Nheko.colors.highlight.hslLightness
+ // lower-contrast colors to avoid distracting from text & to enhance hover effect
+ property color gentleHighlight: Qt.hsla(Nheko.colors.highlight.hslHue, Nheko.colors.highlight.hslSaturation, Nheko.colors.highlight.hslLightness, 0.8)
+ property color gentleText: Qt.hsla(Nheko.colors.text.hslHue, Nheko.colors.text.hslSaturation, Nheko.colors.text.hslLightness, 0.6)
property string eventId
property alias reactions: repeater.model
@@ -74,7 +73,7 @@ Flow {
return textMetrics.elidedText;
}
font.family: Settings.emojiFont
- color: reaction.hovered ? Nheko.colors.highlight : Nheko.colors.text
+ color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlightedText: Nheko.colors.text
maximumLineCount: 1
}
@@ -83,7 +82,7 @@ Flow {
height: Math.floor(reactionCounter.implicitHeight * 1.4)
width: 1
- color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlight : Nheko.colors.text
+ color: reaction.hovered ? Nheko.colors.text: gentleText
}
Text {
@@ -92,7 +91,7 @@ Flow {
anchors.verticalCenter: divider.verticalCenter
text: modelData.count
font: reaction.font
- color: reaction.hovered ? Nheko.colors.highlight : Nheko.colors.text
+ color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlightedText: Nheko.colors.windowText
}
}
@@ -101,8 +100,8 @@ Flow {
anchors.centerIn: parent
implicitWidth: reaction.implicitWidth
implicitHeight: reaction.implicitHeight
- border.color: (reaction.hovered || modelData.selfReactedEvent !== '') ? Nheko.colors.highlight : Nheko.colors.text
- color: modelData.selfReactedEvent !== '' ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : Nheko.colors.window
+ border.color: reaction.hovered ? Nheko.colors.text: gentleText
+ color: reaction.hovered ? Nheko.colors.highlight : (modelData.selfReactedEvent !== '' ? gentleHighlight : Nheko.colors.window)
border.width: 1
radius: reaction.height / 2
}
|
