Style Buttons, re-layout Login

TeroStyle/Button.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Templates as T
+
+T.Button {
+    id: control
+
+    implicitHeight: implicitContentHeight
+    implicitWidth: contentItem.width
+
+    background: Rectangle {
+        color: Colors.primary
+        radius: Dimensions.radius
+    }
+    contentItem: Text {
+        color: Colors.foreground
+        font: control.font
+        padding: Dimensions.s + 2
+        text: control.text
+        // Make sure the button is at least wide enough to be comfortably clickable
+        width: Math.max(implicitWidth, 120)
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onPressed: (mouse) => mouse.accepted = false
+    }
+}

TeroStyle/Colors.qml

@@ -0,0 +1,17 @@
+pragma Singleton
+
+import QtQuick
+
+QtObject {
+    readonly property int dark: 0
+    readonly property int light: 1
+
+    property int theme: dark
+
+    readonly property color primary: "#b81a34"
+    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 interactive: theme === dark ? "#878b97" : "#d9d9da"
+    readonly property color error: theme === dark ? "#ff2264" : "#ff004b"
+}

TeroStyle/Dimensions.qml

@@ -0,0 +1,11 @@
+pragma Singleton
+
+import QtQuick
+
+QtObject {
+    readonly property int s: 9
+    readonly property int m: 15
+    readonly property int l: 30
+
+    readonly property int radius: 4
+}

TeroStyle/Typography.qml

@@ -0,0 +1,33 @@
+pragma Singleton
+
+import QtCore
+import QtQuick
+
+Item {
+    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
+
+    })
+    //
+    // readonly property font h2: ({
+    //     family: regular.font,
+    //     pointSize: 38,
+    //     weight: Font.Normal
+    // })
+
+}

TeroStyle/qmldir

@@ -0,0 +1,5 @@
+module TeroStyle
+singleton Colors Colors.qml
+singleton Dimensions Dimensions.qml
+singleton Typography Typography.qml
+Button Button.qml