Wraps SignUp with flickable & fix texts

1 files changed, 195 insertions, 156 deletions

diff --git a/SignUpFlickable.ui.qml b/SignUpFlickable.ui.qml
index 3f6a4f6..9960ee1 100644
--- a/SignUpFlickable.ui.qml
+++ b/SignUpFlickable.ui.qml
@@ -2,195 +2,234 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
-GridLayout {
+Flickable {
 	property alias signUpEmail: email
 	property alias signUpPassword: password
 	property alias signUpConfirmPassword: confirmPassword
 	property alias signUpButton: button
 	property alias signUpSignIn: signIn
+	contentHeight: container.height
 
-	ColumnLayout {
-		Layout.margins: 16
+	FontLoader {
+		id: heebo
+		name: "Heebo"
+		source: "Heebo/Heebo-Bold.ttf"
+	}
+
+	GridLayout {
+		id: container
+		anchors {
+			top: parent.top
+			left: parent.left
+			right: parent.right
+		}
 
 		ColumnLayout {
-			spacing: 16
-			ColumnLayout {
-				id: columnLayout
-				Layout.fillWidth: true
-				
-				Label {
-					id: signUpTitle
-					text: qsTr("Sign Up Title")
-					font.family: "Roboto"
-					font.weight: Font.Medium
-					font.pointSize: 40
-				}
-				
-				Label {
-					id: signUpSubtitle
-					color: "#6c757d"
-					text: qsTr("Sign Up Subtitle")
-					font.weight: Font.Normal
-					font.pointSize: 22
-				}
-			}
+			Layout.margins: 16
+
 			ColumnLayout {
-				Label {
-					text: qsTr("Email address *")
-					font.pixelSize: 16
-					font.family: "roboto"
+				spacing: 16
+
+				ColumnLayout {
+					id: columnLayout
+
+					Label {
+						id: signUpTitle
+						text: qsTr("Sign up for your account!")
+						wrapMode: Text.Wrap
+						Layout.fillWidth: true
+						font.family: heebo.name
+						font.weight: Font.Medium
+						font.pointSize: 40
+					}
+
+					Label {
+						id: signUpSubtitle
+						color: "#6c757d"
+						text: qsTr("Nice to see you! Please Sign up with your account.")
+						wrapMode: Text.Wrap
+						Layout.fillWidth: true
+						font.weight: Font.Normal
+						font.pointSize: 22
+						font.family: "Roboto"
+					}
 				}
-				Rectangle {
-					implicitHeight: 56
-					color: "#f5f7f9"
-					radius: 8
-					border.width: 0
-					Layout.fillWidth: true
 
-					RowLayout {
-						anchors.fill: parent
-						Image {
-							id: envelope
-							source: "Bootstrap/icons/envelope-fill.svg"
-							Layout.maximumHeight: 24
-							Layout.maximumWidth: 24
-							Layout.margins: 16
-						}
-						TextField {
-							id: email
-							placeholderText: qsTr("E-mail")
-							font.pixelSize: 16
-							font.family: "roboto"
-							Layout.fillWidth: true
-							Layout.fillHeight: true
-							background: Rectangle {
-								color: "transparent"
+				ColumnLayout {
+
+					Label {
+						text: qsTr("Email address *")
+						font.pixelSize: 16
+						font.family: "Roboto"
+					}
+
+					Rectangle {
+						implicitHeight: 56
+						color: "#f5f7f9"
+						radius: 8
+						border.width: 0
+						Layout.fillWidth: true
+
+						RowLayout {
+							anchors.fill: parent
+
+							Image {
+								id: envelope
+								source: "Bootstrap/icons/envelope-fill.svg"
+								Layout.maximumHeight: 24
+								Layout.maximumWidth: 24
+								Layout.margins: 16
+							}
+
+							TextField {
+								id: email
+								placeholderText: qsTr("E-mail")
+								font.pixelSize: 16
+								font.family: "Roboto"
+								Layout.fillWidth: true
+								Layout.fillHeight: true
+								background: Rectangle {
+									color: "transparent"
+								}
 							}
 						}
 					}
 				}
-			}
 
-			ColumnLayout {
-				Label {
-					text: qsTr("Password *")
-					font.pixelSize: 16
-					font.family: "roboto"
-				}
-				Rectangle {
-					implicitHeight: 56
-					color: "#f5f7f9"
-					radius: 8
-					border.width: 0
-					Layout.fillWidth: true
-					RowLayout {
-						anchors.fill: parent
-						Image {
-							source: "Font-Awesome/svgs/solid/lock.svg"
-							Layout.maximumHeight: 24
-							Layout.maximumWidth: 24
-							Layout.margins: 16
-						}
-						TextField {
-							id: password
-							placeholderText: qsTr("Password")
-							font.pixelSize: 16
-							Layout.fillWidth: true
-							Layout.fillHeight: true
-							background: Rectangle {
-								color: "transparent"
+				ColumnLayout {
+
+					Label {
+						text: qsTr("Password *")
+						font.pixelSize: 16
+						font.family: "Roboto"
+					}
+
+					Rectangle {
+						implicitHeight: 56
+						color: "#f5f7f9"
+						radius: 8
+						border.width: 0
+						Layout.fillWidth: true
+
+						RowLayout {
+							anchors.fill: parent
+
+							Image {
+								source: "Font-Awesome/svgs/solid/lock.svg"
+								Layout.maximumHeight: 24
+								Layout.maximumWidth: 24
+								Layout.margins: 16
+							}
+
+							TextField {
+								id: password
+								placeholderText: "*********"
+								echoMode: TextInput.Password
+								font.pixelSize: 16
+								Layout.fillWidth: true
+								Layout.fillHeight: true
+								background: Rectangle {
+									color: "transparent"
+								}
 							}
 						}
-					}			
+					}
 				}
-			}
 
-			ColumnLayout {
-				Label {
-					text: qsTr("Confirm password *")
-					font.pixelSize: 16
-					font.family: "roboto"
-				}
-				Rectangle {
-					implicitHeight: 56
-					color: "#f5f7f9"
-					radius: 8
-					border.width: 0
-					Layout.fillWidth: true
-					RowLayout {
-						anchors.fill: parent
-						Image {
-							source: "Font-Awesome/svgs/solid/lock.svg"
-							Layout.maximumHeight: 24
-							Layout.maximumWidth: 24
-							Layout.margins: 16
-						}
-						TextField {
-							id: confirmPassword
-							placeholderText: qsTr("Confirm password")
-							font.pixelSize: 16
-							Layout.fillWidth: true
-							Layout.fillHeight: true
-							background: Rectangle {
-								color: "transparent"
+				ColumnLayout {
+
+					Label {
+						text: qsTr("Confirm Password *")
+						font.pixelSize: 16
+						font.family: "Roboto"
+					}
+
+					Rectangle {
+						implicitHeight: 56
+						color: "#f5f7f9"
+						radius: 8
+						border.width: 0
+						Layout.fillWidth: true
+
+						RowLayout {
+							anchors.fill: parent
+
+							Image {
+								source: "Font-Awesome/svgs/solid/lock.svg"
+								Layout.maximumHeight: 24
+								Layout.maximumWidth: 24
+								Layout.margins: 16
+							}
+
+							TextField {
+								id: confirmPassword
+								placeholderText: "*********"
+								echoMode: TextInput.Password
+								font.pixelSize: 16
+								Layout.fillWidth: true
+								Layout.fillHeight: true
+								background: Rectangle {
+									color: "transparent"
+								}
 							}
 						}
-					}			
+					}
 				}
-			}
-			RowLayout {
-				Layout.fillWidth: true
-				CheckBox {
-					id: agreementCheckBox
-					text: "By signing up, you agree to the <a href=\"#\">terms of service</a>"
-					font.pointSize: 14
-					font.family: "Roboto"
+
+				RowLayout {
+
+					CheckBox {
+						id: agreementCheckBox
+						text: "By signing up, you agree to the <a href=\"#\">terms of service</a>"
+						font.pointSize: 14
+						font.family: "Roboto"
+						Layout.fillWidth: true
+						contentItem: Text {
+							color: "#6c757d"
+							text: agreementCheckBox.text
+							verticalAlignment: Text.AlignVCenter
+							leftPadding: agreementCheckBox.indicator.width + agreementCheckBox.spacing
+						}
+					}
+				}
+
+				Button {
+					id: button
+					text: qsTr("Sign Up")
+					font.pixelSize: 16
+					implicitHeight: 40
 					Layout.fillWidth: true
 					contentItem: Text {
-						color: "#6c757d"
-						text: agreementCheckBox.text
+						color: "#ffffff"
+						text: "Sign Up"
+						horizontalAlignment: Text.AlignHCenter
 						verticalAlignment: Text.AlignVCenter
-						leftPadding: agreementCheckBox.indicator.width + agreementCheckBox.spacing
+						font.weight: Font.Medium
+						font.family: "Roboto"
+						font.pointSize: 14
+					}
+					background: Rectangle {
+						color: button.down ? "#055aab" : "#066ac9"
+						radius: 8
 					}
 				}
 			}
 
-			Button {
-				id: button
-				text: qsTr("Sign Up")
-				font.pixelSize: 16
-				implicitHeight: 40
-				Layout.fillWidth: true
-
-				contentItem: Text {
-					color: "#ffffff"
-					text: "Sign Up"
-					horizontalAlignment: Text.AlignHCenter
-					verticalAlignment: Text.AlignVCenter
-					font.weight: Font.Medium
-					font.family: "Roboto"
-					font.pointSize: 14
-				}
+			RowLayout {
+				Layout.alignment: Qt.AlignHCenter
 
-				background: Rectangle {
-					color: button.down ? "#055aab" : "#066ac9"
-					radius: 8
+				Label {
+					text: qsTr("Already have an account?")
+					font.pixelSize: 16
 				}
-			}
-		}
 
-		RowLayout {
-			Layout.alignment: Qt.AlignHCenter
-			Label {
-				text: qsTr("Already have an account?")
-				font.pixelSize: 16
-			}
-			Text {
-				id: signIn
-				text: "<a href=\"sign-in.html\">Sign in here</a>"
-				font.pixelSize: 16
-				font.underline: false
-				linkColor: Qt.rgba(.0235, .416, .788, 1.0)
+				Text {
+					id: signIn
+					text: "<a href=\"sign-in.html\">Sign in here</a>"
+					font.pixelSize: 16
+					font.underline: false
+					linkColor: Qt.rgba(.0235, .416, .788, 1.0)
+				}
 			}
 		}
 	}