feat: Update Community Overview header based on the new design

[Design](https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=31229-627216&mode=design&t=KoQOW7vmoNc7f41m-0)
1. Update header layout and size
2. Add OverviewSettingsPanel in storybook

feat: Update Community Overview Header based on the new design

Removing squish tests related to the community identicon in the Overview page. The identicon is removed in the new designs

storybook/PagesModel.qml

@@ -177,6 +177,10 @@ ListModel {
         title: "PrivilegedTokenArtworkPanel"
         section: "Panels"
     }
+    ListElement {
+        title: "OverviewSettingsPanel"
+        section: "Panels"
+    }
     ListElement {
         title: "EditSettingsPanel"
         section: "Panels"
@@ -373,10 +377,6 @@ ListModel {
         title: "LanguageCurrencySettings"
         section: "Settings"
     }
-    ListElement {
-        title: "ProfileSocialLinksPanel"
-        section: "Panels"
-    }
     ListElement {
         title: "IntroPanel"
         section: "Panels"

storybook/figma.json

@@ -230,5 +230,8 @@
     ],
     "OverviewSettingsFooter": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=31171-629792&mode=design&t=IAlt2Frp5gx0yPAn-0"
+    ],
+    "OverviewSettingsPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?type=design&node-id=31229-627216&mode=design&t=KoQOW7vmoNc7f41m-0"
     ]
 }

storybook/pages/OverviewSettingsPanelPage.qml

@@ -0,0 +1,33 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import AppLayouts.Communities.panels 1.0
+
+SplitView {
+    id: root
+    SplitView.fillWidth: true
+
+    OverviewSettingsPanel {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        name: communityEditor.name
+        description: communityEditor.description
+        logoImageData: communityEditor.image
+        color: communityEditor.color
+
+        editable: communityEditor.isCommunityEditable
+        owned: communityEditor.amISectionAdmin
+    }
+
+    Pane {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+
+        CommunityInfoEditor{
+            id: communityEditor
+            anchors.fill: parent
+        }
+    }
+}

test/ui-test/src/screens/StatusCommunityScreen.py

@@ -67,7 +67,6 @@ class CommunitySettingsComponents(Enum):
     BACK_TO_COMMUNITY_BUTTON = "communitySettings_BackToCommunity_Button"
     COMMUNITY_NAME_TEXT = "communitySettings_CommunityName_Text"
     COMMUNITY_DESCRIPTION_TEXT = "communitySettings_CommunityDescription_Text"
-    COMMUNITY_LETTER_IDENTICON = "communitySettings_Community_LetterIdenticon"
     OVERVIEW_BUTTON = "communitySettingsView_NavigationListItem_Overview"
     MEMBERS_BUTTON = "communitySettings_Members_NavigationListItem"
     PERMISSIONS_BUTTON = "communitySettings_Permissions_NavigationListItem" 
@@ -189,11 +188,7 @@ class StatusCommunityScreen:
         verify_text_matching(CommunitySettingsComponents.COMMUNITY_NAME_TEXT.value, communityName)
     
     def verify_community_overview_description(self, communityDescription: str):
-        verify_text_matching(CommunitySettingsComponents.COMMUNITY_DESCRIPTION_TEXT.value, communityDescription)
-        
-    def verify_community_overview_color(self, communityColor: str):
-        obj = get_obj(CommunitySettingsComponents.COMMUNITY_LETTER_IDENTICON.value)
-        expect_true(obj.color.name == communityColor, "Community color was not changed correctly")    
+        verify_text_matching(CommunitySettingsComponents.COMMUNITY_DESCRIPTION_TEXT.value, communityDescription) 
         
     def create_community_channel(self, communityChannelName: str, communityChannelDescription: str, method: str):
         if (method == CommunityCreateMethods.BOTTOM_MENU.value):
@@ -289,6 +284,7 @@ class StatusCommunityScreen:
     
     def open_edit_community_by_community_header(self):
         click_obj_by_name(CommunityScreenComponents.COMMUNITY_HEADER_BUTTON.value)
+        verify(is_loaded_visible_and_enabled(CommunitySettingsComponents.EDIT_COMMUNITY_BUTTON.value), "Edit community button is visible and enabled")
         click_obj_by_name(CommunitySettingsComponents.EDIT_COMMUNITY_BUTTON.value)
         
     def change_community_name(self, new_community_name: str):

test/ui-test/testSuites/suite_communities/shared/scripts/community_names.py

@@ -73,7 +73,6 @@ communitySettings_BackToCommunity_Button = {"container": statusDesktop_mainWindo
 communitySettings_CommunityName_Text = {"container": statusDesktop_mainWindow, "objectName": "communityOverviewSettingsCommunityName", "type": "StatusBaseText", "visible": True}
 communitySettings_CommunityDescription_Text = {"container": statusDesktop_mainWindow, "objectName": "communityOverviewSettingsCommunityDescription", "type": "StatusBaseText", "visible": True}
 communitySettings_Community_Identicon = {"container": statusDesktop_mainWindow, "objectName": "communityOverviewSettingsPanelIdenticon", "type": "StatusSmartIdenticon", "visible": True}
-communitySettings_Community_LetterIdenticon = {"container": communitySettings_Community_Identicon, "objectName": "statusSmartIdenticonLetter", "type": "StatusLetterIdenticon", "visible": True}
 
 # Community Edit:
 communitySettings_EditCommunity_ScrollView = {"container": statusDesktop_mainWindow, "objectName": "communityEditPanelScrollView", "type": "StatusScrollView", "visible": True}

test/ui-test/testSuites/suite_communities/tst_communityFlows/test.feature

@@ -82,8 +82,6 @@ Feature: Status Desktop community
         And the admin changes the community description to "<new_community_description>"
         Then the community overview description is "<new_community_description>"
         When the admin goes back to the community
-        And the admin changes the community color to "<new_community_color>"
-        Then the community overview color is "<new_community_color>"
         Examples:
             | new_community_name       | new_community_description  | new_community_color |
             | myCommunityNamedChanged  | Cool new description 123   | #ff0000             |

test/ui-test/testSuites/suite_communities/tst_communityManageOverview/test.feature

@@ -17,7 +17,6 @@ Feature: Community -> Manage Community -> Overview page
         When the admin renames the community to "<new_community_name>" and description to "<new_community_description>" and color to "<new_community_color>"
         Then the community overview name is "<new_community_name>"
         And the community overview description is "<new_community_description>"
-        And the community overview color is "<new_community_color>"
         When the admin goes back to the community
         Then the user lands on the community named "<new_community_name>"
         Examples:

ui/app/AppLayouts/Communities/panels/OverviewSettingsPanel.qml

@@ -53,38 +53,29 @@ StackLayout {
     clip: true
 
     SettingsPage {
-        title: qsTr("Overview")
 
         rightPadding: 64
         bottomPadding: 64
-
+        topPadding: 0
+        header: null
         contentItem: ColumnLayout {
             spacing: 16
-
             RowLayout {
                 Layout.fillWidth: true
 
                 spacing: 16
 
-                StatusSmartIdenticon {
-                    objectName: "communityOverviewSettingsPanelIdenticon"
-                    name: root.name
-                    asset.width: 80
-                    asset.height: 80
-                    asset.color: root.color
-                    asset.letterSize: width / 2.4
-                    asset.name: root.logoImageData
-                    asset.isImage: true
-                }
-
                 ColumnLayout {
                     Layout.fillWidth: true
+                    Layout.maximumWidth: 747
 
                     StatusBaseText {
                         id: nameText
                         objectName: "communityOverviewSettingsCommunityName"
                         Layout.fillWidth: true
-                        font.pixelSize: 24
+                        font.pixelSize: 28
+                        font.bold: true
+                        font.letterSpacing: -0.4
                         color: Theme.palette.directColor1
                         wrapMode: Text.WordWrap
                         text: root.name
@@ -101,11 +92,16 @@ StackLayout {
                     }
                 }
 
+                Item { Layout.fillWidth: true }
+
                 StatusButton {
+                    Layout.preferredHeight: 38
+                    Layout.alignment: Qt.AlignTop
                     objectName: "communityOverviewSettingsEditCommunityButton"
                     visible: root.editable
                     text: qsTr("Edit Community")
                     onClicked: root.currentIndex = 1
+                    size: StatusBaseButton.Size.Small
                 }
             }