Instructor edit profile supports dark mode

3 files changed, 66 insertions, 100 deletions

diff --git a/Instructor/EditProfile.ui.qml b/Instructor/EditProfile.ui.qml
index 4115e70..5500bb7 100644
--- a/Instructor/EditProfile.ui.qml
+++ b/Instructor/EditProfile.ui.qml
@@ -35,9 +35,10 @@ Flickable {
 					Layout.fillWidth: true
 					implicitHeight: editProfile.height
 					radius: 8
+					color: Eduport.bsBodyBg
 					border {
+						color: Eduport.bsBorderColor
 						width: 1
-						color: "#1a000000"
 					}
 
 					ColumnLayout {
@@ -50,16 +51,20 @@ Flickable {
 						Lbl.H3 {
 							id: cardHeader
 							Layout.fillWidth: true
-							text: qsTr("Edit Profile")
+							text:
+							qsTr("Edit Profile")
 							padding: 16
 						}
 
-						Rectangle {
-							Layout.fillWidth: true
-							height: 1
-							border {
-								width: .5
-								color: "#0a000000"
+						MenuSeparator {
+							contentItem: Rectangle {
+								implicitWidth:
+								editProfile
+									.width
+								implicitHeight:
+									1
+								color: Eduport
+								.bsBorderColor
 							}
 						}
 
@@ -140,9 +145,10 @@ Flickable {
 									Layout.fillWidth: true
 									implicitHeight: firstName.height
 									radius: 5.2
+									color: Eduport.bsBodyBg
 									border {
 										width: 1
-										color: "#dde0e3"
+										color: Eduport.bsGray300
 									}
 
 									TxtFld.Input {
@@ -151,19 +157,17 @@ Flickable {
 										placeholderText: qsTr("First name")
 										width: parent.width / 2
 										anchors.left: parent.left
-										topPadding: 8
-										leftPadding: 16
-										rightPadding: 16
-										bottomPadding: 8
+										background: Rectangle {
+											color: "transparent"
+										}
 									}
 
-									Rectangle {
-										width: 1
-										height: firstName.height
-										anchors.horizontalCenter: parent.horizontalCenter
-										border {
-											width: .5
-											color: "#88dde0e3"
+									ToolSeparator {
+										anchors.centerIn: parent
+										contentItem: Rectangle {
+											implicitWidth: 1
+											implicitHeight: firstName.height
+											color: Eduport.bsGray300
 										}
 									}
 
@@ -173,10 +177,9 @@ Flickable {
 										placeholderText: qsTr("Last name")
 										width: parent.width / 2
 										anchors.right: parent.right
-										topPadding: 8
-										leftPadding: 16
-										rightPadding: 16
-										bottomPadding: 8
+										background: Rectangle {
+											color: "transparent"
+										}
 									}
 								}
 							}
@@ -196,9 +199,10 @@ Flickable {
 									Layout.fillWidth: true
 									implicitHeight: userName.height
 									radius: 5.2
+									color: Eduport.bsBodyBg
 									border {
 										width: 1
-										color: "#dde0e3"
+										color: Eduport.bsGray300
 									}
 
 									Lbl.Body {
@@ -212,18 +216,18 @@ Flickable {
 										leftPadding: 12
 										rightPadding: 12
 										bottomPadding: 6
+										color: Eduport.bsBodyColor
 										background: Rectangle {
-											color: "#e9ecef"
+											color: Eduport.bsTertiaryBg
 										}
 									}
 
-									Rectangle {
-										width: 1
-										height: userName.height
-										anchors.horizontalCenter: parent.horizontalCenter
-										border {
-											width: .5
-											color: "#88dde0e3"
+									ToolSeparator {
+										anchors.centerIn: parent
+										contentItem: Rectangle {
+											implicitWidth: 1
+											implicitHeight: firstName.height
+											color: Eduport.bsGray300
 										}
 									}
 
@@ -232,10 +236,9 @@ Flickable {
 										text: "loristev"
 										width: parent.width / 2
 										anchors.right: parent.right
-										topPadding: 8
-										leftPadding: 16
-										rightPadding: 16
-										bottomPadding: 8
+										background: Rectangle {
+											color: "transparent"
+										}
 									}
 								}
 							}
@@ -251,28 +254,11 @@ Flickable {
 									text: qsTr("Email id")
 								}
 
-								Rectangle {
+								TxtFld.Input {
+									id: emailID
+									text: "example@gmail.com"
+									placeholderText: qsTr("Email")
 									Layout.fillWidth: true
-									implicitHeight: emailID.height
-									radius: 5.2
-									border {
-										width: 1
-										color: "#dde0e3"
-									}
-
-									TxtFld.Input {
-										id: emailID
-										text: "example@gmail.com"
-										placeholderText: qsTr("Email")
-										topPadding: 8
-										leftPadding: 16
-										rightPadding: 16
-										bottomPadding: 8
-										anchors {
-											left: parent.left
-											right: parent.right
-										}
-									}
 								}
 							}
 
@@ -287,28 +273,11 @@ Flickable {
 									text: qsTr("Phone number")
 								}
 
-								Rectangle {
+								TxtFld.Input {
+									id: phoneNumber
+									text: "1234567890"
+									placeholderText: qsTr("Phone number")
 									Layout.fillWidth: true
-									implicitHeight: phoneNumber.height
-									radius: 5.2
-									border {
-										width: 1
-										color: "#dde0e3"
-									}
-
-									TxtFld.Input {
-										id: phoneNumber
-										text: "1234567890"
-										placeholderText: qsTr("Phone number")
-										topPadding: 8
-										leftPadding: 16
-										rightPadding: 16
-										bottomPadding: 8
-										anchors {
-											left: parent.left
-											right: parent.right
-										}
-									}
 								}
 							}
 
@@ -323,27 +292,10 @@ Flickable {
 									text: qsTr("Location")
 								}
 
-								Rectangle {
+								TxtFld.Input {
+									id: location
+									text: "California"
 									Layout.fillWidth: true
-									implicitHeight: location.height
-									radius: 5.2
-									border {
-										width: 1
-										color: "#dde0e3"
-									}
-
-									TxtFld.Input {
-										id: location
-										text: "California"
-										topPadding: 8
-										leftPadding: 16
-										rightPadding: 16
-										bottomPadding: 8
-										anchors {
-											left: parent.left
-											right: parent.right
-										}
-									}
 								}
 							}
 
diff --git a/TextField/Input.ui.qml b/TextField/Input.ui.qml
index d036348..9e0a821 100644
--- a/TextField/Input.ui.qml
+++ b/TextField/Input.ui.qml
@@ -8,7 +8,17 @@ TextField {
 		weight: Eduport.bodyFont.weight
 		pointSize: Eduport.formControlFontSize
 	}
+	color: Eduport.bsGray700
 	background: Rectangle {
-		color: "transparent"
+		radius: 5.2
+		color: Eduport.bsBodyBg
+		border {
+			color: Eduport.bsGray300
+			width: 1
+		}
 	}
+	topPadding: 8
+	leftPadding: 16
+	rightPadding: 16
+	bottomPadding: 8
 }
diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml
index 5a5dcdb..7e50bd5 100644
--- a/imports/Eduport/Eduport.qml
+++ b/imports/Eduport/Eduport.qml
@@ -43,12 +43,14 @@ QtObject {
 	readonly property color bsPrimary: "#066ac9"
 	property color bsLight: mode ? "#2a2c31" : "#f5f7f9"
 	property color bsDark: mode ? "#0f0f10" : "#24292d"
+	property color bsTertiaryBg: mode ? "#2b3035" : "#f8f9fa"
 
 	readonly property real bsBadgeFontSize: 13.6
 
 	property color bsBodyColor: mode ? "#a1a1a8" : "#747579"
 	property color bsBodyBg: mode ? "#222529" : "#ffffff"
 
+	property color bsBorderColor: mode ? "#12ffffff" : bsGray200
 	property real bsBorderRadius: 5.2
 
 	property real bsBoxShadowOffsetX: 0
@@ -96,9 +98,11 @@ QtObject {
 
 	property color bsHeadingColor: mode ? "#ffffff" : "#24292d"
 
+	property color bsGray200: mode ? "#464950" : "#eff1f2"
 	property color bsGray300: mode ? "#3e3e40" : "#dde0e3"
 	property color bsGray500: mode ? "#bfc0c9" : "#9a9ea4"
 	property color bsGray600: mode ? "#c5c6cc" : "#747579"
+	property color bsGray700: mode ? "#f3f1f1" : "#404448"
 	property color bsGray800: mode ? "#f7f5f5" : "#24292d"
 
 	readonly property bool haveRoboto: Qt.platform.os === "android"