From 58e292e9ab297cd97ba7bde4deac185d9d112e4b Mon Sep 17 00:00:00 2001
From: Eric Mastro <eric.mastro@gmail.com>
Date: Wed, 21 Apr 2021 17:39:05 +1000
Subject: [PATCH] fix: Add close button to seed backup warning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../Wallet/SeedPhraseBackupWarning.qml        | 28 +++++++++++++++++++
 ui/app/img/close-white.svg                    |  4 +++
 2 files changed, 32 insertions(+)
 create mode 100644 ui/app/img/close-white.svg

diff --git a/ui/app/AppLayouts/Wallet/SeedPhraseBackupWarning.qml b/ui/app/AppLayouts/Wallet/SeedPhraseBackupWarning.qml
index e7ccd75090..1aeab247fd 100644
--- a/ui/app/AppLayouts/Wallet/SeedPhraseBackupWarning.qml
+++ b/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
diff --git a/ui/app/img/close-white.svg b/ui/app/img/close-white.svg
new file mode 100644
index 0000000000..e9bd2f626a
--- /dev/null
+++ b/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>