Reimplement Qt5 ColorOverlay using Qt6 MultiEffect

https://stackoverflow.com/questions/70809206/color-overlay-an-image-in-qml-qt6#77060406
Even though the answer is not checked, but the Qt6.8 works, and after
following the suggestion in its comment about brightness.

The MultiEffect needs to be put outside of the Image when they're on a
Button. Having MultiEffect as the Image layer's effect only works when
it's not on a Button.

9 files changed, 128 insertions, 111 deletions

diff --git a/Authentication/SignIn.ui.qml b/Authentication/SignIn.ui.qml
index 1e71e2b..d35eb39 100644
--- a/Authentication/SignIn.ui.qml
+++ b/Authentication/SignIn.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 import Eduport
 import "../TextField" as TxtFld
@@ -87,15 +87,13 @@ Flickable {
 									20
 								}
 
-								ColorOverlay {
-									color:
-									Eduport
-									.bsSecondary
-									source:
-									parent
-									anchors
-									.fill:
-									parent
+								layer {
+									enabled: true
+									effect: MultiEffect {
+										brightness: 1.0
+										colorization: 1.0
+										colorizationColor: Eduport.bsSecondary
+									}
 								}
 							}
 
@@ -156,15 +154,13 @@ Flickable {
 									20
 								}
 
-								ColorOverlay {
-									color:
-									Eduport
-									.bsSecondary
-									source:
-									parent
-									anchors
-									.fill:
-									parent
+								layer {
+									enabled: true
+									effect: MultiEffect {
+										brightness: 1.0
+										colorization: 1.0
+										colorizationColor: Eduport.bsSecondary
+									}
 								}
 							}
 
diff --git a/Authentication/SignUp.ui.qml b/Authentication/SignUp.ui.qml
index dfdfda9..c7365c8 100644
--- a/Authentication/SignUp.ui.qml
+++ b/Authentication/SignUp.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 import Eduport
 import "../TextField" as TxtFld
@@ -89,15 +89,13 @@ Flickable {
 									20
 								}
 
-								ColorOverlay {
-									color:
-									Eduport
-									.bsSecondary
-									source:
-									parent
-									anchors
-									.fill:
-									parent
+								layer {
+									enabled: true
+									effect: MultiEffect {
+										brightness: 1.0
+										colorization: 1.0
+										colorizationColor: Eduport.bsSecondary
+									}
 								}
 							}
 
@@ -158,15 +156,13 @@ Flickable {
 									20
 								}
 
-								ColorOverlay {
-									color:
-									Eduport
-									.bsSecondary
-									source:
-									parent
-									anchors
-									.fill:
-									parent
+								layer {
+									enabled: true
+									effect: MultiEffect {
+										brightness: 1.0
+										colorization: 1.0
+										colorizationColor: Eduport.bsSecondary
+									}
 								}
 							}
 
@@ -231,15 +227,13 @@ Flickable {
 									20
 								}
 
-								ColorOverlay {
-									color:
-									Eduport
-									.bsSecondary
-									source:
-									parent
-									anchors
-									.fill:
-									parent
+								layer {
+									enabled: true
+									effect: MultiEffect {
+										brightness: 1.0
+										colorization: 1.0
+										colorizationColor: Eduport.bsSecondary
+									}
 								}
 							}
 
diff --git a/Button/Sm.ui.qml b/Button/Sm.ui.qml
index 3cd3f74..06b60e9 100644
--- a/Button/Sm.ui.qml
+++ b/Button/Sm.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Eduport
 
 Button {
@@ -22,12 +22,13 @@ Button {
 				width: button.icon.width
 				height: button.icon.height
 			}
-
-			ColorOverlay {
-				color: checked
-					? Eduport.bsGray800 : Eduport.bsBtnColor
-				source: parent
-				anchors.fill: parent
+			layer {
+				enabled:true
+				effect: MultiEffect {
+					brightness: 1.0
+					colorization: 1.0
+					colorizationColor: checked ? Eduport.bsGray800 : Eduport.bsBtnColor
+				}
 			}
 		}
 
diff --git a/Course/Detail/Classic/Content/Main/TabContents/Instructor/ListInlineItem.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Instructor/ListInlineItem.ui.qml
index 0851fd7..9eb36dc 100644
--- a/Course/Detail/Classic/Content/Main/TabContents/Instructor/ListInlineItem.ui.qml
+++ b/Course/Detail/Classic/Content/Main/TabContents/Instructor/ListInlineItem.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 
 RowLayout {
 
@@ -25,10 +25,13 @@ RowLayout {
 			Layout.minimumHeight: 12
 			Layout.minimumWidth: 12
 
-			ColorOverlay {
-				anchors.fill: inlineItemIcon
-				source: inlineItemIcon
-				color: "#fd7e14"
+			layer {
+				enabled:true
+				effect: MultiEffect {
+					brightness: 1.0
+					colorization: 1.0
+					colorizationColor: "#fd7e14"
+				}
 			}
 		}
 	}
diff --git a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
index 5c22f05..5c46ea2 100644
--- a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
+++ b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml
@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 import QtQuick.Effects
 import QtMultimedia
 import Bootstrap
@@ -134,11 +133,13 @@ ColumnLayout {
 							height: 15
 						}
 
-						ColorOverlay {
-							anchors.fill: parent
-							source: parent
-							color: Eduport
-								.bsDanger
+						layer {
+							enabled: true
+							effect: MultiEffect {
+								brightness: 1.0
+								colorization: 1.0
+								colorizationColor: Eduport.bsDanger
+							}
 						}
 					}
 
diff --git a/Course/Grid/Card.ui.qml b/Course/Grid/Card.ui.qml
index 194f42b..36893c2 100644
--- a/Course/Grid/Card.ui.qml
+++ b/Course/Grid/Card.ui.qml
@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Effects
 import Qt5Compat.GraphicalEffects
 
 Item {
@@ -200,10 +201,13 @@ Item {
 							source: "Material/svg/outlined/schedule.svg"
 							sourceSize.height: 16
 							sourceSize.width: 16
-							ColorOverlay {
-								anchors.fill: timerIcon
-								source: timerIcon
-								color: "#d6293e"
+							layer {
+								enabled: true
+								effect: MultiEffect {
+									brightness: 1.0
+									colorization: 1.0
+									colorizationColor: "#d6293e"
+								}
 							}
 						}
 
@@ -225,10 +229,13 @@ Item {
 							source: "Material/svg/outlined/table.svg"
 							sourceSize.height: 16
 							sourceSize.width: 16
-							ColorOverlay {
-								anchors.fill: lecturersIcon
-								source: lecturersIcon
-								color: "#fd7e14"
+							layer {
+								enabled: true
+								effect: MultiEffect {
+									brightness: 1.0
+									colorization: 1.0
+									colorizationColor: "#fd7e14"
+								}
 							}
 						}
 
diff --git a/Header.ui.qml b/Header.ui.qml
index 3b19cfb..3564934 100644
--- a/Header.ui.qml
+++ b/Header.ui.qml
@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 import QtQuick.Effects
 import Bootstrap
 import Eduport
@@ -116,14 +115,17 @@ ToolBar {
 		contentItem: Item {
 
 			Image {
+				id: cartImage
 				anchors.centerIn: parent
-				source: "Bootstrap/icons/cart3.svg"
 				fillMode: Image.PreserveAspectFit
-
-				ColorOverlay {
-					color: Eduport.bsGray900
-					source: parent
-					anchors.fill: parent
+				source: "Bootstrap/icons/cart3.svg"
+				layer {
+					enabled: true
+					effect: MultiEffect {
+						brightness: 1.0
+						colorization: 1.0
+						colorizationColor: Eduport.bsGray900
+					}
 				}
 			}
 		}
@@ -273,13 +275,15 @@ ToolBar {
 
 					Image {
 						source: menuItem.icon.source
-
-						ColorOverlay {
-							color: highlighted
-								? Eduport.bsDropdownLinkHoverColor
-								: Eduport.bsDropdownLinkColor
-							source: parent
-							anchors.fill: parent
+						layer {
+							enabled:true
+							effect: MultiEffect {
+								brightness: 1.0
+								colorization: 1.0
+								colorizationColor: highlighted
+											? Eduport.bsDropdownLinkHoverColor
+											: Eduport.bsDropdownLinkColor
+							}
 						}
 					}
 
diff --git a/Header/CartItem.ui.qml b/Header/CartItem.ui.qml
index f1897d7..d0af32c 100644
--- a/Header/CartItem.ui.qml
+++ b/Header/CartItem.ui.qml
@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 import QtQuick.Effects
 import Bootstrap
 import Eduport
@@ -64,16 +63,20 @@ ColumnLayout {
 
 				Button {
 					id: button
-					Layout.alignment: Qt.AlignTop
-								| Qt.AlignRight
-					contentItem: Image {
-						source:
-						"../Bootstrap/icons/x.svg"
-
-						ColorOverlay {
-							color: Eduport.bsGray600
-							source: parent
-							anchors.fill: parent
+					Layout.alignment: Qt.AlignTop | Qt.AlignRight
+					contentItem: Item {
+						Image {
+							id: xImage
+							anchors.centerIn: parent
+							fillMode: Image.PreserveAspectFit
+							source: "../Bootstrap/icons/x.svg"
+						}
+						MultiEffect {
+							source: xImage
+							anchors.fill: xImage
+							brightness: 1.0
+							colorization: 1.0
+							colorizationColor: Eduport.bsGray600
 						}
 					}
 					background: Rectangle {
diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml
index abe5eed..f0d8538 100644
--- a/Home/Default/Card.ui.qml
+++ b/Home/Default/Card.ui.qml
@@ -1,7 +1,6 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
 import QtQuick.Effects
 import Bootstrap
 import Eduport
@@ -184,10 +183,13 @@ Item {
 							width: 15
 							height: 13
 						}
-						ColorOverlay {
-							anchors.fill: parent
-							source: parent
-							color: "#f7c32e"
+						layer {
+							enabled:true
+							effect: MultiEffect {
+								brightness: 1.0
+								colorization: 1.0
+								colorizationColor: "#f7c32e"
+							}
 						}
 					}
 				}
@@ -239,10 +241,13 @@ Item {
 							width: 15
 							height: 15
 						}
-						ColorOverlay {
-							anchors.fill: parent
-							source: parent
-							color: "#d6293e"
+						layer {
+							enabled:true
+							effect: MultiEffect {
+								brightness: 1.0
+								colorization: 1.0
+								colorizationColor: "#d6293e"
+							}
 						}
 						Layout.rightMargin: 8
 					}
@@ -266,10 +271,13 @@ Item {
 							width: 15
 							height: 15
 						}
-						ColorOverlay {
-							anchors.fill: parent
-							source: parent
-							color: "#fd7e14"
+						layer {
+							enabled:true
+							effect: MultiEffect {
+								brightness: 1.0
+								colorization: 1.0
+								colorizationColor: "#fd7e14"
+							}
 						}
 						Layout.rightMargin: 8
 					}