Style Login page

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

Gui/LoginScreen.qml

@@ -21,6 +21,7 @@ Item {
     }
 
     anchors.fill: parent
+    anchors.topMargin: Dimensions.l
 
     Component.onCompleted: {
         loggedin_user.loginOkay.connect(loggedin);
@@ -31,17 +32,22 @@ Item {
     }
 
     ColumnLayout {
-        anchors.fill: parent
         spacing: Dimensions.m
+        anchors.centerIn: parent
+
         Label {
             font: Typography.h1
             text: qsTr("Login")
+            Layout.alignment: Qt.AlignHCenter
+            Layout.bottomMargin: Dimensions.l
         }
-        Label {
-            text: qsTr("Benutzername")
-        }
+
+        Field {
+            label: qsTr("Benutzername")
+
             TextField {
                 id: benutzerName
+
                 focus: true
                 implicitWidth: 300
                 placeholderText: qsTr("Benutzernamen eingeben")
@@ -53,11 +59,13 @@ Item {
                         passwort.forceActiveFocus();
                 }
             }
-        Label {
-            text: qsTr("Passwort")
         }
+        Field {
+            label: qsTr("Passwort")
+
             TextField {
                 id: passwort
+
                 echoMode: TextInput.Password
                 implicitWidth: 300
                 placeholderText: qsTr("Passwort eingeben")
@@ -69,19 +77,21 @@ Item {
                         benutzerName.forceActiveFocus();
                 }
             }
+        }
+
         Button {
-            text: qsTr("Primary")
+            Layout.topMargin: Dimensions.m
+            text: qsTr("Login")
+            width: parent.width
 
             onClicked: {
                 if (benutzerName.text.trim() && passwort.text.trim())
                     loggedin_user.login(benutzerName.text.trim(), passwort.text);
             }
         }
-
         Item {
             Layout.fillHeight: true
         }
-
         Dialog {
             id: recoveryPaswordDialog
 

TeroStyle/Dimensions.qml

@@ -3,8 +3,22 @@ pragma Singleton
 import QtQuick
 
 QtObject {
+    /**
+     * Distance for objects that are tied to each other,
+     * e.g. a field and its label.
+     */
     readonly property int s: 9
+
+    /**
+     * Distance for objects that are grouped together, e.g. radio buttons of the
+     * same radio group.
+     */
     readonly property int m: 15
+
+    /**
+     * Distance for objects that are not related to each other, or to objects
+     * and their container.
+     */
     readonly property int l: 30
 
     readonly property int radius: 4

TeroStyle/Field.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ColumnLayout {
+    required property string label
+    spacing: Dimensions.s
+
+    Label {
+        text: label
+        font: Typography.body
+    }
+}

TeroStyle/TextField.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import QtQuick.Templates as T
+
+T.TextField {
+    background: Rectangle {
+        id: background
+        color: Colors.mantle
+        radius: Dimensions.radius
+        border.width: 1
+        border.color: Colors.interactive
+        height: 47
+    }
+
+    color: Colors.foreground
+    implicitHeight: background.height
+    placeholderTextColor: Colors.interactive
+    font: Typography.body
+    padding: Dimensions.m
+}

TeroStyle/qmldir

@@ -3,3 +3,5 @@ singleton Colors Colors.qml
 singleton Dimensions Dimensions.qml
 singleton Typography Typography.qml
 Button Button.qml
+Field Field.qml
+TextField TextField.qml

qml.qrc

@@ -51,8 +51,10 @@
         <file>Gui/OfferTable.qml</file>
         <file>TeroStyle/Button.qml</file>
         <file>TeroStyle/Colors.qml</file>
+        <file>TeroStyle/Field.qml</file>
         <file>TeroStyle/Dimensions.qml</file>
         <file>TeroStyle/qmldir</file>
+        <file>TeroStyle/TextField.qml</file>
         <file>TeroStyle/Typography.qml</file>
     </qresource>
     <qresource prefix="/TeroStyle"/>