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#1159

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
  }