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,75 +1,153 @@
 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
 
-        StyledText {
-            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.")
-            font.pointSize: 15
-            wrapMode: Text.WordWrap
-            verticalAlignment: Text.AlignTop
-            horizontalAlignment: Text.AlignHCenter
-            fontSizeMode: Text.FixedSize
-            renderType: Text.QtRendering
-            onLinkActivated: console.log(link)
+        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
+            }
         }
-    }
 
-    RowLayout {
-        id: row
-        anchors.right: parent.right
-        anchors.rightMargin: 20
-        anchors.left: parent.left
-        anchors.leftMargin: 20
-        anchors.top: description.bottom
-        anchors.topMargin: 20
+        Separator {
+            anchors.topMargin: 0
+            anchors.top: inviteFriendsContainer.bottom
+        }
 
-        Flow {
-            Layout.fillHeight: false
-            Layout.fillWidth: true
-            spacing: 6
+        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
 
-            SuggestedChannel {
-                channel: "introductions"
+            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
+                horizontalAlignment: Text.AlignHCenter
+                fontSizeMode: Text.FixedSize
+                renderType: Text.QtRendering
+                onLinkActivated: console.log(link)
+                anchors.right: parent.right
+                anchors.rightMargin: Style.current.xlPadding
+                anchors.left: parent.left
+                anchors.leftMargin: Style.current.xlPadding
             }
-            SuggestedChannel {
-                channel: "chitchat"
-            }
-            SuggestedChannel {
-                channel: "status"
-            }
-            SuggestedChannel {
-                channel: "crypto"
-            }
-            SuggestedChannel {
-                channel: "tech"
-            }
-            SuggestedChannel {
-                channel: "music"
-            }
-            SuggestedChannel {
-                channel: "movies"
-            }
-            SuggestedChannel {
-                channel: "test"
-            }
-            SuggestedChannel {
-                channel: "test2"
+
+            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"
+                }
+                SuggestedChannel {
+                    channel: "chitchat"
+                }
+                SuggestedChannel {
+                    channel: "status"
+                }
+                SuggestedChannel {
+                    channel: "crypto"
+                }
+                SuggestedChannel {
+                    channel: "tech"
+                }
+                SuggestedChannel {
+                    channel: "music"
+                }
+                SuggestedChannel {
+                    channel: "movies"
+                }
+                SuggestedChannel {
+                    channel: "test"
+                }
+                SuggestedChannel {
+                    channel: "test2"
+                }
             }
         }
     }
@@ -77,6 +155,6 @@ 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}
 }
 ##^##*/