feat(@desktop/wallet): Make footer and header opaque with blurring ef…

…fect fixes #17180
status-im · Feb 4, 2025 · 8c327fb · 8c327fb
1 parent 2d549f4
commit 8c327fb
Showing 1 changed file with 37 additions and 19 deletions.
diff --git a/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml b/ui/app/AppLayouts/Wallet/panels/StickySendModalHeader.qml
@@ -94,29 +94,47 @@ Control {
         NumberAnimation { duration: 350 }
     }
 
-    background: Rectangle {
-        color: root.implicitHeight > d.bottomMargin ? Theme.palette.baseColor3: Theme.palette.transparent
-        radius: 8
-
-        layer.enabled: true
-        layer.effect: DropShadow {
-            horizontalOffset: 0
-            verticalOffset: 2
-            samples: 37
-            color: Theme.palette.dropShadow
+    background: Item {
+
+        ShaderEffectSource {
+            id: backgroundSource
+            sourceItem: root.Window ? root.Window.contentItem : null
+            anchors.fill: parent
+            live: true
         }
 
-        // cover for the bottom rounded corners
-        Rectangle {
-            width: parent.width
-            height: parent.radius
-            anchors.bottom: parent.bottom
-            color: parent.color
+        FastBlur {
+            anchors.fill: parent
+            source: backgroundSource
+            radius: 32
         }
 
-        StatusDialogDivider {
-            anchors.bottom: parent.bottom
-            width: parent.width
+        Rectangle {
+            anchors.fill: parent
+            color: root.implicitHeight > d.bottomMargin ? Theme.palette.baseColor3: Theme.palette.transparent
+            radius: 8
+            opacity: 0.9
+
+            layer.enabled: true
+            layer.effect: DropShadow {
+                horizontalOffset: 0
+                verticalOffset: 2
+                samples: 37
+                color: Theme.palette.dropShadow
+            }
+
+            // cover for the bottom rounded corners
+            Rectangle {
+                width: parent.width
+                height: parent.radius
+                anchors.bottom: parent.bottom
+                color: parent.color
+            }
+
+            StatusDialogDivider {
+                anchors.bottom: parent.bottom
+                width: parent.width
+            }
         }
     }