fix: fix community profile looks and style

ui/app/AppLayouts/Chat/CommunityComponents/CommunityPopupButton.qml

@@ -6,10 +6,13 @@ import "../../../../shared/status"
 import "../ContactsColumn"
 import QtGraphicalEffects 1.13
 
-Item {
+Rectangle {
+    property bool isHovered: false
+    property string type: "primary"
+
     id: root
-    width: contentItem.width
-    height: contentItem.height
+    width: parent.width
+    height: 64
 
     default property alias actionContent: placeholder.data
     signal clicked()
@@ -18,8 +21,13 @@ Item {
     property string label
     property string txtColor: Style.current.blue
 
+    color: isHovered ? Style.current.secondaryBackground : Style.current.transparent
+    radius: Style.current.radius
+
     Item {
         id: contentItem
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
         anchors.verticalCenter: parent.verticalCenter
         width: btn.width + btnLabel.width + Style.current.padding
         height: btn.height
@@ -27,8 +35,8 @@ Item {
         StatusRoundButton {
             id: btn
             anchors.verticalCenter: parent.verticalCenter
+            type: root.type
             icon.name: "communities/" + iconName
-            icon.color: Style.current.lightBlue
             width: 40
             height: 40
         }
@@ -41,17 +49,21 @@ Item {
             anchors.leftMargin: Style.current.padding
             anchors.verticalCenter: btn.verticalCenter
             font.pixelSize: 15
-        }        
+        }
     }
 
     Item {
         id: placeholder
         anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
     }
 
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+        onEntered: root.isHovered = true
+        onExited: root.isHovered = false
         onClicked: root.clicked()
     }
 }

ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopup.qml

@@ -17,7 +17,7 @@ ModalPopup {
     property string source: "../../../img/ens-header-dark@2x.png"
     property int nbMembers: community.nbMembers
     property bool isAdmin: true // TODO: 
-    height: isAdmin ? 640 : 509
+    height: (isAdmin ? 600 : 590) + descriptionText.height
 
     id: popup
 
@@ -64,6 +64,15 @@ ModalPopup {
             font.weight: Font.Thin
             color: Style.current.secondaryText
         }
+
+        Separator {
+            anchors.top: communityImg.bottom
+            anchors.topMargin: Style.current.padding
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.rightMargin: -Style.current.padding
+            anchors.leftMargin: -Style.current.padding
+        }
     }
 
     StyledText {
@@ -72,10 +81,8 @@ ModalPopup {
         wrapMode: Text.Wrap
         width: parent.width
         font.pixelSize: 15
-        font.weight: Font.Thin
     }
 
-
     Separator {
         id: sep1
         anchors.left: parent.left
@@ -108,10 +115,8 @@ ModalPopup {
 
     Column {
         anchors.top: sep2.bottom
-        anchors.topMargin: Style.current.padding
+        anchors.topMargin: Style.current.halfPadding
         width: parent.width
-        spacing: Style.current.padding
-        
         
         Loader {
             active: isAdmin
@@ -133,9 +138,9 @@ ModalPopup {
                         property int nbRequests: chatsModel.communities.activeCommunity.communityMembershipRequests.nbRequests
 
                         id: memberBlock
-                        anchors.top: parent.top
                         anchors.right: parent.right
-                        anchors.rightMargin: 0
+                        anchors.rightMargin: Style.current.padding
+                        anchors.verticalCenter: parent.verticalCenter
                         width: childrenRect.width
                         height: memberBtn.height
 
@@ -186,33 +191,32 @@ ModalPopup {
             }
         }
 
-        Loader {
-            active: isAdmin
-            width: parent.width
-            sourceComponent: CommunityPopupButton {
-                //% "Roles"
-                label: qsTrId("roles")
-                iconName: "roles"
-                width: parent.width
-                onClicked: console.log("TODO:")
-                txtColor: Style.current.textColor
-                SVGImage {
-                    anchors.top: parent.top
-                    anchors.topMargin: Style.current.padding
-                    anchors.right: parent.right
-                    anchors.rightMargin: 0
-                    source: "../../../img/caret.svg"
-                    width: 13
-                    height: 7
-                    rotation: -90
-                    ColorOverlay {
-                        anchors.fill: parent
-                        source: parent
-                        color: Style.current.secondaryText
-                    }
-                }
-            }
-        }
+        // TODO add this back when roles exist
+//        Loader {
+//            active: isAdmin
+//            width: parent.width
+//            sourceComponent: CommunityPopupButton {
+//                label: qsTr("Roles")
+//                iconName: "roles"
+//                width: parent.width
+//                onClicked: console.log("TODO:")
+//                txtColor: Style.current.textColor
+//                SVGImage {
+//                    anchors.verticalCenter: parent.verticalCenter
+//                    anchors.right: parent.right
+//                    anchors.rightMargin: Style.current.padding
+//                    source: "../../../img/caret.svg"
+//                    width: 13
+//                    height: 7
+//                    rotation: -90
+//                    ColorOverlay {
+//                        anchors.fill: parent
+//                        source: parent
+//                        color: Style.current.secondaryText
+//                    }
+//                }
+//            }
+//        }
 
         CommunityPopupButton {
             id: notificationsBtn
@@ -227,6 +231,8 @@ ModalPopup {
             StatusSwitch {
                 id: notificationSwitch
                 anchors.right: parent.right
+                anchors.rightMargin: Style.current.padding
+                anchors.verticalCenter: parent.verticalCenter
                 onCheckedChanged: function(value) {
                     // TODO: enable/disable notifications
                     console.log("TODO: toggle")
@@ -234,8 +240,23 @@ ModalPopup {
             }
         }
 
-        Separator {
+        Item {
+            id: spacer1
             width: parent.width
+            height: Style.current.halfPadding
+        }
+
+        Separator {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.rightMargin: -Style.current.padding
+            anchors.leftMargin: -Style.current.padding
+        }
+
+        Item {
+            id: spacer2
+            width: parent.width
+            height: Style.current.halfPadding
         }
 
         Loader {
@@ -288,8 +309,8 @@ ModalPopup {
                 //% "Delete"
                 label: qsTrId("delete")
                 iconName: "delete"
-                txtColor: Style.current.red
-                //btnColor: Style.current.red // TODO: statusroundbutton should support changing color
+                txtColor: Style.current.danger
+                type: "warn"
             }
         }
     }

ui/shared/status/StatusRoundButton.qml

@@ -6,6 +6,7 @@ import "../../imports"
 import "../../shared"
 
 RoundButton {
+    property string type: "primary"
     property string size: "large"
     property int pressedIconRotation: 0
     property alias iconX: iconImg.x
@@ -115,13 +116,13 @@ RoundButton {
                 return 20
         }
     }
-    icon.color: size === "medium" || size === "small" ? 
-        !enabled ? 
+    icon.color: size === "medium" || size === "small" ?
+        !enabled ?
           Style.current.roundedButtonSecondaryDisabledForegroundColor :
           Style.current.roundedButtonSecondaryForegroundColor
         :
         !enabled ?
-          Style.current.roundedButtonDisabledForegroundColor : 
+          Style.current.roundedButtonDisabledForegroundColor :
           Style.current.roundedButtonForegroundColor
 
     onIconChanged: {
@@ -134,12 +135,13 @@ RoundButton {
         color: {
             if (size === "medium" || size == "small") {
                 return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
-                  hovered ? Style.current.roundedButtonSecondaryHoveredBackgroundColor : 
-                  Style.current.roundedButtonSecondaryBackgroundColor
+                  hovered ? (control.type === "warn" ? Style.current.red : Style.current.roundedButtonSecondaryHoveredBackgroundColor) :
+                  (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonSecondaryBackgroundColor)
             }
             return !enabled ?
               Style.current.roundedButtonDisabledBackgroundColor : 
-              hovered ? Style.current.buttonHoveredBackgroundColor : Style.current.roundedButtonBackgroundColor
+              hovered ? (control.type === "warn" ? Style.current.red : Style.current.buttonHoveredBackgroundColor) :
+                        (control.type === "warn" ? Style.current.lightRed : Style.current.roundedButtonBackgroundColor)
         }
         radius: parent.width / 2
     }
@@ -183,11 +185,11 @@ RoundButton {
                 if (size === "medium" || size == "small") {
                     return !control.enabled ? 
                         Style.current.roundedButtonSecondaryDisabledForegroundColor : 
-                        Style.current.roundedButtonSecondaryForegroundColor
+                        (control.type === "warn" ? Style.current.danger : Style.current.roundedButtonSecondaryForegroundColor)
                 }
                 return !control.enabled ?
                     Style.current.roundedButtonDisabledForegroundColor :
-                    Style.current.roundedButtonForegroundColor
+                   (control.type === "warn" ? Style.current.danger :  Style.current.roundedButtonForegroundColor)
             }
             antialiasing: true
         }