fixes TextField UI for Personal details section

1 files changed, 149 insertions, 37 deletions

diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml
index 902a6a4..9daf888 100644
--- a/CheckoutFlickable.ui.qml
+++ b/CheckoutFlickable.ui.qml
@@ -60,7 +60,8 @@ Flickable {
 
 					Label {
 						text: qsTr("Personal Details")
-						font.pixelSize: 21
+						font.pixelSize: 22
+						font.family: "roboto"
 						Layout.fillWidth: true
 					}
 
@@ -77,15 +78,31 @@ Flickable {
 
 							Label {
 								text: qsTr("Your name *")
-								font.pixelSize: 15
+								font.pixelSize: 12
+								font.family: "roboto"
 								Layout.fillWidth: true
 							}
 
-							TextField {
-								id: name
-								placeholderText: qsTr("Name")
-								font.pixelSize: 15
+							Rectangle {
+								implicitHeight: 56
+								color: "#f5f7f9"
+								radius: 8
+								border.width: 0
 								Layout.fillWidth: true
+								RowLayout {
+									anchors.fill: parent
+									TextField {
+										id: name
+										placeholderText: qsTr("Name")
+										font.pixelSize: 16
+										font.family: "roboto"
+										Layout.fillWidth: true
+										Layout.fillHeight: true
+										background: Rectangle {
+											color: "transparent"
+										}
+									}
+								}
 							}
 						}
 
@@ -96,15 +113,31 @@ Flickable {
 
 							Label {
 								text: qsTr("Email address *")
-								font.pixelSize: 15
+								font.pixelSize: 12
+								font.family: "roboto"
 								Layout.fillWidth: true
 							}
 
-							TextField {
-								id: email
-								placeholderText: qsTr("Email")
-								font.pixelSize: 15
+							Rectangle {
+								implicitHeight: 56
+								color: "#f5f7f9"
+								radius: 8
+								border.width: 0
 								Layout.fillWidth: true
+								RowLayout {
+									anchors.fill: parent
+									TextField {
+										id: email
+										placeholderText: qsTr("Email")
+										font.pixelSize: 16
+										font.family: "roboto"
+										Layout.fillWidth: true
+										Layout.fillHeight: true
+										background: Rectangle {
+											color: "transparent"
+										}
+									}
+								}
 							}
 						}
 
@@ -115,15 +148,31 @@ Flickable {
 
 							Label {
 								text: qsTr("Mobile number *")
-								font.pixelSize: 15
+								font.pixelSize: 12
+								font.family: "roboto"
 								Layout.fillWidth: true
 							}
 
-							TextField {
-								id: mobile
-								placeholderText: qsTr("Mobile number")
-								font.pixelSize: 15
+							Rectangle {
+								implicitHeight: 56
+								color: "#f5f7f9"
+								radius: 8
+								border.width: 0
 								Layout.fillWidth: true
+								RowLayout {
+									anchors.fill: parent
+									TextField {
+										id: mobile
+										placeholderText: qsTr("Mobile number")
+										font.pixelSize: 16
+										font.family: "roboto"
+										Layout.fillWidth: true
+										Layout.fillHeight: true
+										background: Rectangle {
+											color: "transparent"
+										}
+									}
+								}
 							}
 						}
 
@@ -134,15 +183,30 @@ Flickable {
 
 							Label {
 								text: qsTr("Select country *")
-								font.pixelSize: 15
+								font.pixelSize: 12
+								font.family: "roboto"
 								Layout.fillWidth: true
 							}
-
-							TextField {
-								id: country
-								placeholderText: qsTr("Select country")
-								font.pixelSize: 15
+							Rectangle {
+								implicitHeight: 56
+								color: "#f5f7f9"
+								radius: 8
+								border.width: 0
 								Layout.fillWidth: true
+								RowLayout {
+									anchors.fill: parent
+									TextField {
+										id: country
+										placeholderText: qsTr("Select country")
+										font.pixelSize: 16
+										font.family: "roboto"
+										Layout.fillWidth: true
+										Layout.fillHeight: true
+										background: Rectangle {
+											color: "transparent"
+										}
+									}
+								}
 							}
 						}
 
@@ -153,15 +217,31 @@ Flickable {
 
 							Label {
 								text: qsTr("Select state *")
-								font.pixelSize: 15
+								font.pixelSize: 12
+								font.family: "roboto"
 								Layout.fillWidth: true
 							}
 
-							TextField {
-								id: province
-								placeholderText: qsTr("Select state")
-								font.pixelSize: 15
+							Rectangle {
+								implicitHeight: 56
+								color: "#f5f7f9"
+								radius: 8
+								border.width: 0
 								Layout.fillWidth: true
+								RowLayout {
+									anchors.fill: parent
+									TextField {
+										id: province
+										placeholderText: qsTr("Select state")
+										font.pixelSize: 16
+										font.family: "roboto"
+										Layout.fillWidth: true
+										Layout.fillHeight: true
+										background: Rectangle {
+											color: "transparent"
+										}
+									}
+								}
 							}
 						}
 
@@ -172,15 +252,31 @@ Flickable {
 
 							Label {
 								text: qsTr("Postal code *")
-								font.pixelSize: 15
+								font.pixelSize: 12
+								font.family: "roboto"
 								Layout.fillWidth: true
 							}
 
-							TextField {
-								id: postal
-								placeholderText: qsTr("PIN code")
-								font.pixelSize: 15
+							Rectangle {
+								implicitHeight: 56
+								color: "#f5f7f9"
+								radius: 8
+								border.width: 0
 								Layout.fillWidth: true
+								RowLayout {
+									anchors.fill: parent
+									TextField {
+										id: postal
+										placeholderText: qsTr("PIN code")
+										font.pixelSize: 16
+										font.family: "roboto"
+										Layout.fillWidth: true
+										Layout.fillHeight: true
+										background: Rectangle {
+											color: "transparent"
+										}
+									}
+								}
 							}
 						}
 
@@ -191,15 +287,31 @@ Flickable {
 
 							Label {
 								text: qsTr("Address *")
-								font.pixelSize: 15
+								font.pixelSize: 12
+								font.family: "roboto"
 								Layout.fillWidth: true
 							}
 
-							TextField {
-								id: address
-								placeholderText: qsTr("Address")
-								font.pixelSize: 15
+							Rectangle {
+								implicitHeight: 56
+								color: "#f5f7f9"
+								radius: 8
+								border.width: 0
 								Layout.fillWidth: true
+								RowLayout {
+									anchors.fill: parent
+									TextField {
+										id: address
+										placeholderText: qsTr("Address")
+										font.pixelSize: 16
+										font.family: "roboto"
+										Layout.fillWidth: true
+										Layout.fillHeight: true
+										background: Rectangle {
+											color: "transparent"
+										}
+									}
+								}
 							}
 						}
 					}