ui: style fixes

Author: jcelerier

qml/InputSection.qml

@@ -61,7 +61,7 @@ GroupBox {
 
         Button {
             text: "Apply"
-            Layout.preferredWidth: Math.min(80, window.width * 0.1)
+            Layout.preferredWidth: 80
             onClicked: Engine.createInputDevice(parseInt(inputPortField.text))
 
             background: Rectangle {

qml/Main.qml

@@ -13,6 +13,7 @@ ApplicationWindow {
     height: 600
     title: "OSC Spatialization Router"
     color: "#1e1e1e"
+    font: style.fontSans
     property alias skin: style
 
     Settings {
@@ -53,10 +54,12 @@ ApplicationWindow {
     }
 
     menuBar: TopMenu {
+
     }
 
     SplitView {
-        Layout.margins: 10
+        // Layout.margins: 10
+        // padding: 5
         anchors.fill: parent
         orientation: Qt.Vertical
 

qml/OutputSection.qml

@@ -90,7 +90,7 @@ GroupBox {
                 currentIndex: 0
 
                 background: Rectangle {
-                    y: 3
+                    y: 1
                     color: "#3a3a3a"
                     border.color: parent.focus ? "#5a5a5a" : "#4a4a4a"
                     radius: 2

qml/Style.qml

@@ -2,14 +2,16 @@ import QtQml
 import QtQuick
 
 QtObject {
+    readonly property real fontRatio: Qt.platform.os === "osx" ? 96. / 72. : 1.
     // Font sizes - responsive with maximum caps
     // Large: Section titles (bold)
-    readonly property real fontLarge: 10
+    readonly property real fontLarge: 12 * fontRatio
     // Medium: Regular text, labels, buttons, inputs
-    readonly property real fontMedium: 8
+    readonly property real fontMedium: 10 * fontRatio
     // Small: Secondary text, small buttons, checkbox labels
-    readonly property real fontSmall: 8
+    readonly property real fontSmall: 10 * fontRatio
 
     // Font families
-    readonly property string fontMonospace: "Consolas, Monaco, monospace"
+    readonly property string fontSans: "DM Sans"
+    readonly property string fontMonospace: "IBM Plex Mono"
 }

qml/TopMenu.qml

@@ -6,19 +6,24 @@ import QtQuick.Controls
 import Score.UI as UI
 import "./Engine.js" as Engine
 
+ColumnLayout {
+    Item {
+        height: 2
+        width: 1
+    }
 RowLayout {
     property Style style
     spacing: 10
 
     Label {
-        text: "Quick Setup:"
+        text: " Quick Setup:"
         color: "#ffffff"
         verticalAlignment: Text.AlignVCenter
         font.pointSize: skin.fontMedium
     }
 
     Button {
-        Layout.preferredWidth: Math.max(80, Math.min(120, window.width * 0.12))
+        Layout.preferredWidth: 80
         text: "SpatGRIS"
         onClicked: Engine.createOutputDevice("SpatGRIS_1", "127.0.0.1", 18042, "SpatGRIS")
 
@@ -38,7 +43,7 @@ RowLayout {
     }
 
     Button {
-        Layout.preferredWidth: Math.max(80, Math.min(120, window.width * 0.12))
+        Layout.preferredWidth: 80
         text: "ADM-OSC"
         onClicked: Engine.createOutputDevice("ADM_1", "127.0.0.1", 9000, "ADM-OSC")
 
@@ -58,7 +63,7 @@ RowLayout {
     }
 
     Button {
-        Layout.preferredWidth: Math.max(80, Math.min(120, window.width * 0.12))
+        Layout.preferredWidth: 80
         text: "SPAT Rev"
         onClicked: Engine.createOutputDevice("SPAT_1", "127.0.0.1", 8088, "SPAT Revolution")
 
@@ -127,3 +132,4 @@ RowLayout {
         }
     }
 }
+}