Reorganise auth, primary button, and reuse

10 files changed, 140 insertions, 121 deletions

diff --git a/Authentication.qrc b/Authentication.qrc
new file mode 100644
index 0000000..99389b7
--- /dev/null
+++ b/Authentication.qrc
@@ -0,0 +1,6 @@
+<!DOCTYPE RCC><RCC version="1.0">
+	<qresource prefix="qeduport">
+		<file>Authentication/SignIn.ui.qml</file>
+		<file>Authentication/SignUp.ui.qml</file>
+	</qresource>
+</RCC>
diff --git a/SignIn.ui.qml b/Authentication/SignIn.ui.qml
index 6d910dd..a0915d6 100644
--- a/SignIn.ui.qml
+++ b/Authentication/SignIn.ui.qml
@@ -1,39 +1,21 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
-import "Bootstrap/Button" as BsBtn
+import Bootstrap 5.3
+import Eduport 1.0
+import "../Button" as BsBtn
 
 Flickable {
 	property string titleHeader: qsTr("Login into Eduport!")
 	property alias titleParagraph: titleParagraph
 	property string emailLabel: qsTr("Email address *")
-	property string emailImage: "Bootstrap/icons/envelope-fill.svg"
+	property string emailImage: "../Bootstrap/icons/envelope-fill.svg"
 	property alias email: email
 	property alias password: password
 	property alias button: button
 	property alias signUp: signUp
-	readonly property bool doesntEmbed: Qt.platform.os === "android"
-				|| Qt.platform.os === "linux"
-				|| Qt.platform.os === "osx"
-				|| Qt.platform.os === "unix"
-				|| Qt.platform.os === "windows"
 	contentHeight: container.height
 
-	FontLoader {
-		id: heebo
-		source: "Heebo/Heebo-Bold.ttf"
-	}
-
-	FontLoader {
-		id: medium
-		source: doesntEmbed ? "" : "Roboto/Roboto-Medium.ttf"
-	}
-
-	FontLoader {
-		id: regular
-		source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf"
-	}
-
 	GridLayout {
 		id: container
 		anchors {
@@ -52,33 +34,43 @@ Flickable {
 					id: columnLayout
 
 					Label {
-						text: titleHeader
-						wrapMode: Text.Wrap
 						Layout.fillWidth: true
+						text: titleHeader
+						wrapMode: Label.Wrap
 						font {
-							family: heebo.name
-							pointSize: 21.75 + .013125 * columnLayout.width
+							family: Eduport.hFont
+									.family
+							pointSize: 21.75
+								+ .013125
+								* columnLayout
+									.width
 						}
 					}
 
 					Label {
 						id: titleParagraph
 						text: qsTr("Nice to see you! Please log in with your account.")
+						wrapMode: Label.Wrap
 						color: "#6c757d"
-						wrapMode: Text.Wrap
 						Layout.fillWidth: true
 						font {
-							pointSize: 18.75
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap
+								.bodyFont.family
+							pointSize: Eduport
+								.fontSizeLead
 						}
 					}
 				}
+
 				ColumnLayout {
 					Label {
 						text: emailLabel
 						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap
+								.bodyFont.family
+							pointSize: Bootstrap
+								.bodyFont
+								.pointSize
 						}
 					}
 
@@ -97,12 +89,13 @@ Flickable {
 								Layout.maximumWidth: 24
 								Layout.margins: 16
 							}
+
 							TextField {
 								id: email
 								placeholderText: qsTr("E-mail")
 								font {
-									pointSize: 16
-									family: doesntEmbed ? "Roboto" : regular.name
+									family: Bootstrap.bodyFont.family
+									pointSize: Eduport.fontSizeFormControl
 								}
 								Layout.fillWidth: true
 								Layout.fillHeight: true
@@ -115,11 +108,15 @@ Flickable {
 				}
 
 				ColumnLayout {
+
 					Label {
 						text: qsTr("Password *")
 						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap
+								.bodyFont.family
+							pointSize: Bootstrap
+								.bodyFont
+								.pointSize
 						}
 					}
 
@@ -133,18 +130,19 @@ Flickable {
 						RowLayout {
 							anchors.fill: parent
 							Image {
-								source: "Font-Awesome/svgs/solid/lock.svg"
+								source: "../Font-Awesome/svgs/solid/lock.svg"
 								Layout.maximumHeight: 24
 								Layout.maximumWidth: 24
 								Layout.margins: 16
 							}
+
 							TextField {
 								id: password
 								placeholderText: qsTr("password")
 								echoMode: TextInput.Password
 								font {
-									pointSize: 16
-									family: doesntEmbed ? "Roboto" : regular.name
+									family: Bootstrap.bodyFont.family
+									pointSize: Eduport.fontSizeFormControl
 								}
 								Layout.fillWidth: true
 								Layout.fillHeight: true
@@ -155,12 +153,15 @@ Flickable {
 						}
 					}
 				}
+
 				Label {
 					id: passwordHelper
-					text: "Your password must be 8 characters at least"
+					text: qsTr("Your password must be 8 characters at least")
 					font {
-						pointSize: 14
-						family: doesntEmbed ? "Roboto" : regular.name
+						family: Bootstrap.bodyFont
+								.family
+						pointSize: Eduport
+							.fontSizeFormText
 					}
 					color: "#6c757d"
 				}
@@ -170,8 +171,8 @@ Flickable {
 						id: rememberCheckBox
 						text: qsTr("Remember me")
 						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap.bodyFont.family
+							pointSize: Bootstrap.bodyFont.pointSize
 						}
 						Layout.fillWidth: true
 						contentItem: Text {
@@ -186,8 +187,8 @@ Flickable {
 						id: forgotPassword
 						text: "<a href=\"#\">Forgot password?</a>"
 						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap.bodyFont.family
+							pointSize: Bootstrap.bodyFont.pointSize
 						}
 						horizontalAlignment: Text.AlignRight
 						Layout.fillWidth: true
@@ -205,19 +206,21 @@ Flickable {
 
 			RowLayout {
 				Layout.alignment: Qt.AlignHCenter
+
 				Label {
 					text: qsTr("Don't have an account?")
 					font {
-						pointSize: 15
-						family: doesntEmbed ? "Roboto" : regular.name
+						family: Bootstrap.bodyFont.family
+						pointSize: Bootstrap.bodyFont.pointSize
 					}
 				}
+
 				Text {
 					id: signUp
 					text: "<a href=\"sign-up.html\">Signup here</a>"
 					font {
-						pointSize: 15
-						family: doesntEmbed ? "Roboto" : regular.name
+						family: Bootstrap.bodyFont.family
+						pointSize: Bootstrap.bodyFont.pointSize
 						underline: false
 					}
 					linkColor: Qt.rgba(.0235, .416, .788, 1.0)
diff --git a/SignUp.ui.qml b/Authentication/SignUp.ui.qml
index 92bcd9b..e1a3932 100644
--- a/SignUp.ui.qml
+++ b/Authentication/SignUp.ui.qml
@@ -1,40 +1,23 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import Bootstrap 5.3
+import Eduport 1.0
+import "../Button" as BsBtn
 
 Flickable {
 	property string titleHeader: qsTr("Sign up for your account!")
 	property alias titleParagraph: titleParagraph
 	property string emailLabel: qsTr("Email address *")
-	property string emailImage: "Bootstrap/icons/envelope-fill.svg"
+	property string emailImage: "../Bootstrap/icons/envelope-fill.svg"
 	property alias email: email
 	property alias password: password
 	property alias confirmPassword: confirmPassword
 	property alias button: button
 	property alias signIn: signIn
-	readonly property bool doesntEmbed: Qt.platform.os === "android"
-				|| Qt.platform.os === "linux"
-				|| Qt.platform.os === "osx"
-				|| Qt.platform.os === "unix"
-				|| Qt.platform.os === "windows"
 	contentHeight: container.height
 
-	FontLoader {
-		id: heebo
-		source: "Heebo/Heebo-Bold.ttf"
-	}
-
-	FontLoader {
-		id: medium
-		source: doesntEmbed ? "" : "Roboto/Roboto-Medium.ttf"
-	}
-
-	FontLoader {
-		id: regular
-		source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf"
-	}
-
-		GridLayout {
+	GridLayout {
 		id: container
 		anchors {
 			top: parent.top
@@ -52,12 +35,16 @@ Flickable {
 					id: columnLayout
 
 					Label {
-						text: titleHeader
-						wrapMode: Text.Wrap
 						Layout.fillWidth: true
+						text: titleHeader
+						wrapMode: Label.Wrap
 						font {
-							family: heebo.name
-							pointSize: 21.75 + .013125 * columnLayout.width
+							family: Eduport.hFont
+									.family
+							pointSize: 21.75
+								+ .013125
+								* columnLayout
+									.width
 						}
 					}
 
@@ -65,11 +52,13 @@ Flickable {
 						id: titleParagraph
 						color: "#6c757d"
 						text: qsTr("Nice to see you! Please Sign up with your account.")
-						wrapMode: Text.Wrap
+						wrapMode: Label.Wrap
 						Layout.fillWidth: true
 						font {
-							pointSize: 18.75
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap
+								.bodyFont.family
+							pointSize: Eduport
+								.fontSizeLead
 						}
 					}
 				}
@@ -79,8 +68,11 @@ Flickable {
 					Label {
 						text: emailLabel
 						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap
+								.bodyFont.family
+							pointSize: Bootstrap
+								.bodyFont
+								.pointSize
 						}
 					}
 
@@ -105,8 +97,8 @@ Flickable {
 								id: email
 								placeholderText: qsTr("E-mail")
 								font {
-									pointSize: 16
-									family: doesntEmbed ? "Roboto" : regular.name
+									family: Bootstrap.bodyFont.family
+									pointSize: Eduport.fontSizeFormControl
 								}
 								Layout.fillWidth: true
 								Layout.fillHeight: true
@@ -123,8 +115,11 @@ Flickable {
 					Label {
 						text: qsTr("Password *")
 						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap
+								.bodyFont.family
+							pointSize: Bootstrap
+								.bodyFont
+								.pointSize
 						}
 					}
 
@@ -139,7 +134,7 @@ Flickable {
 							anchors.fill: parent
 
 							Image {
-								source: "Font-Awesome/svgs/solid/lock.svg"
+								source: "../Font-Awesome/svgs/solid/lock.svg"
 								Layout.maximumHeight: 24
 								Layout.maximumWidth: 24
 								Layout.margins: 16
@@ -150,8 +145,8 @@ Flickable {
 								placeholderText: "*********"
 								echoMode: TextInput.Password
 								font {
-									pointSize: 16
-									family: doesntEmbed ? "Roboto" : regular.name
+									family: Bootstrap.bodyFont.family
+									pointSize: Eduport.fontSizeFormControl
 								}
 								Layout.fillWidth: true
 								Layout.fillHeight: true
@@ -168,8 +163,11 @@ Flickable {
 					Label {
 						text: qsTr("Confirm Password *")
 						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap
+								.bodyFont.family
+							pointSize: Bootstrap
+								.bodyFont
+								.pointSize
 						}
 					}
 
@@ -184,7 +182,7 @@ Flickable {
 							anchors.fill: parent
 
 							Image {
-								source: "Font-Awesome/svgs/solid/lock.svg"
+								source: "../Font-Awesome/svgs/solid/lock.svg"
 								Layout.maximumHeight: 24
 								Layout.maximumWidth: 24
 								Layout.margins: 16
@@ -195,8 +193,8 @@ Flickable {
 								placeholderText: "*********"
 								echoMode: TextInput.Password
 								font {
-									pointSize: 16
-									family: doesntEmbed ? "Roboto" : regular.name
+									family: Bootstrap.bodyFont.family
+									pointSize: Eduport.fontSizeFormControl
 								}
 								Layout.fillWidth: true
 								Layout.fillHeight: true
@@ -215,8 +213,8 @@ Flickable {
 						id: agreementCheckBox
 						text: "By signing up, you agree to the <a href=\"#\">terms of service</a>"
 						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : regular.name
+							family: Bootstrap.bodyFont.family
+							pointSize: Bootstrap.bodyFont.pointSize
 						}
 						Layout.fillWidth: true
 						contentItem: Text {
@@ -229,28 +227,11 @@ Flickable {
 					}
 				}
 
-				Button {
+				BsBtn.Primary {
 					id: button
 					text: qsTr("Sign Up")
 					implicitHeight: 40
 					Layout.fillWidth: true
-
-					contentItem: Text {
-						color: "#ffffff"
-						text: button.text
-						horizontalAlignment: Text.AlignHCenter
-						verticalAlignment: Text.AlignVCenter
-						font {
-							pointSize: 15
-							family: doesntEmbed ? "Roboto" : medium.name
-							weight: Font.Medium
-						}
-					}
-
-					background: Rectangle {
-						color: button.down ? "#0555a1" : button.enabled ? "#066ac9" : "#a6066ac9"
-						radius: 8
-					}
 				}
 			}
 
@@ -260,8 +241,8 @@ Flickable {
 				Label {
 					text: qsTr("Already have an account?")
 					font {
-						pointSize: 15
-						family: doesntEmbed ? "Roboto" : regular.name
+						family: Bootstrap.bodyFont.family
+						pointSize: Bootstrap.bodyFont.pointSize
 					}
 				}
 
@@ -269,8 +250,8 @@ Flickable {
 					id: signIn
 					text: "<a href=\"sign-in.html\">Sign in here</a>"
 					font {
-						pointSize: 15
-						family: doesntEmbed ? "Roboto" : regular.name
+						family: Bootstrap.bodyFont.family
+						pointSize: Bootstrap.bodyFont.pointSize
 						underline: false
 					}
 					linkColor: Qt.rgba(.0235, .416, .788, 1.0)
diff --git a/Bootstrap.qrc b/Bootstrap.qrc
index 5eaf642..2a98d8e 100644
--- a/Bootstrap.qrc
+++ b/Bootstrap.qrc
@@ -1,8 +1,5 @@
 <!DOCTYPE RCC><RCC version="1.0">
 	<qresource prefix="qeduport">
-		<file>imports/Bootstrap/Bootstrap.qml</file>
-		<file>imports/Bootstrap/qmldir</file>
-		<file>Bootstrap/Button/Primary.ui.qml</file>
 		<file>Bootstrap/icons/patch-check-fill.svg</file>
 		<file>Bootstrap/icons/envelope-fill.svg</file>
 	</qresource>
diff --git a/Bootstrap/icons/LICENSE.md b/Bootstrap/LICENSE.md
index 47f06b6..47f06b6 100644
--- a/Bootstrap/icons/LICENSE.md
+++ b/Bootstrap/LICENSE.md
diff --git a/Bootstrap/Button/Primary.ui.qml b/Button/Primary.ui.qml
index e99f56b..e99f56b 100644
--- a/Bootstrap/Button/Primary.ui.qml
+++ b/Button/Primary.ui.qml
diff --git a/Eduport.qrc b/Eduport.qrc
new file mode 100644
index 0000000..d529e0e
--- /dev/null
+++ b/Eduport.qrc
@@ -0,0 +1,9 @@
+<!DOCTYPE RCC><RCC version="1.0">
+	<qresource prefix="qeduport">
+		<file>imports/Bootstrap/Bootstrap.qml</file>
+		<file>imports/Bootstrap/qmldir</file>
+		<file>imports/Eduport/Eduport.qml</file>
+		<file>imports/Eduport/qmldir</file>
+		<file>Button/Primary.ui.qml</file>
+	</qresource>
+</RCC>
diff --git a/imports/Bootstrap/Bootstrap.qml b/imports/Bootstrap/Bootstrap.qml
index 321eedf..3afa941 100644
--- a/imports/Bootstrap/Bootstrap.qml
+++ b/imports/Bootstrap/Bootstrap.qml
@@ -1,5 +1,4 @@
 pragma Singleton
-
 import QtQuick 2.15
 
 QtObject {
@@ -16,9 +15,16 @@ QtObject {
 	readonly property FontLoader medium: FontLoader {
 		source: haveRoboto ? "" : "../../Roboto/Roboto-Medium.ttf"
 	}
+	readonly property FontLoader regular: FontLoader {
+		source: haveRoboto ? "" : "../../Roboto/Roboto-Regular.ttf"
+	}
+	readonly property font bodyFont: Qt.font({
+		family: haveRoboto ? "Roboto" : regular.name,
+		pointSize: 15
+	})
 	readonly property font btnFont: Qt.font({
-		pointSize: 15,
 		family: haveRoboto ? "Roboto" : medium.name,
+		pointSize: 15,
 		weight: Font.Medium
 	})
 }
diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml
new file mode 100644
index 0000000..b966920
--- /dev/null
+++ b/imports/Eduport/Eduport.qml
@@ -0,0 +1,15 @@
+pragma Singleton
+import QtQuick 2.15
+
+QtObject {
+	readonly property real fontSizeLead: 18.75
+	readonly property real fontSizeFormControl: 16
+	readonly property real fontSizeFormText: 14
+
+	readonly property FontLoader heebo: FontLoader {
+		source: "../../Heebo/Heebo-Bold.ttf"
+	}
+	readonly property font hFont: Qt.font({
+		family: heebo.name
+	})
+}
diff --git a/imports/Eduport/qmldir b/imports/Eduport/qmldir
new file mode 100644
index 0000000..4318031
--- /dev/null
+++ b/imports/Eduport/qmldir
@@ -0,0 +1,2 @@
+module Eduport
+singleton Eduport 1.0 Eduport.qml