2 files changed, 42 insertions, 33 deletions

diff --git a/Shop/Cart/Table/CourseItem.ui.qml b/Shop/Cart/Table/CourseItem.ui.qml
index a2f5d70..ea88a43 100644
--- a/Shop/Cart/Table/CourseItem.ui.qml
+++ b/Shop/Cart/Table/CourseItem.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"
@@ -12,29 +12,33 @@ GridLayout {
 	columns: width < 990 ? 1 : 2
 	rowSpacing: 8
 	columnSpacing: 8
-	Rectangle {
+
+	Image {
 		id: courseItemImage
-		width: 100
-		height: 75
-		Layout.maximumWidth: width
-		Layout.maximumHeight: height
-		radius: 8
 		Layout.rightMargin: 8
 		Layout.bottomMargin: 16
 		Layout.topMargin: 16
 		Layout.leftMargin: 8
 		Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-		Image {
-			id: courseItemImageSource
-			anchors.fill: parent
-			visible: false
-			source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+		source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+		sourceSize {
+			width: 100
+			height: 75
 		}
-		OpacityMask {
-			id: coursetemImageMask
-			anchors.fill: courseItemImage
-			source: courseItemImageSource
-			maskSource: courseItemImage
+		layer {
+			enabled: true
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
+			}
+		}
+		Rectangle {
+			id: maskRectangle
+			width: courseItemImage.sourceSize.width
+			height: courseItemImage.sourceSize.height
+			radius: 8
+			layer.enabled: true
+			visible: false
 		}
 	}
 
diff --git a/Shop/ProductDetail/LeftSidebar.ui.qml b/Shop/ProductDetail/LeftSidebar.ui.qml
index be1f47d..6025b8c 100644
--- a/Shop/ProductDetail/LeftSidebar.ui.qml
+++ b/Shop/ProductDetail/LeftSidebar.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Eduport
 import "../../Button"
 import "../../DropShadow"
@@ -11,29 +11,34 @@ Rectangle {
 	id: sidebarCard
 	height: sidebarCardImage.height + cardBody.height
 
-	Rectangle {
+	Image {
 		id: sidebarCardImage
-		width: parent.width
-		height: sidebarCardImage.width
-		radius: 8
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: parent.top
 		anchors.rightMargin: 0
 		anchors.leftMargin: 0
 		anchors.topMargin: 0
-		Image {
-			id: sidebarCardImageSource
-			anchors.fill: parent
-			visible: false
-			source: "https://eduport.webestica.com/assets/images/book/01.jpg"
-			fillMode: Image.PreserveAspectCrop
+		source: "https://eduport.webestica.com/assets/images/book/01.jpg"
+		sourceSize {
+			width: parent.width
+			height: sidebarCardImage.width
+		}
+		fillMode: Image.PreserveAspectCrop
+		layer {
+			enabled: true
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
+			}
 		}
-		OpacityMask {
-			id: sidebarCardImageMask
-			anchors.fill: sidebarCardImage
-			source: sidebarCardImageSource
-			maskSource: sidebarCardImage
+		Rectangle {
+			id: maskRectangle
+			width: sidebarCardImage.sourceSize.width
+			height: sidebarCardImage.sourceSize.height
+			radius: 8
+			layer.enabled: true
+			visible: false
 		}
 	}
 	RowLayout {