feat(StatusQ): Making UI components resizable

Needed for: https://github.com/status-im/status-desktop/issues/6071
feat(StatusStackModal): Component to replace nested StausModals (#733 )
2022-06-28 15:00:25 +03:00 · 2022-06-27 12:23:36 -04:00 · 2022-06-27 07:52:14 +02:00 · 2022-06-27 07:50:22 +02:00 · 2022-06-23 19:52:23 +02:00 · 2022-06-23 11:44:06 -04:00
206 changed files with 4408 additions and 1759 deletions
@@ -14,9 +14,9 @@ import "demoapp/data" 1.0

 Rectangle {
    id: demoApp
-    height: 602
-    width: 1002
-    border.width: 1
+    height: Theme.dp(602)
+    width: Theme.dp(1002)
+    border.width: Theme.dp(1)
    border.color: Theme.palette.baseColor2

    property string titleStyle: "osx"
@@ -25,10 +25,11 @@ Rectangle {
        id: appSectionType
        readonly property int chat: 0
        readonly property int community: 1
-        readonly property int wallet: 2
+        readonly property int communitiesPortal: 2
+        readonly property int wallet: 3
        readonly property int browser: 3
-        readonly property int nodeManagement: 4
-        readonly property int profileSettings: 5
+        readonly property int nodeManagement: 5
+        readonly property int profileSettings: 6
        readonly property int apiDocumentation: 100
        readonly property int demoApp: 101
    }
@@ -49,7 +50,7 @@ Rectangle {
    StatusMacTrafficLights {
        anchors.left: parent.left
        anchors.top: parent.top
-        anchors.margins: 13
+        anchors.margins: Theme.dp(13)
        z: statusAppLayout.z + 1
        visible: titleStyle === "osx"
    }
@@ -111,13 +112,18 @@ Rectangle {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
                onClicked: {
                    if(model.sectionType === appSectionType.chat)
                    {
                        appView.sourceComponent = statusAppChatView
                        demoApp.setActiveItem(model.sectionId)
                    }
+                    else if(model.sectionType === appSectionType.communitiesPortal)
+                    {
+                        appView.sourceComponent = statusCommunityPortalView
+                        demoApp.setActiveItem(model.sectionId)
+                    }
                    else if(model.sectionType === appSectionType.profileSettings)
                    {
                        appView.sourceComponent = statusAppProfileSettingsView
@@ -137,7 +143,7 @@ Rectangle {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
                onClicked: {
                    if(model.sectionType === appSectionType.community)
                    {
@@ -169,7 +175,7 @@ Rectangle {
                    StatusMenuItem {
                        text: qsTr("Leave Community")
                        icon.name: "arrow-right"
-                        icon.width: 14
+                        icon.width: Theme.dp(14)
                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
@@ -205,6 +211,11 @@ Rectangle {
        StatusAppProfileSettingsView { }
    }

+    Component {
+        id: statusCommunityPortalView
+        StatusAppCommunitiesPortalView { }
+    }
+
    DemoContactRequestsModal {
        id: demoContactRequestsModal
        anchors.centerIn: parent
@@ -2,6 +2,7 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14

 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1

 Item {
    id: themeSwitchWrapper
@@ -19,11 +20,11 @@ Item {

        Row {
            id: themeSwitch
-            spacing: 2
+            spacing: Theme.dp(2)

            Text {
                text: "🌤"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                anchors.verticalCenter: parent.verticalCenter
            }

@@ -35,13 +36,13 @@ Item {
                    text: "Toggle Theme"
                    visible: sensor.containsMouse
                    orientation: StatusToolTip.Orientation.Bottom
-                    y: themeSwitchWrapper.y + 16
+                    y: themeSwitchWrapper.y + Theme.dp(16)
                }
            }

            Text {
                text: "🌙"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                anchors.verticalCenter: parent.verticalCenter
            }
        }
@@ -3,16 +3,17 @@ import QtQuick.Layouts 1.14
 import QtQuick.Dialogs 1.3

 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1

-
 Column {
-    spacing: 10
+    spacing: Theme.dp(10)
    Grid {
        id: buttonGridWidth
-        columns: 3
-        columnSpacing: 38
-        rowSpacing: 10
+        columns: Theme.dp(3)
+        columnSpacing: Theme.dp(38)
+        rowSpacing: Theme.dp(10)

        horizontalItemAlignment: Grid.AlignHCenter

@@ -173,25 +174,44 @@ Column {
            loading: true
        }

+        // transparent
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            loading: true
+        }
+
        // Rounded blue

        StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)

            icon.name: "info"
        }

        StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
            icon.name: "info"
            enabled: false
        }

        StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
            icon.name: "info"
            loading: true
        }
@@ -200,24 +220,24 @@ Column {

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)

            icon.name: "info"
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
            icon.name: "info"
            enabled: false
        }

        StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
            icon.name: "info"
            loading: true
        }
@@ -307,12 +327,20 @@ Column {
        onClicked: {
            colorDialog.open();
        }
-        ColorDialog {
-            id: colorDialog
-            property bool colorSelected: false
-            onAccepted: {
-                colorSelected = true;
-            }
+    }
+
+    StatusColorDialog {
+        id: colorDialog
+        anchors.centerIn: parent
+        property bool colorSelected: false
+        onAccepted: {
+            colorSelected = true;
        }
    }
+
+    // Button with emoji
+    StatusButton {
+        text: "Button with Emoji"
+        icon.emoji: "🖼️️"
+    }
 }
@@ -9,22 +9,22 @@ import Sandbox 0.1

 GridLayout {
    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)

    StatusSelectableText {
        color: Theme.palette.baseColor1
        text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
-        font.pixelSize: 15
-        width: 300
+        font.pixelSize: Theme.dp(15)
+        width: Theme.dp(300)
        multiline: true
    }

    StatusSelectableText {
        color: Theme.palette.baseColor1
        text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
-        font.pixelSize: 15
-        width: 200
+        font.pixelSize: Theme.dp(15)
+        width: Theme.dp(200)
    }

    StatusIconTabButton {
@@ -57,21 +57,21 @@ GridLayout {
            visible: parent.hovered
            text: "Right"
            orientation: StatusToolTip.Orientation.Right
-            x: parent.width + 16
+            x: parent.width + Theme.dp(16)
            y: parent.height / 2 - height / 2 + 4
        }
        StatusToolTip {
            visible: parent.hovered
            text: "Bottom"
            orientation: StatusToolTip.Orientation.Bottom
-            y: parent.height + 12
+            y: parent.height + Theme.dp(12)
        }
        StatusToolTip {
            visible: parent.hovered
            text: "Left"
            orientation: StatusToolTip.Orientation.Left
-            x: -parent.width /2 -8
-            y: parent.height / 2 - height / 2 + 4
+            x: -parent.width /2 - Theme.dp(8)
+            y: parent.height / 2 - height / 2 + Theme.dp(4)
        }
    }

@@ -95,7 +95,7 @@ GridLayout {
        tooltip.text: "Profile"
        badge.value: 0
        badge.visible: true
-        badge.anchors.leftMargin:-16
+        badge.anchors.leftMargin:-Theme.dp(16)
    }

    StatusNavBarTabButton {
@@ -131,8 +131,8 @@ GridLayout {
    }

    Item {
-        implicitWidth: 100
-        implicitHeight: 48
+        implicitWidth: Theme.dp(100)
+        implicitHeight: Theme.dp(48)
        StatusChatInfoButton {
            title: "Iuri Matias elided"
            subTitle: "Contact"
@@ -141,13 +141,13 @@ GridLayout {
            type: StatusChatInfoButton.Type.OneToOneChat
            muted: true
            pinnedMessagesCount: 1
-            width: 100
+            width: Theme.dp(100)
        }
    }

    Item {
-        implicitWidth: 100
-        implicitHeight: 48
+        implicitWidth: Theme.dp(100)
+        implicitHeight: Theme.dp(48)
        StatusChatInfoButton {
            title: "Iuri Matias big not elided"
            subTitle: "Contact"
@@ -156,7 +156,7 @@ GridLayout {
            type: StatusChatInfoButton.Type.OneToOneChat
            muted: true
            pinnedMessagesCount: 1
-            width: 400
+            width: Theme.dp(400)
        }
    }

@@ -183,22 +183,32 @@ GridLayout {
    }

    StatusSlider {
-        width: 360
+        width: Theme.dp(360)
        from: 0
        to: 100
        value: 40
    }

+    StatusLabeledSlider {
+        width: Theme.dp(360)
+        model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
+    }
+
+    StatusLabeledSlider {
+        width: Theme.dp(360)
+        model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
+    }
+
    StatusBanner {
        id: banner
-        width: 360
-        topPadding: 20
+        width: Theme.dp(360)
+        topPadding: Theme.dp(20)
        type: StatusBanner.Type.Danger
        statusText: "Banner"
    }

    StatusProgressBar {
-        id: progressBar        
+        id: progressBar
        text: "Weak"
        value: 0.5
        fillColor : Theme.palette.pinColor1
@@ -1,11 +1,12 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.14
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1

 GridLayout {
    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
    property color iconColor

    Repeater {
@@ -10,31 +10,96 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1

 Column {
-    spacing: 5
+    spacing: Theme.dp(10)

    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        toolbarComponent: chatInfoButton1
+        width: Theme.dp(518)
+
+        Component {
+            id: chatInfoButton1
+
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.OneToOneChat
+             }
+        }
    }

    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
-        chatInfoButton.pinnedMessagesCount: 1
-        chatInfoButton.muted: true
+        toolbarComponent: chatInfoButton2
+        width: Theme.dp(518)
+
+        Component {
+            id: chatInfoButton2
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.PublicChat
+                pinnedMessagesCount: 1
+                muted: true
+             }
+        }
    }

+
    StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-        chatInfoButton.pinnedMessagesCount: 1
        notificationCount: 1
+        toolbarComponent: chatInfoButton3
+        width: Theme.dp(518)
+
+        Component {
+            id: chatInfoButton3
+
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.OneToOneChat
+                pinnedMessagesCount: 1
+             }
+        }
+    }
+
+    StatusChatToolBar {
+        notificationCount: 1
+        toolbarComponent: tagSelector
+        width: Theme.dp(518)
+
+        Component {
+            id: tagSelector
+
+            StatusTagSelector {
+                namesModel: ListModel {
+                    ListElement {
+                        publicId: "0x0"
+                        name: "Maria"
+                        icon: ""
+                        isIdenticon: false
+                        onlineStatus: 3
+                        isReadonly: true
+                        tagIcon: "crown"
+                    }
+                    ListElement {
+                        publicId: "0x1"
+                        name: "James"
+                        icon: ""
+                        isIdenticon: false
+                        onlineStatus: 1
+                        isReadonly: false
+                        tagIcon: ""
+                    }
+                }
+                toLabelText: qsTr("To: ")
+                warningText: qsTr("USER LIMIT REACHED")
+            }
+        }
    }

    Row {
@@ -42,6 +107,8 @@ Column {
        Button {
            id: btn
            text: "Append"
+            width: Theme.dp(100)
+            height: Theme.dp(40)
            onClicked: {
                buttons.append({
                    name: "Test community",
@@ -77,7 +144,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
            }
        }

@@ -120,7 +187,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
            }

            communityNavBarButton: StatusNavBarTabButton {
@@ -134,7 +201,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)

                popupMenu: StatusPopupMenu {

@@ -159,7 +226,7 @@ Column {
                    StatusMenuItem {
                        text: qsTr("Leave Community")
                        icon.name: "arrow-right"
-                        icon.width: 14
+                        icon.width: Theme.dp(14)
                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
@@ -205,7 +272,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
            }

            communityNavBarButton: StatusNavBarTabButton {
@@ -219,7 +286,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)

                popupMenu: StatusPopupMenu {

@@ -244,8 +311,8 @@ Column {
                    StatusMenuItem {
                        text: qsTr("Leave Community")
                        icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                        type: StatusMenuItem.Type.Danger
                    }
                }
@@ -295,7 +362,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
            }

            communityNavBarButton: StatusNavBarTabButton {
@@ -309,7 +376,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)

                popupMenu: StatusPopupMenu {

@@ -334,8 +401,8 @@ Column {
                    StatusMenuItem {
                        text: qsTr("Leave Community")
                        icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                        type: StatusMenuItem.Type.Danger
                    }
                }
@@ -390,7 +457,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
            }

            communityNavBarButton: StatusNavBarTabButton {
@@ -404,7 +471,7 @@ Column {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)

                popupMenu: StatusPopupMenu {

@@ -429,15 +496,13 @@ Column {
                    StatusMenuItem {
                        text: qsTr("Leave Community")
                        icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                        type: StatusMenuItem.Type.Danger
                    }
                }
            }
        }
-
-
    }
 }

@@ -8,8 +8,8 @@ import StatusQ.Core.Utils 0.1

 GridLayout {
    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)

    StatusNavigationListItem {
        title: "Menu Item"
@@ -156,7 +156,7 @@ GridLayout {
        subTitle: "Subtitle"
        tertiaryTitle: "Tertiary title"

-        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.pixelSize: Theme.dp(17)
        statusListItemTitle.font.weight: Font.Bold
    }

@@ -166,7 +166,7 @@ GridLayout {
        tertiaryTitle: "Tertiary title"
        icon.name: "info"

-        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.pixelSize: Theme.dp(17)
        statusListItemTitle.font.weight: Font.Bold
    }

@@ -345,14 +345,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        tagsModel : 2
        tagsDelegate: StatusListItemTag {
            color: "blue"
-            height: 24
-            radius: 6
+            height: Theme.dp(24)
+            radius: Theme.dp(6)
            closeButtonVisible: false
            icon.emoji: "😁"
            icon.emojiSize: Emoji.size.verySmall
            icon.isLetterIdenticon: true
            title: "helloworld.eth"
-            titleText.font.pixelSize: 12
+            titleText.font.pixelSize: Theme.dp(12)
            titleText.color: Theme.palette.indirectColor1
        }
    }
@@ -362,7 +362,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        subTitle: "Emoji"
        icon.emoji: "😁"
        icon.color: "yellow"
-        icon.letterSize: 14
+        icon.letterSize: Theme.dp(14)
        icon.isLetterIdenticon: true
    }

@@ -394,13 +394,13 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    StatusMemberListItem {
        nickName: "This is an example"
        userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
-        isMutualContact: true
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isVerified: true
+        isContact: true
        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
        image.isIdenticon: true
-        isOnline: true
+        status: 1 // FIXME: use enum
        ringSettings.ringSpecModel:
            ListModel {
                ListElement {colorId: 13; segmentLength: 5}
@@ -416,29 +416,62 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

    StatusMemberListItem {
        nickName: "carmen.eth"
-        isOnline: false
-        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+        isUntrustworthy: true
    }

    StatusMemberListItem {
        nickName: "very-long-annoying-nickname.eth"
-        isOnline: false
-        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+        isUntrustworthy: true
    }

    StatusMemberListItem {
        nickName: "This girl I know from work"
        userName: "annabelle"
-        isOnline: true
+        status: 1 // FIXME: use enum
    }

    StatusMemberListItem {
        nickName: "Mark Cuban"
        userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isMutualContact: true
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isContact: true
        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
        image.isIdenticon: true
    }
+
+    StatusMemberListItem {
+        nickName: "admin.guy"
+        isAdmin: true
+        isUntrustworthy: true
+    }
+
+    StatusBaseText {
+        Layout.fillWidth: true
+        Layout.topMargin: 16
+        text: "Loading features:"
+        font.pixelSize: 17
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Incoming device"
+        label: "loading: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loading: true
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Device"
+        label: "loadingFailed: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loadingFailed: true
+    }
 }
@@ -10,8 +10,8 @@ ColumnLayout {
        Layout.fillHeight: true

        columns: 6
-        columnSpacing: 5
-        rowSpacing: 5
+        columnSpacing: Theme.dp(5)
+        rowSpacing: Theme.dp(5)

        StatusLoadingIndicator {
            color: Theme.palette.directColor4
@@ -53,7 +53,7 @@ ColumnLayout {
            StatusLetterIdenticon {
                name: "A"
                color: Theme.palette.userCustomizationColors[index]
-                letterSize: 16
+                letterSize: Theme.dp(16)
            }
        }
    }
@@ -4,9 +4,12 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core.Utils 0.1

 Column {
-    spacing: 20
+    spacing: Theme.dp(20)

    StatusButton {
        text: "Simple modal"
@@ -83,6 +86,12 @@ Column {
        onClicked: advancedHeaderFooterModal.open()
    }

+
+    StatusButton {
+        text: "Modal with Floating header Buttons"
+        onClicked: floatingHeaderModal.open()
+    }
+
    StatusModal {
        id: simpleModal
        anchors.centerIn: parent
@@ -135,11 +144,11 @@ Column {

        headerActionButton: StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)

-            icon.width: 20
-            icon.height: 20
+            icon.width: Theme.dp(20)
+            icon.height: Theme.dp(20)
            icon.name: "info"
        }

@@ -184,17 +193,17 @@ Column {
        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            color: Theme.palette.directColor1
        }

        headerActionButton: StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)

-            icon.width: 20
-            icon.height: 20
+            icon.width: Theme.dp(20)
+            icon.height: Theme.dp(20)
            icon.name: "info"
        }
    }
@@ -209,7 +218,7 @@ Column {
            id: text
            anchors.centerIn: parent
            text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            color: Theme.palette.directColor1
        }

@@ -234,7 +243,7 @@ Column {
        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            color: Theme.palette.directColor1
        }

@@ -260,7 +269,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            color: Theme.palette.directColor1
        }

@@ -287,7 +296,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            color: Theme.palette.directColor1
        }

@@ -314,7 +323,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        contentItem: StatusBaseText {
            anchors.centerIn: parent
            text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            color: Theme.palette.directColor1
        }

@@ -365,39 +374,86 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        showFooter: false
        showAdvancedHeader: true
        showAdvancedFooter: true
-        height: 200
+        height: Theme.dp(200)
        advancedHeaderComponent: Rectangle {
            width: parent.width
-            height: 50
+            height: Theme.dp(50)
            color: Theme.palette.baseColor1
-            border.width: 1
+            border.width: Theme.dp(1)
            StatusBaseText {
                anchors.centerIn: parent
                text: "Add any header here"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                color: Theme.palette.directColor1
            }

        }
        advancedFooterComponent: Rectangle {
            width: parent.width
-            height: 50
+            height: Theme.dp(50)
            color: Theme.palette.baseColor1
-            border.width: 1
+            border.width: Theme.dp(1)
            StatusBaseText {
                anchors.centerIn: parent
                text: "Add any footer here"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                color: Theme.palette.directColor1
            }

        }
    }

+    StatusModal {
+        id: floatingHeaderModal
+        anchors.centerIn: parent
+        height: Theme.dp(200)
+        showHeader: false
+        showFooter: false
+        showAdvancedHeader: true
+        hasFloatingButtons: true
+        advancedHeaderComponent: StatusFloatingButtonsSelector {
+            id: floatingHeader
+            model: dummyAccountsModel
+            delegate: Rectangle {
+                width: button.width
+                height: button.height
+                radius: Theme.dp(8)
+                visible: visibleIndices.includes(index)
+                StatusButton {
+                    id: button
+                    topPadding: Theme.dp(8)
+                    bottomPadding: 0
+                    implicitHeight: Theme.dp(32)
+                    defaultLeftPadding: Theme.dp(4)
+                    text: name
+                    icon.emoji: !!emoji ? emoji: ""
+                    icon.emojiSize: Emoji.size.middle
+                    icon.name: !emoji ? "filled-account": ""
+                    normalColor: "transparent"
+                    highlighted: index === floatingHeader.currentIndex
+                    onClicked: {
+                        floatingHeader.currentIndex = index
+                    }
+                }
+            }
+            popupMenuDelegate: StatusListItem {
+                implicitWidth: Theme.dp(272)
+                title: name
+                onClicked: floatingHeader.itemSelected(index)
+                visible: !visibleIndices.includes(index)
+            }
+        }
+    }
+
    ListModel {
        id: dummyAccountsModel
-        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 1"; iconName: "filled-account"; emoji:  "🥑"}
        ListElement{name: "Account 2"; iconName: "filled-account"}
+        ListElement{name: "Account 3"; iconName: "filled-account"}
+        ListElement{name: "Account 4"; iconName: "filled-account"}
+        ListElement{name: "Account 5"; iconName: "filled-account"}
+        ListElement{name: "Account 6"; iconName: "filled-account"}
+        ListElement{name: "Account 7"; iconName: "filled-account"}
    }

    StatusSpellcheckingMenuItems {
@@ -12,7 +12,7 @@ import StatusQ.Core.Theme 0.1
 ListView {
    id: messageList
    anchors.fill: parent
-    anchors.margins: 15
+    anchors.margins: Theme.dp(15)
    clip: true
    delegate: StatusMessage {
        id: delegate
@@ -34,8 +34,8 @@ ListView {
            secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
            chatID: model.chatKey
            profileImage: StatusImageSettings {
-                width: 40
-                height: 40
+                width: Theme.dp(40)
+                height: Theme.dp(40)
                source: model.profileImage
                isIdenticon: model.isIdenticon
            }
@@ -55,8 +55,8 @@ ListView {
            amISender:  model.isReply ? model.replyAmISender : ""
            displayName:  model.isReply ? model.replySenderName: ""
            profileImage: StatusImageSettings {
-                width: 20
-                height: 20
+                width: Theme.dp(20)
+                height: Theme.dp(20)
                source:  model.isReply ? model.replyProfileImage: ""
                isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
            }
@@ -67,23 +67,23 @@ ListView {
        quickActions: [
            StatusFlatRoundButton {
                id: emojiBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                icon.name: "reaction-b"
                type: StatusFlatRoundButton.Type.Tertiary
                tooltip.text: "Add reaction"
            },
            StatusFlatRoundButton {
                id: replyBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                icon.name: "reply"
                type: StatusFlatRoundButton.Type.Tertiary
                tooltip.text: "Reply"
            },
            StatusFlatRoundButton {
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                icon.name: "tiny/edit"
                type: StatusFlatRoundButton.Type.Tertiary
                tooltip.text: "Edit"
@@ -93,8 +93,8 @@ ListView {
            },
            StatusFlatRoundButton {
                id: otherBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                icon.name: "more"
                type: StatusFlatRoundButton.Type.Tertiary
                tooltip.text: "More"
@@ -10,7 +10,7 @@ import StatusQ.Core.Theme 0.1
 Page {
    id: root
    anchors.fill: parent
-    anchors.margins: 16
+    anchors.margins: Theme.dp(16)
    property ListModel contactsModel: null
    background: null

@@ -19,13 +19,13 @@ Page {
        width: parent.width
        height: tagSelector.height
        anchors.right: parent.right
-        anchors.rightMargin: 8
+        anchors.rightMargin: Theme.dp(8)

        StatusTagSelector {
            id: tagSelector
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            Layout.leftMargin: 17
+            Layout.leftMargin: Theme.dp(17)
            maxHeight: root.height
            toLabelText: qsTr("To: ")
            warningText: qsTr("USER LIMIT REACHED")
@@ -36,7 +36,7 @@ Page {
                var index = -1;
                if (!!contactsModel) {
                    for (var i = 0; i < contactsModel.count; i++) {
-                        if (contactsModel.get(i).publicId === pubKey) {
+                        if (contactsModel.get(i).pubKey === pubKey) {
                            index = i;
                        }
                    }
@@ -58,6 +58,11 @@ Page {
                }
                return randomString.join().toString().replace(/,/g, '');
            }
+            colorIdForPubkeyGetter: function (pubKey) {
+                //for simulation purposes only, in real app
+                //this would be Utils.colorIdForPubkey(pubKey);
+                return Math.floor(Math.random() * 10);
+            }
            onTextChanged: {
                sortModel(root.contactsModel);
            }
@@ -68,7 +73,7 @@ Page {
        }

        StatusButton {
-            implicitHeight: 44
+            implicitHeight: Theme.dp(44)
            Layout.alignment: Qt.AlignTop
            enabled: (tagSelector.namesModel.count > 0)
            text: "Confirm"
@@ -77,14 +82,14 @@ Page {

    contentItem: Item {
        anchors.fill: parent
-        anchors.topMargin: 68
+        anchors.topMargin: Theme.dp(68)

        StatusBaseText {
            visible: (contactsModel.count === 0)
            anchors.centerIn: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            color: Theme.palette.baseColor1
            text: qsTr("You can only send direct messages to your Contacts. \n\n
 Send a contact request to the person you would like to chat with, you will be\n able to
@@ -19,24 +19,24 @@ StatusModal {
        width: root.width

        StatusModalDivider {
-            bottomPadding: 8
+            bottomPadding: Theme.dp(8)
        }

        StatusBaseText {
            text: "A community of cat lovers, meow!"
            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
-            height: 46
+            font.pixelSize: Theme.dp(15)
+            height: Theme.dp(46)
            color: Theme.palette.directColor1
            anchors.left: parent.left
            anchors.right: parent.right
-            anchors.leftMargin: 16
-            anchors.rightMargin: 16
+            anchors.leftMargin: Theme.dp(16)
+            anchors.rightMargin: Theme.dp(16)
        }

        StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
        }

        StatusDescriptionListItem {
@@ -49,13 +49,13 @@ StatusModal {
        }

        StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
        }

        StatusListItem {
            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
            title: "Members"
            icon.name: "group-chat"
            label: "184"
@@ -79,13 +79,13 @@ StatusModal {
        }

        StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
        }

        StatusListItem {
            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
            title: "Edit community"
            icon.name: "edit"
            type: StatusListItem.Type.Secondary
@@ -93,7 +93,7 @@ StatusModal {

        StatusListItem {
            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
            title: "Transfer ownership"
            icon.name: "exchange"
            type: StatusListItem.Type.Secondary
@@ -101,7 +101,7 @@ StatusModal {

        StatusListItem {
            anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
            title: "Leave community"
            icon.name: "arrow-right"
            icon.rotation: 180
@@ -11,18 +11,18 @@ StatusModal {
    header.title: "Contact Requests"
    headerActionButton: StatusFlatRoundButton {
        type: StatusFlatRoundButton.Type.Secondary
-        width: 32
-        height: 32
+        width: Theme.dp(32)
+        height: Theme.dp(32)

-        icon.width: 20
-        icon.height: 20
+        icon.width: Theme.dp(20)
+        icon.height: Theme.dp(20)
        icon.name: "notification"
    }

    contentItem: StatusBaseText {
        anchors.centerIn: parent
        text: "Contact request will be shown here"
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
        color: Theme.palette.directColor1
    }

@@ -20,26 +20,26 @@ StatusAppThreePanelLayout {
        StatusNavigationPanelHeadline {
            id: headline
            anchors.top: parent.top
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Chat"
        }

        RowLayout {
            id: searchInputWrapper
-            width: 288
+            width: Theme.dp(288)
            height: searchInput.height
            anchors.top: headline.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
            anchors.horizontalCenter: parent.horizontalCenter

            StatusBaseInput {
                id: searchInput
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignVCenter
-                implicitHeight: 36
-                topPadding: 8
-                bottomPadding: 8
+                implicitHeight: Theme.dp(36)
+                topPadding: Theme.dp(8)
+                bottomPadding: Theme.dp(8)
                placeholderText: "Search"
                icon.name: "search"
            }
@@ -58,9 +58,9 @@ StatusAppThreePanelLayout {

        Column {
            anchors.top: searchInputWrapper.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: 8
+            spacing: Theme.dp(8)

            StatusContactRequestsIndicatorListItem {
                anchors.horizontalCenter: parent.horizontalCenter
@@ -145,15 +145,8 @@ StatusAppThreePanelLayout {
        anchors.fill: parent

        StatusChatToolBar {
-            anchors.top: parent.top
            width: parent.width
-
-            chatInfoButton.title: "Amazing Funny Squirrel"
-            chatInfoButton.subTitle: "Contact"
-            chatInfoButton.icon.color: Theme.palette.miscColor7
-            chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-            chatInfoButton.pinnedMessagesCount: 1
-
+            toolbarComponent: statusChatInfoButton
            searchButton.visible: false
            membersButton.visible: false
            notificationCount: 1
@@ -181,11 +174,24 @@ StatusAppThreePanelLayout {
                StatusMenuItem {
                    text: "Leave Chat"
                    icon.name: "arrow-right"
-                    icon.width: 14
+                    icon.width: Theme.dp(14)
                    iconRotation: 180
                    type: StatusMenuItem.Type.Danger
                }
            }
+
+            Component {
+                id: statusChatInfoButton
+
+                StatusChatInfoButton {
+                   width: Math.min(implicitWidth, parent.width)
+                   title: "Amazing Funny Squirrel"
+                   subTitle: "Contact"
+                   icon.color: Theme.palette.miscColor7
+                   type: StatusChatInfoButton.Type.OneToOneChat
+                   pinnedMessagesCount: 1
+                }
+            }
        }
    }
 }
@@ -0,0 +1,156 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import "../demoapp/data" 1.0
+
+
+ScrollView {
+    id: root
+
+    QtObject {
+        id: d
+
+        property ListModel featuredCommunitiesModel: Models.featuredCommunitiesModel
+        property ListModel popularCommunitiesModel: Models.curatedCommunitiesModel
+        property ListModel tagsModel: Models.tagsModel
+
+        property string searchText: ""
+        property int layoutVMargin: Theme.dp(70)
+        property int layoutHMargin: Theme.dp(64)
+        property int titlePixelSize: Theme.dp(28)
+        property int subtitlePixelSize: Theme.dp(17)
+        property int stylePadding: Theme.dp(16)
+
+        function navigateToCommunity(communityId) {
+            console.info("Clicked community ID: " + communityId)
+        }
+    }
+
+    contentHeight: column.height + d.layoutVMargin
+    contentWidth: column.width + d.layoutHMargin
+    clip: true
+
+    ColumnLayout {
+        id: column
+        spacing: Theme.dp(18)
+
+        StatusBaseText {
+            Layout.topMargin: d.layoutVMargin
+            Layout.leftMargin: d.layoutHMargin
+            text: qsTr("Find community")
+            font.weight: Font.Bold
+            font.pixelSize: d.titlePixelSize
+            color: Theme.palette.directColor1
+        }
+
+        // Tags definition - Now hidden - Out of scope
+        // TODO: Replace by `StatusListItemTagRow`
+        Row {
+            visible: d.tagsModel.count > 0
+            Layout.leftMargin: d.layoutHMargin
+            Layout.rightMargin: d.layoutHMargin
+            width: Theme.dp(1234) // by design
+            spacing: d.stylePadding/2
+
+            Repeater {
+                model: d.tagsModel
+                delegate: StatusListItemTag {
+                    border.color: Theme.palette.baseColor2
+                    color: "transparent"
+                    height: Theme.dp(32)
+                    radius: Theme.dp(36)
+                    closeButtonVisible: false
+                    icon.emoji: model.emoji
+                    icon.height: Theme.dp(32)
+                    icon.width: icon.heights
+                    icon.color: "transparent"
+                    icon.isLetterIdenticon: true
+                    title: model.name
+                    titleText.font.pixelSize: Theme.dp(15)
+                    titleText.color: Theme.palette.primaryColor1
+                }
+            }
+        }
+
+        StatusBaseText {
+            Layout.leftMargin: d.layoutHMargin
+            Layout.topMargin: Theme.dp(20)
+            text: qsTr("Featured")
+            font.weight: Font.Bold
+            font.pixelSize: d.subtitlePixelSize
+            color: Theme.palette.directColor1
+        }
+
+        GridLayout {
+            id: featuredGrid
+            Layout.leftMargin: d.layoutHMargin
+            columns: 3
+            columnSpacing: d.stylePadding
+            rowSpacing: d.stylePadding
+
+            Repeater {
+                model: d.featuredCommunitiesModel
+                delegate: StatusCommunityCard {
+                    locale: "es"
+                    communityId: model.communityId
+                    loaded: model.available
+                    logo: model.logo
+                    name: model.name
+                    description: model.description
+                    members: model.members
+                    popularity: model.popularity
+                    communityColor: model.communityColor
+                    categories: ListModel {
+                        ListElement { name: "sport"; emoji: "🎾"}
+                        ListElement { name: "food"; emoji: "🥑"}
+                        ListElement { name: "privacy"; emoji: "👻"}
+                    }
+
+                    onClicked: { d.navigateToCommunity(communityId) }
+                }
+            }
+        }
+
+        StatusBaseText {
+            Layout.leftMargin: d.layoutHMargin
+            Layout.topMargin: Theme.dp(20)
+            text: qsTr("Popular")
+            font.weight: Font.Bold
+            font.pixelSize: d.subtitlePixelSize
+            color: Theme.palette.directColor1
+        }
+
+        GridLayout {
+            Layout.leftMargin: d.layoutHMargin
+            columns: 3
+            columnSpacing: d.stylePadding
+            rowSpacing: d.stylePadding
+
+            Repeater {
+                model: d.popularCommunitiesModel
+                delegate: StatusCommunityCard {
+                    locale: "es"
+                    communityId: model.communityId
+                    loaded: model.available
+                    logo: model.logo
+                    name: model.name
+                    description: model.description
+                    members: model.members
+                    activeUsers: model.activeUsers
+                    popularity: model.popularity
+                    tokenLogo: model.tokenLogo
+                    isPrivate: model.isPrivate
+                    banner: model.banner
+
+                    onClicked: { d.navigateToCommunity(communityId) }
+                }
+            }
+        }
+    }
+}
@@ -63,7 +63,7 @@ StatusAppThreePanelLayout {
            id: scrollView

            anchors.top: statusChatInfoToolBar.bottom
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
            anchors.bottom: parent.bottom
            width: leftPanel.width

@@ -73,7 +73,7 @@ StatusAppThreePanelLayout {
            StatusChatListAndCategories {
                id: communityCategories
                width: leftPanel.width
-                height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+                height: implicitHeight > (leftPanel.height - Theme.dp(64)) ? implicitHeight + Theme.dp(8) : leftPanel.height - Theme.dp(64)

                draggableItems: true
                draggableCategories: false
@@ -166,13 +166,10 @@ StatusAppThreePanelLayout {
    centerPanel: Item {
        StatusChatToolBar {
            id: statusChatToolBar
-            anchors.top: parent.top
-            width: parent.width

-            chatInfoButton.title: "general"
-            chatInfoButton.subTitle: "Community Chat"
-            chatInfoButton.icon.color: Theme.palette.miscColor6
-            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+            width: parent.width
+            toolbarComponent: statusChatInfoButton
+
            onSearchButtonClicked: {
                searchButton.highlighted = !searchButton.highlighted;
                searchPopup.setSearchSelection(communityDetailModalTitle,
@@ -184,6 +181,18 @@ StatusAppThreePanelLayout {
            onMembersButtonClicked: {
                root.showRightPanel = !root.showRightPanel;
            }
+
+            Component {
+                id: statusChatInfoButton
+
+                StatusChatInfoButton {
+                   width: Math.min(implicitWidth, parent.width)
+                   title: "general"
+                   subTitle: "Community Chat"
+                   icon.color: Theme.palette.miscColor6
+                   type: StatusChatInfoButton.Type.CommunityChat
+                }
+            }
        }

        StatusSearchPopup {
@@ -239,34 +248,34 @@ StatusAppThreePanelLayout {
            anchors.topMargin:16
            anchors.left: parent.left
            anchors.leftMargin: 16
-            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+            opacity: (rightPanel.width > Theme.dp(50)) ? 1.0 : 0.0
            visible: (opacity > 0.1)
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            text: qsTr("Members")
        }

        ListView {
            anchors.top: titleText.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
            anchors.left: parent.left
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
            anchors.right: parent.right
-            anchors.rightMargin: 8
+            anchors.rightMargin: Theme.dp(8)
            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 16
+            anchors.bottomMargin: Theme.dp(16)
            boundsBehavior: Flickable.StopAtBounds
            model: Models.membersListModel
            delegate: StatusMemberListItem {
                implicitWidth: parent.width
-                nickName: model.nickName
-                userName: model.name
-                chatKey: model.publicId
-                trustIndicator: model.trustIndicator
-                isMutualContact: model.isMutualContact
+                nickName: model.localNickname
+                userName: model.displayName
+                pubKey: model.pubKey
+                isVerified: model.isVerified
+                isUntrustworthy: model.isUntrustworthy
+                isContact: model.isContact
                image.source: model.icon
-                image.isIdenticon: model.isIdenticon
-                isOnline: model.onlineStatus
-                ringSettings.ringSpecModel: model.ringSpecModel
+                image.isIdenticon: false
+                status: model.onlineStatus
            }
        }
    }
@@ -16,14 +16,14 @@ StatusAppTwoPanelLayout {
        StatusNavigationPanelHeadline {
            id: profileHeadline
            anchors.top: parent.top
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Profile"
        }

        ScrollView {
            anchors.top: profileHeadline.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
            anchors.bottom: parent.bottom
            width: parent.width

@@ -34,7 +34,7 @@ StatusAppTwoPanelLayout {
            Column {
                id: profileMenuItems
                anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 4
+                spacing: Theme.dp(4)

                Repeater {
                    model: Models.demoProfileGeneralMenuItems
@@ -56,7 +56,7 @@ StatusAppTwoPanelLayout {

                Item {
                    id: invisibleSeparator
-                    height: 16
+                    height: Theme.dp(16)
                    width: parent.width
                }

@@ -843,69 +843,50 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    property var membersListModel: ListModel {
        id: membersList
        ListElement {
-            nickName: "This is an example"
-            name: "Maria"
-            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
-            isMutualContact: true
-            onlineStatus: true
+            localNickname: "This is an example"
+            displayName: "Maria"
+            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: true
+            isUntrustworthy: false
+            isContact: true
+            onlineStatus: 1
            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                            nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
-            ringSpecModel: [ ListElement {colorId: 13; segmentLength: 5},
-                             ListElement {colorId: 31; segmentLength: 5},
-                             ListElement {colorId: 10; segmentLength: 1},
-                             ListElement {colorId: 2; segmentLength: 5},
-                             ListElement {colorId: 26; segmentLength: 2},
-                             ListElement {colorId: 19; segmentLength: 4},
-                             ListElement {colorId: 28; segmentLength: 3} ]
+            isAdmin: false
        }
        ListElement {
-            nickName: ""
-            name: "carmen.eth"
-            publicId: "0x043a7ed78362567894688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
-            isMutualContact: false
-            onlineStatus: false
+            localNickname: ""
+            displayName: "carmen.eth"
+            pubKey: "0x043a7ed78362567894688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: false
+            isUntrustworthy: true
+            isContact: false
+            onlineStatus: 0
            icon: ""
-            isIdenticon: false            
+            isAdmin: false
        }
        ListElement {
-            nickName: "This girl I know from work"
-            name: "annabelle"
-            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486dsfkjghyu2cf04"
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
-            isMutualContact: false
-            onlineStatus: true
+            localNickname: "This girl I know from work"
+            displayName: "annabelle"
+            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486dsfkjghyu2cf04"
+            isVerified: false
+            isUntrustworthy: false
+            isContact: false
+            onlineStatus: 1
+            isAdmin: false
            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
                     ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
-            isIdenticon: true
-            ringSpecModel: [ ListElement {colorId: 11; segmentLength: 1},
-                             ListElement {colorId: 23; segmentLength: 5},
-                             ListElement {colorId: 23; segmentLength: 5},
-                             ListElement {colorId: 10; segmentLength: 4},
-                             ListElement {colorId: 15; segmentLength: 3},
-                             ListElement {colorId: 26; segmentLength: 2},
-                             ListElement {colorId: 29; segmentLength: 5} ]
        }
        ListElement {
-            nickName: "Mark Cuban"
-            name: "mark.eth"
-            publicId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc79872cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
-            isMutualContact: true
-            onlineStatus: false
+            localNickname: "Mark Cuban"
+            displayName: "mark.eth"
+            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc79872cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: false
+            isUntrustworthy: true
+            isContact: true
+            onlineStatus: 0
            icon: ""
-            isIdenticon: false
-            ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
-                             ListElement {colorId: 28; segmentLength: 1},
-                             ListElement {colorId: 31; segmentLength: 1},
-                             ListElement {colorId: 22; segmentLength: 4},
-                             ListElement {colorId: 28; segmentLength: 3},
-                             ListElement {colorId: 27; segmentLength: 5},
-                             ListElement {colorId: 7; segmentLength: 5},
-                             ListElement {colorId: 13; segmentLength: 1},
-                             ListElement {colorId: 25; segmentLength: 4}]
+            isAdmin: false
        }
    }

@@ -968,8 +949,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            notificationsCount: 0
        }
        ListElement {
-            sectionId: "wallet"
+            sectionId: "communitiesPortal"
            sectionType: 2
+            name: "Communities Portal"
+            active: false
+            image: ""
+            icon: "communities"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "wallet"
+            sectionType: 3
            name: "Wallet"
            active: false
            image: ""
@@ -980,7 +972,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        }
        ListElement {
            sectionId: "browser"
-            sectionType: 3
+            sectionType: 4
            name: "Browser"
            active: false
            image: ""
@@ -1306,4 +1298,186 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            selected: false
        }
    }
+
+    property ListModel featuredCommunitiesModel : ListModel {
+        ListElement {
+            name: "CryptoKitties";
+            description: "A community of cat lovers, meow!";
+            logo:"qrc:/images/CryptoKitties.png";
+            members: 1045;
+            categories: [];
+            communityId: "341";
+            available: true;
+            popularity: 1;
+            communityColor: "pink"
+        }
+        ListElement {
+            name: "Friends with Benefits";
+            description: "A group chat full of out favorite thinkers and creators.";
+            logo:"qrc:/images/FriendsBenefits.png";
+            members: 452;
+            categories: [];
+            communityId: "232";
+            available: true;
+            popularity: 2;
+            communityColor: "grey"
+        }
+        ListElement {
+            name: "Status Hi!!";
+            description: "A new community description with long long long and repetitive repetitive repetitive repetitive explanation!!";
+            logo:"qrc:/images/SNT.png";
+            members: 89;
+            categories: [];
+            communityId: "223";
+            available: true;
+            popularity: 3
+            communityColor: "blue"
+        }
+    }
+
+    property ListModel curatedCommunitiesModel : ListModel {
+        ListElement {
+            name: "Status.im";
+            description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
+            logo: "qrc:/images/SNT.png";
+            banner: "qrc:/images/CommunityBanner1.png";
+            members: 299500;
+            activeUsers: 71400;
+            categories: [];
+            communityId: "1";
+            available: true;
+            popularity: 1
+            isPrivate: true
+            tokenLogo: "qrc:/images/SNT.png";
+        }
+        ListElement {
+            name: "SuperRare";
+            description: "The future of CryptoArt markets—a network governed by artists, collectors and curators.";
+            logo:"qrc:/images/SR.png";
+            banner: "qrc:/images/SuperRareCommunityBanner.png";
+            members: 299500;
+            activeUsers: 71400;
+            categories: [];
+            communityId: "2";
+            available: true;
+            popularity: 2
+            isPrivate: true
+            tokenLogo: "qrc:/images/SRToken.png";
+        }
+        ListElement {
+            name: "Coinbase";
+            description: "Jump start your crypto portfolio with the easiest place to buy and sell crypto. ";
+            logo:"qrc:/images/Coinbase.png";
+            banner: "qrc:/images/CoinBaseCommunityBanner.png";
+            members: 4900000;
+            activeUsers: 245600;
+            categories: [];
+            communityId: "3";
+            available: true;
+            popularity: 3
+            isPrivate: false
+            tokenLogo: "";
+        }
+        ListElement {
+            name: "Rarible";
+            description: "Multichain community-centric NFT marketplace. Create, sell and collect NFTs.";
+            logo:"qrc:/images/Rarible.png";
+            banner: "qrc:/images/RaribleCommunityBanner.png";
+            members: 629200;
+            activeUsers: 112100;
+            categories: [];
+            communityId: "4";
+            available: true;
+            popularity: 4
+            isPrivate: true
+            tokenLogo: "qrc:/images/RARI.png";
+        }
+        ListElement {
+            name: "Spotify";
+            description: "Listening is everything";
+            logo:"qrc:/images/Spotify.png";
+            banner: "qrc:/images/SpotifyCommunityBanner.png";
+            members: 207500;
+            activeUsers: 52200;
+            categories: [];
+            communityId: "5";
+            available: true;
+            popularity: 5
+            isPrivate: false
+            tokenLogo: "";
+        }
+        ListElement {
+            name: "Dribbble";
+            description: "Open source platform to write and distribute decentralized applications..";
+            logo:"qrc:/images/Fluff.png";
+            banner: "qrc:/images/DribbbleCommunityBanner.png";
+            members: 2300000;
+            activeUsers: 112100;
+            categories: [];
+            communityId: "6";
+            available: true;
+            popularity: 6
+            isPrivate: false
+            tokenLogo: "";
+        }
+        ListElement {
+            name: "Status.im";
+            description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
+            logo:"qrc:/images/SNT.png";
+            banner: ""
+            members: 299500;
+            activeUsers: 71400;
+            categories: [];
+            communityId: "7";
+            available: true;
+            popularity: 1
+            isPrivate: false
+            tokenLogo: "";
+        }
+        ListElement {
+            name: "CryptoPunks";
+            description: "Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here.";
+            logo:"qrc:/images/CryptoPunks.png";
+            banner: "";
+            members: 4900;
+            activeUsers: 245600;
+            categories: [];
+            communityId: "8";
+            available: false;
+            popularity: 8
+            isPrivate: false
+            tokenLogo: "";
+        }
+        ListElement {
+            name: "Socks";
+            description: "Community description goes here.";
+            logo:"qrc:/images/Socks.png";
+            banner: "";
+            members: 4900;
+            activeUsers: 245600;
+            categories: [];
+            communityId: "9";
+            available: false;
+            popularity: 9
+            isPrivate: false
+            tokenLogo: "";
+        }
+    }
+
+    property ListModel tagsModel : ListModel {
+        ListElement { name: "gaming"; emoji: "🎮"}
+        ListElement { name: "art"; emoji: "🖼️️"}
+        ListElement { name: "crypto"; emoji: "💸"}
+        ListElement { name: "nsfw"; emoji: "🍆"}
+        ListElement { name: "markets"; emoji: "💎"}
+        ListElement { name: "defi"; emoji: "📈"}
+        ListElement { name: "travel"; emoji: "🚁"}
+        ListElement { name: "web3"; emoji: "🗺"}
+        ListElement { name: "sport"; emoji: "🎾"}
+        ListElement { name: "food"; emoji: "🥑"}
+        ListElement { name: "enviroment"; emoji: "☠️"}
+        ListElement { name: "privacy"; emoji: "👻"}
+    }
+
+    property var communityTags :{"Activism":"✊","Art":"🎨","Blockchain":"🔗","Books & blogs":"📚","Career":"💼","Collaboration":"🤝","Commerce":"🛒","Crypto":"Ξ","Culture":"🎎","DAO":"🚀","DIY":"🔨","DeFi":"📈","Design":"🧩","Education":"🎒","Entertainment":"🍿","Environment":"🌿","Event":"🗓","Fantasy":"🧙‍♂️","Fashion":"🧦","Food":"🌶","Gaming":"🎮","Global":"🌍","Health":"🧠","Hobby":"📐","Innovation":"🧪","Language":"📜","Lifestyle":"✨","Local":"📍","Love":"❤️","Markets":"💎","Movies & TV":"🎞","Music":"🎶","NFT":"🖼","NSFW":"🍆","News":"🗞","Non-profit":"🙏","Org":"🏢","Pets":"🐶","Play":"🎲","Podcast":"🎙️","Politics":"🗳️","Privacy":"👻","Product":"🍱","Psyche":"🍁","Security":"🔒","Social":"☕","Software dev":"👩‍💻","Sports":"⚽️","Tech":"📱","Travel":"🗺","Vehicles":"🚕","Web3":"🌐"}
 }
@@ -13,15 +13,14 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
+import StatusQ.Core.Utils 0.1

 import "demoapp/data" 1.0

 StatusWindow {
    id: rootWindow
-    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
-                                                                  :  1224
-    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
-                                                                   :840
+    width: Theme.screenWidth
+    height: Theme.screenHeight
    visible: true
    title: qsTr("StatusQ Documentation App")

@@ -59,6 +58,11 @@ StatusWindow {
        }
    }

+    readonly property real scaleRatio: Math.min(rootWindow.width / Theme.screenWidth, rootWindow.height / Theme.screenHeight)
+    onScaleRatioChanged: {
+        Theme.scaleFactor = scaleRatio;
+    }
+
    StatusAppLayout {
        id: appLayout
        anchors.fill: parent
@@ -81,7 +85,7 @@ StatusWindow {
                badge.value: model.notificationsCount
                badge.visible: model.hasNotification
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
                onClicked: {
                    stackView.clear()
                    if(model.sectionType === appSectionType.apiDocumentation)
@@ -106,9 +110,9 @@ StatusWindow {

        ThemeSwitch {
            anchors.top: parent.top
-            anchors.topMargin: 32
+            anchors.topMargin: Theme.dp(32)
            anchors.right: parent.right
-            anchors.rightMargin: 32
+            anchors.rightMargin: Theme.dp(32)
            lightThemeEnabled: storeSettings.lightTheme
            onLightThemeEnabledChanged: {
                Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
@@ -138,47 +142,47 @@ StatusWindow {
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + 56
+                    contentHeight: navigation.height + Theme.dp(56)
                    contentWidth: navigation.width
                    clip: true
                    Column {
                        id: navigation
                        anchors.top: parent.top
-                        anchors.topMargin: 48
+                        anchors.topMargin: Theme.dp(48)
                        anchors.horizontalCenter: parent.horizontalCenter
                        spacing: 0

                        StatusListSectionHeadline { text: "StatusQ.Core" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "Icons"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.control(title);
                        }

                        StatusListSectionHeadline { text: "StatusQ.Layout" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "Layouts"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.control(title.substring(0, title.length - 1));
                        }

                        StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "Buttons"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.control(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusSwitchTab"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page("StatusTabSwitch");
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusChatCommandButton"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "Controls"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.control(title);
@@ -193,37 +197,37 @@ StatusWindow {
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusInput"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusSelect"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusAccountSelector"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusAssetSelector"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusColorSelector"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusWalletColorButton"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusWalletColorSelect"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
@@ -239,22 +243,22 @@ StatusWindow {
                            onClicked: mainPageView.page(title);
                        }
                        StatusListSectionHeadline { text: "StatusQ.Components" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusAddress"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "List Items"
                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusChatInfoToolBar"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "Others"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.control(title);
@@ -284,8 +288,18 @@ StatusWindow {
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
+                        StatusNavigationListItem {
+                            title: "StatusCommunityCard"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
+                        StatusNavigationListItem {
+                            title: "StatusCommunityTags"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                        StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                            title: "StatusPopupMenu"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
@@ -312,6 +326,11 @@ StatusWindow {
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title, true);
                        }
+                        StatusNavigationListItem {
+                            title: "StatusColorSpace"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title, true);
+                        }
                    }
                }
            }
@@ -323,7 +342,7 @@ StatusWindow {
                ScrollView {
                    visible: !storeSettings.fillPage
                    anchors.fill: parent
-                    anchors.topMargin: 64
+                    anchors.topMargin: Theme.dp(64)
                    contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                    contentWidth: (pageWrapper.width * rootWindow.factor)
                    clip: true
@@ -352,7 +371,7 @@ StatusWindow {
                Loader {
                    active: storeSettings.fillPage
                    anchors.fill: parent
-                    anchors.topMargin: 64
+                    anchors.topMargin: Theme.dp(64)
                    visible: storeSettings.fillPage
                    clip: true

@@ -396,12 +415,12 @@ StatusWindow {
                id: platformSwitch
                anchors.left: demoApp.left
                anchors.bottom: demoApp.top
-                anchors.bottomMargin: 20
-                spacing: 2
+                anchors.bottomMargin: Theme.dp(20)
+                spacing: Theme.dp(2)

                Text {
                    text: "OSX"
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                    anchors.verticalCenter: parent.verticalCenter
                }

@@ -417,7 +436,7 @@ StatusWindow {

                Text {
                    text: "Win"
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
@@ -429,8 +448,8 @@ StatusWindow {
                anchors.fill: demoApp
                source: demoApp
                horizontalOffset: 0
-                verticalOffset: 5
-                radius: 20
+                verticalOffset: Theme.dp(5)
+                radius: Theme.dp(20)
                samples: 20
                color: "#22000000"
            }
@@ -440,7 +459,7 @@ StatusWindow {
    StatusMacTrafficLights {
        anchors.left: parent.left
        anchors.top: parent.top
-        anchors.margins: 13
+        anchors.margins: Theme.dp(13)

        visible: Qt.platform.os == "osx"

@@ -7,10 +7,10 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-
+import StatusQ.Core.Utils 0.1

 Column {
-    spacing: 8
+    spacing: Theme.dp(8)

    StatusAccountSelector {
        id: accountSelector
@@ -2,6 +2,7 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14

+import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1

 import Sandbox 0.1
@@ -14,7 +15,7 @@ Column {
    }

    Item {
-        width: 200
+        width: Theme.dp(200)
        height: childrenRect.height
        StatusAddress {
            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
@@ -8,8 +8,8 @@ import StatusQ.Popups 0.1

 GridLayout {
    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)

    StatusChatInfoToolBar {
        chatInfoButton.title: "Cryptokitties"        
@@ -6,20 +6,20 @@ import StatusQ.Core.Theme 0.1

 Item {
    id: root
-    width: 800
-    height: 100
+    width: Theme.dp(800)
+    height: Theme.dp(100)

    Row {
        id: selectedColor
        anchors.top: parent.top
        anchors.left: colorSelectionGrid.left
-        spacing: 10
+        spacing: Theme.dp(10)
        StatusBaseText {
            text: "SelectedColor is"
        }
        Rectangle {
-            width: 100
-            height: 20
+            width: Theme.dp(100)
+            height: Theme.dp(20)
            radius: width/2
            color: colorSelectionGrid.selectedColor
        }
@@ -28,7 +28,7 @@ Item {
    StatusColorSelectorGrid {
        id: colorSelectionGrid
        anchors.top: selectedColor.bottom
-        anchors.topMargin: 10
+        anchors.topMargin: Theme.dp(10)
        anchors.horizontalCenter: parent.horizontalCenter
        titleText: "COLOR"
        selectedColorIndex: 2
@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1

 Column {
-    spacing: 8
+    spacing: Theme.dp(8)

    StatusColorSelector {
        model: ["red", "blue", "green"]
@@ -0,0 +1,110 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+Item {
+
+    ColumnLayout {
+        anchors.centerIn: parent
+
+        StatusBaseText {
+            text: qsTr("Thickness")
+        }
+
+        StatusSlider {
+            id: thicknessSlider
+            from: colorSpace.width / 8
+            to: colorSpace.width / 16
+            value: colorSpace.width / 10
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Min saturate: ") + colorSpace.minSaturate.toFixed(2)
+        }
+
+        StatusSlider {
+            id: minSatSlider
+            from: 0
+            to: 0.5
+            value: 0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Max saturate: ") + colorSpace.maxSaturate.toFixed(2)
+        }
+
+        StatusSlider {
+            id: maxSatSlider
+            from: 0.51
+            to: 1.0
+            value: 1.0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Min value: ") + colorSpace.minValue.toFixed(2)
+        }
+
+        StatusSlider {
+            id: minValSlider
+            from: 0
+            to: 0.5
+            value: 0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Max value: ") + colorSpace.maxValue.toFixed(2)
+        }
+
+        StatusSlider {
+            id: maxValSlider
+            from: 0.51
+            to: 1.0
+            value: 1.0
+            Layout.fillWidth: true
+        }
+
+        StatusColorSpace {
+            id: colorSpace
+            color: "#ed77eb"
+            thickness: thicknessSlider.value
+            minSaturate: minSatSlider.value
+            maxSaturate: maxSatSlider.value
+            minValue: minValSlider.value
+            maxValue: maxValSlider.value
+        }
+
+        StatusBaseText {
+            text: qsTr("Color") + ": " + colorSpace.color
+        }
+
+        Rectangle {
+            color: colorSpace.color
+            implicitHeight: Theme.dp(48)
+            radius: Theme.dp(10)
+            Layout.fillWidth: true
+
+            StatusBaseText {
+                anchors.centerIn: parent
+                color: Theme.palette.white
+                font.pixelSize: Theme.dp(15)
+                text: "Quick brown fox jumps over the lazy dog"
+            }
+        }
+
+        StatusButton {
+            text: "Randomize"
+            onPressed: colorSpace.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
+        }
+    }
+}
@@ -0,0 +1,48 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.13
+
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+import "../demoapp/data" 1.0
+
+GridLayout {
+
+    QtObject {
+        id: d
+
+        function navigateToCommunity(communityID) {
+            console.log("Clicked community: " + communityID)
+        }
+    }
+
+    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    columns: 2
+    columnSpacing: Theme.dp(28)
+    rowSpacing: Theme.dp(28)
+
+    Repeater {
+        model: Models.curatedCommunitiesModel
+        delegate: StatusCommunityCard {
+            locale: "en"
+            communityId: model.communityId
+            loaded: model.available
+            logo: model.logo
+            banner: model.banner
+            name: model.name
+            description: model.description
+            members: model.members
+            activeUsers: model.activeUsers
+            popularity: model.popularity
+            isPrivate: model.isPrivate
+            tokenLogo: model.tokenLogo
+            categories: ListModel {
+                ListElement { name: "Crypto"; emoji: "🔗"}
+                ListElement { name: "Privacy"; emoji: "👻"}
+                ListElement { name: "Social"; emoji: "☕"}
+            }
+
+            onClicked: { d.navigateToCommunity(communityId) }
+        }
+    }
+}
@@ -0,0 +1,83 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+import "../demoapp/data" 1.0
+
+Item {
+
+    property int cntSelectedTags: 0
+    property int maxSelectedTags: 4
+    property ListModel tagsModel: ListModel {}
+
+    Component.onCompleted: {
+        tagsModel.clear();
+        for (const key of Object.keys(Models.communityTags)) {
+            tagsModel.append({ name: key, emoji: Models.communityTags[key], selected: false });
+        }
+    }
+
+    ColumnLayout {
+        id: column
+        anchors.centerIn: parent
+        width: Theme.dp(600)
+        height: Theme.dp(500)
+        spacing: Theme.dp(20)
+
+        StatusInput {
+            id: tagsFilter
+            leftPadding: 0
+            rightPadding: 0
+            label: qsTr("Select tags that will fit your Community")
+            input.icon.name: "search"
+            input.placeholderText: qsTr("Search tags")
+            Layout.fillWidth: true
+        }
+
+        StatusCommunityTags {
+            filterString: tagsFilter.text
+            model: tagsModel
+            enabled: cntSelectedTags < maxSelectedTags
+            onClicked: {
+                cntSelectedTags++;
+                item.selected = true;
+            }
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            StatusBaseText {
+                text: qsTr("Selected tags")
+                font.pixelSize: Theme.dp(15)
+                Layout.fillWidth: true
+            }
+
+            StatusBaseText {
+                text: cntSelectedTags + "/" + maxSelectedTags
+                color: Theme.palette.baseColor1
+                font.pixelSize: Theme.dp(13)
+            }
+        }
+
+        StatusCommunityTags {
+            model: tagsModel
+            showOnlySelected: true
+            onClicked: {
+                cntSelectedTags--;
+                item.selected = false;
+            }
+            Layout.fillWidth: true
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}
@@ -5,15 +5,15 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1

 Column {
-    spacing: 12
-    width: 800
+    spacing: Theme.dp(12)
+    width: Theme.dp(800)
    anchors.top:parent.top
-    leftPadding: 20
-    rightPadding: 20
+    leftPadding: Theme.dp(20)
+    rightPadding: Theme.dp(20)

    Rectangle {
        width: parent.width
-        height: 30
+        height: Theme.dp(30)
        color: Theme.palette.baseColor2
        StatusBaseText {
            anchors.verticalCenter: parent.verticalCenter
@@ -60,7 +60,7 @@ Column {

    Rectangle {
        width: parent.width
-        height: 30
+        height: Theme.dp(30)
        color:  Theme.palette.baseColor2
        StatusBaseText {
            anchors.verticalCenter: parent.verticalCenter
@@ -103,7 +103,7 @@ Column {

    Rectangle {
        width: parent.width
-        height: 30
+        height: Theme.dp(30)
        color:  Theme.palette.baseColor2
        StatusBaseText {
            anchors.verticalCenter: parent.verticalCenter
@@ -134,15 +134,15 @@ Column {
        id: notImplemented
        Rectangle {
            anchors.centerIn: parent
-            width: 654
+            width: Theme.dp(654)
            height: infoText.implicitHeight
            color: Theme.palette.baseColor5
            StatusBaseText {
                id: infoText
                anchors.centerIn: parent
                color: Theme.palette.directColor4
-                font.pixelSize: 15
-                lineHeight: 22
+                font.pixelSize: Theme.dp(15)
+                lineHeight: Theme.dp(22)
                lineHeightMode: Text.FixedHeight
                font.weight: Font.Medium
                text: qsTr("Not Implemented")
@@ -9,7 +9,7 @@ import StatusQ.Controls.Validators 0.1
 import Sandbox 0.1

 Column {
-    spacing: 8
+    spacing: Theme.dp(8)

    StatusInput {
        input.placeholderText: "Placeholder"
@@ -58,17 +58,17 @@ Column {
    }

    Item {
-        implicitWidth: 480
-        implicitHeight: 82
+        implicitWidth: Theme.dp(480)
+        implicitHeight: Theme.dp(82)
        z: 100000
        StatusSeedPhraseInput {
            id: statusSeedInput
            anchors.left: parent.left
            anchors.right: parent.right
            height: parent.height
-            textEdit.input.anchors.leftMargin: 16
-            textEdit.input.anchors.rightMargin: 16
-            textEdit.input.anchors.topMargin: 11
+            textEdit.input.anchors.leftMargin: Theme.dp(16)
+            textEdit.input.anchors.rightMargin: Theme.dp(16)
+            textEdit.input.anchors.topMargin: Theme.dp(11)
            textEdit.label: "Input with drop down selection list"
            leftComponentText: "1"
            inputList: ListModel {
@@ -97,8 +97,8 @@ Column {
    StatusInput {
        label: "StatusInput"
        secondaryLabel: "with right icon"
-        input.icon.width: 15
-        input.icon.height: 11
+        input.icon.width: Theme.dp(15)
+        input.icon.height: Theme.dp(11)
        input.icon.name: text !== "" ? "checkmark" : ""
        input.leftIcon: false
    }
@@ -107,7 +107,7 @@ Column {
        label: "Label"
        secondaryLabel: "secondary label"
        input.placeholderText: "Placeholder"
-        input.implicitHeight: 56
+        input.implicitHeight: Theme.dp(56)
    }

    StatusInput {
@@ -148,7 +148,7 @@ Column {
        input.placeholderText: "Input width component (right side)"
        input.rightComponent: StatusIcon {
            icon: "cancel"
-            height: 16
+            height: Theme.dp(16)
            color: Theme.palette.dangerColor1
        }
    }
@@ -162,14 +162,14 @@ Column {
    StatusInput {
        input.multiline: true
        input.placeholderText: "Multiline with static height"
-        input.implicitHeight: 100
+        input.implicitHeight: Theme.dp(100)
    }

    StatusInput {
        input.multiline: true
        input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: 80
-        input.maximumHeight: 200
+        input.minimumHeight: Theme.dp(80)
+        input.maximumHeight: Theme.dp(200)
    }

    StatusInput {
@@ -200,6 +200,7 @@ Column {
    StatusInput {
        label: "Input with inline token selector"
        input.leftComponent: StatusTokenInlineSelector {
+            anchors.verticalCenter: parent.verticalCenter
            tokens: [{amount: 0.1, token: "ETH"},
                     {amount: 10, token: "SNT"},
                     {amount: 15, token: "MANA"}]
@@ -11,14 +11,14 @@ import "../demoapp/data" 1.0
 GridLayout {
    id: root
    columns: 1
-    rowSpacing: 150
+    rowSpacing: Theme.dp(150)

    GridLayout {
        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
        rows: 4
        columns: 2
-        rowSpacing: 170
-        columnSpacing: 150
+        rowSpacing: Theme.dp(170)
+        columnSpacing: Theme.dp(150)
        z: 100
        StatusListPicker {
            id: languagePicker
@@ -56,15 +56,15 @@ GridLayout {
    StatusBaseText {
        id: pageDesc
        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        height: 100
-        width: 500
+        height: Theme.dp(100)
+        width: Theme.dp(500)
        text: "4 different configurations for the `StatusListPicker` component:\n
    * Single selection. \n
    * Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
    * Multiple selection.\n
    * Multiple selection and displayed name is the symbol + shortName\n"
        color: Theme.palette.baseColor1
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
    }

    // Outsite area
@@ -3,11 +3,12 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14

 import StatusQ.Platform 0.1
+import StatusQ.Core.Theme 0.1

 import Sandbox 0.1

 Column {
-    spacing: 8
+    spacing: Theme.dp(8)

    StatusMacNotification {
        name: "Some name"
@@ -1,10 +1,11 @@
 import QtQuick.Layouts 1.14
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1

 GridLayout {
    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)

    StatusPasswordStrengthIndicator {
        id: veryweakPw
@@ -8,7 +8,7 @@ import StatusQ.Controls.Validators 0.1

 Column {
    id: root
-    spacing: 25
+    spacing: Theme.dp(25)
    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

    // PIN input that accepts only numbers
@@ -16,7 +16,7 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter
        color: Theme.palette.directColor1
        text: "Enter Keycard PIN"
-        font.pixelSize: 30
+        font.pixelSize: Theme.dp(30)
        font.bold: true
    }

@@ -30,23 +30,23 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter
        color: Theme.palette.dangerColor1
        text: "Only numbers allowed"
-        font.pixelSize: 16
+        font.pixelSize: Theme.dp(16)
    }

    StatusBaseText {
        anchors.horizontalCenter: parent.horizontalCenter
        color: Theme.palette.directColor1
        text: "Introduced PIN: " + numbersPinInput.pinInput
-        font.pixelSize: 12
+        font.pixelSize: Theme.dp(12)
    }

    // PIN input that accepts input depending on the regular expression definition
    StatusBaseText {
-        topPadding: 100
+        topPadding: Theme.dp(100)
        anchors.horizontalCenter: parent.horizontalCenter
        color: Theme.palette.directColor1
        text: "Enter another Keycard PIN"
-        font.pixelSize: 30
+        font.pixelSize: Theme.dp(30)
        font.bold: true
    }

@@ -54,8 +54,8 @@ Column {
        id: regexPinInput
        anchors.horizontalCenter: parent.horizontalCenter
        validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
-        circleDiameter: 22
-        circleSpacing: 22
+        circleDiameter: Theme.dp(22)
+        circleSpacing: Theme.dp(22)
        pinLen: 7
    }

@@ -63,13 +63,13 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter
        color: Theme.palette.dangerColor1
        text: "Only alphanumeric characters and '@' allowed"
-        font.pixelSize: 16
+        font.pixelSize: Theme.dp(16)
    }

    StatusBaseText {
        anchors.horizontalCenter: parent.horizontalCenter
        color: Theme.palette.directColor1
        text: "Introduced PIN: " + regexPinInput.pinInput
-        font.pixelSize: 12
+        font.pixelSize: Theme.dp(12)
    }
 }
@@ -9,8 +9,8 @@ import StatusQ.Popups 0.1

 GridLayout {
    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)

    StatusButton {
        text: "Simple"
@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1

 import Sandbox 0.1
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)

    StatusSelect {
        id: select
@@ -7,7 +7,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1

 Column {
-    spacing: 8
+    spacing: Theme.dp(8)

    StatusTabBar {
        StatusTabButton {
@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1

 Column {
-    spacing: 8
+    spacing: Theme.dp(8)

    Row {
        StatusTabBarIconButton {
@@ -3,11 +3,12 @@ import QtQuick.Layouts 1.14
 import QtQuick.Controls 2.13

 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1

 GridLayout {
    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)

    StatusSwitchTabBar {
        StatusSwitchTabButton {
@@ -1,6 +1,7 @@
 import QtQuick 2.14

 import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1

 Item {
    id: root
@@ -9,17 +10,21 @@ Item {
    property ListModel asortedContacts: ListModel {
        ListElement {
            publicId: "0x0"
-            name: "Maria"
+            name: "emily.eth"
            icon: ""
            isIdenticon: false
            onlineStatus: 3
+            isReadonly: false
+            tagIcon: ""
        }
        ListElement {
            publicId: "0x1"
-            name: "James"
+            name: "vitalikbuterin"
            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            isIdenticon: false
            onlineStatus: 1
+            isReadonly: false
+            tagIcon: ""
        }
        ListElement {
            publicId: "0x2"
@@ -27,13 +32,17 @@ Item {
            icon: ""
            isIdenticon: false
            onlineStatus: 2
+            isReadonly: false
+            tagIcon: ""
        }
        ListElement {
            publicId: "0x3"
-            name: "Tracy"
+            name: "carmen.eth"
            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
            isIdenticon: true
            onlineStatus: 3
+            isReadonly: true
+            tagIcon: "crown"
        }
        ListElement {
            publicId: "0x4"
@@ -41,13 +50,15 @@ Item {
            icon: ""
            isIdenticon: false
            onlineStatus: 3
+            isReadonly: false
+            tagIcon: ""
        }
    }

    StatusTagSelector {
        id: tagSelector
-        width: 650
-        height: 44
+        width: Theme.dp(650)
+        height: Theme.dp(44)
        anchors.centerIn: parent
        namesModel: root.asortedContacts
        toLabelText: qsTr("To: ")
@@ -1,6 +1,7 @@
 import QtQuick 2.14

 import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1

 Item {
    id: root
@@ -9,7 +10,7 @@ Item {
    Column {
        id: toastArea
        anchors.centerIn: parent
-        spacing: 8
+        spacing: Theme.dp(8)
        Repeater {
            id: toastRepeater
            width: parent.width
@@ -35,6 +36,9 @@ Item {
                onClose: {
                    console.warn("toast closed: ", modelData.title)
                }
+                onClicked: {
+                    console.warn("toast clicked")
+                }
            }
        }
    }
@@ -11,7 +11,7 @@ Column {
    spacing: 8

    Row {
-        spacing: 4
+        spacing: Theme.dp(4)
        StatusWalletColorButton {
            icon.color: Theme.palette.miscColor1
            selected: true
@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1

 Column {
-    spacing: 8
+    spacing: Theme.dp(8)

    StatusWalletColorSelect {
        model: Theme.palette.userCustomizationColors
@@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1

 Item {
    id: root
-    width: 800
-    height: 100
+    width: Theme.dp(800)
+    height: Theme.dp(100)

    //Simulate animation between steps
    property bool stepsCompleted: false
@@ -44,7 +44,7 @@ Item {
        anchors.horizontalCenter: parent.horizontalCenter
        color: Theme.palette.directColor1
        text: "Press Ctrl+R to run the animation"
-        font.pixelSize: 17
+        font.pixelSize: Theme.dp(17)
    }

    SequentialAnimation {
@@ -91,9 +91,9 @@ Item {

    StatusWizardStepper {
        id: wizardStepper
-        width: (parent.width - 50)
+        width: (parent.width - Theme.dp(50))
        anchors.top: indicLabel.bottom
-        anchors.topMargin: 16
+        anchors.topMargin: Theme.dp(16)
        anchors.horizontalCenter: parent.horizontalCenter
        stepsModel: stepsListModel
    }
@@ -43,5 +43,30 @@
        <file>pages/StatusToastMessagePage.qml</file>
        <file>pages/StatusWizardStepperPage.qml</file>
        <file>pages/StatusTabBarButtonPage.qml</file>
+        <file>pages/StatusColorSpacePage.qml</file>
+        <file>images/CryptoKitties.png</file>
+        <file>images/CryptoPunks.png</file>
+        <file>images/Dragonerum.png</file>
+        <file>images/FriendsBenefits.png</file>
+        <file>images/logo-test-image.png</file>
+        <file>images/P2PCrypto.png</file>
+        <file>images/SNT.png</file>
+        <file>images/Socks.png</file>
+        <file>images/StatusPunks.png</file>
+        <file>images/CommunityBanner1.png</file>
+        <file>images/Coinbase.png</file>
+        <file>images/CoinBaseCommunityBanner.png</file>
+        <file>images/DribbbleCommunityBanner.png</file>
+        <file>images/Ethereum.png</file>
+        <file>images/EthereumCommunityBanner.png</file>
+        <file>images/Fluff.png</file>
+        <file>images/Rarible.png</file>
+        <file>images/RaribleCommunityBanner.png</file>
+        <file>images/Spotify.png</file>
+        <file>images/SpotifyCommunityBanner.png</file>
+        <file>images/SR.png</file>
+        <file>images/SuperRareCommunityBanner.png</file>
+        <file>images/RARI.png</file>
+        <file>images/SRToken.png</file>
    </qresource>
 </RCC>
@@ -0,0 +1,30 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.14
+
+Item {
+    id: root
+
+    property Item mask
+    property color color: "#F6F8FA"
+
+    Rectangle {
+        id: gradient
+        anchors.fill: parent
+        visible: false
+
+        gradient: Gradient {
+            orientation: Gradient.Horizontal
+            SkeletonGradientStop { color: "transparent"; from: -3; }
+            SkeletonGradientStop { color: "transparent"; from: -2; }
+            SkeletonGradientStop { color: root.color; from: -1 ; }
+            SkeletonGradientStop { color: "transparent"; from: 0; }
+            SkeletonGradientStop { color: "transparent"; from: 1; }
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: gradient
+        maskSource: root.mask
+    }
+}
@@ -0,0 +1,23 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.14
+
+/*
+    TODO:   This component should be implemented as inline component of `SkeletonAnimation.qml`
+            when we use Qt > 5.15
+*/
+
+GradientStop {
+    id: root
+
+    property real from: 0
+
+    color: "transparent"
+
+    NumberAnimation on position {
+        easing.type: Easing.Linear
+        loops: Animation.Infinite
+        from: root.from
+        to: from + 4
+        duration: 2000
+    }
+}
@@ -0,0 +1,4 @@
+module StatusQ.Animations
+
+SkeletonAnimation 0.1 SkeletonAnimation.qml
+SkeletonGradientStop 0.1 SkeletonGradientStop.qml
@@ -13,7 +13,7 @@ StatusBaseText {
    property real maxWidth: width

    font.family: Theme.palette.monoFont.name
-    font.pixelSize: 13
+    font.pixelSize: Theme.dp(13)
    elide: Text.ElideMiddle
    color: Theme.palette.baseColor1

@@ -7,18 +7,18 @@ Rectangle {

    property int value

-    implicitHeight: statusBadge.value > 0 ? 18 + statusBadge.border.width : 10 + statusBadge.border.width
+    implicitHeight: statusBadge.value > 0 ? Theme.dp(18) + statusBadge.border.width : Theme.dp(10) + statusBadge.border.width
    implicitWidth: {
-        if (statusBadge.value > 99) {
-            return 28 + statusBadge.border.width
+        if (statusBadge.value > Theme.dp(99)) {
+            return Theme.dp(28) + statusBadge.border.width
        }
-        if (statusBadge.value > 9) {
-            return 26 + statusBadge.border.width
+        if (statusBadge.value > Theme.dp(9)) {
+            return Theme.dp(26) + statusBadge.border.width
        }
        if (statusBadge.value > 0) {
-            return 18 + statusBadge.border.width
+            return Theme.dp(18) + statusBadge.border.width
        }
-        return 10 + statusBadge.border.width
+        return Theme.dp(10) + statusBadge.border.width
    }
    radius: height / 2
    color: Theme.palette.primaryColor1
@@ -26,7 +26,7 @@ Rectangle {
    StatusBaseText {
        id: value
        visible: statusBadge.value > 0
-        font.pixelSize: statusBadge.value > 99 ? 10 : 12
+        font.pixelSize: statusBadge.value > Theme.dp(99) ? Theme.dp(10) : Theme.dp(12)
        font.weight: Font.Medium
        color: Theme.palette.statusBadge.foregroundColor
        anchors.centerIn: parent
@@ -3,12 +3,13 @@ import QtGraphicalEffects 1.13
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Core.Theme 0.1

 Item {
    id: statusChatInfoToolBar

-    implicitWidth: 288
-    implicitHeight: 56
+    implicitWidth: Theme.dp(288)
+    implicitHeight: Theme.dp(56)

    property alias chatInfoButton: statusChatInfoButton
    property alias menuButton: statusMenuButton
@@ -27,7 +28,7 @@ Item {
        id: statusChatInfoButton
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
-        anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
+        anchors.right: (implicitWidth > parent.width - Theme.dp(50)) ? statusMenuButton.left : undefined
        anchors.rightMargin: 5
        type: StatusChatInfoButton.Type.OneToOneChat
        onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
@@ -39,8 +40,8 @@ Item {
        anchors.verticalCenter: parent.verticalCenter

        visible: popupMenuSlot.active
-        width: visible ? 32 : 0
-        height: 32
+        width: visible ? Theme.dp(32) : 0
+        height: Theme.dp(32)

        type: StatusRoundButton.Type.Secondary
        icon.name: "add"
@@ -89,7 +90,7 @@ Item {
        onClicked: {
            statusChatInfoToolBar.addButtonClicked(mouse)
            statusMenuButton.state = "pressed"
-            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
+            popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + Theme.dp(4))
        }

        Loader {
@@ -11,8 +11,8 @@ import StatusQ.Controls 0.1
 Column {
    id: statusChatList

-    spacing: 4
-    width: 288
+    spacing: Theme.dp(4)
+    width: Theme.dp(288)

    property string categoryId: ""
    property var model: null
@@ -6,6 +6,7 @@ import StatusQ.Core.Utils 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1

 Item {
    id: statusChatListAndCategories
@@ -64,7 +65,7 @@ Item {

            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: 4
+            spacing: Theme.dp(4)

            StatusChatList {
                id: statusChatList
@@ -8,11 +8,11 @@ import StatusQ.Components 0.1
 StatusListItem {
    id: statusChatListCategoryItem

-    implicitWidth: 288
-    implicitHeight: 28
+    implicitWidth: Theme.dp(288)
+    implicitHeight: Theme.dp(28)

-    leftPadding: 8
-    rightPadding: 8
+    leftPadding: Theme.dp(8)
+    rightPadding: Theme.dp(8)

    property bool opened: true
    property bool highlighted: false
@@ -32,13 +32,13 @@ StatusListItem {
    statusListItemTitle.color: Theme.palette.directColor4
    statusListItemTitle.font.weight: Font.Medium

-    statusListItemComponentsSlot.spacing: 1
+    statusListItemComponentsSlot.spacing: Theme.dp(1)

    components: [
        StatusChatListCategoryItemButton {
            id: addButton
            icon.name: "add"
-            icon.width: 20
+            icon.width: Theme.dp(20)
            visible: statusChatListCategoryItem.showAddButton &&
                (statusChatListCategoryItem.highlighted ||
                statusChatListCategoryItem.sensor.containsMouse)
@@ -48,7 +48,7 @@ StatusListItem {
        StatusChatListCategoryItemButton {
            id: menuButton
            icon.name: "more"
-            icon.width: 21
+            icon.width: Theme.dp(21)
            visible: statusChatListCategoryItem.showMenuButton &&
                (statusChatListCategoryItem.highlighted ||
                statusChatListCategoryItem.sensor.containsMouse)
@@ -58,7 +58,7 @@ StatusListItem {
        StatusChatListCategoryItemButton {
            id: toggleButton
            icon.name: "chevron-down"
-            icon.width: 18
+            icon.width: Theme.dp(18)
            icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
            onPressed: {
                sensor.enabled = false;
@@ -22,12 +22,12 @@ Rectangle {
    property int notificationsCount: 0
    property bool muted: false
    property StatusImageSettings image: StatusImageSettings {
-        width: 24
-        height: 24
+        width: Theme.dp(24)
+        height: Theme.dp(24)
    }
    property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
+        width: Theme.dp(24)
+        height: Theme.dp(24)
        color: Theme.palette.miscColor5
        emoji: ""
        charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
@@ -53,10 +53,10 @@ Rectangle {
        CommunityChat // 6
    }

-    implicitWidth: 288
-    implicitHeight: 40
+    implicitWidth: Theme.dp(288)
+    implicitHeight: Theme.dp(40)

-    radius: 8
+    radius: Theme.dp(8)

    color: {
        if (selected) {
@@ -93,10 +93,10 @@ Rectangle {
        StatusIcon {
            id: statusIcon
            anchors.left: identicon.right
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
            anchors.verticalCenter: parent.verticalCenter

-            width: 14
+            width: Theme.dp(14)
            visible: root.type !== StatusChatListItem.Type.OneToOneChat
            opacity: {
                if (root.muted && !hoverHander.hovered && !root.highlighted) {
@@ -133,7 +133,7 @@ Rectangle {
            anchors.leftMargin: statusIcon.visible ? 1 : 8
            anchors.right: mutedIcon.visible ? mutedIcon.left :
                                               statusBadge.visible ? statusBadge.left : parent.right
-            anchors.rightMargin: 6
+            anchors.rightMargin: Theme.dp(6)
            anchors.verticalCenter: parent.verticalCenter

            text: (root.type === StatusChatListItem.Type.PublicChat &&
@@ -158,7 +158,7 @@ Rectangle {
                          root.notificationsCount > 0 ||
                          root.highlightWhenCreated ||
                          statusBadge.visible) ? Font.Bold : Font.Medium
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
        }

        StatusIcon {
@@ -166,7 +166,7 @@ Rectangle {
            anchors.right: statusBadge.visible ? statusBadge.left : parent.right
            anchors.rightMargin: 8
            anchors.verticalCenter: parent.verticalCenter
-            width: 14
+            width: Theme.dp(14)
            opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
            icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
            visible: root.muted
@@ -190,10 +190,10 @@ Rectangle {

            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
-            anchors.rightMargin: 8
+            anchors.rightMargin: Theme.dp(8)

            color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
-            border.width: 4
+            border.width: Theme.dp(4)
            border.color: color
            value: root.notificationsCount
            visible: root.notificationsCount > 0
@@ -1,24 +1,22 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.13

 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-
-Rectangle {
+Item {
    id: statusChatToolBar
-    implicitWidth: 518
-    height: 56
-    color: Theme.palette.statusAppLayout.backgroundColor

-    property alias chatInfoButton: statusChatInfoButton
    property alias menuButton: menuButton
    property alias notificationButton: notificationButton
    property alias membersButton: membersButton
    property alias searchButton: searchButton
-    property int notificationCount: 0

+    property int padding: Theme.dp(8)
+    property int notificationCount: 0
    property Component popupMenu
+    property var toolbarComponent

    signal chatInfoButtonClicked()
    signal menuButtonClicked()
@@ -26,150 +24,125 @@ Rectangle {
    signal membersButtonClicked()
    signal searchButtonClicked()

+    implicitWidth: Theme.dp(518)
+    implicitHeight: Theme.dp(60)
+
    onPopupMenuChanged: {
        if (!!popupMenu) {
            popupMenuSlot.sourceComponent = popupMenu
        }
    }

-    StatusChatInfoButton {
-        id: statusChatInfoButton
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: parent.left
-        anchors.leftMargin: 12
-        width: Math.min(implicitWidth, parent.width - actionButtons.implicitWidth - anchors.leftMargin * 2)
-        onClicked: statusChatToolBar.chatInfoButtonClicked()
-    }
+    RowLayout {
+        width: parent.width
+        spacing: padding / 2

-    Row {
-        id: actionButtons
-        anchors.right: parent.right
-        anchors.rightMargin: 8
-        anchors.verticalCenter: parent.verticalCenter
-
-        spacing: 8
-
-        StatusFlatRoundButton {
-            id: searchButton
-            width: 32
-            height: 32
-            icon.name: "search"
-            type: StatusFlatRoundButton.Type.Secondary
-            onClicked: statusChatToolBar.searchButtonClicked()
-
-            // initializing the tooltip
-            tooltip.text: qsTr("Search")
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
+        Loader {
+            id: loader
+            sourceComponent: statusChatToolBar.toolbarComponent
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            Layout.topMargin: padding
+            Layout.leftMargin: padding
        }

-        StatusFlatRoundButton {
-            id: membersButton
-            width: 32
-            height: 32
-            icon.name: "group-chat"
-            type: StatusFlatRoundButton.Type.Secondary
-            onClicked: statusChatToolBar.membersButtonClicked()
+        RowLayout {
+            id: actionButtons
+            Layout.alignment: Qt.AlignTop | Qt.AlignRight
+            Layout.topMargin: padding
+            Layout.rightMargin: padding
+            spacing: 8

-            // initializing the tooltip
-            tooltip.text: qsTr("Members")
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-        }
+            StatusFlatRoundButton {
+                id: searchButton
+                width: Theme.dp(32)
+                height: Theme.dp(32)
+                icon.name: "search"
+                type: StatusFlatRoundButton.Type.Secondary
+                onClicked: statusChatToolBar.searchButtonClicked()

-        StatusFlatRoundButton {
-            id: menuButton
-            width: 32
-            height: 32
-            icon.name: "more"
-            type: StatusFlatRoundButton.Type.Secondary
-            visible: !!statusChatToolBar.popupMenu
-
-            // initializing the tooltip
-            tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
-            tooltip.text: qsTr("More")
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-
-            property bool showMoreMenu: false
-            onClicked: {
-                menuButton.highlighted = true
-
-                let originalOpenHandler = popupMenuSlot.item.openHandler
-                let originalCloseHandler = popupMenuSlot.item.closeHandler
-
-                popupMenuSlot.item.openHandler = function () {
-                    if (!!originalOpenHandler) {
-                        originalOpenHandler()
-                    }
-                }
-
-                popupMenuSlot.item.closeHandler = function () {
-                    menuButton.highlighted = false
-                    if (!!originalCloseHandler) {
-                        originalCloseHandler()
-                    }
-                }
-
-                popupMenuSlot.item.openHandler = originalOpenHandler
-                popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
-                statusChatToolBar.menuButtonClicked()
+                // initializing the tooltip
+                tooltip.text: qsTr("Search")
+                tooltip.orientation: StatusToolTip.Orientation.Bottom
+                tooltip.y: parent.height + Theme.dp(12)
            }

-            Loader {
-                id: popupMenuSlot
-                active: !!statusChatToolBar.popupMenu
+            StatusFlatRoundButton {
+                id: membersButton
+                width: Theme.dp(32)
+                height: Theme.dp(32)
+                icon.name: "group-chat"
+                type: StatusFlatRoundButton.Type.Secondary
+                onClicked: statusChatToolBar.membersButtonClicked()
+
+                // initializing the tooltip
+                tooltip.text: qsTr("Members")
+                tooltip.orientation: StatusToolTip.Orientation.Bottom
+                tooltip.y: parent.height + 12
            }
-        }

-        Rectangle {
-            height: 24
-            width: 1
-            color: Theme.palette.directColor7
-            anchors.verticalCenter: parent.verticalCenter
-            visible: notificationButton.visible &&
-                     (menuButton.visible || membersButton.visible || searchButton.visible)
-        }
+            StatusFlatRoundButton {
+                id: menuButton
+                width: Theme.dp(32)
+                height: Theme.dp(32)
+                icon.name: "more"
+                type: StatusFlatRoundButton.Type.Secondary
+                visible: !!statusChatToolBar.popupMenu

-        StatusFlatRoundButton {
-            id: notificationButton
-            width: 32
-            height: 32
+                // initializing the tooltip
+                tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
+                tooltip.text: qsTr("More")
+                tooltip.orientation: StatusToolTip.Orientation.Bottom
+                tooltip.y: parent.height + Theme.dp(12)

-            icon.name: "notification"
-            icon.height: 21
-            type: StatusFlatRoundButton.Type.Secondary
+                property bool showMoreMenu: false
+                onClicked: {
+                    menuButton.highlighted = true

-            // initializing the tooltip
-            tooltip.text: qsTr("Activity")
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
+                    let originalOpenHandler = popupMenuSlot.item.openHandler
+                    let originalCloseHandler = popupMenuSlot.item.closeHandler

-            onClicked: statusChatToolBar.notificationButtonClicked()
-
-            StatusBadge {
-                id: statusBadge
-
-                visible: value > 0
-                anchors.top: parent.top
-                anchors.left: parent.right
-                anchors.topMargin: -3
-                anchors.leftMargin: {
-                    if (statusBadge.value > 99) {
-                        return -22
+                    popupMenuSlot.item.openHandler = function () {
+                        if (!!originalOpenHandler) {
+                            originalOpenHandler()
+                        }
                    }
-                    if (statusBadge.value > 9) {
-                        return -21
+
+                    popupMenuSlot.item.closeHandler = function () {
+                        menuButton.highlighted = false
+                        if (!!originalCloseHandler) {
+                            originalCloseHandler()
+                        }
                    }
-                    return -18
+
+                    popupMenuSlot.item.openHandler = originalOpenHandler
+                    popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
+                    statusChatToolBar.menuButtonClicked()
                }

-                value: statusChatToolBar.notificationCount
-                border.width: 2
-                border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
+                Loader {
+                    id: popupMenuSlot
+                    active: !!statusChatToolBar.popupMenu
+                }
+            }
+
+            Rectangle {
+                height: Theme.dp(24)
+                width: Theme.dp(1)
+                color: Theme.palette.directColor7
+                Layout.alignment: Qt.AlignVCenter
+                visible: notificationButton.visible &&
+                         (menuButton.visible || membersButton.visible || searchButton.visible)
+            }
+
+            StatusActivityCenterButton {
+                id: notificationButton
+                width: 32
+                height: width
+                unreadNotificationsCount: statusChatToolBar.notificationCount
+                onClicked: statusChatToolBar.notificationButtonClicked()
            }
        }
-
    }
 }

@@ -0,0 +1,201 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+
+    property int thickness: width * 0.1
+    property real minSaturate: 0.0
+    property real minValue: 0.0
+    property real maxSaturate: 1.0
+    property real maxValue: 1.0
+    property color color: "red"
+    property color rootColor: Qt.hsva(color.hsvHue, 1, 1, 1)
+
+    function pickColorFromHueGauge(x, y) {
+        // Get angle of picked color
+        let theta = Math.atan2(y - hueGauge.height / 2, x - hueGauge.width / 2) * 0.5 / Math.PI;
+        if (theta < 0.0)
+            theta += 1.0;
+
+        // Convert angle value to color
+        return Qt.hsva(1 - theta, 1, 1, 1)
+    }
+
+    function pickColorFromSatValRect(x, y) {
+        // x for saturation, reversed y for value
+        let sat = mapFromRange(Math.min(Math.max(x, 0), satValRect.width),
+                               minSaturate, maxSaturate, satValRect.width);
+        let val = 1 - mapFromRange(Math.min(Math.max(y, 0), satValRect.height),
+                                   1 - maxValue, 1 - minValue, satValRect.height);
+        return Qt.hsva(rootColor.hsvHue, sat, val, 1);
+    }
+
+    function angleOnHueGauge(pickingColor) {
+        // color hue to angle
+        return (1 - pickingColor.hsvHue) * 2 * Math.PI;
+    }
+
+    // TODO: mapToRange & mapFromRange to helper js
+    function mapToRange(value, minValue, maxValue, range) {
+        return (value - minValue) / (maxValue - minValue) * range;
+    }
+
+    function mapFromRange(pos, minValue, maxValue, range) {
+        return pos / range * (maxValue - minValue) + minValue;
+    }
+
+    onColorChanged: {
+        // update root color if only we are not picking on satValRect
+        if (!d.pickingSatVal)
+            rootColor = Qt.hsva(color.hsvHue, 1, 1, 1)
+    }
+
+    implicitWidth: Theme.dp(340)
+    implicitHeight: Theme.dp(340)
+
+    QtObject {
+        id: d
+
+        property bool pickingSatVal: false
+    }
+
+    ConicalGradient {
+        id: hueGauge
+        anchors.fill: parent
+        angle: 90.0
+        gradient: Gradient {
+            GradientStop { position: 0.000; color: Qt.hsva(1.000, 1, 1, 1) }
+            GradientStop { position: 0.167; color: Qt.hsva(0.833, 1, 1, 1) }
+            GradientStop { position: 0.333; color: Qt.hsva(0.666, 1, 1, 1) }
+            GradientStop { position: 0.500; color: Qt.hsva(0.500, 1, 1, 1) }
+            GradientStop { position: 0.667; color: Qt.hsva(0.333, 1, 1, 1) }
+            GradientStop { position: 0.833; color: Qt.hsva(0.166, 1, 1, 1) }
+            GradientStop { position: 1.000; color: Qt.hsva(0.000, 1, 1, 1) }
+        }
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Item {
+                width: root.width
+                height: root.height
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Math.min(width, height) / 2
+                }
+            }
+        }
+
+        MouseArea {
+            id: hueArea
+
+            property bool pressedOnGauge: false
+
+            anchors.fill: parent
+            preventStealing: true
+            onPressed: {
+                // Check we clicked on gauge
+                let dist = Math.sqrt(Math.pow(width / 2 - mouseX, 2) +
+                                     Math.pow(height / 2 - mouseY, 2));
+                let radius = Math.min(width, height) / 2;
+                if (dist < radius - thickness || dist > radius)
+                    return;
+
+                pressedOnGauge = true;
+                pickRootColor();
+            }
+            onReleased: pressedOnGauge = false
+            onPositionChanged: if (pressedOnGauge) pickRootColor()
+
+            function pickRootColor() {
+                // Update both colors
+                rootColor = pickColorFromHueGauge(mouseX, mouseY);
+                color.hsvHue = rootColor.hsvHue;
+                color.hsvSaturation = Math.min(maxSaturate, Math.max(minSaturate, color.hsvSaturation));
+                color.hsvValue = Math.min(maxValue, Math.max(minValue, color.hsvValue));
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: root.thickness
+        radius: Math.min(width, height) / 2
+
+        color: Theme.palette.baseColor5
+
+        Rectangle {
+            id: satValRect
+            anchors.centerIn: parent
+            width: parent.width * 0.55
+            height: width
+            border.color: Theme.palette.baseColor3
+            gradient: Gradient {
+                orientation: Gradient.Horizontal
+                GradientStop { position: -minSaturate; color: "white" }
+                GradientStop { position: 2.0 - maxSaturate; color: rootColor }
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                gradient: Gradient {
+                    orientation: Gradient.Vertical
+                    GradientStop { position: maxValue - 1; color: "transparent" }
+                    GradientStop { position: 1.0 + minValue; color: "black" }
+                }
+            }
+
+            MouseArea {
+                id: satValArea
+                anchors.fill: parent
+                preventStealing: true
+                onPressed: {
+                    d.pickingSatVal = true;
+                    pickColor();
+                }
+                onReleased: d.pickingSatVal = false
+                onPositionChanged: pickColor()
+
+                function pickColor() {
+                    root.color = pickColorFromSatValRect(mouseX, mouseY);
+                }
+            }
+
+            Rectangle {
+                id: satValLens
+                x: mapToRange(root.color.hsvSaturation, minSaturate, maxSaturate,
+                              satValRect.width) - radius
+                y: mapToRange(1 - root.color.hsvValue, 1 - maxValue, 1 - minValue,
+                              satValRect.height) - radius
+                width: thickness * 1.3
+                height: width
+                radius: height / 2
+                border.width: 2
+                border.color: Theme.palette.baseColor3
+                color: root.color
+                visible: x + 1 >= -radius && x - 1 <= satValRect.width - radius &&
+                         y + 1 >= -radius && y - 1 <= satValRect.height - radius
+            }
+        }
+    }
+
+    Rectangle {
+        id: hueLens
+
+        property real theta: angleOnHueGauge(rootColor);
+        property real dist: (hueGauge.width - width) / 2 + thickness / 6;
+
+        anchors.centerIn: parent
+        anchors.horizontalCenterOffset: dist * Math.cos(theta);
+        anchors.verticalCenterOffset: dist * Math.sin(theta);
+        width: thickness * 1.3
+        height: width
+        radius: height / 2
+        border.width: 2
+        border.color: Theme.palette.baseColor3
+        color: rootColor
+    }
+}
@@ -0,0 +1,469 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+   \qmltype StatusCommunityCard
+   \inherits Rectangle
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It is a community card item that provides relevant information about a community model. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-rectangle.html}{Rectangle}.
+
+   The \c StatusCommunityCard is a community card clickable item that represents a data model. The data model is commonly a JavaScript array or a ListModel object.
+
+   Example of how the component looks like:
+   \image status_community_card.png
+   Example of how to use it:
+   \qml
+        StatusCommunityCard {
+            locale: "en"
+            communityId: model.communityId
+            loaded: model.available
+            logo: model.icon
+            name: model.name
+            description: model.description
+            members: model.members
+            popularity: model.popularity
+            categories:  model.categories
+
+            onClicked: { d.navigateToCommunity(communityId) }
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+Rectangle {
+    id: root
+
+    /*!
+       \qmlproperty string StatusCommunityCard::communityId
+       This property holds the community identifier value.
+    */
+    property string communityId: ""
+    /*!
+       \qmlproperty bool StatusCommunityCard::loaded
+       This property holds a boolean value that represents if the community information is loaded or not.
+    */
+    property bool loaded: true
+    /*!
+       \qmlproperty url StatusCommunityCard::logo
+       This property holds the community logo source.
+    */
+    property url logo: ""
+    /*!
+       \qmlproperty string StatusCommunityCard::name
+       This property holds the community name.
+    */
+    property string name: ""
+    /*!
+       \qmlproperty string StatusCommunityCard::description
+       This property holds the community description.
+    */
+    property string description: ""
+    /*!
+       \qmlproperty int StatusCommunityCard::members
+       This property holds the community members value.
+    */
+    property int members: 0
+    /*!
+       \qmlproperty int StatusCommunityCard::activeUsers
+       This property holds the community active users value.
+    */
+    property int activeUsers: 0
+    /*!
+       \qmlproperty int StatusCommunityCard::popularity
+       This property holds the community popularity (community rate).
+    */
+    property int popularity: 0
+    /*!
+       \qmlproperty string StatusCommunityCard::categories
+       This property holds the data that will be populated as the tags row of the community.
+
+       Here an example of the model roles expected:
+       \qml
+            categories: ListModel {
+                ListElement { name: "gaming"; emoji: "🎮"; selected: false}
+                ListElement { name: "art"; emoji: "🖼️️"; selected: false}
+                ListElement { name: "crypto"; emoji: "💸"; selected: false}
+                ListElement { name: "nsfw"; emoji: "🍆"; selected: false}
+                ListElement { name: "markets"; emoji: "💎"; selected: false}
+            }
+       \endqml
+    */
+    property ListModel categories: ListModel {}
+    /*!
+       \qmlproperty string StatusCommunityCard::locale
+       This property holds the application locale used to give format to members number representation.
+       If not provided, default value is "en".
+    */
+    property string locale: "en"
+    /*!
+       \qmlproperty url StatusCommunityCard::banner
+       This property holds the community banner image url.
+    */
+    property url banner: ""
+    /*!
+       \qmlproperty color StatusCommunityCard::communityColor
+       This property holds the community color.
+       If not provided, default value in Light Theme is "#4360DF" and in Dark Theme is "#88B0FF".
+    */
+    property color communityColor: Theme.palette.primaryColor1
+    /*!
+       \qmlproperty bool StatusCommunityCard::isPrivate
+       This property holds if the community is private.
+       If not provided, default value is false.
+    */
+    property bool isPrivate: false
+    /*!
+       \qmlproperty url StatusCommunityCard::tokenLogo
+       This property holds the image of the token needed if the community is private.
+    */
+    property url tokenLogo: ""
+
+    /*!
+        \qmlsignal StatusCommunityCard::clicked(string communityId)
+        This signal is emitted when the card item is clicked.
+    */
+    signal clicked(string communityId)
+
+    QtObject {
+        id: d
+        property int cardWidth: Theme.dp(335)
+        property int bannerHeigth: Theme.dp(64)
+        property int cardHeigth: Theme.dp(190)
+        property int totalHeigth: Theme.dp(230)
+        property int margins: Theme.dp(12)
+        property int bannerRadius: Theme.dp(20)
+        property int cardRadius: Theme.dp(16)
+        property color cardColor: Theme.palette.indirectColor1
+        property color fontColor: Theme.palette.directColor1
+        property color loadingColor1: Theme.palette.baseColor5
+        property color loadingColor2: Theme.palette.baseColor4
+
+        function numberFormat(number) {
+            var res = number
+            const million = 1000000
+            const ks = 1000
+            if(number > million) {
+                res = number / million
+                res = Number(number / million).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'M'
+            }
+            else if(number > ks) {
+                res = number / ks
+                res = Number(number / ks).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'K'
+            }
+            else
+                res = Number(number).toLocaleString(Qt.locale(root.locale), 'f', 0)
+            return res
+        }
+    }
+
+    implicitWidth: d.cardWidth
+    implicitHeight: d.totalHeigth
+    radius: d.bannerRadius
+    color: "transparent"
+    layer.enabled: true
+    layer.effect: DropShadow {
+        source: root
+        horizontalOffset: 0
+        verticalOffset: Theme.dp(2)
+        radius: sensor.containsMouse ? Theme.dp(30) : d.bannerRadius
+        samples: 25
+        spread: 0
+        color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
+    }
+
+    // Community banner:
+    Item {
+        id: banner
+        anchors.top: parent.top
+        width: d.cardWidth
+        height: d.bannerHeigth
+        Rectangle {
+            id: mask
+            anchors.fill: parent
+            radius: d.bannerRadius
+            color: root.loaded ? root.communityColor : d.loadingColor2
+        }
+        Image {
+            id: image
+            source: root.banner
+            anchors.fill: parent
+            anchors.centerIn: parent
+            fillMode: Image.PreserveAspectFit
+            smooth: true
+            visible: !root.loaded || !root.banner
+        }
+        OpacityMask {
+            anchors.fill: image
+            source: image
+            maskSource: mask
+        }
+    }
+
+    // Community logo:
+    Rectangle {
+        z: content.z + 1
+        anchors.top: parent.top
+        anchors.topMargin: Theme.dp(16)
+        anchors.left: parent.left
+        anchors.leftMargin: Theme.dp(12)
+        width: Theme.dp(48)
+        height: width
+        radius: width / 2
+        color: root.loaded ? d.cardColor : d.loadingColor1
+
+        StatusRoundedImage {
+            visible: root.loaded
+            anchors.centerIn: parent
+            width: parent.width - Theme.dp(4)
+            height: width
+            image.source: root.logo
+            color: "transparent"
+        }
+    } // End of community logo
+
+    // Content card
+    Rectangle {
+        id: content
+        z: banner.z + 1
+        visible: root.loaded
+        anchors.top: parent.top
+        anchors.topMargin: Theme.dp(40)
+        width: d.cardWidth
+        height: d.cardHeigth
+        color: d.cardColor
+        radius: d.cardRadius
+        clip: true
+        // Community restriccions
+        Rectangle {
+            visible: root.isPrivate
+            anchors.top: parent.top
+            anchors.topMargin: Theme.dp(8)
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: Theme.dp(48)
+            height: Theme.dp(24)
+            color: d.loadingColor2
+            radius: Theme.dp(200)
+            StatusIcon {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: 6
+                anchors.left: parent.left
+                icon: "tiny/unlocked"
+                width: Theme.dp(16)
+                height: Theme.dp(16)
+                color: Theme.palette.baseColor1
+            }
+            StatusRoundedImage {
+                anchors.rightMargin: Theme.dp(2)
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                width: Theme.dp(20)
+                height: width
+                image.source: root.tokenLogo
+                color: "transparent"
+            }
+        }
+        // Community info
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: Theme.dp(32)
+            anchors.leftMargin: d.margins
+            anchors.rightMargin: d.margins
+            anchors.bottomMargin: d.margins
+            clip: true
+            spacing: Theme.dp(6)
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                text: root.name
+                font.weight: Font.Bold
+                font.pixelSize: Theme.dp(19)
+                color: d.fontColor
+            }
+            StatusBaseText {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                text: root.description
+                font.pixelSize: Theme.dp(15)
+                lineHeight: 1.2
+                color: d.fontColor
+                maximumLineCount: 2
+                wrapMode: Text.WordWrap
+                elide: Text.ElideRight
+                clip: true
+            }
+        }
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: Theme.dp(116)
+            anchors.leftMargin: d.margins
+            anchors.rightMargin: d.margins
+            anchors.bottomMargin: d.margins
+            clip: true
+            spacing: Theme.dp(18)
+            Row {
+                Layout.alignment: Qt.AlignVCenter
+                spacing: Theme.dp(20)
+                // Members
+                Row {
+                    height: membersTxt.height
+                    spacing: Theme.dp(4)
+                    StatusIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        icon: "tiny/members"
+                        width: Theme.dp(16)
+                        height: Theme.dp(16)
+                    }
+                    StatusBaseText {
+                        id: membersTxt
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.numberFormat(root.members)
+                        font.pixelSize: Theme.dp(15)
+                        color: d.fontColor
+                    }
+                }
+                // Active users:
+                Row {
+                    height: activeUsersTxt.height
+                    spacing: Theme.dp(4)
+                    StatusIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        icon: "tiny/flash"
+                        width: Theme.dp(14)
+                        height: Theme.dp(14)
+                    }
+                    StatusBaseText {
+                        id: activeUsersTxt
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.numberFormat(root.activeUsers)
+                        font.pixelSize: Theme.dp(15)
+                        color: d.fontColor
+                    }
+                }
+            }
+            // TODO: Replace by `StatusListItemTagRow` - To be done!
+            Row {
+                visible: root.categories.count > 0
+                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+                spacing: Theme.dp(8)
+                clip: true
+
+                Repeater {
+                    model: root.categories
+                    delegate: StatusListItemTag {
+                        border.color: Theme.palette.baseColor2
+                        color: "transparent"
+                        height: Theme.dp(24)
+                        radius: Theme.dp(20)
+                        closeButtonVisible: false
+                        icon.emoji: model.emoji
+                        icon.height: Theme.dp(24)
+                        icon.width: icon.height
+                        icon.color: "transparent"
+                        icon.isLetterIdenticon: true
+                        title: model.name
+                        titleText.font.pixelSize: Theme.dp(13)
+                        titleText.color: d.fontColor
+                    }
+                }
+            }
+        }
+    } // End of content card
+
+    // Loading card
+    Rectangle {
+        visible: !root.loaded
+        anchors.top: parent.top
+        anchors.topMargin: Theme.dp(40)
+        width: d.cardWidth
+        height: d.cardHeigth
+        color: d.cardColor
+        radius: d.cardRadius
+        clip: true
+        Rectangle {
+            anchors.top: parent.top
+            anchors.topMargin: Theme.dp(8)
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: Theme.dp(48)
+            height: Theme.dp(24)
+            color: d.loadingColor2
+            radius: Theme.dp(200)
+        }
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: Theme.dp(32)
+            anchors.margins: d.margins
+            clip: true
+            spacing: Theme.dp(9)
+            Rectangle {
+                width: Theme.dp(84)
+                height: Theme.dp(16)
+                color: d.loadingColor1
+                radius: Theme.dp(5)
+            }
+            Rectangle {
+                width: Theme.dp(311)
+                height: Theme.dp(16)
+                color: d.loadingColor1
+                radius: Theme.dp(5)
+            }
+            Rectangle {
+                width: Theme.dp(271)
+                height: Theme.dp(16)
+                color: d.loadingColor1
+                radius: Theme.dp(5)
+            }
+            Row {
+                Layout.topMargin: Theme.dp(13)
+                spacing: Theme.dp(16)
+                Repeater {
+                    model: 2
+                    delegate: Row {
+                        spacing: Theme.dp(4)
+                        Rectangle {
+                            width: Theme.dp(14)
+                            height: Theme.dp(14)
+                            color: d.loadingColor1
+                            radius: width / 2
+                        }
+                        Rectangle {
+                            width: 50
+                            height: 12
+                            color: d.loadingColor2
+                            radius: 5
+                        }
+                    }
+                }
+            }
+            Row {
+                Layout.topMargin: Theme.dp(12)
+                spacing: Theme.dp(8)
+                Repeater {
+                    model: 3
+                    delegate:
+                    Rectangle {
+                        width: Theme.dp(76)
+                        height: Theme.dp(24)
+                        color: d.loadingColor2
+                        radius: Theme.dp(20)
+                    }
+                }
+            }
+        }
+    } // End of loading card
+
+    MouseArea {
+        id: sensor
+        enabled: root.loaded
+        anchors.fill: parent
+        cursorShape: root.loaded ? Qt.PointingHandCursor : Qt.ArrowCursor
+        hoverEnabled: true
+
+        onClicked: root.clicked(root.communityId)
+    }
+}
@@ -0,0 +1,49 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+
+    property string filterString
+    property bool showOnlySelected: false
+    property bool active: true
+
+    property alias model: repeater.model
+    property alias contentWidth: flow.width
+
+    signal clicked(var item)
+
+    implicitWidth: flow.implicitWidth
+    implicitHeight: flow.implicitHeight
+
+    Flow {
+        id: flow
+        anchors.centerIn: parent
+        width: {
+            let itemsWidth = 0;
+            for (let i = 0; i < repeater.count; ++i) {
+                itemsWidth += spacing + repeater.itemAt(i).width;
+            }
+            return Math.min(parent.width, itemsWidth);
+        }
+        spacing: Theme.dp(10)
+
+        Repeater {
+            id: repeater
+
+            delegate: StatusCommunityTag {
+                emoji: model.emoji
+                name: model.name
+                visible: (root.showOnlySelected ? model.selected : !model.selected) &&
+                         (filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1)
+                width: visible ? implicitWidth : -Theme.dp(10)
+                height: visible ? implicitHeight : 0
+                removable: root.showOnlySelected && root.active
+                onClicked: root.clicked(model)
+            }
+        }
+    }
+}
@@ -5,8 +5,8 @@ import StatusQ.Components 0.1
 StatusListItem {
    id: statusContactRequestsListItem

-    implicitHeight: 64
-    implicitWidth: 288
+    implicitHeight: Theme.dp(64)
+    implicitWidth: Theme.dp(288)

    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"

@@ -17,7 +17,7 @@ StatusListItem {
            visible:  statusContactRequestsListItem.requestsCount > 0
            value: statusContactRequestsListItem.requestsCount
            anchors.verticalCenter: parent.verticalCenter
-            border.width: 4
+            border.width: Theme.dp(4)
            border.color: color
        },
        StatusIcon {
@@ -15,8 +15,8 @@ Row {
        width: dummyImage.width
        height: dummyImage.height
        background: StatusIconBackgroundSettings {
-            width: 10
-            height: 10
+            width: Theme.dp(10)
+            height: Theme.dp(10)
            color: Theme.palette.primaryColor1
        }
        // Only used to get implicit width and height from the actual image
@@ -33,8 +33,8 @@ Row {
        width: dummyImage.width
        height: dummyImage.height
        background: StatusIconBackgroundSettings {
-            width: 10
-            height: 10
+            width: Theme.dp(10)
+            height: Theme.dp(10)
            color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
        }
        // Only used to get implicit width and height from the actual image
@@ -50,7 +50,7 @@ Row {
        Untrustworthy //2
    }

-    spacing: 4
+    spacing: Theme.dp(4)
    visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)

    StatusRoundIcon {
@@ -11,16 +11,16 @@ Rectangle {
    property alias subTitleComponent: statusDescriptionListItemSubTitle
    property string value: ""
    property StatusIconSettings icon: StatusIconSettings {
-        width: 23
-        height: 23
+        width: Theme.dp(23)
+        height: Theme.dp(23)
    }
    property alias tooltip: statusToolTip
    property alias iconButton: statusFlatRoundButton
    property alias sensor: sensor

-    implicitWidth: 448
-    implicitHeight: 56
-    radius: 8
+    implicitWidth: Theme.dp(448)
+    implicitHeight: Theme.dp(56)
+    radius: Theme.dp(8)

    color: Theme.palette.statusListItem.backgroundColor

@@ -35,12 +35,12 @@ Rectangle {
            id: statusDescriptionListItemTitle
            anchors.top: parent.top
            anchors.left: parent.left
-            anchors.leftMargin: 16
-            anchors.topMargin: 5
+            anchors.leftMargin: Theme.dp(16)
+            anchors.topMargin: Theme.dp(5)

            color: Theme.palette.baseColor1
            text: statusDescriptionListItem.title
-            font.pixelSize: 13
+            font.pixelSize: Theme.dp(13)
            font.weight: Font.Medium
        }

@@ -48,12 +48,12 @@ Rectangle {
            id: statusDescriptionListItemSubTitle
            anchors.top: statusDescriptionListItemTitle.bottom
            anchors.left: parent.left
-            anchors.leftMargin: 16
-            anchors.topMargin: 4
+            anchors.leftMargin: Theme.dp(16)
+            anchors.topMargin: Theme.dp(4)

            text: statusDescriptionListItem.subTitle
            color: Theme.palette.directColor1
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            font.weight: Font.Normal
        }

@@ -62,10 +62,10 @@ Rectangle {
            visible: !!statusDescriptionListItem.icon.name
            anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
            anchors.left: statusDescriptionListItemSubTitle.right
-            anchors.leftMargin: 4
+            anchors.leftMargin: Theme.dp(4)

-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)

            icon.name: statusDescriptionListItem.icon.name
            icon.width: statusDescriptionListItem.icon.width
@@ -78,15 +78,15 @@ Rectangle {

        Row {
            anchors.right: parent.right
-            anchors.rightMargin: 16
+            anchors.rightMargin: Theme.dp(16)
            anchors.verticalCenter: parent.verticalCenter
            visible: !!statusDescriptionListItem.value
-            spacing: 8
+            spacing: Theme.dp(8)

            StatusBaseText {
                text: statusDescriptionListItem.value
                color: Theme.palette.baseColor1
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                anchors.verticalCenter: parent.verticalCenter
            }

@@ -1,14 +1,16 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1

+import StatusQ.Core.Theme 0.1

 Image {
    id: root

    property string emojiId: ""
-    
-    width: 14
-    height: 14
+
+    width: Theme.dp(14)
+    height: Theme.dp(14)
+
    sourceSize.width: width
    sourceSize.height: height

@@ -16,4 +18,4 @@ Image {
    mipmap: true
    antialiasing: true
    source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
-}
+}
@@ -19,18 +19,18 @@ Rectangle {
    property bool expanded: false

    property StatusIconSettings icon: StatusIconSettings {
-        width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
-        height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
+        width: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
+        height: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
        color: Theme.palette.directColor1
        background: StatusIconBackgroundSettings {
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)
            color: Theme.palette.primaryColor2
        }
    }
    property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
    }

    enum Type {
@@ -39,7 +39,7 @@ Rectangle {
        Tertiary // 2
    }

-    implicitWidth: 718
+    implicitWidth: Theme.dp(718)

    radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0
    color: "transparent"
@@ -52,7 +52,7 @@ Rectangle {
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width
-        height: 1
+        height: Theme.dp(1)

        color: Theme.palette.baseColor2
        visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
@@ -63,16 +63,16 @@ Rectangle {
        id: header
        anchors.top: parent.top
        width: parent.width
-        height: 64
-        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
+        height: Theme.dp(64)
+        radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? Theme.dp(8) : 0
        color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"

        StatusSmartIdenticon {
            id: identicon
            anchors.top: parent.top
-            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
+            anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25)
            anchors.left: parent.left
-            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
+            anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11)
            image: statusExpandableItem.image
            icon: statusExpandableItem.icon
            name: primaryText.text
@@ -83,20 +83,20 @@ Rectangle {
            id: primaryText
            anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary)  ||
                        (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
-            anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
+            anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17)
            anchors.left: identicon.active ? identicon.right : parent.left
-            anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16
+            anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ?  10 : 16)

            anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined

-            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
-                                                          parent.width - icon.background.width - additionalText.contentWidth - 110) :
-                                        (button.visible ? parent.width - icon.background.width - button.width - 70 :
-                                                          parent.width - icon.background.width - 70)
+            width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - Theme.dp(110) :
+                                                          parent.width - icon.background.width - additionalText.contentWidth - Theme.dp(110)) :
+                                        (button.visible ? parent.width - icon.background.width - button.width - Theme.dp(70) :
+                                                          parent.width - icon.background.width - Theme.dp(70))

            font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
-            font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
-            lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
+            font.pixelSize: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17)
+            lineHeight: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24)
            lineHeightMode: Text.FixedHeight
            elide: Text.ElideRight
            color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
@@ -105,12 +105,12 @@ Rectangle {
        StatusBaseText {
            id: secondaryText
            anchors.top: primaryText.bottom
-            anchors.topMargin: 4
+            anchors.topMargin: Theme.dp(4)
            anchors.left: primaryText.left
            anchors.right: primaryText.right

-            font.pixelSize: 15
-            lineHeight: 22
+            font.pixelSize: Theme.dp(15)
+            lineHeight: Theme.dp(22)
            lineHeightMode: Text.FixedHeight
            elide: Text.ElideRight
            color: Theme.palette.directColor3
@@ -119,12 +119,12 @@ Rectangle {
        StatusBaseText {
            id: additionalText
            anchors.verticalCenter: primaryText.verticalCenter
-            anchors.verticalCenterOffset: 2
+            anchors.verticalCenterOffset: Theme.dp(2)
            anchors.right: expandImage.left
-            anchors.rightMargin: 16
+            anchors.rightMargin: Theme.dp(16)

-            font.pixelSize: 15
-            lineHeight: 24
+            font.pixelSize: Theme.dp(15)
+            lineHeight: Theme.dp(24)
            lineHeightMode: Text.FixedHeight
            elide: Text.ElideRight
            color: Theme.palette.baseColor1
@@ -133,9 +133,9 @@ Rectangle {
        StatusButton {
            id: button
            anchors.top: parent.top
-            anchors.topMargin: 19
+            anchors.topMargin: Theme.dp(19)
            anchors.right: parent.right
-            anchors.rightMargin: 16
+            anchors.rightMargin: Theme.dp(16)
            visible: !!text
        }

@@ -148,13 +148,13 @@ Rectangle {
            anchors.rightMargin: {
                switch (statusExpandableItem.type) {
                    case StatusExpandableItem.Type.Primary:
-                      return 23
+                      return Theme.dp(23)
                      break;
                    case StatusExpandableItem.Type.Secondary:
-                      return 16
+                      return Theme.dp(16)
                      break;
                    default:
-                      return 6
+                      return Theme.dp(6)

                }
            }
@@ -181,11 +181,11 @@ Rectangle {
    Loader {
        id: expandableRegion
        anchors.top: header.bottom
-        anchors.topMargin: 16
+        anchors.topMargin: Theme.dp(16)
        anchors.left: parent.left
-        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
+        anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(48) : 0
        anchors.right: parent.right
-        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
+        anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(16) : 0
        visible: false
    }

@@ -202,13 +202,13 @@ Rectangle {
        State {
            name: "EXPANDED"
            PropertyChanges {target: expandImage; icon: "chevron-up"}
-            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
+            PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + Theme.dp(22)}
            PropertyChanges {target: expandableRegion; visible: true}
        },
        State {
            name: "COLLAPSED"
            PropertyChanges {target: expandImage; icon: "chevron-down"}
-            PropertyChanges {target: statusExpandableItem; height: 82}
+            PropertyChanges {target: statusExpandableItem; height: Theme.dp(82)}
            PropertyChanges {target: expandableRegion; visible: false}
        }
    ]
@@ -2,6 +2,7 @@ import QtQuick 2.14
 import QtQuick.Layouts 1.14

 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1

 /*!
@@ -50,7 +51,7 @@ Item {
        \qmlproperty bool StatusImageCrop::margins
        Space to keep around the control borders and crop area
    */
-    property int margins: 10
+    property int margins: Theme.dp(10)

    /*!
        \qmlproperty url StatusImageCropPanel::source
@@ -82,12 +83,7 @@ Item {
        \qmlproperty rect StatusImageCropPanel::cropRect
        \sa StatusImageCrop::cropRect
    */
-    property alias cropRect: cropEditor.cropRect
-    /*!
-        \qmlproperty rect StatusImageCropPanel::cropRect
-        \sa StatusImageCrop::cropRect
-    */
-    readonly property alias cropWindow: cropEditor.cropWindow
+    readonly property alias cropRect: cropEditor.cropRect
    /*!
        \qmlproperty real StatusImageCrop::scrollZoomFactor
        How fast is image scaled (zoomed) when using mouse scroll
@@ -116,16 +112,11 @@ Item {
    QtObject {
        id: d

+        readonly property int referenceWindowWidth: 1000
        function updateAspectRatio(newAR) {
-            // Keep width and adjust height
-            const eW = cropEditor.cropRect.width
-            const w = (eW <= 0) ? cropEditor.sourceSize.width : eW
-            const h = w/newAR
-            const c = (eW <= 0)
-                    ? Qt.point(cropEditor.sourceSize.width/2, cropEditor.sourceSize.height/2)
-                    : Qt.point(cropEditor.cropRect.x + w/2, cropEditor.cropRect.y + cropEditor.cropRect.height/2)
-            const nR = Qt.rect(c.x - w/2, c.y-h/2, w, h)
-            cropEditor.setCropRect(nR)
+            if(root.sourceSize.width === 0 || root.sourceSize.height === 0)
+                return
+            cropEditor.setCropRect(cropEditor.fillContentInWindow(root.sourceSize, Qt.size(referenceWindowWidth, referenceWindowWidth / root.aspectRatio)))
        }
    }

@@ -225,7 +216,7 @@ Item {
                onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y))

                onWheel: {
-                    const delta = wheel.angleDelta.y / 120
+                    const delta = wheel.angleDelta.y / Theme.dp(120)
                    cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor))
                }

@@ -252,13 +243,13 @@ Item {
            StatusIcon {
                icon: "remove-circle"

-                Layout.preferredWidth: 20
-                Layout.preferredHeight: 20
+                Layout.preferredWidth: Theme.dp(20)
+                Layout.preferredHeight: Theme.dp(20)
            }
            StatusSlider {
                Layout.fillWidth: true
-                Layout.topMargin: 20
-                Layout.bottomMargin: 25
+                Layout.topMargin: Theme.dp(20)
+                Layout.bottomMargin: Theme.dp(25)
                Layout.alignment: Qt.AlignVCenter

                enabled: root.interactive
@@ -272,8 +263,8 @@ Item {
            StatusIcon {
                icon: "add-circle"

-                Layout.preferredWidth: 20
-                Layout.preferredHeight: 20
+                Layout.preferredWidth: Theme.dp(20)
+                Layout.preferredHeight: Theme.dp(20)
            }
        }
    }
@@ -10,12 +10,12 @@ Rectangle {
    property string name
    property string emoji
    property string emojiSize: Emoji.size.small
-    property int letterSize: 21
+    property int letterSize: Theme.dp(21)
    property int charactersLen: 1

    color: Theme.palette.miscColor5
-    width: 40
-    height: 40
+    width: Theme.dp(40)
+    height: Theme.dp(40)
    radius: width / 2

    StatusEmoji {
@@ -5,6 +5,10 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Animations 0.1
+import QtGraphicalEffects 1.14
+
+import "private"

 Rectangle {
    id: statusListItem
@@ -16,8 +20,8 @@ Rectangle {
    property string subTitle: ""
    property string tertiaryTitle: ""
    property string label: ""
-    property real leftPadding: 16
-    property real rightPadding: 16
+    property real leftPadding: Theme.dp(16)
+    property real rightPadding: Theme.dp(16)
    property bool enabled: true
    property bool highlighted: false
    property bool propagateTitleClicks: true
@@ -27,19 +31,21 @@ Rectangle {
    property Component bottomDelegate
    property var tagsModel: []
    property Component tagsDelegate
+    property bool loading: false
+    property bool loadingFailed: false

    property StatusIconSettings icon: StatusIconSettings {
-        height: isLetterIdenticon ? 40 : 20
-        width: isLetterIdenticon ? 40 : 20
+        height: Theme.dp(isLetterIdenticon ? 40 : 20)
+        width: Theme.dp(isLetterIdenticon ? 40 : 20)
        rotation: 0
        isLetterIdenticon: false
-        letterSize: 21
+        letterSize: Theme.dp(21)
        charactersLen: 1
        color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
            Theme.palette.dangerColor1 : Theme.palette.primaryColor1
        background: StatusIconBackgroundSettings {
-            width: 40
-            height: 40
+            width: Theme.dp(40)
+            height: Theme.dp(40)
            color: {
                if (sensor.containsMouse) {
                    return type === StatusListItem.Type.Secondary ||
@@ -52,8 +58,8 @@ Rectangle {
        }
    }
    property StatusImageSettings image: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
        isIdenticon: false
    }
    property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
@@ -75,7 +81,7 @@ Rectangle {
    property alias statusListItemTagsSlot: statusListItemTagsSlot
    property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline

-    signal clicked(string itemId)
+    signal clicked(string itemId, var mouse)
    signal titleClicked(string titleId)

    enum Type {
@@ -84,12 +90,12 @@ Rectangle {
        Danger
    }

-    implicitWidth: 448
+    implicitWidth: Theme.dp(448)
    implicitHeight: {
        if (bottomModel.length === 0) {
-            return Math.max(64, statusListItemTitleArea.height + 16)
+            return Math.max(64, statusListItemTitleArea.height + Theme.dp(16))
        }
-        return Math.max(64, statusListItemTitleArea.height + 90)
+        return Math.max(Theme.dp(64), statusListItemTitleArea.height + Theme.dp(90))
    }
    color: {
        if (sensor.containsMouse || statusListItem.highlighted) {
@@ -125,7 +131,7 @@ Rectangle {
        preventStealing: true

        onClicked: {
-            statusListItem.clicked(statusListItem.itemId)
+            statusListItem.clicked(statusListItem.itemId, mouse)
        }

        StatusSmartIdenticon {
@@ -134,6 +140,7 @@ Rectangle {
            anchors.leftMargin: statusListItem.leftPadding
            anchors.top: parent.top
            anchors.topMargin: 12
+            visible: !iconOrImageLoadingOverlay.visible
            image: statusListItem.image
            icon: statusListItem.icon
            name: statusListItem.title
@@ -145,6 +152,20 @@ Rectangle {
            ringSettings: statusListItem.ringSettings
        }

+        Rectangle {
+            id: iconOrImageLoadingOverlay
+            visible: statusListItem.loading || statusListItem.loadingFailed
+            anchors.fill: iconOrImage
+            radius: width / 2
+            color: statusListItem.loadingFailed ? Theme.palette.dangerColor2 : Theme.palette.baseColor1
+
+            SkeletonAnimation {
+                anchors.fill: parent
+                mask: parent
+                visible: statusListItem.loading && !statusListItem.loadingFailed
+            }
+        }
+
        Item {
            id: statusListItemTitleArea

@@ -158,16 +179,37 @@ Rectangle {

            anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
            anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
-            anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
+            anchors.leftMargin: iconOrImage.active ? Theme.dp(16) : statusListItem.leftPadding
            anchors.rightMargin: statusListItem.rightPadding
            anchors.verticalCenter:  bottomModel.length === 0 ? parent.verticalCenter : undefined

            height: childrenRect.height

+            Rectangle {
+                id: titleLoadingOverlay
+                visible: statusListItem.loading || statusListItem.loadingFailed
+                anchors {
+                    left: statusListItemTitle.left
+                    top: statusListItemTitle.top
+                    bottom: statusListItemTitle.bottom
+                }
+
+                width: Math.max(95, statusListItemTitle.width)
+                radius: 4
+                color: statusListItem.loadingFailed ? Theme.palette.dangerColor2 : Theme.palette.baseColor1
+
+                SkeletonAnimation {
+                    anchors.fill: parent
+                    mask: parent
+                    visible: statusListItem.loading && !statusListItem.loadingFailed
+                }
+            }
+
            StatusBaseText {
                id: statusListItemTitle
+                opacity: titleLoadingOverlay.visible ? 0 : 1
                text: statusListItem.title
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                height: visible ? contentHeight : 0
                elide: Text.ElideRight
                anchors.left: parent.left
@@ -212,12 +254,12 @@ Rectangle {
            StatusBaseText {
                id: statusListItemTitleAsideText
                anchors.left: statusListItemTitle.right
-                anchors.leftMargin: 4
+                anchors.leftMargin: Theme.dp(4)
                anchors.verticalCenter: statusListItemTitle.verticalCenter
                anchors.top: bottomModel.length === 0 ? undefined:  parent.top
                anchors.topMargin: bottomModel.length === 0 ? undefined : 20
                text: statusListItem.titleAsideText
-                font.pixelSize: 10
+                font.pixelSize: Theme.dp(10)
                color: Theme.palette.baseColor1
                visible: !!statusListItem.titleAsideText
            }
@@ -226,7 +268,7 @@ Rectangle {
                id: titleIconsRow
                anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
                anchors.verticalCenter: statusListItemTitle.verticalCenter
-                anchors.leftMargin: 4
+                anchors.leftMargin: Theme.dp(4)
            }

            StatusBaseText {
@@ -235,7 +277,10 @@ Rectangle {
                width: parent.width
                text: statusListItem.subTitle
                font.pixelSize: 15
-                color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                color: statusListItem.loadingFailed ? Theme.palette.dangerColor1
+                                                    : !statusListItem.enabled || !statusListItem.tertiaryTitle
+                                                      ? Theme.palette.baseColor1
+                                                      : Theme.palette.directColor1
                height: visible ? contentHeight : 0
                visible: !!statusListItem.subTitle
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
@@ -248,7 +293,7 @@ Rectangle {
                height: visible ? contentHeight : 0
                text: statusListItem.tertiaryTitle
                color: Theme.palette.baseColor1
-                font.pixelSize: 13
+                font.pixelSize: Theme.dp(13)
                visible: !!statusListItem.tertiaryTitle
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            }
@@ -257,14 +302,14 @@ Rectangle {
                id: statusListItemBadge
                anchors.top: statusListItemTertiaryTitle.bottom
                width: contentItem.width
-                implicitHeight: visible ? 22 : 0
+                implicitHeight: visible ? Theme.dp(22) : 0
            }

            Row {
                id: statusListItemTagsSlotInline
                anchors.top: statusListItemTertiaryTitle.bottom
                width: parent.width
-                spacing: 10
+                spacing: Theme.dp(10)
                clip: true

                Repeater {
@@ -276,12 +321,12 @@ Rectangle {

        Row {
            id: statusListItemTagsSlot
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
            anchors.top: iconOrImage.bottom
            anchors.left: parent.left
-            anchors.leftMargin: 16
+            anchors.leftMargin: Theme.dp(16)
            width: statusListItemBadge.width
-            spacing: 10
+            spacing: Theme.dp(10)
            anchors.verticalCenter: parent.verticalCenter

            Repeater {
@@ -294,12 +339,12 @@ Rectangle {
            id: statusListItemLabel
            anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
            anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : 16
+            anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(16)
            anchors.right: statusListItemComponentsSlot.left
-            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
+            anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? Theme.dp(10) : 0

            text: statusListItem.label
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
            color: Theme.palette.baseColor1
            visible: !!statusListItem.label
        }
@@ -310,8 +355,8 @@ Rectangle {
            anchors.rightMargin: statusListItem.rightPadding
            anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
            anchors.top: bottomModel.length === 0 ? undefined:  parent.top
-            anchors.topMargin: bottomModel.length === 0 ? undefined : 12
-            spacing: 10
+            anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(12)
+            spacing: Theme.dp(10)
        }
    }
 }
@@ -14,13 +14,13 @@ Control {
    property string secondaryText: ""

    property StatusImageSettings image: StatusImageSettings {
-        height: 16
-        width: 16
+        height: Theme.dp(16)
+        width: Theme.dp(16)
        isIdenticon: false
    }
    property StatusIconSettings icon: StatusIconSettings {
-        height: 16
-        width: 16
+        height: Theme.dp(16)
+        width: Theme.dp(16)
        isLetterIdenticon: false
        background: StatusIconBackgroundSettings {}
        color: "transparent"
@@ -29,31 +29,31 @@ Control {
    background: Rectangle {
        anchors.fill: parent
        color: "transparent"
-        radius: 11
+        radius: Theme.dp(11)
        border.color: Theme.palette.directColor7
    }

    contentItem: Item {
        id: contentItem
-        width: (contentItemRow.width + 10)
+        width: (contentItemRow.width + Theme.dp(10))
        height: parent.height
        RowLayout {
            id: contentItemRow
            anchors.centerIn: parent
            anchors.horizontalCenterOffset: -spacing
-            spacing: 2
+            spacing: Theme.dp(2)
            StatusRoundedImage {
                implicitWidth: root.image.width
                implicitHeight: root.image.height
                visible: !root.icon.isLetterIdenticon
                image.source: root.image.source
                border.color: Theme.palette.baseColor1
-                border.width: root.image.isIdenticon ? 1 : 0
+                border.width: root.image.isIdenticon ? Theme.dp(1) : 0
            }
            StatusLetterIdenticon {
                implicitWidth: root.icon.width
                implicitHeight: root.icon.width
-                letterSize: 11
+                letterSize: Theme.dp(11)
                visible: root.icon.isLetterIdenticon
                color: root.icon.color
                name: root.primaryText
@@ -6,10 +6,10 @@ import StatusQ.Core.Theme 0.1

 Rectangle {
    id: root
-    width: layout.width
-    height: 30
+    width: layout.width + layout.anchors.margins
+    height: Theme.dp(30)
    color: Theme.palette.primaryColor3
-    radius: 15
+    radius: Theme.dp(15)

    property alias titleText: titleText

@@ -18,34 +18,33 @@ Rectangle {
    signal clicked()

    property StatusImageSettings image: StatusImageSettings {
-        width: 20
-        height: 20
+        width: Theme.dp(20)
+        height: Theme.dp(20)
        isIdenticon: false
    }

    property StatusIconSettings icon: StatusIconSettings {
-        height: 20
-        width: 20
+        height: Theme.dp(20)
+        width: Theme.dp(20)
        rotation: 0
        isLetterIdenticon: false
-        letterSize: 10
+        letterSize: Theme.dp(10)
        color: Theme.palette.primaryColor1
        background: StatusIconBackgroundSettings {
-            width: 15
-            height: 15
+            width: Theme.dp(15)
+            height: Theme.dp(15)
            color: Theme.palette.primaryColor3
        }
    }

    RowLayout {
        id: layout
-
        height: parent.height
-        spacing: 5
+        anchors.margins: Theme.dp(6)

        StatusSmartIdenticon {
            id: iconOrImage
-            Layout.leftMargin: 5
+            Layout.leftMargin: Theme.dp(4)
            image: root.image
            icon: root.icon
            name: root.title
@@ -58,7 +57,7 @@ Rectangle {
            id: titleText
            color: Theme.palette.primaryColor1
            text: root.title
-            Layout.rightMargin: closeButtonVisible ? 0 : 5
+            Layout.rightMargin: closeButtonVisible ? 0 : Theme.dp(5)
        }

        StatusIcon {
@@ -66,7 +65,6 @@ Rectangle {
            color: Theme.palette.primaryColor1
            icon: "close-circle"
            visible: closeButtonVisible
-            Layout.rightMargin: 5
            MouseArea {
                id: mouseArea
                anchors.fill: parent
@@ -227,8 +227,8 @@ Item {
        }
    }

-    width: 110
-    height: 38
+    width: Theme.dp(110)
+    height: Theme.dp(38)

    Component.onCompleted: d.initialize()

@@ -238,7 +238,7 @@ Item {
        bgColor: Theme.palette.primaryColor3
        contentColor: Theme.palette.primaryColor1
        text: picker.selectedItemsText
-        textPixelSize: 13
+        textPixelSize: Theme.dp(13)
        type: StatusPickerButton.Type.Down

        onClicked: {
@@ -261,7 +261,7 @@ Item {
        anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined
        anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined
        anchors.top: btn.bottom
-        anchors.topMargin: 4
+        anchors.topMargin: Theme.dp(4)
        visible: false
        color: Theme.palette.statusPopupMenu.backgroundColor
        radius: 8
@@ -269,8 +269,8 @@ Item {
        layer.effect: DropShadow {
            source: picker
            horizontalOffset: 0
-            verticalOffset: 4
-            radius: 12
+            verticalOffset: Theme.dp(4)
+            radius: Theme.dp(12)
            samples: 25
            spread: 0.2
            color: Theme.palette.dropShadow
@@ -279,29 +279,29 @@ Item {
        ListView {
            id: content            

-            property int itemHeight: 40
-            property int itemWidth: 360
+            property int itemHeight: Theme.dp(40)
+            property int itemWidth: Theme.dp(360)

            model: d.filteredModel
            width: itemWidth
            anchors.top: parent.top
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 8
+            anchors.bottomMargin: Theme.dp(8)
            currentIndex: -1
            clip: true
            headerPositioning: ListView.OverlayHeader
            header: Rectangle {
                id: header
                width: content.itemWidth
-                height: searchInput.height + 24
+                height: searchInput.height + Theme.dp(24)
                color: Theme.palette.statusPopupMenu.backgroundColor
                z: 3 // Above delegate (z=1) and above section.delegate (z = 2)

                StatusBaseInput {
                    id: searchInput
-                    implicitHeight: 36
-                    width: content.itemWidth - 2 * 18
+                    implicitHeight: Theme.dp(36)
+                    width: content.itemWidth - Theme.dp(2) * 18
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    topPadding: 0
@@ -371,12 +371,12 @@ Item {
                height: content.itemHeight

                StatusBaseText {
-                    anchors.leftMargin: 18
+                    anchors.leftMargin: Theme.dp(18)
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    text: section
                    color: Theme.palette.baseColor1
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                    elide: Text.ElideRight
                }
            }// End of Category item
@@ -4,18 +4,18 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1

 Item {
-    implicitHeight: 34
-    implicitWidth: 176
+    implicitHeight: Theme.dp(34)
+    implicitWidth: Theme.dp(176)

    property alias text: label.text

    StatusBaseText {
        anchors.left: parent.left
        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 4
-        anchors.leftMargin: 16
+        anchors.bottomMargin: Theme.dp(4)
+        anchors.leftMargin: Theme.dp(16)
        id: label
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
        color: Theme.palette.baseColor1
    }
 }
@@ -1,11 +1,12 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1

 StatusIcon {
    id: statusIcon
    icon: "loading"
-    height: 17
-    width: 17
+    height: Theme.dp(17)
+    width: Theme.dp(17)
    RotationAnimation {
        target: statusIcon;
        from: 0;
@@ -48,30 +48,40 @@ StatusListItem {
    */
    property string userName: ""
    /*!
-       \qmlproperty string StatusMemberListItem::chatKey
-       This property holds the chat key of the member represented.
+       \qmlproperty string StatusMemberListItem::pubKey
+       This property holds the chat public key of the member represented.
    */
-    property string chatKey: ""
+    property string pubKey: ""
    /*!
-       \qmlproperty string StatusMemberListItem::isMutualContact
-       This property holds if the member represented is a mutual contact.
+       \qmlproperty string StatusMemberListItem::isContact
+       This property holds if the member represented is contact.
    */
-    property bool isMutualContact: false
+    property bool isContact: false
    /*!
-       \qmlproperty string StatusMemberListItem::trustIndicator
-       This property holds the trust indicator of the member represented. Possible values are:
-       \list
-       \li StatusContactVerificationIcons.TrustedType.None
-       \li StatusContactVerificationIcons.TrustedType.Verified
-       \li StatusContactVerificationIcons.TrustedType.Untrustworthy
-       \endlist
+       \qmlproperty string StatusMemberListItem::isVerified
+       This property holds if the member represented is verified contact.
    */
-    property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
+    property bool isVerified: false
    /*!
-       \qmlproperty string StatusMemberListItem::isOnline
+       \qmlproperty string StatusMemberListItem::isUntrustworthy
+       This property holds if the member represented is untrustworthy.
+    */
+    property bool isUntrustworthy: false
+    /*!
+       \qmlproperty string StatusMemberListItem::status
       This property holds the connectivity status of the member represented.
+       0 - offline
+       1 - online
+       2 - doNotDisturb
+       3 - idle
    */
-    property bool isOnline: false
+    // FIXME: move Constants.userStatus from status-desktop
+    property int status: 0
+    /*!
+       \qmlproperty string StatusMemberListItem::isAdmin
+       This property holds the admin status of the member represented.
+    */
+    property bool isAdmin: false

    QtObject {
        id: d
@@ -82,46 +92,58 @@ StatusListItem {
            if(root.userName !== "" && root.nickName !== "")
                compose = "(" + root.userName + ")"

-            if(compose !== "" && root.chatKey !== "")
+            if(compose !== "" && root.pubKey !== "")
                // Composition
-                compose += " • " + composeShortKeyChat(root.chatKey)
+                compose += " • " + composeShortKeyChat(root.pubKey)

-            else if(root.chatKey !== "")
-                compose = composeShortKeyChat(root.chatKey)
+            else if(root.pubKey !== "")
+                compose = composeShortKeyChat(root.pubKey)

            return compose
        }

        // Short keychat composition:
-        function composeShortKeyChat(chatKey) {
-            return chatKey.substring(0, 5) + "..." + chatKey.substring(chatKey.length - 3)
+        function composeShortKeyChat(pubKey) {
+            return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - Theme.dp(3))
        }
    }

    // root object settings:
    title: (root.nickName === "") ? root.userName : root.nickName
    statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
-        isMutualContact: root.isMutualContact
-        trustIndicator: root.trustIndicator
+        isMutualContact: root.isContact
+        trustIndicator: {
+            if (root.isVerified) return StatusContactVerificationIcons.TrustedType.Verified
+            else if (root.isUntrustworthy) return StatusContactVerificationIcons.TrustedType.Untrustworthy
+            return StatusContactVerificationIcons.TrustedType.None
+        } 
    }
    subTitle: d.composeSubtitile()
-    statusListItemSubTitle.font.pixelSize: 10
+    statusListItemSubTitle.font.pixelSize: Theme.dp(10)
    icon.isLetterIdenticon: !root.image.source.toString()
    statusListItemIcon.badge.visible: true
-    statusListItemIcon.badge.color: root.isOnline ? Theme.palette.successColor1 : Theme.palette.baseColor1
+    statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME
    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4

    // Default sizes / positions by design
-    implicitWidth: 256
-    implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
-    leftPadding: 8
-    image.width: 32
-    image.height: 32
-    icon.width: 32
-    icon.height: 32
+    implicitWidth: Theme.dp(256)
+    implicitHeight: Math.max(Theme.dp(56), statusListItemTitleArea.height + leftPadding)
+    leftPadding: Theme.dp(8)
+    image.width: Theme.dp(32)
+    image.height: Theme.dp(32)
+    icon.width: Theme.dp(32)
+    icon.height: Theme.dp(32)
    statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
    statusListItemIcon.anchors.top: undefined
-    statusListItemIcon.badge.border.width: 2
-    statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
-    statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
+    statusListItemIcon.badge.border.width: Theme.dp(2)
+    statusListItemIcon.badge.implicitHeight: Theme.dp(12) // 8 px + 2 px * 2 borders
+    statusListItemIcon.badge.implicitWidth: Theme.dp(12) // 8 px + 2 px * 2 borders
+    components: [
+        StatusIcon {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.isAdmin
+            icon: "crown"
+            color: Theme.palette.directColor1
+        }
+    ]
 }
@@ -68,13 +68,13 @@ Rectangle {
            audioMessageInfoText: statusMessage.audioMessageInfoText
        }
        RowLayout {
-            spacing: 8
+            spacing: Theme.dp(8)
            Layout.fillWidth: true
            StatusSmartIdenticon {
                id: profileImage
                Layout.alignment: Qt.AlignTop
-                Layout.topMargin: 10
-                Layout.leftMargin: 16
+                Layout.topMargin: Theme.dp(10)
+                Layout.leftMargin: Theme.dp(16)
                image: messageDetails.profileImage
                name: messageHeader.displayName
                MouseArea {
@@ -87,7 +87,7 @@ Rectangle {
            Column {
                spacing: 4
                Layout.alignment: Qt.AlignTop
-                Layout.topMargin: 10
+                Layout.topMargin: Theme.dp(10)
                Layout.fillWidth: true
                StatusPinMessageDetails {
                    visible: messageDetails.isPinned && !editMode
@@ -192,9 +192,9 @@ Rectangle {
    StatusMessageQuickActions {
        id: quickActionsPanel
        anchors.right: parent.right
-        anchors.rightMargin: 20
+        anchors.rightMargin: Theme.dp(20)
        anchors.top: parent.top
-        anchors.topMargin: -8
+        anchors.topMargin: -Theme.dp(8)
        visible: hoverHandler.hovered && !editMode
    }
 }
@@ -1,6 +1,7 @@
 import QtQuick 2.13

 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1

 QtObject {
    id: msgDetails
@@ -10,8 +11,8 @@ QtObject {
    property string secondaryName: ""
    property string chatID: ""
    property StatusImageSettings profileImage: StatusImageSettings {
-        width: 40
-        height: 40
+        width: Theme.dp(40)
+        height: Theme.dp(40)
    }
    property bool isEdited: false
    property string messageText: ""
@@ -9,14 +9,14 @@ StatusListItem {
    property bool selected: false
    property alias badge: statusBadge

-    implicitWidth: 286
-    implicitHeight: 48
+    implicitWidth: Theme.dp(286)
+    implicitHeight: Theme.dp(48)

-    icon.background.width: 20
-    icon.background.height: 20
+    icon.background.width: Theme.dp(20)
+    icon.background.height: Theme.dp(20)
    icon.background.color: "transparent"

-    statusListItemIcon.anchors.topMargin: 14
+    statusListItemIcon.anchors.topMargin: Theme.dp(14)

    color: {
        if (selected) {
@@ -32,7 +32,7 @@ StatusListItem {
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor 
        hoverEnabled: true
-        onClicked: statusNavigationListItem.clicked(mouse)
+        onClicked: statusNavigationListItem.clicked(statusNavigationListItem.itemId, mouse)
    }

    components: [
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alexandra Betouni	d9ced073ea	feat(StatusQ): Making UI components resizable Needed for: https://github.com/status-im/status-desktop/issues/6071	2022-06-28 15:00:25 +03:00
Mikhail Rogachev	84c529d58d	feat(StatusStackModal): Component to replace nested StausModals (#733 )	2022-06-27 12:23:36 -04:00
Noelia	fe355eebf8	fix(StatusChatToolBar): Updated activity center button size Activity center button has now the same size than the other toolbar buttons. Fixes https://github.com/status-im/status-desktop/issues/6216	2022-06-27 07:52:14 +02:00
Noelia	b064f9ebd8	feat(StatusRoundButton): Added `Tertiary` type - Transparent background but when hovered, like Primary type in idle state. - Updated sandbox with the new type.	2022-06-27 07:50:22 +02:00
Sale Djenic	604bb7a74c	fix(StatusToastMessage): `clicked` signal added	2022-06-23 19:52:23 +02:00
Jonathan Rainville	7d064d6c6e	chore(StatusFlatRoundButon): fix warning related to hovered property	2022-06-23 11:44:06 -04:00
Noelia	1730fe756d	fix(StatusCommunityCard): Added implicit width and height (#739 ) Fixes https://github.com/status-im/status-desktop/issues/6206	2022-06-22 16:48:10 -04:00
Igor Sirotin	996717885d	feat(icons): Added unpin icon (#738 )	2022-06-22 16:47:51 +03:00
Igor Sirotin	34c223b581	feat(StatusListItem): Added `loading` and `loadingFailed` properties (#736 )	2022-06-22 10:40:17 +03:00
Mikhail Rogachev	7b35be6691	fix(StatusCommunityTag): fix StatusCommunityTag and and ETH icon (#734 )	2022-06-20 18:09:38 +03:00
Igor Sirotin	2186259c06	fix(contributing.md): Added `Popup` sizing guidelines (#728 )	2022-06-17 14:37:52 +03:00
Mikhail Rogachev	69b5cb1988	feat(StatusCommunityTags): Add community tags component (#718 )	2022-06-14 16:23:18 +03:00
Boris Melnik	cb900fe494	feat(StatusQ.Controls): Introduce `StatusActivityCenterButton` (#705 )	2022-06-14 13:01:08 +03:00
Igor Sirotin	1d618f72f7	fix(StatusBaseButton): Passed `icon.rotation` property to the icon component (#727 )	2022-06-14 12:21:53 +03:00
Khushboo-dev-cpp	d5df8b42a7	feat(StatusFloatingButtonsSelector): Implements the floating buttons selector widget (#681 ) To be used in with StatusModal or independently	2022-06-14 11:07:08 +05:30
Igor Sirotin	c0639d8b8e	fix(StatusTabButton): Hide bottom dash in disabled state (#729 )	2022-06-13 17:53:30 +03:00
Patryk Osmaczko	b816643e2d	fix: adapt StatusMemeberListItem usages to renamed properties	2022-06-13 10:45:35 +02:00
Noelia	33a3ee3d6e	feat(StatusCommunityCard): Added explicit dependency between z properties Added explicit dependency between z properties with banner, logo, and content card.	2022-06-13 09:48:25 +02:00
Noelia	2f24b69462	fix(StatusListItemTag): Added margins to better center the content Added margins to better center the content	2022-06-13 09:48:25 +02:00
Noelia	40db66f763	feat(StatusCommunityCard): New design - Added community banner. - Added community restrictions / private. - Modified card background shape. - Modified logo shape and position. - Modified text position and size. - Modified `loading state` card. - Added `DropShadow` effect. - Added new icons. - Added new community images and updated model. - Added numbers format function. - Added following new properties: `banner`,`activeUsers` `communityColor`, `isPrivate` and `tokenLogo`. Closes #692	2022-06-13 09:48:25 +02:00
Patryk Osmaczko	5361b56e9f	chore: adapt to new user/member backend models structure	2022-06-12 15:37:29 +02:00
Patryk Osmaczko	0e73530b05	chore(StatusModal): set StatusModal margins to 64 closes: status-im/status-desktop#6049	2022-06-12 12:43:03 +02:00
Patryk Osmaczko	0f5c1ce4c6	chore(StatusModal): make StatusModal follow padding https://github.com/status-im/status-desktop/pull/6010#discussion_r892148627	2022-06-12 12:43:03 +02:00
Noelia	b569782d4c	feat(StatusTagSelector): Updated component to use `StatusTagItem` as a delegate Updated component to use `StatusTagItem` as a delegate.	2022-06-09 15:49:07 +02:00
Noelia	d69b0598bf	feat(StatusTagItem): Created new control that represents a tag item Created new `StatusTagItem` control and added that represents a tag item with a `text`, `icon` and `isReadonly` properties.	2022-06-09 15:49:07 +02:00
Noelia	70834fc187	feat(StatusTagSelector): Introduced readonly tags and possibility of icon - Different tag color depending if the entry `isReadonly` or not. - Tag disabled if the entry `isReadonly`. - Possibility to show icon if entry contains the proper info. - Added property `orderByReadonly` to position `isReadonly` entries in the left. Updated sandbox project examples according to new tag updates. Closes #694	2022-06-09 15:49:07 +02:00
Anthony Laibe	18d385cf2b	feat(@StatusAssetSelector): Use asset selector per symbol and not (#715 ) address	2022-06-09 15:10:45 +02:00
Alexandra Betouni	648406c442	fix(StatusTagSelector): Fixed Layout issues when shrinking (#714 ) Closes https://github.com/status-im/status-desktop/issues/5954	2022-06-09 14:41:05 +03:00
Alexandra Betouni	5f7bd307ef	fix(StatusSeedPhraseInput): removed input anchoring not needed after refactor Closes https://github.com/status-im/status-desktop/issues/5967	2022-06-07 16:25:09 +02:00
Igor Sirotin	890ef86e1c	fix(StatusBaseButton): Mouse events ignored when button is disabled (#707 ) * fix(StatusBaseButton): Mouse events ignored when button is disabled	2022-06-07 14:56:45 +03:00
Noelia	0b855bfb48	fix(StatusPopupMenu): Changed dim to false Changed dim to false. Fixes https://github.com/status-im/status-desktop/issues/5828	2022-06-07 11:19:52 +02:00
Patryk Osmaczko	10cd9b23c1	fix(StatusSearchPopup): add color hash to chat icons	2022-06-02 10:01:52 +02:00
Patryk Osmaczko	bf3578cf7c	chore(StatusBaseText): add theme aware default color	2022-06-01 16:26:10 +02:00
Boris Melnik	da22cde5e6	feat(StatusMemberListItem): Add admin status (#704 )	2022-06-01 15:00:15 +03:00
Alexandra Betouni	312858b420	feat(StatusTagSelector): Added colorIdForPubkeyGet property (#702 ) Needed for: https://github.com/status-im/status-desktop/issues/5875	2022-06-01 10:47:38 +03:00
Noelia	a4d0c13662	feat(StatusTagSelector): Added property `showSortedListOnlyWhenText` and make dynamic the `implicitHeight` Added property `showSortedListOnlyWhenText` and make dynamic the `implicitHeight` calculation.	2022-05-31 15:22:17 +02:00
Noelia	61007c32e9	chore(assets): Added new icon `add-to-dm` Added new icon `add-to-dm`.	2022-05-31 15:22:17 +02:00
Noelia	1cadfc051b	feat(StatusChatToolBar): Add flexible component in right toolbar position - Added loader in right component position and removed `StatusChatInfoButton` specific. - Updated sandbox and added new example in Layouts with another different component than the `StatusChatInfoButton`. BREAKING CHANGES: The toolbar now expects a component to be loaded. The previous `StatusChatInfoButton` component has been removed and needs to be passed as a component from outside whenever needed. Breaking changes in `desktop` will be addressed in: https://github.com/status-im/status-desktop/pull/5823	2022-05-31 15:22:17 +02:00
Noelia	46cd904ced	feat(StatusCommunityCard): First component iteration (#693 ) It includes logo, title, community members, description, loaded, community id, popularity, tags row (that must be replaced to a new StatusQ component `StatusListItemTagRow`. It also contains `locale` property used to decide the member's number format. Added loading card. Added Community Card page (components test) and view (demo app) in sandbox. Added component documentation. Part of task: https://github.com/status-im/status-desktop/issues/4936	2022-05-31 11:44:26 +02:00
Patryk Osmaczko	9120a0fa1c	chore(StatusBaseInput): expose placeholder as alias	2022-05-31 10:03:49 +02:00
Patryk Osmaczko	406e4a1177	chore(StatusInput): use layouts for elements positioning It removes complexity and fixes StatusInput to follow the size assigned by client.	2022-05-31 10:03:49 +02:00
Sale Djenic	be0f49a8d8	fix(StatusRoundedImage): actual loaded image width and height updated In case you're dynamically change source image and image width and height are way bigger than the rounded image component width and height, resizing was not done correctly. update update	2022-05-31 09:11:29 +02:00
Alexandra Betouni	24228c5568	feat(icons): adding view icon Needed for: https://github.com/status-im/status-desktop/issues/4918	2022-05-30 16:17:25 +02:00
Alexandra Betouni	6056db73cf	feat(StatusBaseInput): disabled mouse area when input is disabled Needed for: https://github.com/status-im/status-desktop/issues/4918	2022-05-30 16:16:51 +02:00
Stefan	ee3effcdd1	fix(StatusImageCrop): fix wrong initial image fit The initial fit was computed for the square crop-window updates: 5118	2022-05-26 03:00:24 +03:00
Mikhail Rogachev	07e711e30c	feat(StatusLabeledSlider): add ability to decorate sliders and slider, decorated with lablels (#687 ) Close #686	2022-05-25 11:12:50 +03:00
r4bbit.eth	0b1a910b06	fix(StatusNavigationListItem): make click handler work again (#688 ) The click handler used inside the component broke in one of the latest changes done in `StatusListItem` where it expects two arguments being passed to its click handler. This commit fixes it by supplying all needed arguments (where `itemId` is always `''` unless set differently)	2022-05-24 15:57:59 -04:00
Mikhail Rogachev	81cbab3f66	feat(StatusColorSpace): impl color space component (#679 )	2022-05-24 10:32:40 +03:00
Alexandra Betouni	d31dddac7e	fix(StatusListItem): added mouse obj parameter in clicked signal (#683 ) Needed for: https://github.com/status-im/status-desktop/issues/5212	2022-05-23 18:22:01 +03:00