Fix up Menu

TeroStyle/BarButton.qml

@@ -10,40 +10,43 @@ T.ToolButton {
     icon.color: Colors.foreground
     icon.height: 36
     icon.width: 36
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding)
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: 90
+    implicitWidth: 100
     topPadding: 20
 
-    background: Rectangle {
-        id: mainrect
-
-        border.color: control.palette.highlight
-        border.width: control.visualFocus ? 2 : 0
-        color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button, control.palette.mid, control.down ? 0.5 : 0.0)
-        implicitHeight: control.height
-        implicitWidth: control.width
-        visible: !control.flat || control.down || control.checked || control.highlighted
-        x: control.left
-        y: control.top
-
-        Rectangle {
-            color: "yellow"
-            implicitHeight: control.height
-            implicitWidth: 6
-            x: mainrect.left
-            y: mainrect.top
-        }
-    }
     contentItem: Column {
+        readonly property color color: control.checked ? Colors.primaryShade : control.hovered ? Colors.primary : Colors.foreground
+
         IconLabel {
-            icon: control.icon
+            icon.color: parent.color
+            icon.source: control.icon.source
+            icon.height: control.icon.height
+            icon.width: control.icon.width
+            color: parent.color
             x: parent.width * .5 - width * .5
         }
         Label {
-            color: Colors.foreground
-            font: Typography.dash
+            font: Typography.small
+            color: parent.color
             text: control.text
             x: parent.width * .5 - width * .5
         }
     }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.top: parent.top
+        color: control.checked ? Colors.primaryShade : Colors.primary
+        implicitWidth: 6
+        visible: control.checked || control.hovered
+    }
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+
+        onPressed: mouse => mouse.accepted = false
+    }
 }

TeroStyle/Colors.qml

@@ -11,9 +11,10 @@ QtObject {
     readonly property color primary: "#b81a34"
     readonly property color primaryContrast: "#fdfdfd"
     readonly property color primaryLighter: Qt.lighter(primary, 1.5)
+    readonly property color primaryShade: theme === dark ? primaryLighter : Qt.darker(primary, 1.5)
     readonly property color foreground: theme === dark ? "#fdfdfd" : "#110b0c"
     readonly property color background: theme === dark ? "#303136" : "#eff1f5"
-    readonly property color mantle: theme === dark ? "#1e1f22" : "#e7e9ef"
+    readonly property color mantle: theme === dark ? "#1E1E23" : "#e7e9ef"
     readonly property color interactive: theme === dark ? "#878b97" : "#d9d9da"
     readonly property color error: theme === dark ? "#ff2264" : "#ff004b"
     readonly property color transparent: "transparent"

TeroStyle/Typography.qml

@@ -3,38 +3,29 @@ pragma Singleton
 import QtCore
 import QtQuick
 
-Item
-{
-    readonly property FontLoader robotoCondensed: FontLoader
-    {
+Item {
+    readonly property font body: ({
+            family: robotoCondensed.font,
+            pointSize: 16,
+            weight: Font.Medium,
+            letterSpacing: 0,
+            kerning: true
+        })
+    readonly property font small: ({
+            family: body.family,
+            pointSize: 11,
+            weight: Font.DemiBold,
+            letterSpacing: body.letterSpacing,
+            kerning: body.kerning
+        })
+    readonly property font h1: ({
+            family: body.family,
+            pointSize: 38,
+            weight: body.weight,
+            letterSpacing: body.letterSpacing,
+            kerning: body.kerning
+        })
+    readonly property FontLoader robotoCondensed: FontLoader {
         source: "qrc:/fonts/RobotoCondensed.otf"
     }
-
-    readonly property font body:
-    ({
-        family: robotoCondensed.font,
-        pointSize: 16,
-        weight: Font.Medium,
-        letterSpacing: 0,
-        kerning: true,
-    })
-
-    readonly property font h1:
-    ({
-        family: body.family,
-        pointSize: 38,
-        weight: body.weight,
-        letterSpacing: body.letterSpacing,
-        kerning: body.kerning,
-    })
-
-    readonly property font dash:
-    ({
-        family: body.family,
-        pointSize: 10,
-        weight: body.weight,
-        letterSpacing: body.letterSpacing,
-        kerning: body.kerning,
-    })
-
 }