fix: fix profile popup buttons to fit the design

ui/app/AppLayouts/Chat/components/ProfilePopup.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 import "./"
 
 ModalPopup {
@@ -11,7 +12,6 @@ ModalPopup {
 
     property Popup parentPopup
 
-
     property var identicon: ""
     property var userName: ""
     property string nickname: ""
@@ -360,32 +360,18 @@ ModalPopup {
         width: parent.width
         height: children[0].height
 
-        StyledButton {
+        StatusButton {
-            anchors.left: parent.left
+            id: blockBtn
-            anchors.leftMargin: 20
+            anchors.right: addToContactsButton.left
-            //% "Send Message"
+            anchors.rightMargin: addToContactsButton ? Style.current.padding : 0
-            label: qsTrId("send-message")
-            anchors.bottom: parent.bottom
-            visible: !isBlocked
-            onClicked: {
-                if (tabBar.currentIndex !== 0)
-                    tabBar.currentIndex = 0
-                chatsModel.joinChat(fromAuthor, Constants.chatTypeOneToOne)
-                popup.close()
-            }
-        }
-
-        StyledButton {
-            anchors.right: parent.right
-            anchors.rightMargin: isBlocked ? 0 : addToContactsButton.width + 32
-            btnColor: Style.current.lightRed
-            btnBorderWidth: 1
-            btnBorderColor: Style.current.grey
-            textColor: Style.current.red
-            label: isBlocked ?
-                    qsTr("Unblock User") :
-                    qsTr("Block User")
             anchors.bottom: parent.bottom
+            type: "secondary"
+            color: Style.current.red
+            showBorder: true
+            borderColor: Style.current.border
+            text: isBlocked ?
+                      qsTr("Unblock User") :
+                      qsTr("Block User")
             onClicked: {
                 if (isBlocked) {
                     unblockContactConfirmationDialog.contactName = userName;
@@ -395,21 +381,28 @@ ModalPopup {
                 }
                 blockContactConfirmationDialog.contactName = userName;
                 blockContactConfirmationDialog.contactAddress = fromAuthor;
-                blockContactConfirmationDialog.open();   
+                blockContactConfirmationDialog.open();
             }
         }
 
-        StyledButton {
+        StatusButton {
+            property bool isAdded:  profileModel.contacts.isAdded(fromAuthor)
+
             id: addToContactsButton
-            anchors.right: parent.right
+            anchors.right: sendMessageBtn.left
-            anchors.rightMargin: Style.current.smallPadding
+            anchors.rightMargin: sendMessageBtn.visible ? Style.current.padding : 0
-            label: profileModel.contacts.isAdded(fromAuthor) ?
+            text: isAdded ?
-            //% "Remove Contact"
+                      //% "Remove Contact"
-            qsTrId("remove-contact") :
+                      qsTrId("remove-contact") :
-            //% "Add to contacts"
+                      //% "Add to contacts"
-            qsTrId("add-to-contacts")
+                      qsTrId("add-to-contacts")
             anchors.bottom: parent.bottom
+            type: isAdded ? "secondary" : "primary"
+            color: isAdded ? Style.current.danger : Style.current.primary
+            showBorder: isAdded
+            borderColor: Style.current.border
             visible: !isBlocked
+            width: visible ? implicitWidth : 0
             onClicked: {
                 if (profileModel.contacts.isAdded(fromAuthor)) {
                     removeContactConfirmationDialog.parentPopup = profilePopup;
@@ -421,5 +414,21 @@ ModalPopup {
                 }
             }
         }
+
+        StatusButton {
+            id: sendMessageBtn
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            //% "Send Message"
+            text: qsTrId("send-message")
+            visible: !isBlocked && chatsModel.activeChannel.id !== popup.fromAuthor
+            width: visible ? implicitWidth : 0
+            onClicked: {
+                if (tabBar.currentIndex !== 0)
+                    tabBar.currentIndex = 0
+                chatsModel.joinChat(fromAuthor, Constants.chatTypeOneToOne)
+                popup.close()
+            }
+        }
     }
 }

ui/shared/status/StatusButton.qml

@@ -11,8 +11,10 @@ Button {
     property string state: "default"
     property color color: Style.current.buttonForegroundColor
     property color bgColor: Style.current.buttonBackgroundColor
+    property color borderColor: color
     property color bgHoverColor: Qt.darker(control.bgColor, 1.1)
     property bool disableColorOverlay: false
+    property bool showBorder: false
     property int iconRotation: 0
 
     id: control
@@ -94,8 +96,8 @@ Button {
     background: Rectangle {
         radius: Style.current.radius
         anchors.fill: parent
-        border.width: flat ? 1 : 0
+        border.width: flat || showBorder ? 1 : 0
-        border.color: hovered ? buttonLabel.color : Style.current.transparent
+        border.color: hovered || showBorder ? control.borderColor : Style.current.transparent
         color: {
             if (flat) {
                 return "transparent"