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,57 +32,66 @@ 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")
-        }
-        TextField {
-            id: benutzerName
-            focus: true
-            implicitWidth: 300
-            placeholderText: qsTr("Benutzernamen eingeben")
 
-            onAccepted: {
-                if (benutzerName.text.trim() && passwort.text.trim())
-                    loggedin_user.login(benutzerName.text.trim(), passwort.text);
-                else if (benutzerName.text.trim())
-                    passwort.forceActiveFocus();
+        Field {
+            label: qsTr("Benutzername")
+
+            TextField {
+                id: benutzerName
+
+                focus: true
+                implicitWidth: 300
+                placeholderText: qsTr("Benutzernamen eingeben")
+
+                onAccepted: {
+                    if (benutzerName.text.trim() && passwort.text.trim())
+                        loggedin_user.login(benutzerName.text.trim(), passwort.text);
+                    else if (benutzerName.text.trim())
+                        passwort.forceActiveFocus();
+                }
             }
         }
-        Label {
-            text: qsTr("Passwort")
-        }
-        TextField {
-            id: passwort
-            echoMode: TextInput.Password
-            implicitWidth: 300
-            placeholderText: qsTr("Passwort eingeben")
+        Field {
+            label: qsTr("Passwort")
 
-            onAccepted: {
-                if (benutzerName.text.trim() && passwort.text.trim())
-                    loggedin_user.login(benutzerName.text.trim(), passwort.text);
-                else if (passwort.text.trim())
-                    benutzerName.forceActiveFocus();
+            TextField {
+                id: passwort
+
+                echoMode: TextInput.Password
+                implicitWidth: 300
+                placeholderText: qsTr("Passwort eingeben")
+
+                onAccepted: {
+                    if (benutzerName.text.trim() && passwort.text.trim())
+                        loggedin_user.login(benutzerName.text.trim(), passwort.text);
+                    else if (passwort.text.trim())
+                        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

@@ -2,4 +2,6 @@ module TeroStyle
 singleton Colors Colors.qml
 singleton Dimensions Dimensions.qml
 singleton Typography Typography.qml
-Button Button.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"/>