feat: introduce new StatusContextMenuButton component

We've been implementing such a button in various ways throughout the
application. Sometimes using SVG icons and rectangles, sometimes highjacking
`StyledText` components (which was clever though).

Obviously this resulted in inconsistencies, so this commit introduces
a new dedicated component to render the three-dots button for context menus.

ui/imports/Themes/DarkTheme.qml

@@ -10,6 +10,7 @@ Theme {
     property color almostBlack: "#141414"
     property color grey: "#EEF2F5"
     property color lightGrey: "#7A7A7A"
+    property color midGrey: "#7f8990"
     property color darkGrey: "#373737"
     property color evenDarkerGrey: "#4b4b4b"
     property color lightBlue: "#ECEFFC"
@@ -72,6 +73,9 @@ Theme {
     property color buttonHoveredWarnBackgroundColor: red
     property color buttonHoveredBackgroundColor: blue
 
+    property color contextMenuButtonForegroundColor: midGrey
+    property color contextMenuButtonBackgroundHoverColor: Qt.hsla(black.hslHue, black.hslSaturation, black.hslLightness, 0.1)
+
     property color roundedButtonForegroundColor: white
     property color roundedButtonBackgroundColor: secondaryBackground
     property color roundedButtonSecondaryForegroundColor: black

ui/imports/Themes/LightTheme.qml

@@ -8,6 +8,7 @@ Theme {
     property color white2: "#FCFCFC"
     property color black: "#000000"
     property color grey: "#EEF2F5"
+    property color midGrey: "#7f8990"
     property color lightGrey: "#ccd0d4"
     property color lightBlue: "#ECEFFC"
     property color cyan: "#00FFFF"
@@ -71,6 +72,9 @@ Theme {
     property color buttonHoveredWarnBackgroundColor: red
     property color buttonHoveredBackgroundColor: blue
 
+    property color contextMenuButtonForegroundColor: black
+    property color contextMenuButtonBackgroundHoverColor: Qt.hsla(black.hslHue, black.hslSaturation, black.hslLightness, 0.1)
+
     property color roundedButtonForegroundColor: buttonForegroundColor
     property color roundedButtonBackgroundColor: secondaryBackground
     property color roundedButtonSecondaryForegroundColor: white

ui/shared/status/StatusContextMenuButton.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQml 2.14
+import QtGraphicalEffects 1.13
+import "../../imports"
+import "../../shared"
+
+RoundButton {
+    id: control
+    implicitWidth: 32
+    implicitHeight: 32
+    contentItem: Item {
+        anchors.fill: parent
+
+        SVGImage {
+            id: iconImg
+            source: "/../../app/img/dots-icon.svg"
+            width: 18
+            height: 4
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            fillMode: Image.PreserveAspectFit
+        }
+
+        ColorOverlay {
+            id: iconColorOverlay
+            anchors.fill: iconImg
+            source: iconImg
+            color: Style.current.contextMenuButtonForegroundColor
+            antialiasing: true
+        }
+    }
+    background: Rectangle {
+        radius: Style.current.radius
+        color: hovered ? Style.current.contextMenuButtonBackgroundHoverColor : Style.current.transparent
+    }
+
+    MouseArea {
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: parent
+        onPressed: mouse.accepted = false
+    }
+}