fix(Theme): Updated userCustomizationColors list per designs

Added explicit dependency between z properties with banner, logo, and content card.

sandbox/DemoApp.qml

@@ -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
     }
@@ -118,6 +119,11 @@ Rectangle {
                         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
@@ -205,6 +211,11 @@ Rectangle {
         StatusAppProfileSettingsView { }
     }
 
+    Component {
+        id: statusCommunityPortalView
+        StatusAppCommunitiesPortalView { }
+    }
+
     DemoContactRequestsModal {
         id: demoContactRequestsModal
         anchors.centerIn: parent

sandbox/controls/Buttons.qml

@@ -3,9 +3,10 @@ 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
     Grid {
@@ -307,12 +308,15 @@ 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;
         }
     }
+
 }

sandbox/controls/Controls.qml

@@ -189,6 +189,16 @@ GridLayout {
         value: 40
     }
 
+    StatusLabeledSlider {
+        width: 360
+        model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
+    }
+
+    StatusLabeledSlider {
+        width: 360
+        model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
+    }
+
     StatusBanner {
         id: banner
         width: 360
@@ -198,7 +208,7 @@ GridLayout {
     }
 
     StatusProgressBar {
-        id: progressBar        
+        id: progressBar
         text: "Weak"
         value: 0.5
         fillColor : Theme.palette.pinColor1

sandbox/controls/Layout.qml

@@ -10,31 +10,96 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 
 Column {
-    spacing: 5
+    spacing: 10
 
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        toolbarComponent: chatInfoButton1
+        width: 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: 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: 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: 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 {

sandbox/controls/ListItems.qml

@@ -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,33 @@ 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
+    }
 }

sandbox/demoapp/CreateChatView.qml

@@ -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);
             }

sandbox/demoapp/StatusAppChatView.qml

@@ -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
@@ -186,6 +179,19 @@ StatusAppThreePanelLayout {
                     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
+                }
+            }
         }
     }
 }

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -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: 70
+        property int layoutHMargin: 64
+        property int titlePixelSize: 28
+        property int subtitlePixelSize: 17
+        property int stylePadding: 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: 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: 1234 // by design
+            spacing: d.stylePadding/2
+
+            Repeater {
+                model: d.tagsModel
+                delegate: StatusListItemTag {
+                    border.color: Theme.palette.baseColor2
+                    color: "transparent"
+                    height: 32
+                    radius: 36
+                    closeButtonVisible: false
+                    icon.emoji: model.emoji
+                    icon.height: 32
+                    icon.width: icon.height
+                    icon.color: "transparent"
+                    icon.isLetterIdenticon: true
+                    title: model.name
+                    titleText.font.pixelSize: 15
+                    titleText.color: Theme.palette.primaryColor1
+                }
+            }
+        }
+
+        StatusBaseText {
+            Layout.leftMargin: d.layoutHMargin
+            Layout.topMargin: 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: 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) }
+                }
+            }
+        }
+    }
+}

sandbox/demoapp/StatusAppCommunityView.qml

@@ -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 {
@@ -258,15 +267,15 @@ StatusAppThreePanelLayout {
             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
             }
         }
     }

sandbox/demoapp/data/Models.qml

@@ -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,184 @@ 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: "👻"}
+    }
 }

sandbox/main.qml

@@ -149,36 +149,36 @@ StatusWindow {
                         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 +193,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 +239,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 +284,13 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
+                        StatusNavigationListItem {
+                            title: "StatusCommunityCard"
+                            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 +317,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);
+                        }
                     }
                 }
             }

sandbox/pages/StatusColorSpacePage.qml

@@ -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: 48
+            radius: 10
+            Layout.fillWidth: true
+
+            StatusBaseText {
+                anchors.centerIn: parent
+                color: Theme.palette.white
+                font.pixelSize: 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)
+        }
+    }
+}

sandbox/pages/StatusCommunityCardPage.qml

@@ -0,0 +1,47 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.13
+
+import StatusQ.Components 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: 28
+    rowSpacing: 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) }
+        }
+    }
+}

sandbox/pages/StatusTagSelectorPage.qml

@@ -9,17 +9,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 +31,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,6 +49,8 @@ Item {
             icon: ""
             isIdenticon: false
             onlineStatus: 3
+            isReadonly: false
+            tagIcon: ""
         }
     }
 

sandbox/qml.qrc

@@ -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>

src/StatusQ/Components/StatusChatToolBar.qml

@@ -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: 8
+    property int notificationCount: 0
     property Component popupMenu
+    property var toolbarComponent
 
     signal chatInfoButtonClicked()
     signal menuButtonClicked()
@@ -26,150 +24,156 @@ Rectangle {
     signal membersButtonClicked()
     signal searchButtonClicked()
 
+    implicitWidth: 518
+    implicitHeight: 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: 32
+                height: 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 + 12
             }
 
-            Loader {
-                id: popupMenuSlot
-                active: !!statusChatToolBar.popupMenu
+            StatusFlatRoundButton {
+                id: membersButton
+                width: 32
+                height: 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: 32
+                height: 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 + 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: 24
+                width: 1
+                color: Theme.palette.directColor7
+                Layout.alignment: Qt.AlignVCenter
+                visible: notificationButton.visible &&
+                         (menuButton.visible || membersButton.visible || searchButton.visible)
+            }
+
+            StatusFlatRoundButton {
+                id: notificationButton
+                width: 32
+                height: 32
+
+                icon.name: "notification"
+                icon.height: 21
+                type: StatusFlatRoundButton.Type.Secondary
+
+                // initializing the tooltip
+                tooltip.text: qsTr("Activity")
+                tooltip.orientation: StatusToolTip.Orientation.Bottom
+                tooltip.y: parent.height + 12
+
+                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
+                        }
+                        if (statusBadge.value > 9) {
+                            return -21
+                        }
+                        return -18
+                    }
+
+                    value: statusChatToolBar.notificationCount
+                    border.width: 2
+                    border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
+                }
             }
         }
-
     }
 }
 

src/StatusQ/Components/StatusColorSpace.qml

@@ -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: 340
+    implicitHeight: 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
+    }
+}

src/StatusQ/Components/StatusCommunityCard.qml

@@ -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: 335
+        property int bannerHeigth: 64
+        property int cardHeigth: 190
+        property int totalHeigth: 230
+        property int margins: 12
+        property int bannerRadius: 20
+        property int cardRadius: 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
+        }
+    }
+
+    width: d.cardWidth
+    height: d.totalHeigth
+    radius: d.bannerRadius
+    color: "transparent"
+    layer.enabled: true
+    layer.effect: DropShadow {
+        source: root
+        horizontalOffset: 0
+        verticalOffset: 2
+        radius: sensor.containsMouse ? 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: 16
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+        width: 48
+        height: width
+        radius: width / 2
+        color: root.loaded ? d.cardColor : d.loadingColor1
+
+        StatusRoundedImage {
+            visible: root.loaded
+            anchors.centerIn: parent
+            width: parent.width - 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: 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: 8
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: 48
+            height: 24
+            color: d.loadingColor2
+            radius: 200
+            StatusIcon {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: 6
+                anchors.left: parent.left
+                icon: "tiny/unlocked"
+                width: 16
+                height: 16
+                color: Theme.palette.baseColor1
+            }
+            StatusRoundedImage {
+                anchors.rightMargin: 2
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                width: 20
+                height: width
+                image.source: root.tokenLogo
+                color: "transparent"
+            }
+        }
+        // Community info
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 32
+            anchors.leftMargin: d.margins
+            anchors.rightMargin: d.margins
+            anchors.bottomMargin: d.margins
+            clip: true
+            spacing: 6
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                text: root.name
+                font.weight: Font.Bold
+                font.pixelSize: 19
+                color: d.fontColor
+            }
+            StatusBaseText {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                text: root.description
+                font.pixelSize: 15
+                lineHeight: 1.2
+                color: d.fontColor
+                maximumLineCount: 2
+                wrapMode: Text.WordWrap
+                elide: Text.ElideRight
+                clip: true
+            }
+        }
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 116
+            anchors.leftMargin: d.margins
+            anchors.rightMargin: d.margins
+            anchors.bottomMargin: d.margins
+            clip: true
+            spacing: 18
+            Row {
+                Layout.alignment: Qt.AlignVCenter
+                spacing: 20
+                // Members
+                Row {
+                    height: membersTxt.height
+                    spacing: 4
+                    StatusIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        icon: "tiny/members"
+                        width: 16
+                        height: 16
+                    }
+                    StatusBaseText {
+                        id: membersTxt
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.numberFormat(root.members)
+                        font.pixelSize: 15
+                        color: d.fontColor
+                    }
+                }
+                // Active users:
+                Row {
+                    height: activeUsersTxt.height
+                    spacing: 4
+                    StatusIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        icon: "tiny/flash"
+                        width: 14
+                        height: 14
+                    }
+                    StatusBaseText {
+                        id: activeUsersTxt
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.numberFormat(root.activeUsers)
+                        font.pixelSize: 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: 8
+                clip: true
+
+                Repeater {
+                    model: root.categories
+                    delegate: StatusListItemTag {
+                        border.color: Theme.palette.baseColor2
+                        color: "transparent"
+                        height: 24
+                        radius: 20
+                        closeButtonVisible: false
+                        icon.emoji: model.emoji
+                        icon.height: 24
+                        icon.width: icon.height
+                        icon.color: "transparent"
+                        icon.isLetterIdenticon: true
+                        title: model.name
+                        titleText.font.pixelSize: 13
+                        titleText.color: d.fontColor
+                    }
+                }
+            }
+        }
+    } // End of content card
+
+    // Loading card
+    Rectangle {
+        visible: !root.loaded
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        width: d.cardWidth
+        height: d.cardHeigth
+        color: d.cardColor
+        radius: d.cardRadius
+        clip: true
+        Rectangle {
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            anchors.right: parent.right
+            anchors.rightMargin: anchors.topMargin
+            width: 48
+            height: 24
+            color: d.loadingColor2
+            radius: 200
+        }
+        ColumnLayout {
+            anchors.fill: parent
+            anchors.topMargin: 32
+            anchors.margins: d.margins
+            clip: true
+            spacing: 9
+            Rectangle {
+                width: 84
+                height: 16
+                color: d.loadingColor1
+                radius: 5
+            }
+            Rectangle {
+                width: 311
+                height: 16
+                color: d.loadingColor1
+                radius: 5
+            }
+            Rectangle {
+                width: 271
+                height: 16
+                color: d.loadingColor1
+                radius: 5
+            }
+            Row {
+                Layout.topMargin: 22 - 9
+                spacing: 16
+                Repeater {
+                    model: 2
+                    delegate: Row {
+                        spacing: 4
+                        Rectangle {
+                            width: 14
+                            height: 14
+                            color: d.loadingColor1
+                            radius: width / 2
+                        }
+                        Rectangle {
+                            width: 50
+                            height: 12
+                            color: d.loadingColor2
+                            radius: 5
+                        }
+                    }
+                }
+            }
+            Row {
+                Layout.topMargin: 21 - 9
+                spacing: 8
+                Repeater {
+                    model: 3
+                    delegate:
+                    Rectangle {
+                        width: 76
+                        height: 24
+                        color: d.loadingColor2
+                        radius: 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)
+    }
+}

src/StatusQ/Components/StatusImageCropPanel.qml

@@ -82,12 +82,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 +111,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)))
         }
     }
 

src/StatusQ/Components/StatusListItem.qml

@@ -75,7 +75,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 {
@@ -125,7 +125,7 @@ Rectangle {
         preventStealing: true
 
         onClicked: {
-            statusListItem.clicked(statusListItem.itemId)
+            statusListItem.clicked(statusListItem.itemId, mouse)
         }
 
         StatusSmartIdenticon {

src/StatusQ/Components/StatusListItemTag.qml

@@ -6,7 +6,7 @@ import StatusQ.Core.Theme 0.1
 
 Rectangle {
     id: root
-    width: layout.width
+    width: layout.width + layout.anchors.margins
     height: 30
     color: Theme.palette.primaryColor3
     radius: 15
@@ -39,13 +39,12 @@ Rectangle {
 
     RowLayout {
         id: layout
-
         height: parent.height
-        spacing: 5
+        anchors.margins: 6
 
         StatusSmartIdenticon {
             id: iconOrImage
-            Layout.leftMargin: 5
+            Layout.leftMargin: 4
             image: root.image
             icon: root.icon
             name: root.title
@@ -66,7 +65,6 @@ Rectangle {
             color: Theme.palette.primaryColor1
             icon: "close-circle"
             visible: closeButtonVisible
-            Layout.rightMargin: 5
             MouseArea {
                 id: mouseArea
                 anchors.fill: parent

src/StatusQ/Components/StatusMemberListItem.qml

@@ -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,33 +92,37 @@ 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 - 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
     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
@@ -124,4 +138,12 @@ StatusListItem {
     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
+    components: [
+        StatusIcon {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.isAdmin
+            icon: "crown"
+            color: Theme.palette.directColor1
+        }
+    ]
 }

src/StatusQ/Components/StatusNavigationListItem.qml

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

src/StatusQ/Components/StatusRoundedImage.qml

@@ -28,11 +28,19 @@ Rectangle {
         id: image
         width: statusRoundImage.width
         height: statusRoundImage.height
-        sourceSize.width: parent.width * 2
-        sourceSize.height: parent.height * 2
         fillMode: Image.PreserveAspectFit
         anchors.centerIn: parent
-        cache: true
+
+        onSourceChanged: {
+            if (sourceSize.width < width || sourceSize.height < height) {
+                sourceSize = Qt.binding(function() {
+                    return Qt.size(width * 2, height * 2)
+                })
+            }
+            else {
+                sourceSize = undefined
+            }
+        }
     }
 
     Loader {

src/StatusQ/Components/StatusTagSelector.qml

@@ -5,6 +5,7 @@ import QtGraphicalEffects 1.0
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
 
 /*!
      \qmltype StatusTagSelector
@@ -25,24 +26,21 @@ import StatusQ.Core.Theme 0.1
         anchors.centerIn: parent
         namesModel: ListModel {
             ListElement {
-                publicId: "0x0"
+                pubKey: "0x0"
                 name: "Maria"
                 icon: ""
-                isIdenticon: false
                 onlineStatus: 3
             }
             ListElement {
-                publicId: "0x1"
+                pubKey: "0x1"
                 name: "James"
                 icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
-                isIdenticon: false
                 onlineStatus: 1
             }
             ListElement {
-                publicId: "0x2"
+                pubKey: "0x2"
                 name: "Paul"
                 icon: ""
-                isIdenticon: false
                 onlineStatus: 2
             }
         }
@@ -59,10 +57,6 @@ import StatusQ.Core.Theme 0.1
 Item {
     id: root
 
-    implicitWidth: 448
-    implicitHeight: (104 + contactsLabel.height + contactsLabel.anchors.topMargin + (userListView.model.count * 64)) > root.maxHeight ? root.maxHeight :
-                    (104 + contactsLabel.height + contactsLabel.anchors.topMargin + (userListView.model.count * 64))
-
     /*!
         \qmlproperty real StatusTagSelector::maxHeight
         This property holds the maximum height of the component.
@@ -100,19 +94,26 @@ Item {
     property int nameCountLimit: 5
 
     /*!
-        \qmlproperty var StatusTagSelector::ringSpecModel
+        \qmlproperty var StatusTagSelector::ringSpecModelGetter
         This property holds the function to calculate the ring spec model
         based on the public key.
     */
     property var ringSpecModelGetter: (pubKey) => { /*return ringSpecModel*/ }
 
     /*!
-        \qmlproperty var StatusTagSelector::compressKey
+        \qmlproperty var StatusTagSelector::compressKeyGetter
         This property holds the function to calculate the compressed
         key based on the public key.
     */
     property var compressedKeyGetter: (pubKey) => { /*return compressed key;*/ }
 
+    /*!
+        \qmlproperty var StatusTagSelector::colorIdForPubkeyGetter
+        This property holds the function to calculate the color Id
+        based on the public key.
+    */
+    property var colorIdForPubkeyGetter: (pubKey) => { /*return color Id;*/ }
+
     /*!
         \qmlproperty ListModel StatusTagSelector::sortedList
         This property holds the sorted list model.
@@ -123,6 +124,18 @@ Item {
         This property holds the asorted names model.
     */
     property ListModel namesModel: ListModel { }
+    /*!
+        \qmlproperty bool StatusTagSelector::showSortedListOnlyWhenText
+        This property will decide if the sorted list view info is displayed before entering some text in the input or after.
+        By default is set to false.
+    */
+    property bool showSortedListOnlyWhenText: false
+    /*!
+        \qmlproperty bool StatusTagSelector::orderByReadonly
+        This property will decide if the displayed tag names will be ordered from left to right starting with the items that are marked as `isReadonly`.
+        By default is set to true (readonly names at left).
+    */
+    property bool orderByReadonly: true
 
     /*!
         \qmlmethod
@@ -137,9 +150,12 @@ Item {
         \qmlmethod
         This function is used to insert a new tag.
     */
-    function insertTag(name, id) {
-        if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) {
-            namesModel.insert(namesModel.count, {"name": name, "publicId": id});
+    function insertTag(name, id, isReadonly, tagIcon) {
+        if (!find(namesModel, function(item) { return item.pubKey === id }) && namesModel.count < root.nameCountLimit) {
+            if(orderByReadonly && isReadonly)
+                namesModel.insert(0, {"name": name, "pubKey": id, "isReadonly": !!isReadonly, "tagIcon": tagIcon ? tagIcon : ""});
+            else
+                namesModel.insert(namesModel.count, {"name": name, "pubKey": id, "isReadonly": !!isReadonly, "tagIcon": tagIcon ? tagIcon : ""});
             addMember(id);
             edit.clear();
         }
@@ -154,13 +170,19 @@ Item {
         if (text !== "") {
             for (var i = 0; i < inputModel.count; i++ ) {
                 var entry = inputModel.get(i);
-                if (entry.name.toLowerCase().includes(text.toLowerCase()) &&
-                    !find(namesModel, function(item) { return item.name === entry.name })) {
-                    sortedList.append({"publicId": entry.publicId, "name": entry.name,
-                                       "nickName": entry.nickName, "trustIndicator": entry.trustIndicator,
-                                       "isMutualContact": entry.isMutualContact, "ringSpecModel": entry.ringSpecModel,
-                                       "icon": entry.icon, "isIdenticon": entry.isIdenticon,
-                                       "onlineStatus": entry.onlineStatus});
+                if (entry.displayName.toLowerCase().includes(text.toLowerCase()) &&
+                    !find(namesModel, function(item) { return item.name === entry.displayName })) {
+                    sortedList.append({"pubKey": entry.pubKey,
+                                       "displayName": entry.displayName,
+                                       "localNickname": entry.localNickname,
+                                       "isVerified": entry.isVerified,
+                                       "isUntrustworthy": entry.isUntrustworthy,
+                                       "isContact": entry.isMutualContact,
+                                       "ringSpecModel": entry.ringSpecModel,
+                                       "icon": entry.icon,
+                                       "onlineStatus": entry.onlineStatus,
+                                       "tagIcon": entry.tagIcon ? entry.tagIcon : "",
+                                       "isReadonly": !!entry.isReadonly});
                     userListView.model = sortedList;
                 }
             }
@@ -181,6 +203,36 @@ Item {
     */
     signal removeMember(string memberId)
 
+    QtObject {
+        id: d
+
+        property real suggestionContainerHeight: suggestionsContainer.visible ? contactsLabel.height + contactsLabel.anchors.topMargin +
+                                                                                suggestionsContainer.anchors.topMargin + suggestionsContainer.anchors.bottomMargin +
+                                                                                2 * bgRect.anchors.margins +
+                                                                                userListView.anchors.topMargin + userListView.anchors.bottomMargin +
+                                                                                (userListView.model.count * 64): 0
+
+        function orderNamesModel() {
+            if(root.orderByReadonly) {
+                for(var i = 0; i < namesModel.count; i++) {
+                    var entry = namesModel.get(i)
+                    if(entry.isReadonly) {
+                        namesModel.move(i, 0, 1)
+                    }
+                }
+            }
+        }
+    }
+
+    implicitWidth: 448
+    implicitHeight: (tagSelectorRect.height + d.suggestionContainerHeight) > root.maxHeight ? root.maxHeight : (tagSelectorRect.height + d.suggestionContainerHeight)
+
+    onOrderByReadonlyChanged: { d.orderNamesModel() }
+    Component.onCompleted: {
+        // Component initialization:
+        d.orderNamesModel()
+    }
+
     Rectangle {
         id: tagSelectorRect
         width: parent.width
@@ -194,14 +246,15 @@ Item {
             spacing: 8
             StatusBaseText {
                 Layout.preferredWidth: 22
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                Layout.alignment: Qt.AlignVCenter
                 color: Theme.palette.baseColor1
                 text: root.toLabelText
+                visible: (parent.width>22)
             }
 
             ScrollView {
-                Layout.preferredWidth: (namesList.contentWidth > (parent.width - 177)) ?
-                                       (parent.width - 177) : namesList.contentWidth
+                Layout.preferredWidth: (parent.width - 177) > 0 ? ((namesList.contentWidth > (parent.width - 177)) ?
+                                       (parent.width - 177) : namesList.contentWidth) : 0
                 implicitHeight: 30
                 Layout.alignment: Qt.AlignVCenter
                 visible: (namesList.count > 0)
@@ -222,35 +275,14 @@ Item {
                     }
                     onWidthChanged: { scrollToEnd(); }
                     onCountChanged: { scrollToEnd(); }
-                    delegate: Rectangle {
-                        id: nameDelegate
-                        width: (nameText.contentWidth + 34)
-                        height: 30
-                        color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
-                        radius: 8
-                        StatusBaseText {
-                            id: nameText
-                            anchors.left: parent.left
-                            anchors.leftMargin: 8
-                            anchors.verticalCenter: parent.verticalCenter
-                            color: Theme.palette.indirectColor1
-                            text: name
-                        }
-                        StatusIcon {
-                            anchors.left: nameText.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            color: Theme.palette.indirectColor1
-                            icon: "close"
-                        }
-                        MouseArea {
-                            id: mouseArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: {
-                                removeMember(publicId);
-                                namesModel.remove(index, 1);
-                            }
+                    delegate: StatusTagItem {
+                        isReadonly: model.isReadonly
+                        text: model.name
+                        icon: model.tagIcon
+
+                        onClicked: {
+                            removeMember(model.pubKey);
+                            namesModel.remove(index, 1);
                         }
                     }
                 }
@@ -267,16 +299,20 @@ Item {
                 font.family: Theme.palette.baseFont.name
                 Layout.fillWidth: true
                 Layout.preferredHeight: 44
+                visible: (parent.width>22)
                 Keys.onPressed: {
                     if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
                             && getText(cursorPosition, (cursorPosition-1)) === ""
                             && (namesList.count-1) >= 0) {
-                        removeMember(namesModel.get(namesList.count-1).publicId);
+                        removeMember(namesModel.get(namesList.count-1).pubKey);
                         namesModel.remove((namesList.count-1), 1);
                     }
                     if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && (sortedList.count > 0)) {
-                        root.insertTag(sortedList.get(userListView.currentIndex).name, sortedList.get(userListView.currentIndex).publicId);
-                    }
+                        root.insertTag(sortedList.get(userListView.currentIndex).name,
+                                       sortedList.get(userListView.currentIndex).pubKey,
+                                       sortedList.get(userListView.currentIndex).isReadonly,
+                                       sortedList.get(userListView.currentIndex).tagIcon);
+                    }                    
                 }
                 Keys.onUpPressed: { userListView.decrementCurrentIndex(); }
                 Keys.onDownPressed: { userListView.incrementCurrentIndex(); }
@@ -317,7 +353,8 @@ Item {
             bottomMargin: 16//Style.current.padding
         }
         clip: true
-        visible: ((edit.text === "") || (root.sortedList.count > 0))
+        visible: (!root.showSortedListOnlyWhenText && ((root.sortedList.count > 0) || (edit.text === ""))) ||
+                 ((edit.text !== "") && (root.sortedList.count > 0))
         x: ((root.namesModel.count > 0) && (root.sortedList.count > 0) && ((edit.x + 8) <= (root.width - suggestionsContainer.width)))
            ? (edit.x + 8) : 0
         background: Rectangle {
@@ -361,25 +398,27 @@ Item {
                 height: visible ? 64 : 0
                 visible: {
                     for (let i = 0; i < namesModel.count; i++) {
-                        if (namesModel.get(i).publicId === model.publicId) {
+                        if (namesModel.get(i).pubKey === model.pubKey) {
                             return false
                         }
                     }
                     return true
                 }
-                nickName: model.nickName
-                userName: model.name
-                chatKey: root.compressedKeyGetter(model.publicId)
-                trustIndicator: model.trustIndicator
-                isMutualContact: model.isMutualContact
+                nickName: model.localNickname
+                userName: model.displayName
+                pubKey: root.compressedKeyGetter(model.pubKey)
+                isVerified: model.isVerified
+                isUntrustworthy: model.isUntrustworthy
+                isContact: model.isContact
                 image.source: model.icon
-                image.isIdenticon: model.isIdenticon
-                isOnline: model.onlineStatus
+                image.isIdenticon: false
+                icon.color: Theme.palette.userCustomizationColors[root.colorIdForPubkeyGetter(model.pubKey)]
+                status: model.onlineStatus
                 statusListItemIcon.badge.border.color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
-                ringSettings.ringSpecModel: root.ringSpecModelGetter(publicId)
+                ringSettings.ringSpecModel: root.ringSpecModelGetter(model.pubKey)
                 color: (sensor.containsMouse || highlighted) ? Theme.palette.baseColor2 : "transparent"
                 onClicked: {
-                    root.insertTag(model.name, model.publicId);
+                    root.insertTag(model.displayName, model.pubKey, model.isAdmin, model.isAdmin ? "crown" : "");
                 }
             }
         }

src/StatusQ/Components/qmldir

@@ -34,3 +34,5 @@ StatusTagSelector 0.1 StatusTagSelector.qml
 StatusToastMessage 0.1 StatusToastMessage.qml
 StatusWizardStepper 0.1 StatusWizardStepper.qml
 StatusImageCropPanel 0.1 StatusImageCropPanel.qml
+StatusColorSpace 0.0 StatusColorSpace.qml
+StatusCommunityCard 0.1 StatusCommunityCard.qml

src/StatusQ/Controls/StatusAccountSelector.qml

@@ -26,6 +26,7 @@ Item {
     property var assetFound
     property double minRequiredAssetBalance: 0
     property int dropdownWidth: width
+    property int chainId: 0
     property alias dropdownAlignment: select.menuAlignment
     property bool isValid: true
     property bool readOnly: false
@@ -46,7 +47,7 @@ Item {
         if (showBalanceForAssetSymbol == "" || minRequiredAssetBalance == 0 || !assetFound) {
             return root.isValid
         }
-        root.isValid = assetFound.balance >= minRequiredAssetBalance
+        root.isValid = assetFound.totalBalance >= minRequiredAssetBalance
         return root.isValid
     }
 
@@ -67,7 +68,7 @@ Item {
             textSelectedAddressFiatBalance.text = selectedAccount.currencyBalance + " " + currency.toUpperCase()
         }
         if (selectedAccount.assets && showBalanceForAssetSymbol) {
-            assetFound = Utils.findAssetBySymbol(selectedAccount.assets, showBalanceForAssetSymbol)
+            assetFound = Utils.findAssetByChainAndSymbol(root.chainId, selectedAccount.assets, showBalanceForAssetSymbol)
             if (!assetFound) {
                 console.warn("Cannot find asset '", showBalanceForAssetSymbol, "'. Ensure this asset has been added to the token list.")
             }
@@ -82,7 +83,7 @@ Item {
         if (!assetFound) {
             return
         }
-        txtAssetBalance.text = root.assetBalanceTextFn(assetFound.balance)
+        txtAssetBalance.text = root.assetBalanceTextFn(assetFound.totalBalance)
         txtAssetSymbol.text = " " + assetFound.symbol
     }
 

src/StatusQ/Controls/StatusAssetSelector.qml

@@ -116,12 +116,12 @@ Item {
                 anchors.verticalCenter: parent.verticalCenter
                 StatusBaseText {
                     font.pixelSize: 15
-                    text: parseFloat(balance).toFixed(4) + " " + symbol
+                    text: parseFloat(totalBalance).toFixed(4) + " " + symbol
                 }
                 StatusBaseText {
                     font.pixelSize: 15
                     anchors.right: parent.right
-                    text: getCurrencyBalanceString(currencyBalance)
+                    text: getCurrencyBalanceString(totalCurrencyBalance)
                     color: Theme.palette.baseColor1
                 }
             }
@@ -130,14 +130,14 @@ Item {
             }
             Component.onCompleted: {
                 if(index === 0 ) {
-                    selectedAsset = { name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
+                    selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance}
                 }
             }
             MouseArea {
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: itemContainer
                 onClicked: {
-                    selectedAsset = {name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
+                    selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance}
                     select.selectMenu.close()
                 }
             }

src/StatusQ/Controls/StatusBaseButton.qml

@@ -86,14 +86,16 @@ Rectangle {
     radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
 
     color: {
-        if (statusBaseButton.enabled) {
+        if (statusBaseButton.enabled)
             return sensor.containsMouse || highlighted ? hoverColor
-                                        : normalColor
-        } else {
-            return disaledColor
-        }
+                                                       : normalColor;
+        return disaledColor
     }
 
+    QtObject {
+        id: d
+        readonly property color textColor: statusBaseButton.enabled ? statusBaseButton.textColor : statusBaseButton.disabledTextColor
+    }
 
     MouseArea {
         id: sensor
@@ -102,17 +104,16 @@ Rectangle {
 
         cursorShape: loading ? Qt.ArrowCursor
                              : Qt.PointingHandCursor
-        hoverEnabled: !loading
-        enabled: !loading
 
+        hoverEnabled: true
+        enabled: !loading && statusBaseButton.enabled
 
         Loader {
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             active: loading
             sourceComponent: StatusLoadingIndicator {
-                color: statusBaseButton.enabled ? textColor
-                                                : disabledTextColor
+                color: d.textColor
             } // Indicator
         } // Loader
 
@@ -130,8 +131,7 @@ Rectangle {
                 anchors.verticalCenter: parent.verticalCenter
                 opacity: !loading && statusBaseButton.icon.name !== ""
                 visible: statusBaseButton.icon.name !== ""
-                color: statusBaseButton.enabled ? textColor
-                                                : disabledTextColor
+                color: d.textColor
             } // Icon
             StatusBaseText {
                 id: label
@@ -139,8 +139,7 @@ Rectangle {
                 anchors.verticalCenter: parent.verticalCenter
                 font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
 
-                color: statusBaseButton.enabled ? textColor
-                                                : disabledTextColor
+                color: d.textColor
             } // Text
         } // Ro
 

src/StatusQ/Controls/StatusBaseInput.qml

@@ -128,6 +128,11 @@ Item {
         This property holds a reference to the TextEdit component's horizontalAlignment property.
     */
     property alias horizontalAlignment: edit.horizontalAlignment
+    /*!
+        \qmlproperty alias StatusBaseInput::placeholder
+        This property holds a reference to the placeholder component.
+    */
+    property alias placeholder: placeholder
     /*!
         \qmlproperty alias StatusBaseInput::placeholderText
         This property holds a reference to the placeholder component's placeholderText property.
@@ -308,8 +313,9 @@ Item {
 
         MouseArea {
             id: sensor
-            hoverEnabled: true
             anchors.fill: parent
+            enabled: edit.enabled
+            hoverEnabled: enabled
             cursorShape: Qt.IBeamCursor
             onClicked: {
                 if (edit.activeFocus)

src/StatusQ/Controls/StatusColorSelectorGrid.qml

@@ -10,21 +10,13 @@ Column {
 
     property alias titleText: title.text
     property alias title: title
+    property alias columns: grid.columns
 
     property int selectedColorIndex: 0
     property string selectedColor: ""
-    property var model: [StatusColors.colors['black'],
-        StatusColors.colors['grey'],
-        StatusColors.colors['blue2'],
-        StatusColors.colors['purple'],
-        StatusColors.colors['cyan'],
-        StatusColors.colors['violet'],
-        StatusColors.colors['red2'],
-        StatusColors.colors['yellow'],
-        StatusColors.colors['green2'],
-        StatusColors.colors['moss'],
-        StatusColors.colors['brown'],
-        StatusColors.colors['brown2']]
+    property var model: Theme.palette.userCustomizationColors
+
+    signal colorSelected(color color)
 
     spacing: 16
 
@@ -36,18 +28,21 @@ Column {
     }
 
     Grid {
+        id: grid
         columns: 6
         rowSpacing: 16
         columnSpacing: 32
+
         Repeater {
             model: root.model
             delegate: StatusColorRadioButton {
                 checked: index === selectedColorIndex
                 radioButtonColor: root.model[index] || "transparent"
                 onCheckedChanged: {
-                    if(checked) {
-                        selectedColorIndex = index
-                        selectedColor = root.model[index]
+                    if (checked) {
+                        selectedColorIndex = index;
+                        selectedColor = root.model[index];
+                        root.colorSelected(selectedColor);
                     }
                 }
             }

src/StatusQ/Controls/StatusImageCrop.qml

@@ -123,12 +123,6 @@ Item {
         e.g. to set the crop window to show and match image's AR use Qt.rect(0, 0, sourceSize.width, sourceSize.height)
     */
     readonly property rect cropRect: d.cropRect
-    /*!
-        \qmlproperty rect StatusImageCrop::cropRect
-
-        The position and zis of the crop rectangle in item's space; without extra spacing
-    */
-    readonly property alias cropWindow: d.cropWindow
     /*!
         \qmlproperty real StatusImageCrop::aspectRatio
     */
@@ -146,7 +140,7 @@ Item {
 
         \sa StatusImageCrop::source
     */
-    readonly property size sourceSize: mainImage.sourceSize
+    readonly property alias sourceSize: mainImage.sourceSize
     /*!
         \qmlproperty real StatusImageCrop::scrToImgScale
 
@@ -218,7 +212,7 @@ Item {
 
     function getZoomRect(scale /*real*/) {
         const oldCenter = root.rectCenter(root.cropRect)
-        const inflatedRect = root.inflateRectBy(root.minimumCropRect(), 1/scale)
+        const inflatedRect = root.inflateRectBy(d.minimumCropRect(), 1/scale)
         return root.recenterRect(inflatedRect, oldCenter);
     }
 
@@ -248,44 +242,34 @@ Item {
         return Qt.rect(newCenter.x - target.width/2 , newCenter.y - target.height/2, target.width, target.height)
     }
 
-    //> cropRect for minimum zoom: 1.0
-    function minimumCropRect() {
-        const sourceAR = root.sourceSize.width/root.sourceSize.height
-        const widthBound =  sourceAR > root.aspectRatio
-        const minCropSize = widthBound ? Qt.size(root.sourceSize.width, root.sourceSize.width/root.aspectRatio)
-                                       : Qt.size(root.sourceSize.height * root.aspectRatio, root.sourceSize.height)
-        let res = Qt.rect(widthBound ? 0 : -(root.sourceSize.width - minCropSize.width)/2,    // x
-                       widthBound ? -(root.sourceSize.height - minCropSize.height)/2 : 0,  // y
-                       minCropSize.width, minCropSize.height)
-        return res
+    function fillContentInWindow(contentSize /*size*/, windowSize /*size*/) {
+        const contentAR = contentSize.width/contentSize.height
+        const windowAR = windowSize.width/windowSize.height
+        const heightBound = contentAR > windowAR
+        if(heightBound) {
+            const wWidth = contentSize.height * windowAR
+            const horizontalBorder = (contentSize.width - wWidth)/2
+            return Qt.rect(horizontalBorder, 0, wWidth, contentSize.height)
+        }
+        else {
+            const wHeight = contentSize.width / windowAR
+            const verticalBorder = (contentSize.height - wHeight)/2
+            return Qt.rect(0, verticalBorder, contentSize.width, wHeight)
+        }
     }
 
     QtObject {
         id: d
 
-        property rect cropRect: fillContentInSquaredWindow(root.sourceSize)
+        property rect cropRect
         onCropRectChanged: windowRect.requestPaint()
 
         readonly property real zoomToFill: {
-            const rectangle = fillContentInSquaredWindow(root.sourceSize)
+            const rectangle = root.fillContentInWindow(root.sourceSize, d.cropWindowSize)
             return d.currentZoom(root.sourceSize, Qt.size(rectangle.width, rectangle.height))
         }
 
-        property rect cropWindow
-        // Probably called from render thread, run async
-        signal updateCropWindow(rect newRect)
-        onUpdateCropWindow: cropWindow = newRect
-
-        function fillContentInSquaredWindow(c /*size*/) {
-            if(c.width > c.height) {
-                const border = (c.width - c.height)/2
-                return Qt.rect(border, 0, c.height, c.height)
-            }
-            else {
-                const border = (c.height - c.width)/2
-                return Qt.rect(0, border, c.width, c.width)
-            }
-        }
+        property size cropWindowSize: Qt.size(d.cropRect.width, d.cropRect.height)
 
         //> 1.0 is the content represented by w fully inscribed in c
         function currentZoom(c /*size*/, w /*size*/) {
@@ -293,10 +277,26 @@ Item {
             const hScale = c.height/w.height
             return Math.max(wScale, hScale)
         }
+
+        //> cropRect for minimum zoom: 1.0
+        function minimumCropRect() {
+            const sourceAR = root.sourceSize.width/root.sourceSize.height
+            const widthBound =  sourceAR > root.aspectRatio
+            const minCropSize = widthBound ? Qt.size(root.sourceSize.width, root.sourceSize.width/root.aspectRatio)
+                                           : Qt.size(root.sourceSize.height * root.aspectRatio, root.sourceSize.height)
+            let res = Qt.rect(widthBound ? 0 : -(root.sourceSize.width - minCropSize.width)/2,    // x
+                           widthBound ? -(root.sourceSize.height - minCropSize.height)/2 : 0,  // y
+                           minCropSize.width, minCropSize.height)
+            return res
+        }
     }
 
     onWindowStyleChanged: windowRect.requestPaint()
-    onSourceSizeChanged: d.cropRect = d.fillContentInSquaredWindow(sourceSize)
+    onRadiusChanged: windowRect.requestPaint()
+    onSourceSizeChanged: {
+        if(d.cropWindowSize.width > 0 && d.cropWindowSize.height > 0)
+            d.cropRect = root.fillContentInWindow(sourceSize, d.cropWindowSize)
+    }
 
     Canvas {
         id: windowRect
@@ -330,7 +330,6 @@ Item {
                 ctx.roundedRect(cW.x, cW.y, cW.width, cW.height, root.radius, root.radius)
             ctx.fill()
             ctx.restore()
-            d.updateCropWindow(cW)
         }
     }
 

src/StatusQ/Controls/StatusInput.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.14
+import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Backpressure 1.0
@@ -29,23 +30,7 @@ import StatusQ.Controls.Validators 0.1
 */
 Item {
     id: root
-    implicitWidth: 480
-    implicitHeight: (label.visible ?
-                      label.anchors.topMargin +
-                      label.height :
-                  charLimitLabel.visible ?
-                      charLimitLabel.anchors.topMargin +
-                      charLimitLabel.height :
-                  0) +
-                statusBaseInput.anchors.topMargin +
-                statusBaseInput.height +
-                (errorMessage.visible ?
-                      errorMessage.anchors.topMargin +
-                      errorMessage.height :
-                      0) + 8
 
-    height: implicitHeight
-    width: implicitWidth
     /*!
         \qmlproperty alias StatusInput::input
         This property holds a reference to the TextEdit component.
@@ -320,92 +305,83 @@ Item {
         root.valid = Object.values(asyncErrors).length == 0
     }
 
+    implicitWidth: inputLayout.implicitWidth
+    implicitHeight: inputLayout.implicitHeight
+    height: implicitHeight
+    width: implicitWidth
+
     Component.onCompleted: validate()
 
-    Row {
-        id: labelRow
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.topMargin: visible ? 8 : 0
-        anchors.leftMargin: root.leftPadding
-        anchors.right: (charLimitLabel.visible ? charLimitLabel.right : parent.right)
-        anchors.rightMargin: root.rightPadding
-        height: visible ? 17 : 0
-        visible: !!root.label
-        spacing: 5
-        StatusBaseText {
-            id: label
-            elide: Text.ElideRight
-            text: root.label
-            font.pixelSize: 15
-            color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+    ColumnLayout {
+        id: inputLayout
+
+        anchors.fill: parent
+
+        RowLayout {
+            Layout.fillWidth: true
+
+            StatusBaseText {
+                id: label
+                visible: !!root.label
+                elide: Text.ElideRight
+                text: root.label
+                font.pixelSize: 15
+                color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
+            }
+
+            StatusBaseText {
+                id: secondaryLabel
+                visible: !!root.secondaryLabel
+                elide: Text.ElideRight
+                text: root.secondaryLabel
+                font.pixelSize: 15
+                color: Theme.palette.baseColor1
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            StatusBaseText {
+                id: charLimitLabel
+
+                visible: root.charLimit > 0
+
+                text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
+                font.pixelSize: 12
+                color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
+            }
+        }
+
+        StatusBaseInput {
+            id: statusBaseInput
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            maximumLength: root.charLimit
+            onTextChanged: root.validate()
+
+            Keys.forwardTo: [root]
+            onIconClicked: root.iconClicked()
+            onKeyPressed: {
+                root.keyPressed(event);
+            }
+            onEditChanged: {
+                root.editClicked();
+            }
         }
 
         StatusBaseText {
-            id: secondaryLabel
-            height: visible ? 17 : 0
-            visible: !!root.secondaryLabel
-            elide: Text.ElideRight
-            text: root.secondaryLabel
-            font.pixelSize: 15
-            color: Theme.palette.baseColor1
+            id: errorMessage
+
+            visible: !!text && !statusBaseInput.valid
+
+            font.pixelSize: 12
+            color: Theme.palette.dangerColor1
+
+            horizontalAlignment: Text.AlignRight
+            wrapMode: Text.WordWrap
         }
     }
-
-    StatusBaseText {
-        id: charLimitLabel
-        height: visible ? implicitHeight : 0
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.topMargin: visible ? 11 : 0
-        anchors.rightMargin: root.rightPadding
-        visible: root.charLimit > 0
-
-        text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
-        font.pixelSize: 12
-        color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
-    }
-
-    StatusBaseInput {
-        id: statusBaseInput
-        anchors.top:  labelRow.visible ? labelRow.bottom :
-                charLimitLabel.visible ? charLimitLabel.bottom : parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.topMargin: charLimitLabel.visible ? 11 : 8
-        anchors.leftMargin: root.leftPadding
-        anchors.rightMargin: root.rightPadding
-        maximumLength: root.charLimit
-        onTextChanged: root.validate()
-
-        Keys.forwardTo: [root]
-        onIconClicked: root.iconClicked()
-        onKeyPressed: {
-            root.keyPressed(event);
-        }
-        onEditChanged: {
-            root.editClicked();
-        }
-    }
-
-    StatusBaseText {
-        id: errorMessage
-
-        anchors.top: statusBaseInput.bottom
-        anchors.topMargin: 11
-        anchors.right: parent.right
-        anchors.rightMargin: root.rightPadding
-        anchors.left: parent.left
-        anchors.leftMargin: root.leftPadding
-
-        height: visible ? implicitHeight : 0
-        visible: !!text && !statusBaseInput.valid
-
-        font.pixelSize: 12
-        color: Theme.palette.dangerColor1
-
-
-        horizontalAlignment: Text.AlignRight
-        wrapMode: Text.WordWrap
-    }
 }

src/StatusQ/Controls/StatusLabeledSlider.qml

@@ -0,0 +1,53 @@
+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
+
+StatusSlider {
+    id: root
+
+    property var model: []
+    property int fontSize: 12
+    property int labelMargin: 2
+
+    fillColor: bgColor
+    handleColor: Theme.palette.primaryColor1
+    handleSize: 14
+    from: 0
+    to: model.length - 1
+    stepSize: 1
+    snapMode: Slider.SnapAlways
+
+    decoration: Item {
+        implicitHeight: handleSize + fontSize + labelMargin
+
+        Repeater {
+            id: repeater
+            model: root.model
+
+            Rectangle {
+                x: (background.width - width * 0.5) / (repeater.count - 1) * index
+                y: (root.bgHeight -height) / 2
+                implicitWidth: root.handleSize
+                implicitHeight: root.handleSize
+                radius: root.handleSize / 2
+                color: root.bgColor
+                border.color: Theme.palette.statusAppLayout.backgroundColor
+                border.width: 2
+
+                StatusBaseText {
+                    anchors.top: parent.bottom
+                    anchors.topMargin: root.labelMargin
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    horizontalAlignment: Qt.AlignHCenter
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: root.fontSize
+                    text: modelData
+                }
+            }
+        }
+    }
+}

src/StatusQ/Controls/StatusRoundButton.qml

@@ -48,9 +48,6 @@ Rectangle {
         Primary,
         Secondary
     }
-
-
-
     /// Implementation
 
     QtObject {
@@ -84,27 +81,31 @@ Rectangle {
         }
     }
 
+    QtObject {
+        id: d
+        readonly property color iconColor: statusRoundButton.enabled ? statusRoundButton.icon.color : statusRoundButton.icon.disabledColor
+    }
+
     implicitWidth: 44
     implicitHeight: 44
     radius: width / 2;
 
     color: {
-        if (statusRoundButton.enabled) {
+        if (statusRoundButton.enabled)
             return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
-                                        : backgroundSettings.color
-        } else {
-            return backgroundSettings.disabledColor
-        }
+                                                       : backgroundSettings.color;
+        return backgroundSettings.disabledColor
     }
+
     MouseArea {
         id: sensor
 
         anchors.fill: parent
         cursorShape: loading ? Qt.ArrowCursor
                              : Qt.PointingHandCursor
-        hoverEnabled: !loading
-        enabled: !loading
 
+        hoverEnabled: true
+        enabled: !loading && statusRoundButton.enabled
 
         StatusIcon {
             id: statusIcon
@@ -117,25 +118,13 @@ Rectangle {
             width: statusRoundButton.icon.width
             height: statusRoundButton.icon.height
 
-            color: {
-                if (statusRoundButton.enabled) {
-                    return statusRoundButton.icon.color
-                } else {
-                    return statusRoundButton.icon.disabledColor
-                }
-            }
+            color: d.iconColor
         } // Icon
         Loader {
             active: loading
             anchors.centerIn: parent
             sourceComponent: StatusLoadingIndicator {
-                color: {
-                    if (statusRoundButton.enabled) {
-                        return statusRoundButton.icon.color
-                    } else {
-                        return statusRoundButton.icon.disabledColor
-                    }
-                }
+                color: d.iconColor
             } // Indicator
         } // Loader
 

src/StatusQ/Controls/StatusSeedPhraseInput.qml

@@ -114,11 +114,6 @@ Item {
 
         id: seedWordInput
         implicitWidth: parent.width
-        implicitHeight: parent.height
-        input.anchors.topMargin: 0
-        input.anchors.leftMargin: 0
-        input.anchors.rightMargin: 0
-        input.anchors.bottom: input.parent.bottom
         input.leftComponent: StatusBaseText {
             text: root.leftComponentText
             color: seedWordInput.input.edit.activeFocus ?

src/StatusQ/Controls/StatusSlider.qml

@@ -11,40 +11,55 @@ import StatusQ.Controls 0.1
   as the /c handle so user can grab it fully.
  */
 Slider {
-    id: statusSlider
+    id: root
+
+    property int handleSize: 28
+    property int bgHeight: 4
+    property color handleColor: Theme.palette.white
+    property color bgColor: Theme.palette.baseColor2
+    property color fillColor: Theme.palette.primaryColor1
+
+    property alias decoration: decorationContainer.sourceComponent
 
     implicitWidth: 360
-    implicitHeight: Math.max(handle.implicitHeight, background.implicitHeight)
+    implicitHeight: Math.max(handle.implicitHeight,
+                             background.implicitHeight + decorationContainer.height)
 
     leftPadding: 0
 
     background: Rectangle {
         id: bgRect
 
-        x: statusSlider.leftPadding
-        y: statusSlider.topPadding + statusSlider.availableHeight / 2 - height / 2
+        x: root.leftPadding
+        y: root.topPadding
         implicitWidth: 100
-        implicitHeight: 4
-        width: statusSlider.availableWidth
+        implicitHeight: bgHeight
+        width: root.availableWidth
         height: implicitHeight
-        color: Theme.palette.primaryColor3
+        color: root.bgColor
         radius: 2
 
+        Loader {
+            id: decorationContainer
+            anchors.top: parent.top
+            width: parent.height
+        }
+
         Rectangle {
-            width: statusSlider.visualPosition * parent.width
+            width: root.visualPosition * parent.width
             height: parent.height
-            color: Theme.palette.primaryColor1
+            color: root.fillColor
             radius: 2
         }
     } // background
 
     handle: Rectangle {
-        x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
+        x: root.leftPadding + root.visualPosition * (root.availableWidth - width / 2)
         anchors.verticalCenter: bgRect.verticalCenter
-        color: Theme.palette.white
-        implicitWidth: 28
-        implicitHeight: 28
-        radius: 14
+        color: root.handleColor
+        implicitWidth: root.handleSize
+        implicitHeight: root.handleSize
+        radius: root.handleSize / 2
         layer.enabled: true
         layer.effect: DropShadow {
             width: parent.width

src/StatusQ/Controls/StatusTagItem.qml

@@ -0,0 +1,116 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+     \qmltype StatusTagItem
+     \inherits Item
+     \inqmlmodule StatusQ.Controls
+     \since StatusQ.Controls 0.1
+     \brief Reprsents a tag item.
+     Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-rectangle.html}{Item}.
+
+     The \c StatusTagItem represents a tag item where a name and icon can be displayed and can be clicked.
+     Example:
+
+     \qml
+        StatusTagItem {
+            isReadonly: model.isReadonly
+            text: model.name
+            icon: model.tagIcon
+
+            onClicked: { console.log("Tag selected!") }
+        }
+     \endqml
+
+     For a list of components available see StatusQ.
+  */
+Rectangle {
+    id: root
+
+    /*!
+        \qmlproperty bool StatusTagItem::isReadonly
+        This property sets if the tag is readonly or not.
+    */
+    property bool isReadonly
+    /*!
+        \qmlproperty string StatusTagItem::name
+        This property sets the tag text to display.
+    */
+    property string text
+    /*!
+        \qmlproperty string StatusTagItem::icon
+        This property sets the tag icon to display.
+    */
+    property string icon
+
+    /*!
+        \qmlsignal
+        This signal is emitted when the tag is clicked.
+    */
+    signal clicked()
+
+    QtObject {
+        id: d
+        property int tagMargins: 8
+        property int tagIconsSize: 20
+
+        function getTagColor(isReadonly) {
+            if(isReadonly) {
+                return Theme.palette.baseColor1
+            }
+            else {
+                return mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
+            }
+        }
+    }
+
+    width: tagRow.implicitWidth + 2 * d.tagMargins
+    height: 30
+    color: d.getTagColor(root.isReadonly)
+    radius: 8
+    Row {
+        id: tagRow
+        height: parent.height
+        anchors.left: parent.left
+        anchors.leftMargin: d.tagMargins
+        anchors.rightMargin: d.tagMargins
+        spacing: 2
+
+        StatusIcon {
+            visible: root.icon
+            anchors.verticalCenter: parent.verticalCenter
+            color: Theme.palette.indirectColor1
+            width: root.icon ? d.tagIconsSize : 0
+            height: d.tagIconsSize
+            icon: root.icon
+        }
+        StatusBaseText {
+            id: nameText
+            anchors.verticalCenter: parent.verticalCenter
+            color: Theme.palette.indirectColor1
+            font.pixelSize: 15
+            text: root.text
+        }
+        StatusIcon {
+            id: closeIcon
+            visible: !root.isReadonly
+            anchors.leftMargin: d.tagMargins
+            anchors.verticalCenter: parent.verticalCenter
+            color: Theme.palette.indirectColor1
+            width: d.tagIconsSize
+            height: d.tagIconsSize
+            icon: "close"
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        enabled: !root.isReadonly
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+        onClicked: { root.clicked() }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -22,6 +22,7 @@ StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
 StatusSlider 0.1 StatusSlider.qml
+StatusLabeledSlider 0.1 StatusLabeledSlider.qml
 StatusSelect 0.1 StatusSelect.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
 StatusInput 0.1 StatusInput.qml
@@ -34,6 +35,7 @@ StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
 StatusSelectableText 0.1 StatusSelectableText.qml
 StatusTabBar 0.1 StatusTabBar.qml
 StatusTabButton 0.1 StatusTabButton.qml
+StatusTagItem 0.1 StatusTagItem.qml
 StatusTokenInlineSelector 0.1 StatusTokenInlineSelector.qml
 StatusWalletColorButton 0.1 StatusWalletColorButton.qml
 StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml

src/StatusQ/Core/StatusBaseText.qml

@@ -16,7 +16,7 @@ import StatusQ.Core.Theme 0.1
            width: 240
            text: qsTr("Hello World!")
            font.pixelSize: 24
-           color: Theme.pallete.directColor1
+           color: Theme.palette.directColor1
        }
    \endqml
 
@@ -27,4 +27,5 @@ import StatusQ.Core.Theme 0.1
 
 Text {
     font.family: Theme.palette.baseFont.name
+    color: Theme.palette.directColor1
 }

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -147,21 +147,6 @@ ThemePalette {
     miscColor11: getColor('yellow2')
     miscColor12: getColor('green6')
 
-    userCustomizationColors: [
-        "#AAC6FF",
-        "#887AF9",
-        "#51D0F0",
-        "#D37EF4",
-        "#FA6565",
-        "#FFCA0F",
-        "#93DB33",
-        "#10A88E",
-        "#AD4343",
-        "#EAD27B",
-        "silver", // update me when figma is ready
-        "darkgrey", // update me when figma is ready
-    ]
-
     identiconRingColors: ["#000000", "#726F6F", "#C4C4C4", "#E7E7E7", "#FFFFFF", "#00FF00",
                           "#009800", "#B8FFBB", "#FFC413", "#9F5947", "#FFFF00", "#A8AC00",
                           "#FFFFB0", "#FF5733", "#FF0000", "#9A0000", "#FF9D9D", "#FF0099",

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -145,21 +145,6 @@ ThemePalette {
     miscColor11: getColor('brown2')
     miscColor12: getColor('green5')
 
-    userCustomizationColors: [
-        "#2946C4",
-        "#887AF9",
-        "#51D0F0",
-        "#D37EF4",
-        "#FA6565",
-        "#FFCA0F",
-        "#7CDA00",
-        "#26A69A",
-        "#8B3131",
-        "#9B832F",
-        "silver", // update me when figma is ready
-        "darkgrey", // update me when figma is ready
-    ]
-
     identiconRingColors: ["#000000", "#726F6F", "#C4C4C4", "#E7E7E7", "#FFFFFF", "#00FF00",
                           "#009800", "#B8FFBB", "#FFC413", "#9F5947", "#FFFF00", "#A8AC00",
                           "#FFFFB0", "#FF5733", "#FF0000", "#9A0000", "#FF9D9D", "#FF0099",

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -90,7 +90,20 @@ QtObject {
     property color miscColor11
     property color miscColor12
 
-    property var userCustomizationColors: []
+    property var userCustomizationColors: [
+        getColor('black', 0.8),
+        getColor('grey'),
+        getColor('blue2'),
+        getColor('purple'),
+        getColor('cyan'),
+        getColor('violet'),
+        getColor('red2'),
+        getColor('yellow'),
+        getColor('green2'),
+        getColor('moss'),
+        getColor('brown'),
+        getColor('brown2'),
+    ]
 
     property var identiconRingColors: []
 

src/StatusQ/Core/Utils/Utils.qml

@@ -45,16 +45,17 @@ QtObject {
         return false
     }
 
-    function findAssetBySymbol(assets, symbolToFind) {
+    function findAssetByChainAndSymbol(chainIdToFind, assets, symbolToFind) {
         for(var i=0; i<assets.rowCount(); i++) {
             const symbol = assets.rowData(i, "symbol")
-            if (symbol.toLowerCase() === symbolToFind.toLowerCase()) {
+            if (symbol.toLowerCase() === symbolToFind.toLowerCase() && assets.hasChain(i, parseInt(chainIdToFind))) {
                 return {
                     name: assets.rowData(i, "name"),
                     symbol,
-                    balance: assets.rowData(i, "balance"),
-                    address: assets.rowData(i, "address"),
-                    currencyBalance: assets.rowData(i, "currencyBalance")
+                    totalBalance: assets.rowData(i, "totalBalance"),
+                    totalCurrencyBalance: assets.rowData(i, "totalCurrencyBalance"),
+                    fiatBalance: assets.rowData(i, "totalCurrencyBalance"),
+                    chainId: chainIdToFind,
                 }
             }
         }

src/StatusQ/Popups/StatusColorDialog.qml

@@ -0,0 +1,145 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.12
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+StatusModal {
+    id: root
+
+    property alias color: colorSpace.color
+    property alias standartColors: colorSelectionGrid.model
+    property alias acceptText: acceptButton.text
+    property alias previewText: preview.text
+
+    signal accepted()
+
+    onColorChanged: {
+        if (!hexInput.locked)
+            hexInput.text = color.toString();
+
+        if (colorSelectionGrid.selectedColor != color)
+            colorSelectionGrid.selectedColorIndex = -1;
+    }
+    Component.onCompleted: {
+        hexInput.text = color.toString();
+    }
+
+    width: 680
+    implicitHeight: 820
+
+    contentItem: ScrollView {
+        id: scroll
+        width: parent.width
+        topPadding: 30
+        leftPadding: 20
+        rightPadding: 20
+        bottomPadding: 20
+        contentHeight: column.height
+
+        ScrollBar.vertical.policy: ScrollBar.AsNeeded
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+        clip: true
+
+        ColumnLayout {
+            id: column
+            width: scroll.width - scroll.leftPadding - scroll.rightPadding
+            spacing: 12
+
+            StatusColorSpace {
+                id: colorSpace
+
+                property real hueFactor: Math.max(rootColor.g + rootColor.b * 0.4,
+                                                  rootColor.g + rootColor.r * 0.6)
+
+                minSaturate: Math.max(0.4, hueFactor * 0.55)
+                maxSaturate: 1.0
+                minValue: 0.4
+                // Curve to pick colors readable with white text
+                maxValue: Math.min(1.0, 1.65 - hueFactor * 0.5)
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            StatusInput {
+                id: hexInput
+
+                property color newColor: text
+                // TODO: editingFinished() signal instead of this crutch
+                property bool locked: false
+
+                implicitWidth: 256
+                validators: [
+                    StatusRegularExpressionValidator {
+                        regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/
+                        errorMessage: qsTr("This is not a valid color")
+                    }
+                ]
+                validationMode: StatusInput.ValidationMode.Always
+
+                onNewColorChanged: {
+                    if (!valid)
+                        return;
+
+                    locked = true;
+                    root.color = newColor;
+                    locked = false;
+                }
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            StatusBaseText {
+                text: qsTr("Preview")
+                font.pixelSize: 15
+            }
+
+            Rectangle {
+                implicitHeight: 48
+                radius: 10
+                color: root.color
+                Layout.fillWidth: true
+
+                StatusBaseText {
+                    id: preview
+                    x: 16
+                    y: 16
+                    text: root.color.toString()
+                    color: Theme.palette.white
+                    font.pixelSize: 15
+                }
+            }
+
+            StatusBaseText {
+                text: qsTr("Standart colours")
+                font.pixelSize: 15
+            }
+
+            StatusColorSelectorGrid {
+                id: colorSelectionGrid
+                columns: 8
+                model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"]
+                selectedColorIndex: -1
+                onColorSelected: {
+                    root.color = selectedColor;
+                }
+                Layout.alignment: Qt.AlignHCenter
+            }
+        }
+    }
+
+    rightButtons: [
+        StatusButton {
+            id: acceptButton
+            text: qsTr("Select Colour")
+            onClicked: {
+                root.accepted();
+                root.close();
+            }
+        }
+    ]
+}

src/StatusQ/Popups/StatusModal.qml

@@ -194,10 +194,13 @@ QC.Popup {
 
     width: 480
 
-    topPadding: headerImpl.implicitHeight
-    bottomPadding: footerImpl.implicitHeight
-    leftPadding: 0
-    rightPadding: 0
+    padding: 0
+    topPadding: padding + headerImpl.implicitHeight
+    bottomPadding: padding + footerImpl.implicitHeight
+    leftPadding: padding
+    rightPadding: padding
+
+    margins: 64
 
     modal: true
 

src/StatusQ/Popups/StatusPopupMenu.qml

@@ -20,7 +20,7 @@ Menu {
     property var openHandler
     property var closeHandler
 
-    dim: true
+    dim: false
 
     signal menuItemClicked(int menuIndex)
 

src/StatusQ/Popups/StatusSearchLocationMenu.qml

@@ -103,7 +103,9 @@ StatusPopupMenu {
                         text: model.text
                         image.source: model.imageSource
                         iconSettings.name: model.iconName
-                        iconSettings.color: model.iconColor
+                        iconSettings.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.iconColor
+                        iconSettings.charactersLen: model.isUserIcon ? 2 : 1
+                        ringSettings.ringSpecModel: model.colorHash
                         onTriggered: {
                             searchPopup.resetSearchSelection()
                             if (menuLoader.parentTitleText === "Chat") {
@@ -112,7 +114,10 @@ StatusPopupMenu {
                                                                model.imageSource,
                                                                model.isIdenticon,
                                                                model.iconName,
-                                                               model.iconColor)
+                                                               model.iconColor,
+                                                               model.isUserIcon,
+                                                               model.colorId,
+                                                               model.colorHash.toJson())
                             } else {
                                 searchPopup.setSearchSelection(menuLoader.parentTitleText,
                                                    model.text,

src/StatusQ/Popups/StatusSearchPopup.qml

@@ -40,14 +40,19 @@ StatusModal {
                                 imageSource = "",
                                 isIdenticon = "",
                                 iconName = "",
-                                iconColor = "") {
+                                iconColor = "",
+                                isUserIcon = false,
+                                colorId = 0,
+                                colorHash = "") {
         searchSelectionButton.primaryText = text
         searchSelectionButton.secondaryText = secondaryText
         searchSelectionButton.image.source = imageSource
         searchSelectionButton.image.isIdenticon = isIdenticon
         searchSelectionButton.iconSettings.name = iconName
-        searchSelectionButton.iconSettings.color = iconColor !== ""? iconColor : Theme.palette.primaryColor1
+        searchSelectionButton.iconSettings.color = isUserIcon ? Theme.palette.userCustomizationColors[colorId] : iconColor
         searchSelectionButton.iconSettings.isLetterIdenticon = !iconName && !imageSource
+        searchSelectionButton.iconSettings.charactersLen = isUserIcon ? 2 : 1
+        searchSelectionButton.ringSettings.ringSpecModel = !!colorHash ? JSON.parse(colorHash) : {}
     }
 
     function resetSearchSelection() {
@@ -129,7 +134,7 @@ StatusModal {
                         height: 16
                         name: ""
                         isLetterIdenticon: false
-                        letterSize: 11
+                        letterSize: charactersLen > 1 ? 8 : 11
                     }
 
                     property StatusImageSettings image: StatusImageSettings {
@@ -139,6 +144,8 @@ StatusModal {
                         isIdenticon: false
                     }
 
+                    property alias ringSettings: identicon.ringSettings
+
                     anchors.left: parent.left
                     anchors.leftMargin: 16
                     anchors.verticalCenter: parent.verticalCenter
@@ -270,7 +277,8 @@ StatusModal {
                         statusListItemSubTitle.elide: Text.ElideRight
                         statusListItemSubTitle.color: Theme.palette.directColor1
                         icon.isLetterIdenticon: (model.image === "")
-                        icon.background.color: model.color
+                        icon.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.color
+                        icon.charactersLen: model.isUserIcon ? 2 : 1
                         titleAsideText: root.formatTimestampFn(model.time)
                         image.source: model.image
                         badge.primaryText: model.badgePrimaryText
@@ -278,6 +286,7 @@ StatusModal {
                         badge.image.source: model.badgeImage
                         badge.icon.isLetterIdenticon: model.badgeIsLetterIdenticon
                         badge.icon.color: model.badgeIconColor
+                        ringSettings.ringSpecModel: model.colorHash
 
                         onClicked: {
                             root.resultItemClicked(itemId)

src/StatusQ/Popups/StatusSearchPopupMenuItem.qml

@@ -16,6 +16,7 @@ MenuItem {
         width: 16
         isIdenticon: false
     }
+
     property StatusIconSettings iconSettings: StatusIconSettings {
         height: 16
         width: 16
@@ -23,9 +24,11 @@ MenuItem {
                             && root.iconSettings.name.toString() === "")
         background: StatusIconBackgroundSettings {}
         color: (name === "channel") ? Theme.palette.directColor1 : "transparent"
-        letterSize: 11
+        letterSize: charactersLen > 1 ? 8 : 11
     }
 
+    property alias ringSettings: identicon.ringSettings
+
     background: Rectangle {
         color: root.hovered ? Theme.palette.statusPopupMenu.hoverBackgroundColor : "transparent"
     }
@@ -43,6 +46,7 @@ MenuItem {
                 image: root.image
                 icon: root.iconSettings
                 name: root.text
+                ringSettings: root.ringSettings
             }
         }
         StatusBaseText {

src/StatusQ/Popups/qmldir

@@ -11,3 +11,4 @@ StatusModalDivider 0.1 StatusModalDivider.qml
 StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
 StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml
 StatusSpellcheckingMenuItems 0.1 StatusSpellcheckingMenuItems.qml
+StatusColorDialog 0.1 StatusColorDialog.qml

src/assets/img/icons/add-to-dm.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 8C17 10.7614 14.7614 13 12 13C9.23858 13 7 10.7614 7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8ZM15.5 8C15.5 9.933 13.933 11.5 12 11.5C10.067 11.5 8.5 9.933 8.5 8C8.5 6.067 10.067 4.5 12 4.5C13.933 4.5 15.5 6.067 15.5 8Z" fill="black"/>
+<path d="M6 11.8C4.4536 11.8 3.2 10.5464 3.2 9C3.2 7.4536 4.4536 6.2 6 6.2C6.47563 6.2 6.92355 6.31859 7.31583 6.52782L7.78577 5.41977C7.24825 5.15114 6.64178 5 6 5C3.79086 5 2 6.79086 2 9C2 11.2091 3.79086 13 6 13C7.2416 13 8.35108 12.4343 9.08475 11.5466L8.13554 10.811C7.62194 11.4161 6.85581 11.8 6 11.8Z" fill="black"/>
+<path d="M18.085 11.8C19.6314 11.8 20.885 10.5464 20.885 9C20.885 7.4536 19.6314 6.2 18.085 6.2C17.6093 6.2 17.1614 6.31859 16.7691 6.52782L16.2992 5.41977C16.8367 5.15114 17.4432 5 18.085 5C20.2941 5 22.085 6.79086 22.085 9C22.085 11.2091 20.2941 13 18.085 13C16.8434 13 15.7339 12.4343 15.0002 11.5466L15.9494 10.811C16.463 11.4161 17.2292 11.8 18.085 11.8Z" fill="black"/>
+<path d="M12.1099 17.5007C12.5288 17.506 12.8997 17.2015 12.9345 16.7839C12.9685 16.3762 12.6689 16.0138 12.2599 16.0033C12.1735 16.0011 12.0868 16 11.9998 16C8.95932 16 6.23574 17.357 4.40167 19.4984C4.16181 19.7784 4.19319 20.1933 4.45392 20.454C4.77772 20.7779 5.31374 20.7312 5.61624 20.3874C7.17395 18.6171 9.45645 17.5 11.9998 17.5C12.0366 17.5 12.0732 17.5002 12.1099 17.5007Z" fill="black"/>
+<path d="M15.25 16.75C15.25 16.3358 15.5858 16 16 16H17.25C17.5261 16 17.75 15.7761 17.75 15.5V14.25C17.75 13.8358 18.0858 13.5 18.5 13.5C18.9142 13.5 19.25 13.8358 19.25 14.25V15.5C19.25 15.7761 19.4739 16 19.75 16H21C21.4142 16 21.75 16.3358 21.75 16.75C21.75 17.1642 21.4142 17.5 21 17.5H19.75C19.4739 17.5 19.25 17.7239 19.25 18V19.25C19.25 19.6642 18.9142 20 18.5 20C18.0858 20 17.75 19.6642 17.75 19.25V18C17.75 17.7239 17.5261 17.5 17.25 17.5H16C15.5858 17.5 15.25 17.1642 15.25 16.75Z" fill="black"/>
+</svg>

src/assets/img/icons/crown.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 13L16 6.5L14.8728 7.25147C13.1954 8.36973 10.9145 7.54831 10.3352 5.61737L10 4.5L9.66479 5.61737C9.08551 7.54831 6.80459 8.36973 5.12721 7.25147L4 6.5L5 13M15 13H5M15 13V16H5V13" stroke="black" stroke-linejoin="round"/>
+<circle cx="10" cy="4.5" r="1.5" fill="#F6F8FA" stroke="black"/>
+<circle cx="16" cy="6.5" r="1.5" fill="#F6F8FA" stroke="black"/>
+<circle cx="4" cy="6.5" r="1.5" fill="#F6F8FA" stroke="black"/>
+</svg>

src/assets/img/icons/tiny/flash.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 1V6H9L4 13V8H1L6 1Z" stroke="#647084" stroke-width="1.2" stroke-linejoin="round"/>
+</svg>

src/assets/img/icons/tiny/members.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.625 10.6H7.375V9.4H4.625V10.6ZM9.125 12.9H2.875V14.1H9.125V12.9ZM2.875 12.9C2.72312 12.9 2.6 12.7769 2.6 12.625H1.4C1.4 13.4396 2.06038 14.1 2.875 14.1V12.9ZM9.4 12.625C9.4 12.7769 9.27688 12.9 9.125 12.9V14.1C9.93962 14.1 10.6 13.4396 10.6 12.625H9.4ZM7.375 10.6C8.49338 10.6 9.4 11.5066 9.4 12.625H10.6C10.6 10.8439 9.15612 9.4 7.375 9.4V10.6ZM4.625 9.4C2.84388 9.4 1.4 10.8439 1.4 12.625H2.6C2.6 11.5066 3.50662 10.6 4.625 10.6V9.4Z" fill="#647084"/>
+<path d="M11.25 9.4C10.9186 9.4 10.65 9.66863 10.65 10C10.65 10.3314 10.9186 10.6 11.25 10.6V9.4ZM11.75 12.9C11.4186 12.9 11.15 13.1686 11.15 13.5C11.15 13.8314 11.4186 14.1 11.75 14.1V12.9ZM11.25 10.6H11.625V9.4H11.25V10.6ZM13.375 12.9H11.75V14.1H13.375V12.9ZM13.65 12.625C13.65 12.7769 13.5269 12.9 13.375 12.9V14.1C14.1896 14.1 14.85 13.4396 14.85 12.625H13.65ZM14.85 12.625C14.85 10.8439 13.4061 9.4 11.625 9.4V10.6C12.7434 10.6 13.65 11.5066 13.65 12.625H14.85Z" fill="#A1ABBD"/>
+<circle cx="6" cy="5" r="2" stroke="#647084" stroke-width="1.2" stroke-linejoin="round"/>
+<path d="M9.75 6.93182C10.1753 6.81787 10.551 6.56678 10.8191 6.21749C11.0871 5.8682 11.2324 5.44024 11.2324 4.99997C11.2324 4.5597 11.0871 4.13173 10.8191 3.78244C10.551 3.43316 10.1753 3.18207 9.75 3.06812" stroke="#A1ABBD" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/icons/tiny/unlocked.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12.3C4 10.6198 4 9.77976 4.32698 9.13803C4.6146 8.57354 5.07354 8.1146 5.63803 7.82698C6.27976 7.5 7.11984 7.5 8.8 7.5H11.2C12.8802 7.5 13.7202 7.5 14.362 7.82698C14.9265 8.1146 15.3854 8.57354 15.673 9.13803C16 9.77976 16 10.6198 16 12.3V12.7C16 14.3802 16 15.2202 15.673 15.862C15.3854 16.4265 14.9265 16.8854 14.362 17.173C13.7202 17.5 12.8802 17.5 11.2 17.5H8.8C7.11984 17.5 6.27976 17.5 5.63803 17.173C5.07354 16.8854 4.6146 16.4265 4.32698 15.862C4 15.2202 4 14.3802 4 12.7V12.3Z" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M10 11V14" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
+<path d="M13 7.5V5.40569C13 3.80092 11.6991 2.5 10.0943 2.5V2.5C8.84361 2.5 7.73323 3.30032 7.33772 4.48683L7 5.5" stroke="black" stroke-width="1.3" stroke-linejoin="round"/>
+</svg>

src/assets/img/icons/view.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 9.20914 12.2091 11 10 11C7.79086 11 6 9.20914 6 7C6 4.79086 7.79086 3 10 3C12.2091 3 14 4.79086 14 7ZM12.5 7C12.5 8.38071 11.3807 9.5 10 9.5C8.61929 9.5 7.5 8.38071 7.5 7C7.5 5.61929 8.61929 4.5 10 4.5C11.3807 4.5 12.5 5.61929 12.5 7Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.30102 7.48327C1.33585 9.06707 4.96324 14 10 14C15.0368 14 18.6642 9.06707 19.6991 7.48327C19.8927 7.18685 19.8927 6.81315 19.6991 6.51673C18.6642 4.93293 15.0368 7.33509e-07 10 0C4.96324 2.20166e-07 1.33585 4.93293 0.30102 6.51673C0.107342 6.81315 0.107342 7.18685 0.30102 7.48327ZM10 12.5C7.9828 12.5 6.15324 11.5088 4.62731 10.1978C3.82428 9.50788 3.14469 8.76246 2.61201 8.10516C2.08841 7.45905 2.08841 6.54096 2.61201 5.89485C3.14469 5.23755 3.82428 4.49212 4.62731 3.80219C6.15323 2.49115 7.9828 1.5 10 1.5C12.0173 1.5 13.8469 2.49116 15.3728 3.80219C16.1758 4.49212 16.8554 5.23754 17.3881 5.89484C17.9117 6.54095 17.9117 7.45904 17.3881 8.10516C16.8554 8.76245 16.1758 9.50788 15.3728 10.1978C13.8469 11.5088 12.0173 12.5 10 12.5Z" fill="white"/>
+</svg>

statusq.qrc

@@ -34,6 +34,7 @@
         <file>src/StatusQ/Components/StatusTagSelector.qml</file>
         <file>src/StatusQ/Components/StatusToastMessage.qml</file>
         <file>src/StatusQ/Components/StatusWizardStepper.qml</file>
+        <file>src/StatusQ/Components/StatusColorSpace.qml</file>
         <file>src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml</file>
         <file>src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml</file>
         <file>src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml</file>
@@ -75,6 +76,7 @@
         <file>src/StatusQ/Controls/StatusSelect.qml</file>
         <file>src/StatusQ/Controls/StatusSelectableText.qml</file>
         <file>src/StatusQ/Controls/StatusSlider.qml</file>
+        <file>src/StatusQ/Controls/StatusLabeledSlider.qml</file>
         <file>src/StatusQ/Controls/StatusSwitch.qml</file>
         <file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
         <file>src/StatusQ/Controls/StatusSwitchTabButton.qml</file>
@@ -138,6 +140,7 @@
         <file>src/StatusQ/Popups/StatusSearchPopup.qml</file>
         <file>src/StatusQ/Popups/StatusSearchPopupMenuItem.qml</file>
         <file>src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml</file>
+        <file>src/StatusQ/Popups/StatusColorDialog.qml</file>
         <file>src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml</file>
         <file>src/StatusQ/Popups/statusModal/StatusModalFooter.qml</file>
         <file>src/StatusQ/Popups/statusModal/StatusModalHeader.qml</file>
@@ -10498,5 +10501,6 @@
         <file>src/assets/twemoji/svg/e50a.svg</file>
         <file>src/assets/twemoji/LICENSE</file>
         <file>src/StatusQ/Controls/StatusTabBar.qml</file>
+        <file>src/StatusQ/Controls/StatusTagItem.qml</file>
     </qresource>
 </RCC>