chore(@desktop/wallet): Use transparent background and add scroll shadow (#11118)

ui/app/AppLayouts/Wallet/views/TransactionDetailView.qml

@@ -575,9 +575,11 @@ Item {
         width: parent.width
         height: detailsColumn.childrenRect.height
         default property alias content: detailsColumn.children
+
         Rectangle {
             id: tileBackground
             anchors.fill: parent
+            color: Style.current.transparent
             radius: 8
             border.width: 1
             border.color: Style.current.separator
@@ -590,7 +592,12 @@ Item {
             spacing: 0
             layer.enabled: true
             layer.effect: OpacityMask {
-                maskSource: tileBackground
+                // Separate rectangle is used as mask because background rectangle must be transaprent
+                maskSource: Rectangle {
+                    width: tileBackground.width
+                    height: tileBackground.height
+                    radius: tileBackground.radius
+                }
             }
         }
     }

ui/imports/shared/controls/TransactionDataTile.qml

@@ -5,6 +5,7 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
 
+import utils 1.0
 import shared.panels 1.0
 
 /*!
@@ -61,6 +62,7 @@ StatusListItem {
     height: visible ? implicitHeight + bottomPadding : 0
     radius: 0
     sensor.cursorShape: Qt.ArrowCursor
+    color: sensor.containsMouse ? Theme.palette.baseColor5 : Style.current.transparent
 
     // Title
     statusListItemTitle.customColor: Theme.palette.directColor5

ui/imports/shared/controls/TransactionDelegate.qml

@@ -399,7 +399,7 @@ StatusListItem {
 
     rightPadding: 16
     enabled: !loading
-    color: sensor.containsMouse ? Theme.palette.baseColor5 : Theme.palette.statusListItem.backgroundColor
+    color: sensor.containsMouse ? Theme.palette.baseColor5 : Style.current.transparent
 
     statusListItemIcon.active: (loading || root.asset.name)
     asset {

ui/imports/shared/views/HistoryView.qml

@@ -74,20 +74,26 @@ ColumnLayout {
         store: WalletStores.RootStore
     }
 
-    Separator {
+    Item {
-        Layout.fillWidth: true
-        visible: filterComponent.visible
-    }
-
-    StatusListView {
-        id: transactionListRoot
-        objectName: "walletAccountTransactionList"
         Layout.alignment: Qt.AlignTop
         Layout.topMargin: nonArchivalNodeError.visible || noTxs.visible ? Style.current.padding : 0
         Layout.bottomMargin: Style.current.padding
         Layout.fillWidth: true
         Layout.fillHeight: true
 
+        Rectangle { // Shadow behind delegates when scrolling
+            anchors.top: topListSeparator.bottom
+            width: parent.width
+            height: 4
+            color: Style.current.separator
+            visible: topListSeparator.visible
+        }
+
+        StatusListView {
+            id: transactionListRoot
+            objectName: "walletAccountTransactionList"
+            anchors.fill: parent
+
             property string firstSection
 
             model: SortFilterProxyModel {
@@ -168,7 +174,6 @@ ColumnLayout {
                     Layout.fillWidth: true
                     Layout.topMargin: 20
                     implicitHeight: 1
-                visible: !sectionDelegate.isFirstSection
                 }
 
                 StatusTextWithLoadingState {
@@ -199,6 +204,13 @@ ColumnLayout {
             onAtYEndChanged: if(atYEnd) RootStore.fetchMoreTransactions()
         }
 
+        Separator {
+            id: topListSeparator
+            width: parent.width
+            visible: !transactionListRoot.atYBeginning
+        }
+    }
+
     StatusMenu {
         id: delegateMenu