finalize signUp forms UI

1 files changed, 118 insertions, 34 deletions

diff --git a/SignUpFlickable.ui.qml b/SignUpFlickable.ui.qml
index 7a8220c..494cd23 100644
--- a/SignUpFlickable.ui.qml
+++ b/SignUpFlickable.ui.qml
@@ -37,16 +37,37 @@ GridLayout {
 			ColumnLayout {
 				Label {
 					text: qsTr("Email address *")
+					font.pixelSize: 16
+					font.family: "roboto"
 				}
-				RowLayout {
-					Image {
-						id: envelope
-						source: "Bootstrap/icons/envelope-fill.svg"
-					}
-					TextField {
-						id: email
-						placeholderText: qsTr("E-mail")
-						Layout.fillWidth: true
+				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")
+							Layout.fillWidth: true
+							font.pixelSize: 16
+							font.family: "roboto"
+							Layout.fillWidth: true
+							Layout.fillHeight: true
+							background: Rectangle {
+								color: "transparent"
+							}
+						}
 					}
 				}
 			}
@@ -54,39 +75,83 @@ GridLayout {
 			ColumnLayout {
 				Label {
 					text: qsTr("Password *")
+					font.pixelSize: 16
+					font.family: "roboto"
 				}
-				RowLayout {
-					Image {
-						source: "Font-Awesome/svgs/solid/lock.svg"
-						sourceSize {
-							width: envelope.height
-							height: envelope.height
+				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")
-						Layout.fillWidth: true
-					}
+						TextField {
+							id: password
+							placeholderText: qsTr("Password")
+							font.pixelSize: 16
+							Layout.fillWidth: true
+							Layout.fillHeight: true
+							background: Rectangle {
+								color: "transparent"
+							}
+						}
+					}			
 				}
 			}
 
 			ColumnLayout {
 				Label {
-					text: qsTr("Confirm Password *")
+					text: qsTr("Confirm password *")
+					font.pixelSize: 16
+					font.family: "roboto"
 				}
-				RowLayout {
-					Image {
-						source: "Font-Awesome/svgs/solid/lock.svg"
-						sourceSize {
-							width: envelope.height
-							height: envelope.height
+				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("password")
-						Layout.fillWidth: true
+						TextField {
+							id: confirmPassword
+							placeholderText: qsTr("Confirm 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"
+					Layout.fillWidth: true
+					contentItem: Text {
+						color: "#6c757d"
+						text: rememberCheckBox.text
+						verticalAlignment: Text.AlignVCenter
+						leftPadding: rememberCheckBox.indicator.width + rememberCheckBox.spacing
 					}
 				}
 			}
@@ -94,7 +159,24 @@ GridLayout {
 			Button {
 				id: button
 				text: qsTr("Sign Up")
+				font.pixelSize: 16
+				implicitHeight: 40
 				Layout.fillWidth: true
+
+				contentItem: Text {
+					color: "#ffffff"
+					text: "Login"
+					horizontalAlignment: Text.AlignHCenter
+					verticalAlignment: Text.AlignVCenter
+					font.weight: Font.Medium
+					font.family: "Roboto"
+					font.pointSize: 14
+				}
+
+				background: Rectangle {
+					color: button.down ? "#055aab" : "#066ac9"
+					radius: 8
+				}
 			}
 		}
 
@@ -102,12 +184,14 @@ GridLayout {
 			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>"
-				linkColor: Qt.rgba(.0235, .416, .788, 1.0)
+				font.pixelSize: 16
 				font.underline: false
+				linkColor: Qt.rgba(.0235, .416, .788, 1.0)
 			}
 		}
 	}