fix: qrcode popup should be its own modal

fixes #1457

ui/app/AppLayouts/Chat/components/ProfilePopup.qml

@@ -19,7 +19,6 @@ ModalPopup {
     property var text: ""
     property var alias: ""
     
-    property bool showQR: false
     property bool isEnsVerified: false
     property bool noFooter: false
     property bool isBlocked: false
@@ -43,7 +42,6 @@ ModalPopup {
         isBlocked = profileModel.isContactBlocked(this.fromAuthor);
         alias = chatsModel.alias(this.fromAuthor) || ""
         
-        showQR = false
         noFooter = !showFooter;
         popup.open()
     }
@@ -122,10 +120,25 @@ ModalPopup {
                     qrCodeButton.color = Style.current.grey
                 }
                 onClicked: {
-                    showQR = !showQR
+                    qrCodePopup.open()
                 }
             }
         }
+
+        QrPopup {
+            id: qrCodePopup
+            Image {
+                asynchronous: true
+                fillMode: Image.PreserveAspectFit
+                source: profileModel.qrCode(fromAuthor)
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: 212
+                width: 212
+                mipmap: true
+                smooth: false
+            }
+        }
     }
 
     Item {
@@ -169,26 +182,10 @@ ModalPopup {
         }
     }
 
-    Item {
-        anchors.fill: parent
-        visible: showQR
-        Image {
-            asynchronous: true
-            fillMode: Image.PreserveAspectFit
-            source: profileModel.qrCode(fromAuthor)
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            height: 212
-            width: 212
-            mipmap: true
-            smooth: false
-        }
-    }
 
     Item {
         anchors.fill: parent
         anchors.leftMargin: Style.current.smallPadding
-        visible: !showQR
 
         StyledText {
             id: labelEnsUsername

ui/shared/QrPopup.qml

@@ -0,0 +1,62 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
+import "../imports"
+
+Popup {
+    id: qrCodePopup
+    Overlay.modal: Rectangle {
+        color: "#60000000"
+    }
+    parent: Overlay.overlay
+    x: Math.round(((parent ? parent.width : 0) - width) / 2)
+    y: Math.round(((parent ? parent.height : 0) - height) / 2)
+    width: 320
+    height: 320
+    modal: true
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    background: Rectangle {
+        color: Style.current.background
+        radius: 8
+    }
+    Rectangle {
+        id: closeButton
+        height: 32
+        width: 32
+        anchors.top: parent.top
+        anchors.right: parent.right
+        property bool hovered: false
+        color: hovered ? Style.current.backgroundHover : Style.current.transparent
+        radius: 8
+        SVGImage {
+            id: closeModalImg
+            source: "./img/close.svg"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: 11
+            height: 11
+        }
+        ColorOverlay {
+            anchors.fill: closeModalImg
+            source: closeModalImg
+            color: Style.current.textColor
+        }
+        MouseArea {
+            id: closeModalMouseArea
+            cursorShape: Qt.PointingHandCursor
+            anchors.fill: parent
+            hoverEnabled: true
+            onExited: {
+                closeButton.hovered = false
+            }
+            onEntered: {
+                closeButton.hovered = true
+            }
+            onClicked: {
+                qrCodePopup.close()
+            }
+        }
+    }
+
+}