All forms and icons are moved here

14 files changed, 702 insertions, 17 deletions

diff --git a/features/CreateProfileForm.ui.qml b/features/CreateProfileForm.ui.qml
new file mode 100644
index 0000000..6192a99
--- /dev/null
+++ b/features/CreateProfileForm.ui.qml
@@ -0,0 +1,210 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+
+Rectangle {
+    id: rectangle
+    color: "#fff"
+
+    property alias backButton: backButton
+    property alias titleLabel: titleLabel
+    property alias skipButton: skipButton
+    property alias enterFullName: enterFullName
+    property alias userNameLabel: userNameLabel
+    property alias emailAddressLabel: emailAddressLabel
+    property alias startUsingKelakon: startUsingKelakon
+
+    ToolBar {
+        id: toolbar
+        height: 56
+        font.family: "Google Sans"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#fff"
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
+            }
+            Label {
+                id: titleLabel
+                text: qsTr("Create Profile")
+                font.weight: Font.Medium
+                wrapMode: Text.WordWrap
+                color: "#000"
+                font.family: "Google Sans"
+                font.pointSize: 20
+                elide: Label.ElideRight
+                horizontalAlignment: Qt.AlignHCenter
+                verticalAlignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+            }
+            ToolButton {
+                id: skipButton
+                text: qsTr("Skip")
+                font.weight: Font.Medium
+                display: AbstractButton.TextOnly
+                font.family: "Google Sans"
+                font.pointSize: 14
+                font.capitalization: Font.MixedCase
+                highlighted: true
+            }
+        }
+    }
+    RowLayout {
+        id: userEmail
+        height: 56
+        anchors.topMargin: 16
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: usernameRowLayout.bottom
+        width: parent.width
+        spacing: 8
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/email-24px.svg"
+            antialiasing: true
+        }
+
+        Label {
+            id: emailAddressLabel
+            Layout.fillWidth: true
+            text: qsTr("Your@email.com")
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            verticalAlignment: Text.AlignVCenter
+            font.family: "Google Sans"
+            font.pointSize: 16
+            color: "#99000000"
+        }
+    }
+    RowLayout {
+        id: fullnameRowLayout
+        height: 56
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: profilePicture.bottom
+        anchors.topMargin: 32
+        width: parent.width
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/profile-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: enterFullName
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            font.pointSize: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Full name")
+            Layout.alignment: Qt.AlignVCenter
+        }
+    }
+    RowLayout {
+        id: usernameRowLayout
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        height: 56
+        Layout.alignment: Qt.AlignVCenter
+        anchors.top: fullnameRowLayout.bottom
+        anchors.topMargin: 16
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/user-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: userNameLabel
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            font.pointSize: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Username")
+        }
+    }
+
+    RoundButton {
+        id: startUsingKelakon
+        x: 34
+        y: 278
+        text: qsTr("Start using kelakon")
+        font.family: "Google Sans"
+        font.capitalization: Font.MixedCase
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        highlighted: true
+        Material.background: Material.primary
+    }
+
+    Rectangle {
+        id: profilePicture
+        width: 80
+        height: 80
+        color: "#f0e6fc"
+        radius: 100
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: toolbar.bottom
+        anchors.topMargin: 32
+
+        RoundButton {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            flat: true
+            display: AbstractButton.IconOnly
+            icon.name: "camera-icon"
+            icon.source: "/components/icons/photo_camera_24px.svg"
+            icon.color: "#6D22E9"
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640}
+}
+##^##*/
+
diff --git a/features/EmailForm.ui.qml b/features/EmailForm.ui.qml
new file mode 100644
index 0000000..610d461
--- /dev/null
+++ b/features/EmailForm.ui.qml
@@ -0,0 +1,123 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+
+Rectangle {
+    id: rectangle
+    color: "#fff"
+    border.width: 0
+
+    property alias backButton: backButton
+    property alias instructionLabel: instructionLabel
+    property alias emailTextField: emailTextField
+    property alias loginButton: loginButton
+
+    ToolBar {
+        id: toolbar
+        height: 56
+        font.family: "Google Sans"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
+            }
+        }
+    }
+
+    Label {
+        id: instructionLabel
+        x: 16
+        y: 398
+        color: "#2b2626"
+        text: qsTr("Sign up")
+        font.letterSpacing: 0.25
+        lineHeight: 1
+        font.weight: Font.Bold
+        wrapMode: Text.WordWrap
+        anchors.bottom: emailLayout.top
+        anchors.bottomMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+
+        font.family: "Google Sans"
+        font.pointSize: 34
+    }
+
+    RowLayout {
+        id: emailLayout
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.bottom: loginButton.top
+        anchors.bottomMargin: 16
+        width: parent.width
+        height: 56
+        spacing: 8
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/email-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: emailTextField
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.pointSize: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Email")
+        }
+    }
+
+    RoundButton {
+        id: loginButton
+        text: qsTr("Next")
+        enabled: false
+        font.family: "Google Sans"
+        font.capitalization: Font.MixedCase
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        highlighted: true
+        Material.background: Material.primary
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
+
diff --git a/features/ExistingLoginForm.ui.qml b/features/ExistingLoginForm.ui.qml
new file mode 100644
index 0000000..3785fea
--- /dev/null
+++ b/features/ExistingLoginForm.ui.qml
@@ -0,0 +1,128 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+
+Rectangle {
+    id: rectangle
+    color: "#fff"
+    border.width: 0
+
+    property alias backButton: backButton
+    property alias passTextField: passTextField
+    property alias createPassButton: loginButton
+
+    ToolBar {
+        id: toolbar
+        height: 56
+        font.family: "Google Sans"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
+            }
+        }
+    }
+
+    Label {
+        x: 16
+        y: 232
+        color: "#2b2626"
+        text: qsTr("Welcome Back!")
+        anchors.bottom: userEmail.top
+        anchors.bottomMargin: 16
+        font.letterSpacing: 0.25
+        lineHeight: 1
+        font.weight: Font.Bold
+        wrapMode: Text.WordWrap
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+
+        font.family: "Google Sans"
+        font.pointSize: 34
+    }
+
+    Rectangle {
+        id: userEmail
+        y: 299
+        height: 48
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.bottom: passTextField.top
+        anchors.bottomMargin: 16
+
+        Label {
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+
+            text: qsTr("your@email.com")
+            font.family: "Google Sans"
+            font.pointSize: 16
+            color: "#99000000"
+        }
+    }
+
+    TextField {
+        id: passTextField
+        y: 362
+        font.pointSize: 16
+        anchors.bottom: loginButton.top
+        anchors.bottomMargin: 16
+        font.family: "Google Sans"
+        Layout.fillWidth: true
+        placeholderText: qsTr("Password")
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        Layout.maximumHeight: 56
+        echoMode: TextInput.Password
+    }
+
+    RoundButton {
+        id: loginButton
+        x: 34
+        y: 278
+        text: qsTr("Login")
+        font.family: "Google Sans"
+        font.capitalization: Font.MixedCase
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        highlighted: true
+        Material.background: Material.primary
+    }
+}
+
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/
diff --git a/features/HomeForm.ui.qml b/features/HomeForm.ui.qml
index c44aac5..299cf77 100644
--- a/features/HomeForm.ui.qml
+++ b/features/HomeForm.ui.qml
@@ -5,7 +5,6 @@ import QtQuick.Layouts 1.12
 
 Page {
     property alias menuButton: menuButton
-    property alias titleLabel: titleLabel
     property alias profileButton: profileButton
     property alias contentView: contentView
 
@@ -19,10 +18,11 @@ Page {
             ToolButton {
                 id: menuButton
                 icon.name: "menu-button"
+		icon.source: "/components/icons/menu-24px.svg"
                 highlighted: true
             }
             Label {
-                id: titleLabel
+                text: contentView.currentItem.title
                 Layout.leftMargin: 16
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignLeft
@@ -36,6 +36,7 @@ Page {
             ToolButton {
                 id: profileButton
                 icon.name: "profile-button"
+		icon.source: "/components/icons/profile-24px.svg"
                 highlighted: true
             }
         }
diff --git a/features/LoginEmailForm.ui.qml b/features/LoginEmailForm.ui.qml
index 7f57599..991da16 100644
--- a/features/LoginEmailForm.ui.qml
+++ b/features/LoginEmailForm.ui.qml
@@ -62,7 +62,7 @@ Page {
             sourceSize.width: 24
             Layout.leftMargin: 16
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/email-24px.svg"
+            source: "/components/icons/email-24px.svg"
             antialiasing: true
         }
 
@@ -123,7 +123,7 @@ Page {
             Material.background: Material.primary
             display: AbstractButton.IconOnly
             icon.name: "arrow-forward-icon"
-            icon.source: "../assets/arrow-forward-24px.svg"
+            icon.source: "/components/icons/arrow-forward-24px.svg"
             highlighted: true
             enabled: false
         }
diff --git a/features/LoginForm.ui.qml b/features/LoginForm.ui.qml
new file mode 100644
index 0000000..2b241f1
--- /dev/null
+++ b/features/LoginForm.ui.qml
@@ -0,0 +1,29 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+import QtQuick.Layouts 1.12
+
+Page {
+	property alias toolButton: toolButton
+	property alias contentView: contentView
+
+	header: ToolBar {
+		background: Rectangle {
+			color: "#FAFFFFFF"
+		}
+		RowLayout {
+			ToolButton {
+				id: toolButton
+				icon.name: "back-button"
+				icon.source: "/components/icons/arrow-back-24px.svg"
+				highlighted: true
+			}
+		}
+	}
+
+	StackView {
+		id: contentView
+		anchors.topMargin: 432
+		anchors.fill: parent
+	}
+}
diff --git a/features/LoginPasswordForm.ui.qml b/features/LoginPasswordForm.ui.qml
index dee7709..dba6752 100644
--- a/features/LoginPasswordForm.ui.qml
+++ b/features/LoginPasswordForm.ui.qml
@@ -63,7 +63,7 @@ Page {
             sourceSize.width: 24
             Layout.leftMargin: 16
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/email-24px.svg"
+            source: "/components/icons/email-24px.svg"
             antialiasing: true
         }
 
@@ -100,7 +100,7 @@ Page {
             sourceSize.width: 24
             Layout.leftMargin: 16
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/lock-24px.svg"
+            source: "/components/icons/lock-24px.svg"
             antialiasing: true
         }
 
@@ -161,7 +161,7 @@ Page {
             Material.background: Material.primary
             display: AbstractButton.IconOnly
             icon.name: "arrow-forward-icon"
-            icon.source: "../../assets/arrow-forward-24px.svg"
+            icon.source: "/components/icons/arrow-forward-24px.svg"
             highlighted: true
             enabled: false
         }
diff --git a/features/PasswordForm.ui.qml b/features/PasswordForm.ui.qml
new file mode 100644
index 0000000..b5d34a2
--- /dev/null
+++ b/features/PasswordForm.ui.qml
@@ -0,0 +1,159 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+
+Rectangle {
+    id: rectangle
+    color: "#fff"
+    border.width: 0
+
+    property alias backButton: backButton
+    property alias instructionLabel: instructionLabel
+    property alias userEmail: userEmail
+    property alias passTextField: passTextField
+    property alias createPassButton: createPassButton
+    property alias emailAddressLabel: emailAddressLabel
+
+    ToolBar {
+        id: toolbar
+        height: 56
+        font.family: "Google Sans"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        background: Rectangle {
+            color: "#FFF"
+        }
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 8
+
+            ToolButton {
+                id: backButton
+                icon.name: "back-icon"
+                icon.source: "/components/icons/arrow-back-24px.svg"
+                highlighted: true
+            }
+        }
+    }
+
+    Label {
+        id: instructionLabel
+        x: 16
+        y: 232
+        color: "#2b2626"
+        text: qsTr("Create password")
+        anchors.bottom: userEmail.top
+        anchors.bottomMargin: 16
+        font.letterSpacing: 0.25
+        lineHeight: 1
+        font.weight: Font.Bold
+        wrapMode: Text.WordWrap
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+
+        font.family: "Google Sans"
+        font.pointSize: 34
+    }
+
+    RowLayout {
+        id: userEmail
+        height: 56
+        anchors.bottom: passTextFieldLayout.top
+        anchors.bottomMargin: 16
+        anchors.horizontalCenterOffset: 0
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        spacing: 8
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/email-24px.svg"
+            antialiasing: true
+        }
+
+        Label {
+            id: emailAddressLabel
+            Layout.fillWidth: true
+            text: qsTr("your@email.com")
+            Layout.leftMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.family: "Google Sans"
+            font.pointSize: 16
+            color: "#99000000"
+        }
+    }
+    RowLayout {
+        id: passTextFieldLayout
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: createPassButton.top
+        anchors.bottomMargin: 16
+        width: parent.width
+        spacing: 8
+        height: 56
+
+        Image {
+            width: 24
+            height: 24
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.leftMargin: 16
+            fillMode: Image.PreserveAspectFit
+            source: "/components/icons/lock-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: passTextField
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.pointSize: 16
+            anchors.bottomMargin: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Password")
+            echoMode: TextInput.Password
+        }
+    }
+    RoundButton {
+        id: createPassButton
+        x: 34
+        y: 278
+        text: qsTr("Next")
+        enabled: false
+        font.family: "Google Sans"
+        font.capitalization: Font.MixedCase
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        highlighted: true
+        Material.background: Material.primary
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
+
diff --git a/features/ProfileEditForm.ui.qml b/features/ProfileEditForm.ui.qml
index e6777d0..aa907a7 100644
--- a/features/ProfileEditForm.ui.qml
+++ b/features/ProfileEditForm.ui.qml
@@ -26,7 +26,7 @@ Page {
             ToolButton {
                 id: backButton
                 icon.name: "back-button"
-                icon.source: "../../assets/arrow-back-24px.svg"
+                icon.source: "/components/icons/arrow-back-24px.svg"
                 highlighted: true
             }
             Label {
@@ -85,7 +85,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/profile-24px.svg"
+            source: "/components/icons/profile-24px.svg"
             antialiasing: true
         }
 
@@ -118,7 +118,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/user-24px.svg"
+            source: "/components/icons/user-24px.svg"
             antialiasing: true
         }
 
@@ -152,7 +152,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/email-24px.svg"
+            source: "/components/icons/email-24px.svg"
             antialiasing: true
         }
 
diff --git a/features/ProfileForm.ui.qml b/features/ProfileForm.ui.qml
index f365740..74cb183 100644
--- a/features/ProfileForm.ui.qml
+++ b/features/ProfileForm.ui.qml
@@ -42,7 +42,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/profile-24px.svg"
+            source: "/components/icons/profile-24px.svg"
             antialiasing: true
         }
 
@@ -75,7 +75,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/user-24px.svg"
+            source: "/components/icons/user-24px.svg"
             antialiasing: true
         }
 
@@ -109,7 +109,7 @@ Page {
             Layout.leftMargin: 16
             Layout.alignment: Qt.AlignVCenter
             fillMode: Image.PreserveAspectFit
-            source: "../../assets/email-24px.svg"
+            source: "/components/icons/email-24px.svg"
             antialiasing: true
         }
 
diff --git a/features/TaskDetailForm.ui.qml b/features/TaskDetailForm.ui.qml
index c227a1c..48e3a49 100644
--- a/features/TaskDetailForm.ui.qml
+++ b/features/TaskDetailForm.ui.qml
@@ -54,7 +54,7 @@ Page {
                 sourceSize.height: 24
                 sourceSize.width: 24
                 Layout.leftMargin: 16
-                source: "../../assets/attachment-24px.svg"
+                source: "/components/icons/attachment-24px.svg"
             }
             ItemDelegate {
                 id: itemDelegate
diff --git a/features/TaskForm.ui.qml b/features/TaskForm.ui.qml
index 57cfbce..50ae148 100644
--- a/features/TaskForm.ui.qml
+++ b/features/TaskForm.ui.qml
@@ -76,7 +76,7 @@ GridLayout {
                 sourceSize.height: 24
                 sourceSize.width: 24
                 Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-                source: "/assets/chevron-right-24px.svg"
+                source: "/components/icons/chevron-right-24px.svg"
             }
         }
     }
diff --git a/features/TaskListForm.ui.qml b/features/TaskListForm.ui.qml
index 0016bb8..61579c9 100644
--- a/features/TaskListForm.ui.qml
+++ b/features/TaskListForm.ui.qml
@@ -32,7 +32,7 @@ Page {
         anchors.right: parent.right
         anchors.rightMargin: 8
         highlighted: true
-        icon.source: "../assets/add-24px.svg"
+        icon.source: "/components/icons/add-24px.svg"
         height: 64
         width: 64
     }
diff --git a/features/UsernameForm.ui.qml b/features/UsernameForm.ui.qml
new file mode 100644
index 0000000..5412533
--- /dev/null
+++ b/features/UsernameForm.ui.qml
@@ -0,0 +1,35 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+RowLayout {
+
+    id: userName
+    width: fillWidth
+    height: 54
+    anchors.topMargin: 8
+    anchors.right: parent.right
+    anchors.rightMargin: 0
+    anchors.left: parent.left
+    anchors.leftMargin: 0
+    spacing: 16
+
+    Image {
+        id: icon
+        width: 24
+        height: 24
+        Layout.leftMargin: 16
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+        fillMode: Image.PreserveAspectFit
+        source: "/components/icons/user-24px.svg"
+    }
+
+    TextField {
+        id: textField
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+        font.pointSize: 16
+        font.family: "Google Sans"
+        Layout.fillWidth: true
+        placeholderText: qsTr("Username")
+    }
+}