Light/Dark mode buttons start to function

4 files changed, 92 insertions, 15 deletions

diff --git a/Button/Sm.ui.qml b/Button/Sm.ui.qml
new file mode 100644
index 0000000..b4c5985
--- /dev/null
+++ b/Button/Sm.ui.qml
@@ -0,0 +1,26 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import Eduport 1.4
+
+Button {
+	id: button
+	horizontalPadding: 12.8
+	verticalPadding: 6.4
+	font {
+		family: Eduport.haveRoboto
+				? "Roboto" : Eduport.robotoMedium.name
+		weight: Font.Medium
+		pointSize: 13
+	}
+	contentItem: Text {
+		text: button.text
+		font: button.font
+		color: checked ? Eduport.bsGray800 : Eduport.bsBtnColor
+		horizontalAlignment: Text.AlignHCenter
+		verticalAlignment: Text.AlignVCenter
+	}
+	background: Rectangle {
+		color: checked ? Eduport.bsBodyBg : Eduport.bsBtnBg
+		radius: 3.2
+	}
+}
diff --git a/Eduport.qrc b/Eduport.qrc
index e997993..3c9a27d 100644
--- a/Eduport.qrc
+++ b/Eduport.qrc
@@ -19,6 +19,7 @@
 		<file>Button/Btn.ui.qml</file>
 		<file>Button/Primary.ui.qml</file>
 		<file>Button/Success.ui.qml</file>
+		<file>Button/Sm.ui.qml</file>
 		<file>Button/NavLink.ui.qml</file>
 		<file>Button/NavLink/TabsLine.ui.qml</file>
 		<file>Header.ui.qml</file>
diff --git a/Header.ui.qml b/Header.ui.qml
index 5001647..85fb1c4 100644
--- a/Header.ui.qml
+++ b/Header.ui.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
 import Eduport 1.4
 import "DropShadow" as DrpShdw
+import "Button" as Btn
 import "Label" as Lbl
 
 ToolBar {
@@ -17,6 +18,8 @@ ToolBar {
 	property alias accountSettings: accountSettings
 	property alias help: help
 	property alias log: log
+	property alias light: light
+	property alias dark: dark
 
 	background: Rectangle {
 		implicitHeight: 70
@@ -170,26 +173,57 @@ ToolBar {
 				Item {
 					implicitHeight: mode.height + 16
 
-					RowLayout {
-						id: mode
-						spacing: 0
+					Rectangle {
+						implicitHeight: mode.height
+									+ 8
+						color: Eduport.bsLight
+						radius: Eduport.bsBorderRadius
 						anchors {
 							left: parent.left
-							leftMargin: 4
 							right: parent.right
-							rightMargin: 4
 							bottom: parent.bottom
-							bottomMargin: 4
 						}
 
-						Button {
-							text: qsTr("Light")
-							Layout.fillWidth: true
-						}
+						RowLayout {
+							id: mode
+							spacing: 0
+							anchors {
+								left: parent
+									.left
+								leftMargin: 4
+								right: parent
+									.right
+								rightMargin: 4
+								verticalCenter
+								: parent
+								.verticalCenter
+							}
 
-						Button {
-							text: qsTr("Dark")
-							Layout.fillWidth: true
+							Btn.Sm {
+								id: light
+								text:
+								qsTr("Light")
+								Layout
+								.fillWidth:
+									true
+								checked: Eduport
+								.mode == Eduport
+								.Mode.Light
+								enabled: !checked
+							}
+
+							Btn.Sm {
+								id: dark
+								text:
+								qsTr("Dark")
+								Layout
+								.fillWidth:
+									true
+								checked: Eduport
+								.mode == Eduport
+								.Mode.Dark
+								enabled: !checked
+							}
 						}
 					}
 				}
diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml
index b77b0dc..933ef90 100644
--- a/imports/Eduport/Eduport.qml
+++ b/imports/Eduport/Eduport.qml
@@ -2,13 +2,19 @@ pragma Singleton
 import QtQuick 2.15
 
 QtObject {
+	enum Mode {
+		Light = 0,
+		Dark
+	}
+	property int mode: Eduport.Mode.Light
+
 	readonly property real leadFontSize: 18.75
 	readonly property real formControlFontSize: 16
 	readonly property real h6FontSize: 15
 	readonly property real formTextFontSize: 14
 
 	readonly property real navPillsBorderRadius: bsBtnBorderRadius
-	readonly property color navPillsLinkActiveColor: bsBtnColor
+	readonly property color navPillsLinkActiveColor: "#ffffff"
 	readonly property color navPillsLinkActiveBg: bsPrimary
 
 	readonly property font baseFont: Qt.font({
@@ -35,8 +41,15 @@ QtObject {
 	})
 
 	readonly property color bsPrimary: "#066ac9"
+	property color bsLight: "#f5f7f9"
+
 	readonly property real bsBadgeFontSize: 13.6
 
+	property color bsBodyBg: mode == Eduport.Mode.Light
+					? "#ffffff" : "#222529"
+
+	property real bsBorderRadius: 5.2
+
 	property real bsBoxShadowOffsetX: 0
 	property real bsBoxShadowOffsetY: 0
 	property int bsBoxShadowBlurRadius: 40
@@ -49,7 +62,7 @@ QtObject {
 		weight: Font.Medium,
 		pointSize: 15
 	})
-	readonly property color bsBtnColor: "#ffffff"
+	readonly property color bsBtnColor: "#747579"
 	readonly property color bsBtnBg: "transparent"
 	readonly property real bsBtnBorderWidth: 1
 	readonly property color bsBtnBorderColor: bsBtnBg
@@ -71,6 +84,9 @@ QtObject {
 	readonly property color bsBtnSuccessDisabledBorderColor:
 							bsBtnSuccessDisabledBg
 
+	property color bsGray800: mode == Eduport.Mode.Light
+					? "#24292d" : "#f7f5f5"
+
 	readonly property bool haveRoboto: Qt.platform.os === "android"
 					|| Qt.platform.os === "linux"
 					|| Qt.platform.os === "osx"