refactor(ui/ProfilePopup): make use of newly introduced header content

This commit extends the profile popup to align more with the application
designs. There's still work left to be done such as showing/hiding the
qrcode view or copying data to the clipboard.

The profilepopup also relies on context data at the moment and should rather
receive its data via the newly introduced `getContractByID()` API proposed in
https://github.com/status-im/status-go/pull/1987

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

@@ -7,62 +7,197 @@ import "./"
 
 ModalPopup {
     id: popup
-    header: Text {
-      text: qsTr("User profile")
-      anchors.top: parent.top
-      anchors.left: parent.left
-      font.bold: true
-      font.pixelSize: 17
-      anchors.leftMargin: 16
-      anchors.topMargin: Theme.padding
-      anchors.bottomMargin: Theme.padding
-    }
 
+    header: Item {
+      height: children[0].height
+      width: parent.width
       Rectangle {
         id: profilePic
-      width: 120
+        width: 40
-      height: 120
+        height: 40
-      radius: 100
+        radius: 30
         border.color: "#10000000"
         border.width: 1
         color: Theme.transparent
-      anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
-      anchors.topMargin: 16
+        anchors.topMargin: Theme.padding
         Image {
-          width: 120
+            width: parent.width
-          height: 120
+            height: parent.height
             fillMode: Image.PreserveAspectFit
             source: identicon
         }
       }
 
-    Text {
+      TextEdit {
-      id: userNameText
+          id: profileName
           text: userName
-      anchors.top: profilePic.bottom
+          anchors.top: parent.top
-      anchors.topMargin: 16
+          anchors.topMargin: 18
-      anchors.horizontalCenter: parent.horizontalCenter
+          anchors.left: profilePic.right
+          anchors.leftMargin: Theme.smallPadding
           font.bold: true
-      font.pixelSize: 16
+          font.pixelSize: 14
+          readOnly: true
+          wrapMode: Text.WordWrap
       }
 
-    TextEdit {
+      Text {
-      text: fromAuthor.substr(0, 6) + "..." + fromAuthor.substr(fromAuthor.length - 4)
+          text: fromAuthor
-      anchors.top: userNameText.bottom
+          width: 160
-      anchors.topMargin: 12
+          elide: Text.ElideMiddle
-      anchors.horizontalCenter: parent.horizontalCenter
+          anchors.left: profilePic.right
-      wrapMode: Text.Wrap
+          anchors.leftMargin: Theme.smallPadding
-      readOnly: true
+          anchors.top: profileName.bottom
-      selectByMouse: true
+          anchors.topMargin: 2
+          font.pixelSize: 14
           color: Theme.darkGrey
-      font.pixelSize: 15
+          font.family: "Inter"
       }
 
+      // TODO(pascal): implement qrcode view
+      // Rectangle {
+      //     id: qrCodeButton
+      //     height: 32
+      //     width: 32
+      //     anchors.top: parent.top
+      //     anchors.topMargin: Theme.padding
+      //     anchors.right: parent.right
+      //     anchors.rightMargin: 32 + Theme.smallPadding
+      //     radius: 8
+
+      //     Image {
+      //         source: "../../../../shared/img/qr-code-icon.svg"
+      //         anchors.horizontalCenter: parent.horizontalCenter
+      //         anchors.verticalCenter: parent.verticalCenter
+      //     }
+
+      //     MouseArea {
+      //         cursorShape: Qt.PointingHandCursor
+      //         anchors.fill: parent
+      //         hoverEnabled: true
+      //         onExited: {
+      //             qrCodeButton.color = Theme.white
+      //         }
+      //         onEntered:{
+      //             qrCodeButton.color = Theme.grey
+      //         }
+      //     }
+      // }
+    }
+
+    Text {
+      id: labelEnsUsername
+      text: qsTr("ENS username")
+      font.pixelSize: 13
+      font.weight: Font.Medium
+      color: Theme.darkGrey
+      anchors.left: parent.left
+      anchors.leftMargin: Theme.smallPadding
+      anchors.top: parent.top
+      anchors.topMargin: Theme.smallPadding
+    }
+
+    Text {
+      id: valueEnsName
+      text: "@emily.stateofus.eth"
+      font.pixelSize: 14
+      anchors.left: parent.left
+      anchors.leftMargin: Theme.smallPadding
+      anchors.top: labelEnsUsername.bottom
+      anchors.topMargin: Theme.smallPadding
+    }
+
+    Text {
+      id: labelChatKey
+      text: qsTr("Chat key")
+      font.pixelSize: 13
+      font.weight: Font.Medium
+      color: Theme.darkGrey
+      anchors.left: parent.left
+      anchors.leftMargin: Theme.smallPadding
+      anchors.top: valueEnsName.bottom
+      anchors.topMargin: Theme.padding
+    }
+
+    Text {
+      id: valueChatKey
+      text: fromAuthor
+      width: 160
+      elide: Text.ElideMiddle
+      font.pixelSize: 14
+      anchors.left: parent.left
+      anchors.leftMargin: Theme.smallPadding
+      anchors.top: labelChatKey.bottom
+      anchors.topMargin: Theme.smallPadding
+    }
+
+    Separator {
+      id: separator
+      anchors.top: valueChatKey.bottom
+      anchors.topMargin: Theme.padding
+      anchors.left: parent.left
+      anchors.leftMargin: -Theme.padding
+      anchors.right: parent.right
+      anchors.rightMargin: -Theme.padding
+    }
+
+    Text {
+      id: labelShareURL
+      text: qsTr("Share Profile URL")
+      font.pixelSize: 13
+      font.weight: Font.Medium
+      color: Theme.darkGrey
+      anchors.left: parent.left
+      anchors.leftMargin: Theme.smallPadding
+      anchors.top: separator.bottom
+      anchors.topMargin: Theme.padding
+    }
+
+    Text {
+      id: valueShareURL
+      text: "https://join.status.im/u/" + fromAuthor.substr(0, 4) + "..." + fromAuthor.substr(fromAuthor.length - 5)
+      font.pixelSize: 14
+      anchors.left: parent.left
+      anchors.leftMargin: Theme.smallPadding
+      anchors.top: labelShareURL.bottom
+      anchors.topMargin: Theme.smallPadding
+    }
+
+    // TODO(pascal): implement copy to clipboard component
+    // Rectangle {
+    //     id: copyToClipboardButton
+    //     height: 32
+    //     width: 32
+    //     anchors.top: labelShareURL.bottom
+    //     anchors.topMargin: Theme.padding
+    //     anchors.left: valueShareURL.right
+    //     anchors.leftMargin: Theme.padding
+    //     radius: 8
+
+    //     Image {
+    //         source: "../../../../shared/img/copy-to-clipboard-icon.svg"
+    //         anchors.horizontalCenter: parent.horizontalCenter
+    //         anchors.verticalCenter: parent.verticalCenter
+    //     }
+
+    //     MouseArea {
+    //         cursorShape: Qt.PointingHandCursor
+    //         anchors.fill: parent
+    //         hoverEnabled: true
+    //         onExited: {
+    //             copyToClipboardButton.color = Theme.white
+    //         }
+    //         onEntered:{
+    //             copyToClipboardButton.color = Theme.grey
+    //         }
+    //     }
+    // }
+
     footer: StyledButton {
         anchors.right: parent.right
         anchors.rightMargin: Theme.smallPadding
-        label: "Close"
+        label: "Add to contacts"
         anchors.bottom: parent.bottom
         onClicked: {
           profilePopup.close()