From c41318d5e8b8dfcf47929dc335abd72bbc965964 Mon Sep 17 00:00:00 2001
From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com>
Date: Wed, 13 Jul 2022 11:58:59 +0300
Subject: [PATCH] fix(StatusAppChatView): Updated layout based on new designs
 (#765)

As part of https://github.com/status-im/status-desktop/issues/6352
---
 sandbox/demoapp/StatusAppChatView.qml | 74 ++++++++++++++++++---------
 1 file changed, 50 insertions(+), 24 deletions(-)

diff --git a/sandbox/demoapp/StatusAppChatView.qml b/sandbox/demoapp/StatusAppChatView.qml
index 58b6fd8b..77d25ee4 100644
--- a/sandbox/demoapp/StatusAppChatView.qml
+++ b/sandbox/demoapp/StatusAppChatView.qml
@@ -16,53 +16,78 @@ StatusAppThreePanelLayout {
 
     leftPanel: Item {
         anchors.fill: parent
-
-        StatusNavigationPanelHeadline {
-            id: headline
-            anchors.top: parent.top
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: "Chat"
-        }
-
+        anchors.margins: 16
         RowLayout {
             id: searchInputWrapper
-            width: 288
-            height: searchInput.height
-            anchors.top: headline.bottom
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width
 
-            StatusBaseInput {
-                id: searchInput
-                Layout.fillWidth: true
+            StatusNavigationPanelHeadline {
+                id: headline
                 Layout.alignment: Qt.AlignVCenter
-                implicitHeight: 36
-                topPadding: 8
-                bottomPadding: 8
-                placeholderText: "Search"
-                icon.name: "search"
+                text: "Chat"
             }
 
-            StatusIconTabButton {
+            Item {
+                Layout.fillWidth: true
+            }
+
+
+            StatusRoundButton {
+                Layout.alignment: Qt.AlignVCenter
                 icon.name: "public-chat"
+                icon.color: Theme.palette.directColor1
+                icon.height: editBtn.icon.height
+                icon.width: editBtn.icon.width
+                implicitWidth: editBtn.implicitWidth
+                implicitHeight: editBtn.implicitHeight
+                type: StatusRoundButton.Type.Tertiary
+                StatusToolTip {
+                    text: qsTr("Join public chats")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
             }
 
             StatusIconTabButton {
+                id: editBtn
                 icon.name: "edit"
+                icon.color: Theme.palette.directColor1
+                checked: root.createChat
+                highlighted: checked
                 onClicked: {
                     root.createChat = !root.createChat;
                 }
+                StatusToolTip {
+                    text: qsTr("Start chat")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
             }
         }
 
-        Column {
+        StatusBaseInput {
+            id: searchInput
             anchors.top: searchInputWrapper.bottom
             anchors.topMargin: 16
+            width: parent.width
+            implicitHeight: 36
+            topPadding: 8
+            bottomPadding: 8
+            placeholderText: "Search"
+            icon.name: "search"
+        }
+
+        Column {
+            width: parent.width
+            anchors.top: searchInput.bottom
+            anchors.topMargin: 16
             anchors.horizontalCenter: parent.horizontalCenter
             spacing: 8
 
             StatusContactRequestsIndicatorListItem {
+                width: parent.width
                 anchors.horizontalCenter: parent.horizontalCenter
                 title: "Contact requests"
                 requestsCount: 3
@@ -70,6 +95,7 @@ StatusAppThreePanelLayout {
             }
 
             StatusChatList {
+                width: parent.width
                 model: Models.demoChatListItems
                 highlightItem: !root.createChat
                 onChatItemUnmuted: {