Success button and its reuse

5 files changed, 52 insertions, 34 deletions

diff --git a/Button/Success.ui.qml b/Button/Success.ui.qml
new file mode 100644
index 0000000..41cc498
--- /dev/null
+++ b/Button/Success.ui.qml
@@ -0,0 +1,22 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import Bootstrap 5.3
+
+Btn {
+	id: button
+	background: Rectangle {
+		color: button.down ? Bootstrap.btnSuccessActiveBG
+			: button.enabled
+			? Bootstrap.btnSuccessBg
+			: Bootstrap.btnSuccessDisabledBg
+		border {
+			width: Bootstrap.btnBorderWidth
+			color: button.down
+				? Bootstrap.btnSuccessActiveBorderColor
+				: button.enabled
+				? Bootstrap.btnSuccessBorderColor
+				: Bootstrap.btnSuccessDisabledBorderColor
+		}
+		radius: Bootstrap.btnBorderRadius
+	}
+}
diff --git a/Course/Detail/Classic/Content/Sidebar.ui.qml b/Course/Detail/Classic/Content/Sidebar.ui.qml
index af994db..01ab830 100644
--- a/Course/Detail/Classic/Content/Sidebar.ui.qml
+++ b/Course/Detail/Classic/Content/Sidebar.ui.qml
@@ -5,6 +5,7 @@ import QtGraphicalEffects 1.15
 import QtMultimedia 5.15
 import Bootstrap 5.3
 import "../../../../Label" as Lbl
+import "../../../../Button" as Btn
 
 ColumnLayout {
 	property alias image: image
@@ -190,32 +191,9 @@ ColumnLayout {
 						}
 					}
 
-					Button {
+					Btn.Success {
 						id: buy
-						horizontalPadding: 16
-						verticalPadding: 8
 						text: qsTr("Buy course")
-						font: Bootstrap.btnFont
-						contentItem: Text {
-							horizontalAlignment
-								: Text
-								.AlignHCenter
-							text: buy.text
-							font: buy.font
-							color: "#ffffff"
-						}
-						background: Rectangle {
-							radius: 5.2
-							color: buy.down
-								? "#0aa073"
-								: "#0cbc87"
-							border {
-								color: buy.down
-								? "#0a966c"
-								: "#0cbc87"
-								width: 1
-							}
-						}
 					}
 				}
 			}
diff --git a/Eduport.qrc b/Eduport.qrc
index d165114..da7bcac 100644
--- a/Eduport.qrc
+++ b/Eduport.qrc
@@ -18,5 +18,6 @@
 		<file>TextField/Input.ui.qml</file>
 		<file>Button/Btn.ui.qml</file>
 		<file>Button/Primary.ui.qml</file>
+		<file>Button/Success.ui.qml</file>
 	</qresource>
 </RCC>
diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml
index 5358c46..0409590 100644
--- a/Shop/Checkout.ui.qml
+++ b/Shop/Checkout.ui.qml
@@ -5,6 +5,7 @@ import Bootstrap 5.3
 import Eduport 1.4
 import "../TextField" as TxtFld
 import "../Label" as Lbl
+import "../Button" as Btn
 
 Flickable {
 	property alias alert: alert
@@ -591,23 +592,31 @@ Flickable {
 							}
 						}
 
-						Button {
+						Btn.Success {
 							id: placeOrder
 							Layout.margins: 16
 							Layout.fillWidth: true
 							text: qsTr("Place Order")
-							font: Bootstrap.btnFont
 							implicitHeight: 36
-							contentItem: Text {
-								text: placeOrder.text
-								font: placeOrder.font
-								color: "#ffffff"
-								horizontalAlignment: Text.AlignHCenter
-								verticalAlignment: Text.AlignVCenter
+							font {
+								family: Bootstrap.btnFont.family
+								weight: Bootstrap.btnFont.weight
+								pointSize: Bootstrap.btnLgFontSize
 							}
 							background: Rectangle {
-								color: "#0cbc87"
-								radius: 8
+								color: placeOrder.down ? Bootstrap.btnSuccessActiveBG
+									: placeOrder.enabled
+									? Bootstrap.btnSuccessBg
+									: Bootstrap.btnSuccessDisabledBg
+								border {
+									width: Bootstrap.btnBorderWidth
+									color: placeOrder.down
+										? Bootstrap.btnSuccessActiveBorderColor
+										: placeOrder.enabled
+										? Bootstrap.btnSuccessBorderColor
+										: Bootstrap.btnSuccessDisabledBorderColor
+								}
+								radius: Bootstrap.btnLgBorderRadius
 							}
 						}
 					}
diff --git a/imports/Bootstrap/Bootstrap.qml b/imports/Bootstrap/Bootstrap.qml
index 31c6aa3..7019a86 100644
--- a/imports/Bootstrap/Bootstrap.qml
+++ b/imports/Bootstrap/Bootstrap.qml
@@ -16,12 +16,20 @@ QtObject {
 	readonly property real btnBorderWidth: 1
 	readonly property color btnBorderColor: "transparent"
 	readonly property real btnBorderRadius: 5.2
+	readonly property real btnLgFontSize: 16
+	readonly property real btnLgBorderRadius: 5.2
 	readonly property color btnPrimaryBg: "#066ac9"
 	readonly property color btnPrimaryBorderColor: "#066ac9"
 	readonly property color btnPrimaryActiveBg: "#0555a1"
 	readonly property color btnPrimaryActiveBorderColor: "#055097"
 	readonly property color btnPrimaryDisabledBg: "#a6066ac9"
 	readonly property color btnPrimaryDisabledBorderColor: "#a6066ac9"
+	readonly property color btnSuccessBg: "#0cbc87"
+	readonly property color btnSuccessBorderColor: "#0cbc87"
+	readonly property color btnSuccessActiveBg: "#0a966c"
+	readonly property color btnSuccessActiveBorderColor: "#098d65"
+	readonly property color btnSuccessDisabledBg: "#a60cbc87"
+	readonly property color btnSuccessDisabledBorderColor: "#a60cbc87"
 
 	readonly property font bodyFont: Qt.font({
 		family: haveRoboto ? "Roboto" : regular.name,