feat: add section for friend in contact column

ui/app/AppLayouts/Chat/ContactsColumn.qml

@@ -76,3 +76,9 @@ Item {
         }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640}
+}
+##^##*/

ui/app/AppLayouts/Chat/ContactsColumn/EmptyView.qml

@@ -1,25 +1,101 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
 import "../components"
 import "../../../../shared"
+import "../../../../imports"
 
 Item {
-    id: suggestionsContainer
     Layout.fillHeight: true
     Layout.fillWidth: true
 
-    Row {
-        id: description
+    Rectangle {
+        id: emptyView
+        border.color: Style.current.grey
+        radius: 16
         anchors.right: parent.right
-        anchors.rightMargin: 20
+        anchors.rightMargin: Style.current.padding
         anchors.left: parent.left
-        anchors.leftMargin: 20
+        anchors.leftMargin: Style.current.padding
+        anchors.top: parent.top
+        anchors.topMargin: Style.current.bigPadding
+        height: inviteFriendsContainer.height + suggestionContainer.height
+
+        Item {
+            id: inviteFriendsContainer
+            height: 190
+            anchors.top: parent.top
+            anchors.topMargin: 0
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+
+            SVGImage {
+                anchors.top: parent.top
+                anchors.topMargin: -6
+                anchors.horizontalCenter: parent.horizontalCenter
+                source: "../../../img/chatEmptyHeader.png"
+            }
+
+            SVGImage {
+                id: closeImg
+                anchors.top: parent.top
+                anchors.topMargin: 10
+                anchors.right: parent.right
+                anchors.rightMargin: 10
+                source: "../../../img/close.svg"
+                height: 20
+                width: 20
+            }
+            ColorOverlay {
+                anchors.fill: closeImg
+                source: closeImg
+                color: Style.current.darkGrey
+            }
+
+            Text {
+                id: chatAndTransactText
+                text: qsTr("Chat and transact privately with your friends")
+                anchors.top: parent.top
+                anchors.topMargin: 56
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: 15
+                wrapMode: Text.WordWrap
+                anchors.right: parent.right
+                anchors.rightMargin: Style.current.xlPadding
+                anchors.left: parent.left
+                anchors.leftMargin: Style.current.xlPadding
+            }
+
+            StyledButton {
+                label: qsTr("Invite friends")
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: Style.current.xlPadding
+            }
+        }
+
+        Separator {
+            anchors.topMargin: 0
+            anchors.top: inviteFriendsContainer.bottom
+        }
+
+        Item {
+            id: suggestionContainer
+            anchors.top: inviteFriendsContainer.bottom
+            anchors.right: parent.right
+            anchors.left: parent.left
+            height: suggestionsText.height + channelFlow.height + 2 * Style.current.xlPadding + Style.current.bigPadding
 
             StyledText {
+                id: suggestionsText
                 width: parent.width
                 //% "Follow your interests in one of the many Public Chats."
                 text: qsTrId("follow-your-interests-in-one-of-the-many-public-chats.")
+                anchors.top: parent.top
+                anchors.topMargin: Style.current.xlPadding
                 font.pointSize: 15
                 wrapMode: Text.WordWrap
                 verticalAlignment: Text.AlignTop
@@ -27,22 +103,23 @@ Item {
                 fontSizeMode: Text.FixedSize
                 renderType: Text.QtRendering
                 onLinkActivated: console.log(link)
-        }
-    }
-
-    RowLayout {
-        id: row
                 anchors.right: parent.right
-        anchors.rightMargin: 20
+                anchors.rightMargin: Style.current.xlPadding
                 anchors.left: parent.left
-        anchors.leftMargin: 20
-        anchors.top: description.bottom
-        anchors.topMargin: 20
+                anchors.leftMargin: Style.current.xlPadding
+            }
 
             Flow {
+                id: channelFlow
                 Layout.fillHeight: false
                 Layout.fillWidth: true
                 spacing: 6
+                anchors.right: parent.right
+                anchors.rightMargin: Style.current.xlPadding
+                anchors.left: parent.left
+                anchors.leftMargin: Style.current.xlPadding
+                anchors.top: suggestionsText.bottom
+                anchors.topMargin: Style.current.bigPadding
 
                 SuggestedChannel {
                     channel: "introductions"
@@ -73,10 +150,11 @@ Item {
                 }
             }
         }
+    }
 }
 
 /*##^##
 Designer {
-    D{i:0;autoSize:true;height:480;width:640}
+    D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:1.25;height:500;width:300}
 }
 ##^##*/