fix: make profile popup look like the design

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -102,7 +102,7 @@ SplitView {
 
     property Component profilePopupComponent: ProfilePopup {
         id: profilePopup
-        height: 450
+        height: 504
         onClosed: {
             if(profilePopup.parentPopup){
                 profilePopup.parentPopup.close();

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

@@ -17,12 +17,14 @@ ModalPopup {
     width: 400
     height: 390
 
+    noTopMargin: true
+
     onOpened: {
         nicknameInput.forceActiveFocus(Qt.MouseFocusReason)
     }
 
     header: Item {
-        height: childrenRect.height
+        height: 78
         width: parent.width
 
         StyledText {
@@ -30,11 +32,11 @@ ModalPopup {
             //% "Nickname"
             text:  qsTrId("nickname")
             anchors.top: parent.top
-            anchors.topMargin: 18
+            anchors.topMargin: Style.current.padding
             anchors.left: parent.left
-            anchors.leftMargin: Style.current.smallPadding
+            anchors.leftMargin: Style.current.padding
             font.bold: true
-            font.pixelSize: 14
+            font.pixelSize: 17
         }
 
         StyledText {
@@ -42,11 +44,19 @@ ModalPopup {
             width: 160
             elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
             anchors.left: nicknameTitle.left
-            anchors.top: nicknameTitle.bottom
+            anchors.bottom: parent.bottom
-            anchors.topMargin: 2
+            anchors.bottomMargin: Style.current.padding
-            font.pixelSize: 14
+            font.pixelSize: 15
             color: Style.current.secondaryText
         }
+
+        Separator {
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: -Style.current.padding
+            anchors.right: parent.right
+            anchors.rightMargin: -Style.current.padding
+        }
     }
 
     StyledText {

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

@@ -19,6 +19,8 @@ ModalPopup {
     property var text: ""
     property var alias: ""
 
+    readonly property int innerMargin: 20
+    
     property bool isEnsVerified: false
     property bool noFooter: false
     property bool isBlocked: false
@@ -32,6 +34,9 @@ ModalPopup {
     signal contactAdded(publicKey: string)
     signal contactRemoved(publicKey: string)
 
+    clip: true
+    noTopMargin: true
+
     function openPopup(showFooter, userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam) {
         userName = userNameParam || ""
         nickname = nicknameParam || ""
@@ -47,15 +52,16 @@ ModalPopup {
     }
 
     header: Item {
-        height: children[0].height
+        height: 78
         width: parent.width
+
         RoundedImage {
             id: profilePic
             width: 40
             height: 40
             border.color: Style.current.border
             border.width: 1
-            anchors.top: parent.top
+            anchors.verticalCenter: parent.verticalCenter
             source: identicon
         }
 
@@ -63,40 +69,49 @@ ModalPopup {
             id: profileName
             text:  Utils.removeStatusEns(userName)
             anchors.top: parent.top
-            anchors.topMargin: 2
+            anchors.topMargin: Style.current.padding
             anchors.left: profilePic.right
-            anchors.leftMargin: Style.current.smallPadding
+            anchors.leftMargin: Style.current.halfPadding
             font.bold: true
-            font.pixelSize: 14
+            font.pixelSize: 17
             readOnly: true
             wrapMode: Text.WordWrap
         }
 
         StyledText {
             text: isEnsVerified ? alias : fromAuthor
-            width: 160
             elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
             anchors.left: profilePic.right
             anchors.leftMargin: Style.current.smallPadding
-            anchors.top: profileName.bottom
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: Style.current.padding
+            anchors.right: qrCodeButton.left
+            anchors.rightMargin: Style.current.padding
             anchors.topMargin: 2
             font.pixelSize: 14
             color: Style.current.secondaryText
         }
 
         StatusIconButton {
-            id: reloadBtn
+            id: qrCodeButton
             icon.name: "qr-code-icon"
-            anchors.top: parent.top
+            anchors.verticalCenter: profileName.verticalCenter
-            anchors.topMargin: -4
             anchors.right: parent.right
-            anchors.rightMargin: 32 + Style.current.smallPadding
+            anchors.rightMargin: 52
             iconColor: Style.current.textColor
             onClicked: qrCodePopup.open()
             width: 32
             height: 32
         }
 
+        Separator {
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: -Style.current.padding
+            anchors.right: parent.right
+            anchors.rightMargin: -Style.current.padding
+        }
+
         ModalPopup {
             id: qrCodePopup
             width: 320
@@ -114,80 +129,18 @@ ModalPopup {
         }
     }
 
-    Item {
-        BlockContactConfirmationDialog {
-            id: blockContactConfirmationDialog
-            onBlockButtonClicked: {
-                profileModel.contacts.blockContact(fromAuthor)
-                blockContactConfirmationDialog.close();
-                popup.close()
-
-                contactBlocked(fromAuthor)
-            }
-        }
-
-        UnblockContactConfirmationDialog {
-            id: unblockContactConfirmationDialog
-            onUnblockButtonClicked: {
-                profileModel.unblockContact(fromAuthor)
-                unblockContactConfirmationDialog.close();
-                popup.close()
-                contactUnblocked(fromAuthor)
-            }
-        }
-
-        ConfirmationDialog {
-            id: removeContactConfirmationDialog
-            // % "Remove contact"
-            title: qsTrId("remove-contact")
-            //% "Are you sure you want to remove this contact?"
-            confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
-            onConfirmButtonClicked: {
-                if (profileModel.contacts.isAdded(fromAuthor)) {
-                    profileModel.contacts.removeContact(fromAuthor);
-                }
-                removeContactConfirmationDialog.close();
-                popup.close();
-
-                contactRemoved(fromAuthor);
-            }
-        }
-    }
-
-
     Item {
         anchors.fill: parent
-        anchors.leftMargin: Style.current.smallPadding
 
-        StyledText {
+        TextWithLabel {
-            id: labelEnsUsername
+            id: ensText
-            height: isEnsVerified ? 20 : 0
-            visible: isEnsVerified
             //% "ENS username"
-            text: qsTrId("ens-username")
+            label: qsTrId("ens-username")
-            font.pixelSize: 13
+            text: userName
-            font.weight: Font.Medium
-            color: Style.current.secondaryText
             anchors.top: parent.top
-            anchors.topMargin: Style.current.smallPadding
-        }
-
-        StyledText {
-            id: valueEnsName
             visible: isEnsVerified
-            height: isEnsVerified ? 20 : 0
+            height: visible ? implicitHeight : 0
-            text: userName.substr(1)
+            textToCopy: userName
-            font.pixelSize: 14
-            anchors.top: labelEnsUsername.bottom
-            anchors.topMargin: Style.current.smallPadding
-        }
-
-        CopyToClipBoardButton {
-            visible: isEnsVerified
-            height: isEnsVerified ? 20 : 0
-            anchors.top: labelEnsUsername.bottom
-            anchors.left: valueEnsName.right
-            textToCopy: valueEnsName.text
         }
 
         StyledText {
@@ -197,8 +150,8 @@ ModalPopup {
             font.pixelSize: 13
             font.weight: Font.Medium
             color: Style.current.secondaryText
-            anchors.top: isEnsVerified ? valueEnsName.bottom : parent.top
+            anchors.top: ensText.bottom
-            anchors.topMargin: Style.current.padding
+            anchors.topMargin: ensText.visible ? popup.innerMargin : 0
         }
 
         Address {
@@ -207,9 +160,9 @@ ModalPopup {
             width: 160
             maxWidth: parent.width - (3 * Style.current.smallPadding) - copyBtn.width
             color: Style.current.textColor
-            font.pixelSize: 14
+            font.pixelSize: 15
             anchors.top: labelChatKey.bottom
-            anchors.topMargin: Style.current.smallPadding
+            anchors.topMargin: 4
         }
 
         CopyToClipBoardButton {
@@ -222,67 +175,41 @@ ModalPopup {
         Separator {
             id: separator
             anchors.top: valueChatKey.bottom
-            anchors.topMargin: Style.current.padding
+            anchors.topMargin: popup.innerMargin
             anchors.left: parent.left
             anchors.leftMargin: -Style.current.padding
             anchors.right: parent.right
             anchors.rightMargin: -Style.current.padding
         }
 
-        StyledText {
+        TextWithLabel {
-            id: labelShareURL
-            //% "Share Profile URL"
-            text: qsTrId("share-profile-url")
-            font.pixelSize: 13
-            font.weight: Font.Medium
-            color: Style.current.secondaryText
-            anchors.top: separator.bottom
-            anchors.topMargin: Style.current.padding
-        }
-
-        StyledText {
             id: valueShareURL
+            label: qsTr("Share Profile URL")
             text: "https://join.status.im/u/" + fromAuthor.substr(
                       0, 4) + "..." + fromAuthor.substr(fromAuthor.length - 5)
-            font.pixelSize: 14
+            anchors.top: separator.top
-            anchors.top: labelShareURL.bottom
+            anchors.topMargin: popup.innerMargin
-            anchors.topMargin: Style.current.smallPadding
-        }
-
-        CopyToClipBoardButton {
-            anchors.top: labelShareURL.bottom
-            anchors.left: valueShareURL.right
             textToCopy: "https://join.status.im/u/" + fromAuthor
         }
 
         Separator {
             id: separator2
             anchors.top: valueShareURL.bottom
-            anchors.topMargin: Style.current.padding
+            anchors.topMargin: popup.innerMargin
             anchors.left: parent.left
             anchors.leftMargin: -Style.current.padding
             anchors.right: parent.right
             anchors.rightMargin: -Style.current.padding
         }
 
-        StyledText {
+        TextWithLabel {
             id: chatSettings
             //% "Chat settings"
-            text: qsTrId("chat-settings")
+            label: qsTrId("chat-settings")
-            font.pixelSize: 13
-            font.weight: Font.Medium
-            color: Style.current.secondaryText
-            anchors.top: separator2.bottom
-            anchors.topMargin: Style.current.padding
-        }
-
-        StyledText {
-            id: nicknameTitle
             //% "Nickname"
             text: qsTrId("nickname")
-            font.pixelSize: 14
+            anchors.top: separator2.top
-            anchors.top: chatSettings.bottom
+            anchors.topMargin: popup.innerMargin
-            anchors.topMargin: Style.current.smallPadding
         }
 
         SVGImage {
@@ -291,7 +218,8 @@ ModalPopup {
             rotation: -90
             anchors.right: parent.right
             anchors.rightMargin: Style.current.padding
-            anchors.verticalCenter: nicknameTitle.verticalCenter
+            anchors.bottom: chatSettings.bottom
+            anchors.bottomMargin: 5
             width: 13
             fillMode: Image.PreserveAspectFit
             ColorOverlay {
@@ -307,16 +235,16 @@ ModalPopup {
             text: nickname ? nickname : qsTrId("none")
             anchors.right: nicknameCaret.left
             anchors.rightMargin: Style.current.padding
-            anchors.verticalCenter: nicknameTitle.verticalCenter
+            anchors.verticalCenter: nicknameCaret.verticalCenter
             color: Style.current.secondaryText
         }
 
         MouseArea {
             cursorShape: Qt.PointingHandCursor
-            anchors.left: nicknameTitle.left
+            anchors.left: chatSettings.left
             anchors.right: nicknameCaret.right
-            anchors.top: nicknameTitle.top
+            anchors.top: chatSettings.top
-            anchors.bottom: nicknameTitle.bottom
+            anchors.bottom: chatSettings.bottom
             onClicked: {
                 nicknamePopup.open()
             }
@@ -409,5 +337,43 @@ ModalPopup {
                 popup.close()
             }
         }
+
+        BlockContactConfirmationDialog {
+            id: blockContactConfirmationDialog
+            onBlockButtonClicked: {
+                profileModel.contacts.blockContact(fromAuthor)
+                blockContactConfirmationDialog.close();
+                popup.close()
+
+                contactBlocked(fromAuthor)
+            }
+        }
+
+        UnblockContactConfirmationDialog {
+            id: unblockContactConfirmationDialog
+            onUnblockButtonClicked: {
+                profileModel.unblockContact(fromAuthor)
+                unblockContactConfirmationDialog.close();
+                popup.close()
+                contactUnblocked(fromAuthor)
+            }
+        }
+
+        ConfirmationDialog {
+            id: removeContactConfirmationDialog
+            // % "Remove contact"
+            title: qsTrId("remove-contact")
+            //% "Are you sure you want to remove this contact?"
+            confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
+            onConfirmButtonClicked: {
+                if (profileModel.contacts.isAdded(fromAuthor)) {
+                    profileModel.contacts.removeContact(fromAuthor);
+                }
+                removeContactConfirmationDialog.close();
+                popup.close();
+
+                contactRemoved(fromAuthor);
+            }
+        }
     }
 }

ui/shared/Address.qml

@@ -10,7 +10,7 @@ StyledText {
     text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
     font.pixelSize: 13
     font.family: Style.current.fontHexRegular.name
-    elide: expanded ? Text.ElideNone : Text.ElideMiddle
+    elide: Text.ElideMiddle
     color: Style.current.secondaryText
 
     MouseArea {
@@ -23,8 +23,8 @@ StyledText {
                 this.width = addressComponent.width
             } else {
                 addressComponent.oldWidth = addressComponent.width
-                addressComponent.width = addressComponent.maxWidth > 0 && addressComponent.implicitWidth > addressComponent.maxWidth ?
+                addressComponent.width = addressComponent.maxWidth > 0 ?
-                            addressComponent.maxWidth :
+                            Math.min(addressComponent.implicitWidth, addressComponent.maxWidth) :
                             addressComponent.implicitWidth
                 this.width = addressComponent.width
             }

ui/shared/ModalPopup.qml

@@ -6,6 +6,7 @@ import "../imports"
 
 Popup {
     property string title
+    property bool noTopMargin: false
     default property alias content: popupContent.children
     property alias contentWrapper: popupContent
     property alias header: headerContent.children
@@ -33,14 +34,18 @@ Popup {
         Item {
             id: headerContent
             height: {
-                var idx = !!title ? 0 : 1
+                const count = children.length
-                return children[idx] && children[idx].height
+                let h = 0
+                for (let i = 0; i < count; i++) {
+                    h += children[i] ? children[i].height : 0
+                }
+                return h
             }
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
 
-            anchors.topMargin: Style.current.padding
+            anchors.topMargin: popup.noTopMargin ? 0 : Style.current.padding
             anchors.bottomMargin: Style.current.padding
             anchors.rightMargin: Style.current.padding
             anchors.leftMargin: Style.current.padding
@@ -51,7 +56,7 @@ Popup {
                 anchors.left: parent.left
                 font.bold: true
                 font.pixelSize: 17
-                height: 24
+                height: visible ? 24 : 0
                 visible: !!title
                 verticalAlignment: Text.AlignVCenter
             }
@@ -62,10 +67,10 @@ Popup {
             property bool hovered: false
             height: 32
             width: 32
-            anchors.top: headerContent.top
+            anchors.top: parent.top
-            anchors.topMargin: -4
+            anchors.topMargin: 12
-            anchors.right: headerContent.right
+            anchors.right: parent.right
-            anchors.rightMargin: -4
+            anchors.rightMargin: 12
             radius: 8
             color: hovered ? Style.current.backgroundHover : Style.current.transparent
 
@@ -103,6 +108,7 @@ Popup {
         Separator {
             id: separator
             anchors.top: headerContent.bottom
+            anchors.topMargin: visible ? Style.current.padding : 0
             visible: title.length > 0
         }
 

ui/shared/TextWithLabel.qml

@@ -12,7 +12,7 @@ Item {
     property bool wrap: false
 
     id: infoText
-    height: this.childrenRect.height
+    implicitHeight: this.childrenRect.height
     width: parent.width
 
     StyledText {
@@ -30,7 +30,7 @@ Item {
         font.family: fontFamily
         readOnly: true
         anchors.top: inputLabel.bottom
-        anchors.topMargin: 7
+        anchors.topMargin: 4
         font.pixelSize: 15
         wrapMode: infoText.wrap ? Text.WordWrap : Text.NoWrap
         anchors.left: parent.left