From 52eb8dd8525d47535f515bc485b3346161f07924 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 28 Jan 2021 17:16:16 +0100
Subject: [PATCH] fix(StatusButton): fix UI issues with component

StatusButton has a lot of issues when it comes to consistent behaviour
and look & feel. This includes things like calculating incorrect
hover colors as well as not being flexible enough to be used in various
scenarios

This commit changes StatusButton so that it's able to handle outlined
versions of warn buttons, calculates proper colors and more.

Many of these changes introduce heuristics to make things work.
In the long run, we should revisit the different variants that exists
(primary, secondary, outlined, warn etc) to encode them properly
in the API.
---
 ui/imports/Themes/DarkTheme.qml   |  1 +
 ui/imports/Themes/LightTheme.qml  |  1 +
 ui/shared/status/StatusButton.qml | 34 ++++++++++++++++++++++++++-----
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/ui/imports/Themes/DarkTheme.qml b/ui/imports/Themes/DarkTheme.qml
index f240519169..7b9c020f04 100644
--- a/ui/imports/Themes/DarkTheme.qml
+++ b/ui/imports/Themes/DarkTheme.qml
@@ -60,6 +60,7 @@ Theme {
     property color buttonDisabledForegroundColor: buttonSecondaryColor
     property color buttonDisabledBackgroundColor: evenDarkerGrey
     property color buttonWarnBackgroundColor: "#FFEAEE"
+    property color buttonHoveredWarnBackgroundColor: red
     property color buttonHoveredBackgroundColor: blue
 
     property color roundedButtonForegroundColor: white
diff --git a/ui/imports/Themes/LightTheme.qml b/ui/imports/Themes/LightTheme.qml
index 08f3a7b495..aaa3b007c8 100644
--- a/ui/imports/Themes/LightTheme.qml
+++ b/ui/imports/Themes/LightTheme.qml
@@ -59,6 +59,7 @@ Theme {
     property color buttonDisabledForegroundColor: buttonSecondaryColor
     property color buttonDisabledBackgroundColor: grey
     property color buttonWarnBackgroundColor: "#FFEAEE"
+    property color buttonHoveredWarnBackgroundColor: red
     property color buttonHoveredBackgroundColor: blue
 
     property color roundedButtonForegroundColor: buttonForegroundColor
diff --git a/ui/shared/status/StatusButton.qml b/ui/shared/status/StatusButton.qml
index 2227acf480..97505b2251 100644
--- a/ui/shared/status/StatusButton.qml
+++ b/ui/shared/status/StatusButton.qml
@@ -12,14 +12,23 @@ Button {
     property color color: type === "warn" ? Style.current.danger : Style.current.buttonForegroundColor
     property color bgColor: type === "warn" ? Style.current.buttonWarnBackgroundColor : Style.current.buttonBackgroundColor
     property color borderColor: color
-    property color bgHoverColor: bgColor !== Style.current.transparent ? Qt.darker(control.bgColor, 1.1) :
-                                type === "warn" ? Style.current.buttonWarnBackgroundColor : Style.current.buttonBackgroundColor
+    property color hoveredBorderColor
+    property color bgHoverColor: {
+        if (type === "warn") {
+            if (showBorder) {
+                return Style.current.buttonWarnBackgroundColor
+            }
+            return Utils.setColorAlpha(Style.current.buttonHoveredWarnBackgroundColor, 0.2)
+        }
+        return Utils.setColorAlpha(Style.current.buttonHoveredBackgroundColor, 0.2)
+    }
     property bool disableColorOverlay: false
     property bool showBorder: false
     property int iconRotation: 0
 
     id: control
     font.pixelSize: size === "small" ? 13 : 15
+    font.family: Style.current.fontRegular.name
     font.weight: Font.Medium
     implicitHeight: flat ? 32 : (size === "small" ? 38 : 44)
     implicitWidth: buttonLabel.implicitWidth + (flat ? 3* Style.current.halfPadding : 2 * Style.current.padding) +
@@ -69,8 +78,15 @@ Button {
             anchors.right: iconLoader.active ? undefined : parent.right
             anchors.left: iconLoader.active ? iconLoader.right : parent.left
             anchors.leftMargin: iconLoader.active ? Style.current.smallPadding : 0
-            color: !enabled ? Style.current.buttonDisabledForegroundColor : 
-              (type !== "warn" && (hovered || highlighted)) ? Style.current.blue : control.color
+            color: {
+              if (!enabled) {
+                return Style.current.buttonDisabledForegroundColor
+              } else if (type !== "warn" && (hovered || highlighted)) {
+                  return control.color !== Style.current.buttonForegroundColor ?
+                    control.color : Style.current.blue
+              }
+              return control.color
+            }
             visible: !loadingIndicator.active
         }
 
@@ -98,7 +114,15 @@ Button {
         radius: Style.current.radius
         anchors.fill: parent
         border.width: flat || showBorder ? 1 : 0
-        border.color: hovered || showBorder ? control.borderColor : Style.current.transparent
+        border.color: {
+          if (hovered) {
+              return !!control.hoveredBorderColor ? control.hoveredBorderColor : control.borderColor
+          }
+          if (showBorder) {
+              return control.borderColor
+          }
+          return Style.current.transparent
+        }
         color: {
             if (flat) {
                 return "transparent"