Merge pull request #1160 from foresto/reaction-colors

Reactions: avoid highlight color misuse, subdue bright border color

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
             }