fix(ProfileHeader): Settings/Profile/avatar design updates

- correct margins, spacing, position for the avatar image
- action button in the top right corner
- fixup the context menu

Fixes #9682

ui/StatusQ/src/assets/img/icons/nft-profile.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14709_232681)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.9987 8.66667C9.28736 8.66667 10.332 7.622 10.332 6.33333C10.332 5.04467 9.28736 4 7.9987 4C6.71003 4 5.66536 5.04467 5.66536 6.33333C5.66536 7.622 6.71003 8.66667 7.9987 8.66667ZM7.9987 7.66667C8.73508 7.66667 9.33203 7.06971 9.33203 6.33333C9.33203 5.59695 8.73508 5 7.9987 5C7.26232 5 6.66536 5.59695 6.66536 6.33333C6.66536 7.06971 7.26232 7.66667 7.9987 7.66667Z" fill="#4360DF"/>
+<path d="M10.963 10.8487C11.2067 11.0382 11.2134 11.3969 10.9758 11.5939C10.7728 11.7623 10.4807 11.7333 10.2683 11.577C9.6329 11.1095 8.8481 10.8333 7.9988 10.8333C7.1495 10.8333 6.3647 11.1095 5.72934 11.577C5.51689 11.7333 5.22482 11.7623 5.02179 11.5939C4.78422 11.3969 4.79094 11.0382 5.03458 10.8487C5.8531 10.2123 6.88169 9.83333 7.9988 9.83333C9.11591 9.83333 10.1445 10.2123 10.963 10.8487Z" fill="#4360DF"/>
+<path d="M1.49116 6.62799L3.89116 2.62799C4.37309 1.82478 5.24111 1.33331 6.17781 1.33331H9.82479C10.7615 1.33331 11.6295 1.82478 12.1114 2.62799L14.5114 6.62799C15.0181 7.47248 15.0181 8.52748 14.5114 9.37197L12.1114 13.372C11.6295 14.1752 10.7615 14.6666 9.8248 14.6666H6.17781C5.24111 14.6666 4.37309 14.1752 3.89116 13.372L1.49116 9.37197C0.98447 8.52748 0.984471 7.47248 1.49116 6.62799Z" stroke="#4360DF"/>
+</g>
+<defs>
+<clipPath id="clip0_14709_232681">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

ui/app/AppLayouts/Profile/views/profile/MyProfileSettingsView.qml

@@ -92,6 +92,8 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.leftMargin: Style.current.padding
         Layout.rightMargin: Style.current.padding
+        Layout.topMargin: 20
+        Layout.bottomMargin: 20
 
         store: root.profileStore
 

ui/imports/shared/controls/chat/ProfileHeader.qml

@@ -113,7 +113,7 @@ Item {
                 pubkey: root.pubkey
                 image: root.previewIcon
                 interactive: false
-                imageWidth: d.getSize(36, 64, 160)
+                imageWidth: d.getSize(36, 64, 170)
                 imageHeight: imageWidth
                 ensVerified: root.userIsEnsVerified
             }
@@ -121,7 +121,7 @@ Item {
             StatusRoundButton {
                 id: editButton
                 visible: root.editImageButtonVisible
-                anchors.bottom: userImage.bottom
+                anchors.top: userImage.top
                 anchors.right: userImage.right
                 anchors.rightMargin: Math.round(userImage.width / 10)
 
@@ -130,8 +130,8 @@ Item {
 
                 type: StatusRoundButton.Type.Secondary
                 icon.name: "edit_pencil"
-                icon.width: d.getSize(8, 12, 20)
+                icon.width: d.getSize(8, 12, 24)
-                icon.height: d.getSize(8, 12, 20)
+                icon.height: d.getSize(8, 12, 24)
 
                 onClicked: {
                     if (!!root.store.profileLargeImage)
@@ -249,14 +249,23 @@ Item {
 
     StatusMenu {
         id: imageEditMenu
+        width: 200
 
         StatusAction {
-            text: qsTr("Upload a file")
+            text: qsTr("Select different image")
-            assetSettings.name: "download"
+            assetSettings.name: "image"
-            assetSettings.rotation: 180
             onTriggered: Global.openChangeProfilePicPopup(editButton.tempIcon)
         }
 
+        StatusAction {
+            text: qsTr("Use an NFT")
+            assetSettings.name: "nft-profile"
+            onTriggered: Global.openChangeProfilePicPopup(editButton.tempIcon)
+            enabled: false // TODO enable this with the profile showcase
+        }
+
+        StatusMenuSeparator {}
+
         StatusAction {
             text: qsTr("Remove image")
             type: StatusAction.Danger