fix: Add close button to seed backup warning

Fixes: #2248.

Add a close button to the seed backup warning banner in the wallet. The banner will reappear upon application restart as long as the seed hasn’t already been backed up (`profileModel.mnemonic.isBackedUp`).

A new .svg with a white outline needed to be added as well because the original “close.svg” had a purple outline, which would show up when the ColorOverlay applied to the close button had an opacity less than 1.0.

ui/app/AppLayouts/Wallet/SeedPhraseBackupWarning.qml

@@ -1,16 +1,19 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
 import "../../../imports"
 import "../../../shared"
 import "../Profile/Sections"
 import "."
 
 Rectangle {
+    id: root
     visible: !profileModel.mnemonic.isBackedUp
     height: visible ? 32 : 0
     Layout.fillWidth: true
     color: Style.current.red
+
     Row {
         spacing: Style.current.halfPadding
         anchors.horizontalCenter: parent.horizontalCenter
@@ -57,6 +60,31 @@ Rectangle {
         }
     }
 
+    SVGImage {
+        id: closeImg
+        anchors.top: parent.top
+        anchors.topMargin: 6
+        anchors.right: parent.right
+        anchors.rightMargin: 18
+        source: "../../img/close-white.svg"
+        height: 20
+        width: 20
+    }
+    ColorOverlay {
+        anchors.fill: closeImg
+        source: closeImg
+        color: Style.current.white
+        opacity: 0.7
+    }
+    MouseArea {
+        anchors.fill: closeImg
+        cursorShape: Qt.PointingHandCursor
+        onClicked: ParallelAnimation {
+            PropertyAnimation { target: root; property: "visible"; to: false; }
+            PropertyAnimation { target: root; property: "y"; to: -1 * root.height }
+        }
+    }
+
 
     BackupSeedModal {
         id: backupSeedModal

ui/app/img/close-white.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6866 5.31319C10.8818 5.50846 10.8818 5.82504 10.6866 6.0203L8.94244 7.76442C8.81227 7.89459 8.81227 8.10565 8.94244 8.23582L10.6866 9.97994C10.8818 10.1752 10.8818 10.4918 10.6866 10.687C10.4913 10.8823 10.1747 10.8823 9.97945 10.687L8.23534 8.94293C8.10516 8.81276 7.89411 8.81276 7.76393 8.94293L6.01989 10.687C5.82463 10.8822 5.50805 10.8822 5.31279 10.687C5.11753 10.4917 5.11753 10.1751 5.31279 9.97986L7.05682 8.23582C7.187 8.10565 7.187 7.89459 7.05682 7.76442L5.31279 6.02038C5.11753 5.82512 5.11753 5.50854 5.31279 5.31328C5.50805 5.11801 5.82463 5.11801 6.01989 5.31328L7.76393 7.05731C7.89411 7.18749 8.10516 7.18749 8.23534 7.05731L9.97945 5.31319C10.1747 5.11793 10.4913 5.11793 10.6866 5.31319Z" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99967 14.6668C11.6816 14.6668 14.6663 11.6821 14.6663 8.00016C14.6663 4.31826 11.6816 1.3335 7.99967 1.3335C4.31778 1.3335 1.33301 4.31826 1.33301 8.00016C1.33301 11.6821 4.31778 14.6668 7.99967 14.6668ZM7.99967 13.6668C11.1293 13.6668 13.6663 11.1298 13.6663 8.00016C13.6663 4.87055 11.1293 2.3335 7.99967 2.3335C4.87006 2.3335 2.33301 4.87055 2.33301 8.00016C2.33301 11.1298 4.87006 13.6668 7.99967 13.6668Z" fill="#FFFFFF"/>
+</svg>