fix(@desktop): add spacing to EmojiHash

fixes: #5247, #5242

ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml

@@ -154,20 +154,30 @@ Item {
         Item {
             id: chainsChatKeyImg
             Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: 181
+            Layout.preferredWidth: 400
             Layout.preferredHeight: 84
             Image {
                 anchors.horizontalCenter: parent.horizontalCenter
                 source: Style.png("onboarding/chains")
             }
             EmojiHash {
-                anchors.bottom: parent.bottom
+                anchors {
+                    bottom: parent.bottom
+                    left: parent.left
+                    leftMargin: 80
+                }
+
                 publicKey: root.pubKey
             }
             StatusSmartIdenticon {
                 id: userImageCopy
-                anchors.bottom: parent.bottom
-                anchors.right: parent.right
+
+                anchors {
+                    bottom: parent.bottom
+                    right: parent.right
+                    rightMargin: 116
+                }
+
                 icon.width: 44
                 icon.height: 44
                 icon.color: "transparent"

ui/app/AppLayouts/Profile/views/MyProfileView.qml

@@ -76,11 +76,7 @@ SettingsContentBase {
 
             displayNameVisible: false
             pubkeyVisible: false
-
-            imageWidth: 80
-            imageHeight: 80
-            emojiSize: Qt.size(20,20)
-            supersampling: true
+            compact: false
 
             imageOverlay: Item {
                 StatusFlatRoundButton {

ui/imports/shared/controls/EmojiHash.qml

@@ -1,24 +1,36 @@
 import QtQuick 2.13
-import StatusQ.Core.Utils 0.1 as StatusQUtils
-import utils 1.0
 
-Text {
+import StatusQ.Core.Utils 0.1 as StatusQUtils
+
+import utils 1.0
+import shared.panels 1.0
+
+Item {
     id: root
+
     property string publicKey
-    property string size: "14x14"
-    renderType: Text.NativeRendering
-    font.pointSize: 1 // make sure there is no padding for emojis due to 'style: "vertical-align: top"'
-    text: {
-        const emojiHash = Utils.getEmojiHashAsJson(root.publicKey);
-        var emojiHashFirstLine = "";
-        var emojiHashSecondLine = "";
-        for (var i = 0; i < 7; i++) {
-            emojiHashFirstLine += emojiHash[i];
+
+    property real size: 16
+
+    implicitHeight: positioner.implicitHeight
+    implicitWidth: positioner.implicitWidth
+
+    Grid {
+        id: positioner
+
+        rows: 2
+        columnSpacing: Math.ceil(root.size / 16)
+        rowSpacing: columnSpacing + 6
+
+        Repeater {
+            model: Utils.getEmojiHashAsJson(root.publicKey)
+
+            SVGImage {
+                width: root.size
+                height: root.size
+
+                source: StatusQUtils.Emoji.parse(modelData).match('src="(.*\\.svg)')[1]
+            }
         }
-        for (var j = 7; j < emojiHash.length; j++) {
-            emojiHashSecondLine += emojiHash[j];
-        }
-        return StatusQUtils.Emoji.parse(emojiHashFirstLine, size) + "<br>" +
-               StatusQUtils.Emoji.parse(emojiHashSecondLine, size)
     }
 }

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

@@ -15,14 +15,10 @@ Item {
     property string pubkey
     property string icon
 
+    property bool compact: true
     property bool displayNameVisible: true
     property bool pubkeyVisible: true
 
-    property alias imageWidth: userImage.imageWidth
-    property alias imageHeight: userImage.imageHeight
-    property size emojiSize: Qt.size(14, 14)
-    property bool supersampling: true
-
     property alias imageOverlay: imageOverlay.sourceComponent
 
     signal clicked()
@@ -33,6 +29,8 @@ Item {
     ColumnLayout {
         id: contentContainer
 
+        spacing: root.compact ? 4 : 12
+
         anchors {
             left: parent.left
             right: parent.right
@@ -49,6 +47,8 @@ Item {
             pubkey: root.pubkey
             image: root.icon
             interactive: false
+            imageWidth: root.compact ? 36 : 80
+            imageHeight: imageWidth
 
             Loader {
                 id: imageOverlay
@@ -86,13 +86,12 @@ Item {
         }
 
         EmojiHash {
-            id: emojihash
-            Layout.fillWidth: true
-            horizontalAlignment: Text.AlignHCenter
+            id: emojiHash
+
+            Layout.alignment: Qt.AlignHCenter
+
             publicKey: root.pubkey
-            readonly property size finalSize: supersampling ? Qt.size(emojiSize.width * 2, emojiSize.height * 2) : emojiSize
-            size: `${finalSize.width}x${finalSize.height}`
-            scale: supersampling ? 0.5 : 1
+            size: root.compact ? 16 : 20
         }
     }
 }

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

@@ -10,9 +10,8 @@ import StatusQ.Core.Theme 0.1
 Loader {
     id: root
 
-    property int imageHeight: compact ? 36 : 40
-    property int imageWidth: compact ? 36 : 40
-    property bool compact: true
+    property int imageHeight: 36
+    property int imageWidth: 36
 
     property string name
     property string pubkey

ui/imports/shared/popups/ProfilePopup.qml

@@ -113,11 +113,7 @@ StatusModal {
 
                 displayNameVisible: false
                 pubkeyVisible: false
-                supersampling: true
-                emojiSize: Qt.size(20,20)
-
-                imageWidth: 80
-                imageHeight: 80
+                compact: false
 
                 imageOverlay: Item {
                     visible: popup.isCurrentUser