fix: community banners UI fixes

- fix spacing/padding/margins
- remove MouseAreas, they block hovering the buttons (not needed any
longer thanks to our new QQC2 buttons)
- some minor cleanups

Fixes #7366

ui/app/AppLayouts/Chat/panels/communities/BackUpCommuntyBannerPanel.qml

@@ -1,5 +1,4 @@
-import QtQuick 2.13
-import QtGraphicalEffects 1.13
+import QtQuick 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -9,10 +8,11 @@ import StatusQ.Components 0.1
 import utils 1.0
 
 Rectangle {
+    id: root
+
     property string communityId
     signal backupButtonClicked()
 
-    id: root
     height: childrenRect.height + Style.current.padding
     anchors.left: parent.left
     anchors.leftMargin: Style.current.padding
@@ -68,13 +68,11 @@ Rectangle {
         anchors.top: parent.top
         anchors.topMargin: 48
         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
-        color: Theme.palette.directColor1
     }
 
     StatusButton {

ui/app/AppLayouts/Chat/panels/communities/CommunityChannelsAndCategoriesBannerPanel.qml

@@ -1,6 +1,4 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtGraphicalEffects 1.13
+import QtQuick 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -28,7 +26,7 @@ Rectangle {
     radius: 16
     color: Style.current.transparent
 
-   Rectangle {
+    Rectangle {
         width: 66
         height: 4
         color: Style.current.secondaryMenuBackground
@@ -74,8 +72,6 @@ Rectangle {
         anchors.top: parent.top
         anchors.topMargin: 48
         horizontalAlignment: Text.AlignHCenter
-        font.pixelSize: 15
-        color: Theme.palette.directColor1
         wrapMode: Text.WordWrap
         anchors.right: parent.right
         anchors.rightMargin: Style.current.xlPadding
@@ -99,6 +95,7 @@ Rectangle {
         text: qsTr("Add categories")
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: addMembersBtn.bottom
+        anchors.topMargin: Style.current.halfPadding
 
         onClicked: {
             root.addCategoriesClicked();

ui/app/AppLayouts/Chat/panels/communities/CommunityWelcomeBannerPanel.qml

@@ -1,10 +1,8 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtGraphicalEffects 1.13
+import QtQuick 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1 as StatusQControls
+import StatusQ.Controls 0.1
 
 import shared.panels 1.0
 import shared.status 1.0
@@ -13,14 +11,7 @@ import utils 1.0
 
 Rectangle {
     id: root
-    height: 220
-    anchors.left: parent.left
-    anchors.leftMargin: Style.current.padding
-    anchors.right: parent.right
-    anchors.rightMargin: Style.current.padding
-    border.color: Style.current.border
-    radius: 16
-    color: Style.current.transparent
+
     property var activeCommunity
     property var store
     property var communitySectionModule
@@ -28,16 +19,14 @@ Rectangle {
 
     signal manageCommunityClicked()
 
-    MouseArea {
-        anchors.fill: parent
-        acceptedButtons: Qt.RightButton
-        propagateComposedEvents: true
-        onClicked: {
-            /* Prevents sending events to the component beneath
-               if Right Mouse Button is clicked. */
-            mouse.accepted = false;
-        }
-    }
+    height: childrenRect.height + Style.current.padding
+    anchors.left: parent.left
+    anchors.leftMargin: Style.current.padding
+    anchors.right: parent.right
+    anchors.rightMargin: Style.current.padding
+    border.color: Style.current.border
+    radius: 16
+    color: Style.current.transparent
 
     Rectangle {
         width: 70
@@ -57,7 +46,7 @@ Rectangle {
         height: 50
     }
 
-    StatusQControls.StatusFlatRoundButton {
+    StatusFlatRoundButton {
         id: closeImg
         implicitWidth: 32
         implicitHeight: 32
@@ -68,7 +57,7 @@ Rectangle {
         icon.height: 20
         icon.width: 20
         icon.name: "close-circle"
-        type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
+        type: StatusFlatRoundButton.Type.Tertiary
         onClicked: {
             let hiddenBannerIds = localAccountSensitiveSettings.hiddenCommunityWelcomeBanners || []
             if (hiddenBannerIds.includes(root.activeCommunity.id)) {
@@ -85,8 +74,6 @@ Rectangle {
         anchors.top: parent.top
         anchors.topMargin: 60
         horizontalAlignment: Text.AlignHCenter
-        font.pixelSize: 15
-        color: Theme.palette.directColor1
         wrapMode: Text.WordWrap
         anchors.right: parent.right
         anchors.rightMargin: Style.current.xlPadding
@@ -94,12 +81,12 @@ Rectangle {
         anchors.leftMargin: Style.current.xlPadding
     }
 
-    StatusQControls.StatusButton {
+    StatusButton {
         id: addMembersBtn
         text: qsTr("Add members")
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: manageBtn.top
-        anchors.bottomMargin: Style.current.halfPadding
+        anchors.top: welcomeText.bottom
+        anchors.topMargin: Style.current.padding
         onClicked: Global.openPopup(Global.inviteFriendsToCommunityPopup, {
             community: root.activeCommunity,
             hasAddedContacts: root.hasAddedContacts,
@@ -107,12 +94,12 @@ Rectangle {
         })
     }
 
-    StatusQControls.StatusFlatButton {
+    StatusFlatButton {
         id: manageBtn
         text: qsTr("Manage community")
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: Style.current.padding
+        anchors.top: addMembersBtn.bottom
+        anchors.topMargin: Style.current.halfPadding
 
         onClicked: root.manageCommunityClicked()
     }

ui/app/AppLayouts/Chat/views/CommunityColumnView.qml

@@ -60,7 +60,7 @@ Item {
         asset.isImage: true
         onClicked: root.infoButtonClicked()
         anchors.top: parent.top
-        anchors.topMargin: 5
+        anchors.topMargin: Style.current.smallPadding
         anchors.left: parent.left
         anchors.leftMargin: Style.current.halfPadding
         anchors.right: (implicitWidth > parent.width - 50) ? adHocChatButton.left : undefined
@@ -377,16 +377,16 @@ Item {
             spacing: Style.current.bigPadding
 
             Loader {
-                id: emptyViewAndSuggestionsLoader
                 active: communityData.amISectionAdmin &&
                         (!localAccountSensitiveSettings.hiddenCommunityWelcomeBanners ||
-                        !localAccountSensitiveSettings.hiddenCommunityWelcomeBanners.includes(communityData.id))
+                         !localAccountSensitiveSettings.hiddenCommunityWelcomeBanners.includes(communityData.id))
                 width: parent.width
                 height: {
                     // I dont know why, the binding doesn't work well if this isn't here
                     item && item.height
-                    return this.active ? item.height : 0
+                    return active ? item.height : 0
                 }
+
                 sourceComponent: Component {
                     CommunityWelcomeBannerPanel {
                         activeCommunity: communityData
@@ -399,21 +399,16 @@ Item {
             } // Loader
 
             Loader {
-                id: channelsAndCategoriesAdminBox
                 active: communityData.amISectionAdmin &&
                         (!localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners ||
-                        !localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners.includes(communityData.id))
+                         !localAccountSensitiveSettings.hiddenCommunityChannelAndCategoriesBanners.includes(communityData.id))
                 width: parent.width
                 height: {
                     // I dont know why, the binding doesn't work well if this isn't here
                     item && item.height
-                    return this.active ? item.height : 0
+                    return active ? item.height : 0
                 }
                 sourceComponent: Component {
-                    Item {
-                        width: parent.width
-                        height: channelsAndCategoriesBanner.height
-
                         CommunityChannelsAndCategoriesBannerPanel {
                             id: channelsAndCategoriesBanner
                             communityId: communityData.id
@@ -424,37 +419,20 @@ Item {
                                 Global.openPopup(createCategoryPopup);
                             }
                         }
-
-                        MouseArea {
-                            anchors.fill: channelsAndCategoriesBanner
-                            acceptedButtons: Qt.RightButton
-                            propagateComposedEvents: true
-                            onClicked: {
-                                /* Prevents sending events to the component beneath
-                                if Right Mouse Button is clicked. */
-                                mouse.accepted = false;
-                            }
-                        }
-                    }
                 }
             } // Loader
 
             Loader {
-                id: backUpBannerLoader
                 active: communityData.amISectionAdmin &&
-                            (!localAccountSensitiveSettings.hiddenCommunityBackUpBanners ||
-                            !localAccountSensitiveSettings.hiddenCommunityBackUpBanners.includes(communityData.id))
+                        (!localAccountSensitiveSettings.hiddenCommunityBackUpBanners ||
+                         !localAccountSensitiveSettings.hiddenCommunityBackUpBanners.includes(communityData.id))
                 width: parent.width
                 height: {
                     // I dont know why, the binding doesn't work well if this isn't here
                     item && item.height
-                    active ? item.height : 0
+                    return active ? item.height : 0
                 }
                 sourceComponent: Component {
-                    Item {
-                        width: parent.width
-                        height: backupBanner.height
-
                         BackUpCommuntyBannerPanel {
                             id: backupBanner
                             communityId: communityData.id
@@ -465,17 +443,6 @@ Item {
                                 })
                             }
                         }
-                        MouseArea {
-                            anchors.fill: backupBanner
-                            acceptedButtons: Qt.RightButton
-                            propagateComposedEvents: true
-                            onClicked: {
-                                /* Prevents sending events to the component beneath
-                                if Right Mouse Button is clicked. */
-                                mouse.accepted = false;
-                            }
-                        }
-                    }
                 }
             } // Loader
         } // Column