Each header has its own QML

18 files changed, 67 insertions, 52 deletions

diff --git a/Authentication/SignIn.ui.qml b/Authentication/SignIn.ui.qml
index f36f61d..9f54dd6 100644
--- a/Authentication/SignIn.ui.qml
+++ b/Authentication/SignIn.ui.qml
@@ -35,13 +35,9 @@ Flickable {
 				ColumnLayout {
 					id: columnLayout
 
-					Lbl.Hx {
+					Lbl.H2 {
 						Layout.fillWidth: true
 						text: titleHeader
-						font.pointSize: 21.75
-								+ .013125
-								* columnLayout
-									.width
 					}
 
 					Lbl.Body {
diff --git a/Authentication/SignUp.ui.qml b/Authentication/SignUp.ui.qml
index 683ee7b..1732530 100644
--- a/Authentication/SignUp.ui.qml
+++ b/Authentication/SignUp.ui.qml
@@ -36,13 +36,9 @@ Flickable {
 				ColumnLayout {
 					id: columnLayout
 
-					Lbl.Hx {
+					Lbl.H2 {
 						Layout.fillWidth: true
 						text: titleHeader
-						font.pointSize: 21.75
-								+ .013125
-								* columnLayout
-									.width
 					}
 
 					Lbl.Body {
diff --git a/Course/Detail/Classic.ui.qml b/Course/Detail/Classic.ui.qml
index f09692b..4a1f1a9 100644
--- a/Course/Detail/Classic.ui.qml
+++ b/Course/Detail/Classic.ui.qml
@@ -42,7 +42,7 @@ Flickable {
 					implicitHeight: introBadge.height
 					radius: 5.2
 					color: Qt.rgba( .0235, .416, .788, 1.0)
-					Lbl.Hx {
+					Lbl.H6 {
 						id: introBadge
 						text: qsTr("Digital Marketing")
 						color: "white"
@@ -59,13 +59,11 @@ Flickable {
 					}
 				}
 
-				Lbl.Hx {
+				Lbl.H1 {
 					id: introTitleHeader
 					text: qsTr("The Complete Digital Marketing Course - 12 Courses in 1")
 					color: "#24292d"
 					Layout.fillWidth: true
-					font.pointSize: 22.5
-							+ .01875 * parent.width
 				}
 
 				Lbl.Body {
diff --git a/Course/Detail/Classic/Content/Main.ui.qml b/Course/Detail/Classic/Content/Main.ui.qml
index b4d8321..a1071e7 100644
--- a/Course/Detail/Classic/Content/Main.ui.qml
+++ b/Course/Detail/Classic/Content/Main.ui.qml
@@ -97,14 +97,11 @@ ColumnLayout {
 					ColumnLayout {
 						id: overview
 
-						Lbl.Hx {
+						Lbl.H5 {
 							text: qsTr("Course Description")
 							color: "#24292d"
 							Layout.fillWidth: true
 							Layout.bottomMargin: 16
-							font.pointSize: 20.1
-								+ .00075
-								* parent.width
 						}
 
 						Lbl.Body {
diff --git a/Course/Detail/Classic/Content/Sidebar.ui.qml b/Course/Detail/Classic/Content/Sidebar.ui.qml
index a3a1732..af994db 100644
--- a/Course/Detail/Classic/Content/Sidebar.ui.qml
+++ b/Course/Detail/Classic/Content/Sidebar.ui.qml
@@ -103,13 +103,8 @@ ColumnLayout {
 
 						RowLayout {
 
-							Lbl.Hx {
+							Lbl.H3 {
 								text: priceText
-								font.pointSize
-									: 21
-									+ .0075
-									* parent
-									.width
 							}
 
 							Lbl.Body {
diff --git a/Eduport.qrc b/Eduport.qrc
index 007b787..d257524 100644
--- a/Eduport.qrc
+++ b/Eduport.qrc
@@ -7,7 +7,13 @@
 		<file>imports/Bootstrap/qmldir</file>
 		<file>imports/Eduport/Eduport.qml</file>
 		<file>imports/Eduport/qmldir</file>
-		<file>Label/Hx.ui.qml</file>
+		<file>Label/H6.ui.qml</file>
+		<file>Label/H5.ui.qml</file>
+		<file>Label/H4.ui.qml</file>
+		<file>Label/H3.ui.qml</file>
+		<file>Label/H2.ui.qml</file>
+		<file>Label/H1.ui.qml</file>
+		<file>Label/Display6.ui.qml</file>
 		<file>Label/Body.ui.qml</file>
 		<file>TextField/Input.ui.qml</file>
 		<file>Button/Primary.ui.qml</file>
diff --git a/Home/Default.ui.qml b/Home/Default.ui.qml
index 4ff99b3..5d1a8ee 100644
--- a/Home/Default.ui.qml
+++ b/Home/Default.ui.qml
@@ -42,13 +42,11 @@ Flickable {
 				Layout.maximumWidth: body.width < 992
 					? body.width : body.width / 2
 
-				Lbl.Hx {
+				Lbl.Display6 {
 					text: bannerTitleText
 					color: "#24292d"
 					horizontalAlignment: Text.AlignHCenter
 					Layout.fillWidth: true
-					font.pointSize: 23.6
-							+ .027 * parent.width
 				}
 
 				Lbl.Body {
@@ -191,14 +189,12 @@ Flickable {
 			ColumnLayout {
 				Layout.bottomMargin: 25.6
 
-				Lbl.Hx {
+				Lbl.H1 {
 					text: qsTr("Most Popular Courses")
 					color: "#24292d"
 					horizontalAlignment: Text.AlignHCenter
 					Layout.fillWidth: true
 					Layout.bottomMargin: 8
-					font.pointSize: 22.5
-							+ .01875 * parent.width
 				}
 
 				Lbl.Body {
diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml
index d2ad479..da56fdb 100644
--- a/Home/Default/Card.ui.qml
+++ b/Home/Default/Card.ui.qml
@@ -115,13 +115,12 @@ Item {
 				}
 			}
 
-			Lbl.Hx {
+			Lbl.H5 {
 				id: title
 				text: titleText
 				color: Qt.rgba(.141, .161, .176, 1.0)
 				Layout.fillWidth: true
 				Layout.bottomMargin: 8
-				font.pointSize: 20.1 + .00075 * parent.width
 
 				MouseArea {
 					id: titleArea
diff --git a/Home/Default/Counter.ui.qml b/Home/Default/Counter.ui.qml
index 77f1e74..f33344b 100644
--- a/Home/Default/Counter.ui.qml
+++ b/Home/Default/Counter.ui.qml
@@ -38,10 +38,8 @@ Item {
 					leftMargin: 25.6
 				}
 
-				Lbl.Hx {
+				Lbl.H5 {
 					text: count
-					font.pointSize: 20.1
-							+ .00075 * parent.width
 					Layout.fillWidth: true
 				}
 
diff --git a/Label/Display6.ui.qml b/Label/Display6.ui.qml
new file mode 100644
index 0000000..b82734b
--- /dev/null
+++ b/Label/Display6.ui.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import ".."
+
+H6 {
+	font.pointSize: 23.6 + .027 * parent.width
+}
diff --git a/Label/H1.ui.qml b/Label/H1.ui.qml
new file mode 100644
index 0000000..675e6b1
--- /dev/null
+++ b/Label/H1.ui.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import ".."
+
+H6 {
+	font.pointSize: 22.5 + .01875 * parent.width
+}
diff --git a/Label/H2.ui.qml b/Label/H2.ui.qml
new file mode 100644
index 0000000..a320de6
--- /dev/null
+++ b/Label/H2.ui.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import ".."
+
+H6 {
+	font.pointSize: 21.75 + .013125 * parent.width
+}
diff --git a/Label/H3.ui.qml b/Label/H3.ui.qml
new file mode 100644
index 0000000..3f1f09d
--- /dev/null
+++ b/Label/H3.ui.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import ".."
+
+H6 {
+	font.pointSize: 21 + .0075 * parent.width
+}
diff --git a/Label/H4.ui.qml b/Label/H4.ui.qml
new file mode 100644
index 0000000..c3c363f
--- /dev/null
+++ b/Label/H4.ui.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import ".."
+
+H6 {
+	font.pointSize: 20.625 + .0046875 * parent.width
+}
diff --git a/Label/H5.ui.qml b/Label/H5.ui.qml
new file mode 100644
index 0000000..59bc98f
--- /dev/null
+++ b/Label/H5.ui.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import ".."
+
+H6 {
+	font.pointSize: 20.1 + .00075 * parent.width
+}
diff --git a/Label/Hx.ui.qml b/Label/H6.ui.qml
index ed008c5..ed008c5 100644
--- a/Label/Hx.ui.qml
+++ b/Label/H6.ui.qml
diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml
index 97125c5..7b57110 100644
--- a/Shop/Checkout.ui.qml
+++ b/Shop/Checkout.ui.qml
@@ -76,11 +76,8 @@ Flickable {
 							right: parent.right
 						}
 
-						Lbl.Hx {
+						Lbl.H5 {
 							text: qsTr("Personal Details")
-							font.pointSize: 20.1
-								+ .00075
-								* parent.width
 							Layout.fillWidth: true
 							Layout.rightMargin: 16
 							Layout.leftMargin: 16
@@ -273,9 +270,8 @@ Flickable {
 
 						ColumnLayout {
 
-							Lbl.Hx {
+							Lbl.H5 {
 								text: qsTr("Payment method")
-								font.pointSize: 20.1 + .00075 * parent.width
 								Layout.fillWidth: true
 								Layout.margins: 16
 							}
@@ -406,11 +402,9 @@ Flickable {
 							left: parent.left
 							right: parent.right
 						}
-						Lbl.Hx {
+
+						Lbl.H4 {
 							text: qsTr("Order Summary")
-							font.pointSize: 20.625
-								+ .0046875
-								* parent.width
 							Layout.fillWidth: true
 							Layout.rightMargin: 16
 							Layout.leftMargin: 16
@@ -541,7 +535,7 @@ Flickable {
 									anchors.verticalCenter: parent.verticalCenter
 								}
 
-								Lbl.Hx {
+								Lbl.H6 {
 									id: priceValue
 									text: "$500"
 									anchors {
@@ -582,17 +576,15 @@ Flickable {
 								implicitHeight: totalLabel.implicitHeight
 												+ totalValue.implicitHeight
 
-								Lbl.Hx {
+								Lbl.H5 {
 									id: totalLabel
 									text: qsTr("Total")
-									font.pointSize: 20.1 + .00075 * parent.width
 									anchors.verticalCenter: parent.verticalCenter
 								}
 
-								Lbl.Hx {
+								Lbl.H5 {
 									id: totalValue
 									text: "$480"
-									font.pointSize: 20.1 + .00075 * parent.width
 									anchors {
 										right: parent.right
 										verticalCenter: parent.verticalCenter
diff --git a/Shop/Course.ui.qml b/Shop/Course.ui.qml
index 5409de9..b743ee5 100644
--- a/Shop/Course.ui.qml
+++ b/Shop/Course.ui.qml
@@ -54,7 +54,7 @@ ColumnLayout {
 	       ColumnLayout {
 			Layout.topMargin: 16
 
-			Lbl.Hx {
+			Lbl.H6 {
 				Layout.fillWidth: true
 				text: titleText
 			}