Reactions: avoid highlight color misuse, subdue border color

This addresses a few problems with reaction colors:

- The state-checking conditionals for reaction text, background, and border
  were inconsistent, making it difficult to choose colors for each state
  (normal, hovered, and self reactions) that worked well in all themes.
- The QPalette::Highlight color was being misused as a text/foreground color.
  This color role is intended for background areas.  It has little contrast
  against the background in themes like KDE Plasma's Breeze High Contrast,
  so using it for text and icons makes those things difficult to read.
  https://doc.qt.io/qt-5/qpalette.html#ColorRole-enum
- The reaction border was drawn in the same color as normal text, making it
  so bright in some dark themes that it distracted from reading nearby text.

Fixes Nheko-Reborn/nheko#1159

1 files changed, 8 insertions, 9 deletions

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
             }