fix(StatusSelect): Expose a property to make arrow in the select item visible/invisible

This component also has dependecy on BE and hence should be moved out.

BREAKING CHANGE:

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "vendor/SortFilterProxyModel"]
+	path = vendor/SortFilterProxyModel
+	url = https://github.com/status-im/SortFilterProxyModel.git

CMakeLists.txt

@@ -2,4 +2,22 @@ cmake_minimum_required(VERSION 3.19)
 
 project(StatusQ)
 
+if (APPLE)
+    set(MACOS_VERSION_MIN_FLAGS -mmacosx-version-min=10.14)
+    set(CMAKE_OSX_ARCHITECTURES "x86_64")
+endif()
+
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+# https://doc.qt.io/qtcreator/creator-qml-modules-with-plugins.html#importing-qml-modules
+set(QML_IMPORT_PATH
+    ${CMAKE_SOURCE_DIR}/src;${QML_IMPORT_PATH}
+    CACHE STRING "")
+
+add_subdirectory(vendor/SortFilterProxyModel)
+add_subdirectory(sandbox)
 add_subdirectory(tests)

README.md

@@ -36,7 +36,7 @@ To make viewing and testing components easy, we've added a sandbox application t
 
 ### Using Qt Creator
 
-The easiest way to run the sandbox application is to simply open the provided `sandbox.pro` file using Qt Creator.
+The easiest way to run the sandbox application is to simply open the provided `CMakeLists.txt` file using Qt Creator.
 
 ### Using command line interface
 
@@ -44,14 +44,13 @@ To run the sandbox from within a command line interface, run the following comma
 
 ```
 $ git clone https://github.com/status-im/StatusQ
-$ cd StatusQ/sandbox
-$ ./scripts/build
+$ cd StatusQ
+$ git submodule update --init
+$ ./sandbox/scripts/build
 ```
 
 Once that is done, the sandbox can be started with the generated executable:
 
 ```
-$ ./bin/sandbox
+$ ./build/sandbox/Sandbox
 ```
-
-More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)

doc/src/statusqcomponents.qdoc

@@ -20,6 +20,7 @@
        \li \l{StatusChatToolBar}
        \li \l{StatusContactRequestsIndicatorListItem}
        \li \l{StatusDescriptionListItem}
+       \li \l{StatusItemSelector}
        \li \l{StatusLetterIdenticon}
        \li \l{StatusListItem}
        \li \l{StatusListPicker}

doc/src/statusqcontrols.qdoc

@@ -15,6 +15,7 @@
        \li \l{StatusChatInfoButton}
        \li \l{StatusChatListCategoryItemButton}
        \li \l{StatusColorSelector}
+       \li \l{StatusDropdown}
        \li \l{StatusIconTabButton}
        \li \l{StatusNavBarTabButton}
        \li \l{StatusTabBarIconButton}
@@ -30,6 +31,7 @@
        \li \l{StatusSlider}
        \li \l{StatusSelect}
        \li \l{StatusBaseInput}
+       \li \l{StatusIconTextButton}
        \li \l{StatusIdenticonRing}
        \li \l{StatusInput}
        \li \l{StatusItemPicker}

doc/src/statusqcore.qdoc

@@ -12,6 +12,7 @@
    \list
        \li \l{StatusAppNavBarFilterModel}
        \li \l{StatusBaseText}
+       \li \l{StatusFontSettings}
        \li \l{StatusIcon}
        \li \l{StatusIconBackgroundSettings}
        \li \l{StatusIconSettings}

sandbox/CMakeLists.txt

@@ -0,0 +1,38 @@
+project(Sandbox)
+
+find_package(
+  Qt5
+  COMPONENTS Core Quick QuickControls2
+  REQUIRED)
+
+file(GLOB_RECURSE QML_FILES "../*.qml")
+file(GLOB_RECURSE JS_FILES "../*.js")
+file(GLOB_RECURSE HEADERS *.h)
+if(APPLE)
+  file(GLOB_RECURSE SOURCES *.cpp *.mm)
+else()
+  file(GLOB_RECURSE SOURCES *.cpp)
+endif()
+
+qt5_add_big_resources(QRC_FILES qml.qrc ../src/statusq.qrc ../src/assets.qrc)
+
+add_executable(
+  ${PROJECT_NAME}
+  ${HEADERS}
+  ${SOURCES}
+  ${QRC_FILES}
+  ${QML_FILES}
+  ${JS_FILES})
+
+target_compile_definitions(${PROJECT_NAME}
+                           PRIVATE SRC_DIR="${CMAKE_CURRENT_LIST_DIR}")
+target_link_libraries(
+  ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
+                          SortFilterProxyModel)
+
+if (APPLE)
+  find_library(AppKit AppKit)
+  find_library(Foundation Foundation)
+
+  target_link_libraries(${PROJECT_NAME} PRIVATE ${AppKit} ${Foundation})
+endif()

sandbox/controls/Buttons.qml

@@ -343,4 +343,26 @@ Column {
         text: "Button with Emoji"
         icon.emoji: "🖼️️"
     }
+
+    RowLayout {
+        spacing: 20
+
+        StatusIconTextButton {
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 0
+            statusIcon: "next"
+            icon.width: 24
+            icon.height: 24
+            iconRotation: 180
+            text: "Previous page"
+            font.pixelSize: 15
+            onClicked: testText.visible = !testText.visible
+        }
+        StatusBaseText {
+            id: testText
+            Layout.alignment: Qt.AlignVCenter
+            text: "Click and hide!"
+            font.pixelSize: 15
+        }
+    }
 }

sandbox/controls/Controls.qml

@@ -32,14 +32,14 @@ GridLayout {
     }
 
     StatusIconTabButton {
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusIconTabButton {
         icon.color: Theme.palette.miscColor9
         // This icon source is flawed and demonstrates the fallback case
         // when the image source can't be loaded
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
+        icon.source: "https://httpstat.us/404"
         name: "Pascal"
     }
 
@@ -86,7 +86,7 @@ GridLayout {
     }
 
     StatusNavBarTabButton {
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         tooltip.text: "Some Community"
     }
 
@@ -124,7 +124,7 @@ GridLayout {
         title: "Iuri Matias"
         subTitle: "Contact"
         icon.color: Theme.palette.miscColor7
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatInfoButton.Type.OneToOneChat
         muted: true
         pinnedMessagesCount: 1
@@ -137,7 +137,7 @@ GridLayout {
             title: "Iuri Matias elided"
             subTitle: "Contact"
             icon.color: Theme.palette.miscColor7
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
@@ -152,7 +152,7 @@ GridLayout {
             title: "Iuri Matias big not elided"
             subTitle: "Contact"
             icon.color: Theme.palette.miscColor7
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1

sandbox/controls/ListItems.qml

@@ -73,13 +73,13 @@ GridLayout {
 
     StatusChatListItem {
         name: "community-channel-with-image"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatListItem.Type.CommunityChat
     }
 
     StatusChatListItem {
         name: "Weird Crazy Otter"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         type: StatusChatListItem.Type.OneToOneChat
     }
 
@@ -179,7 +179,7 @@ GridLayout {
     StatusListItem {
         title: "Title"
         subTitle: "Subtitle"
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusListItem {
@@ -314,7 +314,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
-        badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        badge.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         badge.primaryText: "CryptoKitties"
         badge.secondaryText: "#test"
     }

sandbox/controls/Others.qml

@@ -22,7 +22,7 @@ ColumnLayout {
         }
 
         StatusRoundedImage {
-            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         }
 
         StatusBadge {}

sandbox/controls/Popups.qml

@@ -5,7 +5,6 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Components 0.1
-import StatusQ.Popups 0.1
 import StatusQ.Core.Utils 0.1
 
 Column {
@@ -110,7 +109,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
     }
 
     StatusModal {
@@ -118,7 +117,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         leftButtons: [
             StatusRoundButton {
                 icon.name: "arrow-right"
@@ -140,7 +139,7 @@ Column {
         anchors.centerIn: parent
         header.title: "Some Title"
         header.subTitle: "Subtitle"
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
@@ -171,7 +170,7 @@ Column {
     StatusModal {
         id: modalExample
         anchors.centerIn: parent
-        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         header.title: "Header"
         header.subTitle: "SubTitle"
         rightButtons: [
@@ -419,6 +418,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                 height: button.height
                 radius: 8
                 visible: visibleIndices.includes(index)
+                color: Theme.palette.statusAppLayout.backgroundColor
                 StatusButton {
                     id: button
                     topPadding: 8

sandbox/demoapp/ChatChannelView.qml

@@ -41,7 +41,7 @@ ListView {
             }
             messageText: model.message
             hasMention: model.hasMention
-            isMutualContact: model.isMutualContact
+            isContact: model.isContact
             trustIndicator: model.trustIndicator
             isPinned: model.isPinned
             pinnedBy: model.pinnedBy

sandbox/demoapp/CreateChatView.qml

@@ -20,6 +20,7 @@ Page {
         height: tagSelector.height
         anchors.right: parent.right
         anchors.rightMargin: 8
+        spacing: 16
 
         StatusTagSelector {
             id: tagSelector
@@ -73,27 +74,43 @@ Page {
         }
 
         StatusButton {
+            implicitWidth: 106
             implicitHeight: 44
             Layout.alignment: Qt.AlignTop
             enabled: (tagSelector.namesModel.count > 0)
             text: "Confirm"
         }
+
+        Item {
+            implicitHeight: 32
+            implicitWidth: 32
+            Layout.alignment: Qt.AlignTop
+
+            StatusActivityCenterButton {
+                id: notificationButton
+                anchors.right: parent.right
+                unreadNotificationsCount: 3
+            }
+        }
     }
 
     contentItem: Item {
         anchors.fill: parent
-        anchors.topMargin: 68
 
         StatusBaseText {
-            visible: (contactsModel.count === 0)
-            anchors.centerIn: parent
+            anchors.left: parent.left
+            anchors.leftMargin: 252
+            anchors.right: parent.right
+            anchors.rightMargin: 252
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -(headerRow.height/2)
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
+            visible: contactsModel.count === 0
+            wrapMode: Text.WordWrap
             color: Theme.palette.baseColor1
-            text: qsTr("You can only send direct messages to your Contacts. \n\n
-Send a contact request to the person you would like to chat with, you will be\n able to
-chat with them once they have accepted your contact request.")
+            text: qsTr("You can only send direct messages to your Contacts.\n
+Send a contact request to the person you would like to chat with, you will be able to chat with them once they have accepted your contact request.")
             Component.onCompleted: {
                 if (visible) {
                     tagSelector.enabled = false;

sandbox/demoapp/DemoCommunityDetailModal.qml

@@ -13,7 +13,7 @@ StatusModal {
 
     header.title: "Cryptokitties"
     header.subTitle: "Public Community"
-    header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
 
     contentItem: Column {
         width: root.width

sandbox/demoapp/StatusAppChatView.qml

@@ -16,53 +16,78 @@ StatusAppThreePanelLayout {
 
     leftPanel: Item {
         anchors.fill: parent
-
-        StatusNavigationPanelHeadline {
-            id: headline
-            anchors.top: parent.top
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: "Chat"
-        }
-
+        anchors.margins: 16
         RowLayout {
             id: searchInputWrapper
-            width: 288
-            height: searchInput.height
-            anchors.top: headline.bottom
-            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width
 
-            StatusBaseInput {
-                id: searchInput
-                Layout.fillWidth: true
+            StatusNavigationPanelHeadline {
+                id: headline
                 Layout.alignment: Qt.AlignVCenter
-                implicitHeight: 36
-                topPadding: 8
-                bottomPadding: 8
-                placeholderText: "Search"
-                icon.name: "search"
+                text: "Chat"
             }
 
-            StatusIconTabButton {
+            Item {
+                Layout.fillWidth: true
+            }
+
+
+            StatusRoundButton {
+                Layout.alignment: Qt.AlignVCenter
                 icon.name: "public-chat"
+                icon.color: Theme.palette.directColor1
+                icon.height: editBtn.icon.height
+                icon.width: editBtn.icon.width
+                implicitWidth: editBtn.implicitWidth
+                implicitHeight: editBtn.implicitHeight
+                type: StatusRoundButton.Type.Tertiary
+                StatusToolTip {
+                    text: qsTr("Join public chats")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
             }
 
             StatusIconTabButton {
+                id: editBtn
                 icon.name: "edit"
+                icon.color: Theme.palette.directColor1
+                checked: root.createChat
+                highlighted: checked
                 onClicked: {
                     root.createChat = !root.createChat;
                 }
+                StatusToolTip {
+                    text: qsTr("Start chat")
+                    visible: parent.hovered
+                    orientation: StatusToolTip.Orientation.Bottom
+                    y: parent.height + 12
+                }
             }
         }
 
-        Column {
+        StatusInput {
+            id: searchInput
             anchors.top: searchInputWrapper.bottom
             anchors.topMargin: 16
+            width: parent.width
+            maximumHeight: 36
+            topPadding: 8
+            bottomPadding: 8
+            placeholderText: "Search"
+            input.icon.name: "search"
+        }
+
+        Column {
+            width: parent.width
+            anchors.top: searchInput.bottom
+            anchors.topMargin: 16
             anchors.horizontalCenter: parent.horizontalCenter
             spacing: 8
 
             StatusContactRequestsIndicatorListItem {
+                width: parent.width
                 anchors.horizontalCenter: parent.horizontalCenter
                 title: "Contact requests"
                 requestsCount: 3
@@ -70,6 +95,7 @@ StatusAppThreePanelLayout {
             }
 
             StatusChatList {
+                width: parent.width
                 model: Models.demoChatListItems
                 highlightItem: !root.createChat
                 onChatItemUnmuted: {

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -10,7 +10,7 @@ import StatusQ.Components 0.1
 import "../demoapp/data" 1.0
 
 
-ScrollView {
+StatusScrollView {
     id: root
 
     QtObject {

sandbox/demoapp/StatusAppCommunityView.qml

@@ -33,7 +33,7 @@ StatusAppThreePanelLayout {
 
             chatInfoButton.title: "CryptoKitties"
             chatInfoButton.subTitle: "128 Members"
-            chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             chatInfoButton.icon.color: Theme.palette.miscColor6
             chatInfoButton.onClicked:  { chatInfoButtonClicked(); }
 
@@ -59,7 +59,7 @@ StatusAppThreePanelLayout {
             }
         }
 
-        ScrollView {
+        StatusScrollView {
             id: scrollView
 
             anchors.top: statusChatInfoToolBar.bottom

sandbox/demoapp/StatusAppProfileSettingsView.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
 
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 import "data" 1.0
@@ -21,7 +22,7 @@ StatusAppTwoPanelLayout {
             text: "Profile"
         }
 
-        ScrollView {
+        StatusScrollView {
             anchors.top: profileHeadline.bottom
             anchors.topMargin: 16
             anchors.bottom: parent.bottom

sandbox/demoapp/data/Models.qml

@@ -316,9 +316,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     //dummy search popup models
     property var searchResultsA: ListModel {
         ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
-            image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            image: "qrc:/demoapp/data/profile-image-1.jpeg";
             color: "orange";
-            badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
+            badgeImage: "qrc:/demoapp/data/profile-image-1.jpeg";
             badgePrimaryText: "CryptoKities";
             badgeSecondaryText: "";
             badgeIconColor: "";
@@ -361,7 +361,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                 ListElement {
                     value: "sub_item_1_1"
                     text: "Profile image item"
-                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    imageSource: "qrc:/demoapp/data/profile-image-1.jpeg"
                     iconName: ""
                     iconColor: ""
                 },
@@ -375,7 +375,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         ListElement {
             value: "item_2"
             title: "Community item";
-            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            imageSource: "qrc:/demoapp/data/profile-image-1.jpeg"
             iconName: ""
             iconColor: ""
             subItems: [
@@ -446,7 +446,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f5789"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -475,7 +475,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -503,7 +503,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAkUlEQVR4nOzYwQmDQBQG4SSkl3SQyizDyuzAavTi0cPK8sPwM9/Rw8rw4KH7eZUwhMYQGkNoDKGpCfmmDl63/bh7vvx/78T7aiZiCI0hNMMbJL2FZs+vmYghNIbQTG+cp9smtf1qJmIIjSEKqZmIITSG0Azfa6W/qfxDvBhCY4hCaiZiCI0hNIbQGEJzBgAA///3pSBjX42sYAAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -531,7 +531,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage:  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f6789"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -560,7 +560,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -589,7 +589,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -618,7 +618,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: true
             editMode: false
@@ -648,7 +648,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -678,7 +678,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -708,7 +708,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -738,7 +738,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
@@ -767,7 +767,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
+            isContact: false
             trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
@@ -795,7 +795,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -823,7 +823,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
+            isContact: true
             trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
@@ -913,8 +913,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             notificationsCount: 0
         }
         ListElement {
-            sectionId: "demoApp"
+            sectionId: "examples"
             sectionType: 101
+            name: "Examples"
+            active: false
+            image: ""
+            icon: "show"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "demoApp"
+            sectionType: 102
             name: "Demo Application"
             active: false
             image: ""
@@ -1000,7 +1011,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "United States Dollar"
             shortName: "USD"
             symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: ""
             selected: false
         }
@@ -1009,7 +1020,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "British Pound"
             shortName: "GBP"
             symbol: "£"
-            imageSource: "../../assets/twemoji/26x26/1f4b5.png"
+            imageSource: "../../assets/twemoji/svg/1f4b5.svg"
             category: ""
             selected: false
         }
@@ -1018,7 +1029,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Euro"
             shortName: "EUR"
             symbol: "€"
-            imageSource: "../../assets/twemoji/26x26/1f4b6.png"
+            imageSource: "../../assets/twemoji/svg/1f4b6.svg"
             category: ""
             selected: true
         }
@@ -1027,7 +1038,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Shout Korean Won"
             shortName: "KRW"
             symbol: "₩"
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
             category: ""
             selected: false
         }
@@ -1036,7 +1047,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Ethereum"
             shortName: "ETH"
             symbol: "Ξ"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
             category: "Tokens"
             selected: true
         }
@@ -1045,7 +1056,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Bitcoin"
             shortName: "BTC"
             symbol: "฿"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Tokens"
             selected: false
         }
@@ -1054,7 +1065,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Status Network Token"
             shortName: "SNT"
             symbol: ""
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
             category: "Tokens"
             selected: false
         }
@@ -1064,7 +1075,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Emirati Dirham"
             shortName: "AED"
             symbol: "د.إ"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1073,7 +1084,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Afghani"
             shortName: "AFN"
             symbol: "؋"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1082,7 +1093,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Argentine Peso"
             shortName: "AFN"
             symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1094,7 +1105,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "United States Dollar"
             shortName: "USD"
             symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: ""
             selected: false
         }
@@ -1103,7 +1114,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "British Pound"
             shortName: "GBP"
             symbol: "£"
-            imageSource: "../../assets/twemoji/26x26/1f4b5.png"
+            imageSource: "../../assets/twemoji/svg/1f4b5.svg"
             category: ""
             selected: false
         }
@@ -1112,7 +1123,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Euro"
             shortName: "EUR"
             symbol: "€"
-            imageSource: "../../assets/twemoji/26x26/1f4b6.png"
+            imageSource: "../../assets/twemoji/svg/1f4b6.svg"
             category: ""
             selected: true
         }
@@ -1121,7 +1132,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Shout Korean Won"
             shortName: "KRW"
             symbol: "₩"
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
             category: ""
             selected: false
         }
@@ -1130,7 +1141,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Ethereum"
             shortName: "ETH"
             symbol: "Ξ"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
             category: "Tokens"
             selected: true
         }
@@ -1139,7 +1150,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Bitcoin"
             shortName: "BTC"
             symbol: "฿"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Tokens"
             selected: false
         }
@@ -1148,7 +1159,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Status Network Token"
             shortName: "SNT"
             symbol: ""
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
+            imageSource: "../../assets/twemoji/svg/1f4b8.svg"
             category: "Tokens"
             selected: false
         }
@@ -1158,7 +1169,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Emirati Dirham"
             shortName: "AED"
             symbol: "د.إ"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1167,7 +1178,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Afghani"
             shortName: "AFN"
             symbol: "؋"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
+            imageSource: "../../assets/twemoji/svg/1f4b7.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1176,7 +1187,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             name: "Argentine Peso"
             shortName: "AFN"
             symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
+            imageSource: "../../assets/twemoji/svg/1f4b4.svg"
             category: "Other Fiat"
             selected: false
         }
@@ -1187,7 +1198,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 0
             name: "English"
             shortName: "English"
-            imageSource: "../../assets/twemoji/26x26/1f1ec-1f1e7.png"
+            imageSource: "../../assets/twemoji/svg/1f1ec-1f1e7.svg"
             category: ""
             selected: false
         }
@@ -1195,7 +1206,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 1
             name: "Korean"
             shortName: "한국어"
-            imageSource: "../../assets/twemoji/26x26/1f1f0-1f1f7.png"
+            imageSource: "../../assets/twemoji/svg/1f1f0-1f1f7.svg"
             category: ""
             selected: false
         }
@@ -1203,7 +1214,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 2
             name: "Portuguese (Brazilian)"
             shortName: "Português"
-            imageSource: "../../assets/twemoji/26x26/1f1e7-1f1f7.png"
+            imageSource: "../../assets/twemoji/svg/1f1e7-1f1f7.svg"
             category: ""
             selected: true
         }
@@ -1211,7 +1222,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 3
             name: "Dutch"
             shortName: "Nederlands"
-            imageSource: "../../assets/twemoji/26x26/1f1f3-1f1f1.png"
+            imageSource: "../../assets/twemoji/svg/1f1f3-1f1f1.svg"
             category: "Beta Languages"
             selected: false
         }
@@ -1219,7 +1230,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 4
             name: "Indonesian"
             shortName: "Bahasa Indonesia"
-            imageSource: "../../assets/twemoji/26x26/1f1ee-1f1e9.png"
+            imageSource: "../../assets/twemoji/svg/1f1ee-1f1e9.svg"
             category: "Beta Languages"
             selected: false
         }
@@ -1227,7 +1238,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             key: 5
             name: "Spanish"
             shortName: "Español"
-            imageSource: "../../assets/twemoji/26x26/1f1ea-1f1e6.png"
+            imageSource: "../../assets/twemoji/svg/1f1ea-1f1e6.svg"
             category: "Beta Languages"
             selected: false
         }

sandbox/examples/FilteringSorting.qml

@@ -0,0 +1,154 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1
+
+import SortFilterProxyModel 0.2
+
+ColumnLayout {
+    id: root
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        StatusIconTextButton {
+            id: sortBtn
+
+            property int sortOrder: -1
+            statusIcon: {
+                if (sortOrder == Qt.AscendingOrder) return "chevron-down"
+                if (sortOrder == Qt.DescendingOrder) return "chevron-up"
+                return "remove"
+            }
+
+            onClicked: {
+                var st = sortOrder + 1
+                sortOrder = st > 1 ? -1 : st
+            }
+        }
+
+        StatusInput {
+            id: searchInput
+
+            Layout.fillWidth: true
+            input.icon.name: "search"
+            placeholderText: "nickname.."
+        }
+
+        StatusIconTabButton {
+            id: contactBtn
+
+            icon.name: "tiny/tiny-contact"
+            identicon.icon.color: Theme.palette.primaryColor1
+            onClicked: highlighted = !highlighted
+        }
+
+        StatusIconTabButton {
+            id: verifiedBtn
+
+            icon.name: "tiny/tiny-checkmark"
+            identicon.icon.color: Theme.palette.primaryColor1
+            onClicked: highlighted = !highlighted
+        }
+    }
+
+    ListView {
+        Layout.fillWidth: true
+        implicitHeight: contentItem.childrenRect.height
+        spacing: 4
+
+        model: SortFilterProxyModel {
+            sourceModel: d.users
+            sorters: StringSorter {
+                enabled: sortBtn.sortOrder !== -1
+                roleName: "nick"
+                sortOrder: sortBtn.sortOrder
+            }
+            filters: [
+                ExpressionFilter {
+                    expression: model.nick.startsWith(searchInput.text)
+                },
+                AllOf {
+                    enabled: contactBtn.highlighted || verifiedBtn.highlighted
+                    ValueFilter {
+                        enabled: contactBtn.highlighted
+                        roleName: "isContact"
+                        value: true
+                    }
+                    ValueFilter {
+                        enabled: verifiedBtn.highlighted
+                        roleName: "isVerified"
+                        value: true
+                    }
+                }
+            ]
+        }
+
+        delegate: StatusMemberListItem {
+            width: parent.width
+            userName: model.name
+            nickName: model.nick
+            isVerified: model.isVerified
+            isContact: model.isContact
+        }
+    }
+
+    QtObject {
+        id: d
+
+        readonly property ListModel users: ListModel {
+            ListElement {
+                name: "Richard"
+                nick: "Ricky"
+                isVerified: true
+                isContact: true
+            }
+            ListElement {
+                name: "Susan"
+                nick: "Sue"
+                isVerified: false
+                isContact: false
+            }
+            ListElement {
+                name: "Edward"
+                nick: "Ed"
+                isVerified: true
+                isContact: false
+            }
+            ListElement {
+                name: "Toomas"
+                nick: "Tommy"
+                isVerified: false
+                isContact: false
+            }
+            ListElement {
+                name: "Elizabeth"
+                nick: "Bess"
+                isVerified: true
+                isContact: true
+            }
+            ListElement {
+                name: "Thomas"
+                nick: "Tom"
+                isVerified: false
+                isContact: true
+            }
+            ListElement {
+                name: "Fernando"
+                nick: "Alonso"
+                isVerified: false
+                isContact: true
+            }
+            ListElement {
+                name: "Alexander"
+                nick: "Alex"
+                isVerified: true
+                isContact: false
+            }
+        }
+    }
+}

sandbox/main.cpp

@@ -4,6 +4,8 @@
 
 #include "sandboxapp.h"
 
+#include <qqmlsortfilterproxymodeltypes.h>
+
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
@@ -12,6 +14,8 @@ int main(int argc, char *argv[])
 
     SandboxApp app(argc, argv);
 
+    qqsfpm::registerTypes();
+
     qputenv("QT_QUICK_CONTROLS_HOVER_ENABLED", QByteArrayLiteral("1"));
 
     app.setOrganizationName("Status");

sandbox/main.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.14
 import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.14
 import Qt.labs.settings 1.0
+import QtQml.Models 2.14
 
 import Sandbox 0.1
 
@@ -14,6 +15,8 @@ import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
 
+import SortFilterProxyModel 0.2
+
 import "demoapp/data" 1.0
 
 StatusWindow {
@@ -44,7 +47,8 @@ StatusWindow {
         readonly property int nodeManagement: 4
         readonly property int profileSettings: 5
         readonly property int apiDocumentation: 100
-        readonly property int demoApp: 101
+        readonly property int examples: 101
+        readonly property int demoApp: 102
     }
 
     function setActiveItem(sectionId) {
@@ -87,13 +91,16 @@ StatusWindow {
                     if(model.sectionType === appSectionType.apiDocumentation)
                     {
                         stackView.push(libraryDocumentationCmp)
-                        rootWindow.setActiveItem(sectionId)
+                    }
+                    else if(model.sectionType === appSectionType.examples)
+                    {
+                        stackView.push(examplesCmp)
                     }
                     else if(model.sectionType === appSectionType.demoApp)
                     {
                         stackView.push(demoAppCmp)
-                        rootWindow.setActiveItem(model.sectionId)
                     }
+                    rootWindow.setActiveItem(model.sectionId)
                 }
             }
         }
@@ -132,205 +139,196 @@ StatusWindow {
                 storeSettings.fillPage = false
             }
 
-            leftPanel: Item {
+            leftPanel: StatusScrollView {
                 anchors.fill: parent
-                ScrollView {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + 56
-                    contentWidth: navigation.width
-                    clip: true
-                    Column {
-                        id: navigation
-                        anchors.top: parent.top
-                        anchors.topMargin: 48
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        spacing: 0
+                anchors.topMargin: 48
 
-                        StatusListSectionHeadline { text: "StatusQ.Core" }
-                        StatusNavigationListItem {
-                            title: "Icons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
+                Column {
+                    id: navigation
+                    spacing: 0
 
-                        StatusListSectionHeadline { text: "StatusQ.Layout" }
-                        StatusNavigationListItem {
-                            title: "Layouts"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title.substring(0, title.length - 1));
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Core" }
+                    StatusNavigationListItem {
+                        title: "Icons"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
 
-                        StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem {
-                            title: "Buttons"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusSwitchTab"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusTabSwitch");
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusChatCommandButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "Controls"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusTabBarButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem { 
-                            title: "StatusTabBarIconButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusAccountSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusAssetSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusColorSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusWalletColorButton"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusWalletColorSelect"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusPasswordStrengthIndicator"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusPinInput"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Components" }
-                        StatusNavigationListItem {
-                            title: "StatusAddress"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "List Items"
-                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
-                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusChatInfoToolBar"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "Others"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.control(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusExpandableItem"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page("StatusExpandableSettingsItem");
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusTagSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusToastMessage"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusWizardStepper"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusListPicker"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusCommunityCard"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusCommunityTags"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem {
-                            title: "StatusPopupMenu"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusModal"
-                            selected: viewLoader.source.toString().includes("Popups")
-                            onClicked: mainPageView.control("Popups");
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusDialog"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusListSectionHeadline { text: "StatusQ.Platform" }
-                        StatusNavigationListItem {
-                            title: "StatusMacNotification"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusColorSelectorGrid"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusImageCropPanel"
-                            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);
-                        }
+                    StatusListSectionHeadline { text: "StatusQ.Layout" }
+                    StatusNavigationListItem {
+                        title: "Layouts"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title.substring(0, title.length - 1));
+                    }
+
+                    StatusListSectionHeadline { text: "StatusQ.Controls" }
+                    StatusNavigationListItem {
+                        title: "Buttons"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSwitchTab"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusTabSwitch");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatCommandButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Controls"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTabBarButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTabBarIconButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusAccountSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorButton"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWalletColorSelect"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPasswordStrengthIndicator"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusPinInput"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Components" }
+                    StatusNavigationListItem {
+                        title: "StatusAddress"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "List Items"
+                        selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
+                        onClicked: mainPageView.control(title.replace(/\s+/g, ''));
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusChatInfoToolBar"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "Others"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.control(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusExpandableItem"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page("StatusExpandableSettingsItem");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusTagSelector"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusToastMessage"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusWizardStepper"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusListPicker"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCommunityTags"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Popup" }
+                    StatusNavigationListItem {
+                        title: "StatusPopupMenu"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusModal"
+                        selected: viewLoader.source.toString().includes("Popups")
+                        onClicked: mainPageView.control("Popups");
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusDialog"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusListSectionHeadline { text: "StatusQ.Platform" }
+                    StatusNavigationListItem {
+                        title: "StatusMacNotification"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusColorSelectorGrid"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusImageCropPanel"
+                        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);
+                    }
+                    StatusNavigationListItem {
+                        title: "StatusCard"
+                        selected: viewLoader.source.toString().includes(title)
+                        onClicked: mainPageView.page(title, true);
                     }
                 }
             }
@@ -339,7 +337,7 @@ StatusWindow {
                 id: rightPanel
                 anchors.fill: parent
 
-                ScrollView {
+                StatusScrollView {
                     visible: !storeSettings.fillPage
                     anchors.fill: parent
                     anchors.topMargin: 64
@@ -404,6 +402,53 @@ StatusWindow {
         }
     }
 
+    Component {
+        id: examplesCmp
+
+        StatusAppTwoPanelLayout {
+            id: examplesView
+
+            function example(name) {
+                examplesLoader.source = Qt.resolvedUrl("./examples/" + name + ".qml")
+                storeSettings.selectedExample = examplesLoader.source
+            }
+
+            readonly property string defaultExampleSource: example("FilteringSorting")
+
+            leftPanel: StatusScrollView {
+                id: examplesLeftPanel
+
+                anchors.fill: parent
+                anchors.topMargin: 48
+
+                ColumnLayout {
+                    width: examplesLeftPanel.availableWidth
+                    spacing: 0
+
+                    StatusNavigationListItem {
+                        Layout.fillWidth: true
+                        title: "FilteringSorting"
+                        selected: examplesLoader.source.toString().includes(title)
+                        onClicked: examplesView.example(title)
+                    }
+                }
+            }
+
+            rightPanel: StatusScrollView {
+                id: examplesRightPanel
+                anchors.fill: parent
+                anchors.margins: 64
+                anchors.topMargin: anchors.margins + 32
+
+                Loader {
+                    id: examplesLoader
+                    width: examplesRightPanel.availableWidth
+                    source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
+                }
+            }
+        }
+    }
+
     Component {
         id: demoAppCmp
 
@@ -498,6 +543,7 @@ StatusWindow {
     Settings {
         id: storeSettings
         property string selected: ""
+        property string selectedExample: ""
         property bool lightTheme: true
         property bool fillPage: false
     }

sandbox/pages/StatusAssetSelectorPage.qml

@@ -1,40 +0,0 @@
-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.Popups 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusAssetSelector {
-        getCurrencyBalanceString: function (currencyBalance) {
-            return currencyBalance.toFixed(2) + " USD"
-        }
-        tokenAssetSourceFn: function (symbol) {
-            return "../../assets/img/icons/snt.svg"
-        }
-        assets: ListModel {
-            ListElement {
-                address: "0x1234"
-                name: "Status Network Token"
-                balance: "20"
-                symbol: "SNT"
-                currencyBalance: 9992.01
-            }
-            ListElement {
-                address: "0x1234"
-                name: "DAI Token"
-                balance: "15"
-                symbol: "DAI"
-                currencyBalance: 20.00001
-            }
-        }
-    }
-}
-

sandbox/pages/StatusCardPage.qml

@@ -0,0 +1,253 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Sandbox 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+
+Item {
+
+    ColumnLayout {
+        id: layout
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        spacing: 20
+
+        RowLayout {
+            StatusSelect {
+                id: select
+                label: "Select Card State"
+                model: ListModel {
+                    ListElement {
+                        name: "default"
+                    }
+                    ListElement {
+                        name: "unavailable"
+                    }
+                    ListElement {
+                        name: "error"
+                    }
+                    ListElement {
+                        name: "unpreferred"
+                    }
+                }
+                selectMenu.delegate: StatusMenuItemDelegate {
+                    statusPopupMenu: select
+                    action: StatusMenuItem {
+                        text: name
+                        onTriggered: {
+                            selectedItem.text = name
+                            card.state = name
+                        }
+                    }
+                }
+                selectedItemComponent: Item {
+                    id: selectedItem
+                    anchors.fill: parent
+                    property string text: "default"
+
+                    StatusBaseText {
+                        text: selectedItem.text
+                        anchors.centerIn: parent
+                        color: Theme.palette.directColor1
+                    }
+                }
+            }
+
+            StatusCheckBox {
+                text: "advancedMode"
+                onClicked: {
+                    card.advancedMode = checked
+                }
+            }
+        }
+
+        StatusCard {
+            id: card
+            primaryText: "Mainnet"
+            secondaryText: state === "unavailable" ? "No Gas" : "75"
+            tertiaryText: state === "unpreferred"  ? "UNPREFERRED" : "BALANCE: " + 250
+            cardIconName: "status"
+            advancedInputText: "75"
+            disabledText: "Disabled"
+        }
+
+        Rectangle {
+            height: 1
+            width: 700
+            color: "black"
+        }
+
+        // Below is an example on how to implement the network routing using StatusCard and Canvas, also the function in Utils to draw an arrow
+        Row {
+            id: cards
+            spacing: 200
+            Column {
+                id: leftColumn
+                spacing: 20
+                Repeater {
+                    model: fromNetworksList
+                    StatusCard {
+                        primaryText: name
+                        secondaryText: balance === 0 ? "No Balance" : !hasGas ? "No Gas" : tokensToSend
+                        tertiaryText: "BALANCE: " + balance
+                        state: balance === 0 || !hasGas ? "unavailable" :  "default"
+                        cardIconName: iconName
+                        advancedMode: card.advancedMode
+                        advancedInputText: tokensToSend
+                        disabledText: "Disabled"
+                    }
+                }
+            }
+
+            Column {
+                id: rightColumn
+                spacing: 20
+                Repeater {
+                    model: toNetworksList
+                    StatusCard {
+                        primaryText: name
+                        secondaryText: tokensToReceive
+                        tertiaryText: ""
+                        state: preferred ? "default" : "unprefeered"
+                        cardIconName: iconName
+                        opacity: preferred ? 1 : 0
+                        advancedMode: card.advancedMode
+                        advancedInputText: tokensToReceive
+                        disabledText: "Disabled"
+                    }
+                }
+            }
+        }
+    }
+
+    Canvas {
+        id: canvas
+        x: layout.x + leftColumn.x
+        y: cards.y
+        width: cards.width
+        height: cards.height
+
+        function clear() {
+            var ctx = getContext("2d");
+            ctx.reset()
+        }
+
+        onPaint: {
+            // Get the canvas context
+            var ctx = getContext("2d");
+
+            for(var i = 0; i< fromNetworksList.count; i++) {
+                if(fromNetworksList.get(i).routedTo !== "") {
+                    for(var j = 0; j< toNetworksList.count; j++) {
+                        if(fromNetworksList.get(i).routedTo === toNetworksList.get(j).name) {
+                            Utils.drawArrow(ctx, leftColumn.children[i].x + leftColumn.children[i].width,
+                                            leftColumn.children[i].y + leftColumn.children[i].height/2,
+                                            rightColumn.x + rightColumn.children[j].x,
+                                            rightColumn.children[j].y + rightColumn.children[j].height/2,
+                                            '#627EEA')
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    ListModel {
+        id: toNetworksList
+        ListElement {
+            name: "Mainnet"
+            iconName: "status"
+            tokensToReceive: 75
+            preferred: true
+        }
+        ListElement {
+            name: "Aztec"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: false
+        }
+        ListElement {
+            name: "Hermez"
+            iconName: "status"
+            tokensToReceive: 75
+            preferred: true
+        }
+        ListElement {
+            name: "Loppring"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: true
+        }
+        ListElement {
+            name: "Optimism"
+            iconName: "status"
+            tokensToReceive: 100
+            preferred: true
+        }
+        ListElement {
+            name: "zkSync"
+            iconName: "status"
+            tokensToReceive: 0
+            preferred: false
+        }
+    }
+
+    ListModel {
+        id: fromNetworksList
+        ListElement {
+            name: "Mainnet"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Mainnet"
+            hasGas: true
+        }
+        ListElement {
+            name: "Aztec"
+            iconName: "status"
+            tokensToSend: 0
+            balance: 75
+            routedTo: ""
+            hasGas: false
+        }
+        ListElement {
+            name: "Hermez"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Hermez"
+            hasGas: true
+        }
+        ListElement {
+            name: "Loppring"
+            iconName: "status"
+            tokensToSend: 0
+            balance: 0
+            routedTo: ""
+            hasGas: false
+        }
+        ListElement {
+            name: "Optimism"
+            iconName: "status"
+            tokensToSend: 75
+            balance: 75
+            routedTo: "Optimism"
+            hasGas: true
+        }
+        ListElement {
+            name: "zkSync"
+            iconName: "status"
+            tokensToSend: 25
+            balance: 25
+            routedTo: "Optimism"
+            hasGas: true
+        }
+    }
+}

sandbox/pages/StatusChatInfoToolBarPage.qml

@@ -14,7 +14,7 @@ GridLayout {
     StatusChatInfoToolBar {
         chatInfoButton.title: "Cryptokitties"        
         chatInfoButton.subTitle: "128 Members"
-        chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         chatInfoButton.icon.color: Theme.palette.miscColor6
 
         popupMenu: StatusPopupMenu {

sandbox/pages/StatusCommunityTagsPage.qml

@@ -37,7 +37,7 @@ Item {
             rightPadding: 0
             label: qsTr("Select tags that will fit your Community")
             input.icon.name: "search"
-            input.placeholderText: qsTr("Search tags")
+            placeholderText: qsTr("Search tags")
             Layout.fillWidth: true
         }
 
@@ -80,4 +80,4 @@ Item {
             Layout.fillHeight: true
         }
     }
-}
+}

sandbox/pages/StatusExpandableSettingsItemPage.qml

@@ -74,7 +74,7 @@ Column {
 
         type: StatusExpandableItem.Type.Secondary
         expandable: true
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         primaryText: "CryptoKitties"
         additionalText: "1456 USD"
         expandableComponent: notImplemented
@@ -85,7 +85,7 @@ Column {
 
         type: StatusExpandableItem.Type.Secondary
         expandable: true
-        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
         primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
         additionalText: "564.90 USD"
         expandableComponent: notImplemented

sandbox/pages/StatusInputPage.qml

@@ -12,22 +12,22 @@ Column {
     spacing: 8
 
     StatusInput {
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
     }
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Disabled"
+        placeholderText: "Disabled"
         input.enabled: false
     }
 
     StatusInput {
-        input.placeholderText: "Clearable"
+        placeholderText: "Clearable"
         input.clearable: true
     }
 
     StatusInput {
-        input.placeholderText: "Invalid"
+        placeholderText: "Invalid"
         input.valid: false
     }
 
@@ -35,25 +35,25 @@ Column {
         label: "Label"
 
         input.icon.name: "search"
-        input.placeholderText: "Input with icon"
+        placeholderText: "Input with icon"
     }
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
     StatusInput {
         charLimit: 30
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
     StatusInput {
         label: "Label"
         charLimit: 30
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.clearable: true
     }
 
@@ -91,7 +91,7 @@ Column {
         errorMessage: "Error message"
         input.clearable: true
         input.valid: false
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
     }
 
     StatusInput {
@@ -106,7 +106,7 @@ Column {
     StatusInput {
         label: "Label"
         secondaryLabel: "secondary label"
-        input.placeholderText: "Placeholder"
+        placeholderText: "Placeholder"
         input.implicitHeight: 56
     }
 
@@ -114,7 +114,7 @@ Column {
         id: input
         label: "Label"
         charLimit: 30
-        input.placeholderText: "Input with validator"
+        placeholderText: "Input with validator"
 
         validators: [
             StatusMinLengthValidator {
@@ -132,7 +132,7 @@ Column {
     StatusInput {
         label: "Input with <i>StatusRegularExpressionValidator</i>"
         charLimit: 30
-        input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
+        placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
         validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
 
         validators: [
@@ -145,7 +145,7 @@ Column {
 
     StatusInput {
         label: "Label"
-        input.placeholderText: "Input width component (right side)"
+        placeholderText: "Input width component (right side)"
         input.rightComponent: StatusIcon {
             icon: "cancel"
             height: 16
@@ -156,26 +156,26 @@ Column {
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline"
+        placeholderText: "Multiline"
     }
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline with static height"
+        placeholderText: "Multiline with static height"
         input.implicitHeight: 100
     }
 
     StatusInput {
         input.multiline: true
-        input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: 80
-        input.maximumHeight: 200
+        placeholderText: "Multiline with max/min"
+        minimumHeight: 80
+        maximumHeight: 200
     }
 
     StatusInput {
         property bool toggled: true
         label: "Input with emoji icon"
-        input.placeholderText: "Enter Name"
+        placeholderText: "Enter Name"
         input.icon.emoji: toggled ? "😁" : "🧸"
         input.icon.color: "blue"
         input.isIconSelectable: true
@@ -187,7 +187,7 @@ Column {
     StatusInput {
         property bool toggled: true
         label: "Input with selectable icon which is not an emoji"
-        input.placeholderText: "Enter Name"
+        placeholderText: "Enter Name"
         input.icon.emoji: ""
         input.icon.name: toggled ? "filled-account" : "image"
         input.icon.color: "blue"

sandbox/pages/StatusItemSelectorPage.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.14
+
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+ColumnLayout {
+    spacing: 20
+    StatusItemSelector {
+        id: selector
+        icon: "qrc:/images/SNT.png"
+        iconSize: 24
+        title: "Item Selector Title"
+        defaultItemText: "Example: Empty items"
+        andOperatorText: "and"
+        orOperatorText: "or"
+        popupItem: StatusDropdown {
+            id: dropdown
+            width: 200
+            contentItem: ColumnLayout {
+                spacing: 10
+                StatusInput {
+                    id: input
+                    Layout.fillWidth: true
+                }
+                StatusButton {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: "Add element"
+                    onClicked: {
+                        selector.addItem(input.text, "qrc:/images/SNT.png", selector.itemsModel.count > 0 ? Utils.Operators.Or : Utils.Operators.None)
+                        dropdown.close()
+                    }
+                }
+            }
+        }
+    }
+
+    StatusButton {
+        Layout.alignment: Qt.AlignHCenter
+        text: "Clear list"
+        onClicked: { selector.itemsModel.clear() }
+    }
+}

sandbox/pages/StatusPopupMenuPage.qml

@@ -28,6 +28,11 @@ GridLayout {
         onClicked: customMenu.popup()
     }
 
+    StatusButton {
+        text: "Menu with custom font settings"
+        onClicked: differentFontMenu.popup()
+    }
+
 
     StatusPopupMenu {
         id: simpleMenu
@@ -84,7 +89,7 @@ GridLayout {
         subMenuItemIcons: [
             { icon: "chat" },
             { 
-                source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
+                source: "qrc:/demoapp/data/profile-image-1.jpeg"
             },
             { 
                 isLetterIdenticon: true, 
@@ -110,7 +115,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 
             StatusMenuItem { 
                 text: "Pascal"
-                image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
             }
         }
 
@@ -147,4 +152,22 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             }
         }
     }
+
+    StatusPopupMenu {
+        id: differentFontMenu
+        StatusMenuItem {
+            text: "Bold"
+            fontSettings.bold: true
+        }
+
+        StatusMenuItem {
+            text: "Italic"
+            fontSettings.italic: true
+        }
+
+        StatusMenuItem {
+            text: "16px"
+            fontSettings.pixelSize: 16
+        }
+    }
 }

sandbox/pages/StatusTagSelectorPage.qml

@@ -19,7 +19,7 @@ Item {
         ListElement {
             publicId: "0x1"
             name: "vitalikbuterin"
-            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            icon: "qrc:/demoapp/data/profile-image-1.jpeg"
             isIdenticon: false
             onlineStatus: 1
             isReadonly: false

sandbox/qml.qrc

@@ -1,22 +1,5 @@
 <RCC>
     <qresource prefix="/">
-        <file>main.qml</file>
-        <file>pages/StatusAccountSelectorPage.qml</file>
-        <file>pages/StatusAddressPage.qml</file>
-        <file>pages/StatusAssetSelectorPage.qml</file>
-        <file>pages/StatusChatCommandButtonPage.qml</file>
-        <file>pages/StatusChatInfoToolBarPage.qml</file>
-        <file>pages/StatusColorSelectorPage.qml</file>
-        <file>pages/StatusExpandableSettingsItemPage.qml</file>
-        <file>pages/StatusInputPage.qml</file>
-        <file>pages/StatusMacNotificationPage.qml</file>
-        <file>pages/StatusPopupMenuPage.qml</file>
-        <file>pages/StatusSelectPage.qml</file>
-        <file>pages/StatusTabBarIconButtonPage.qml</file>
-        <file>pages/StatusTabSwitchPage.qml</file>
-        <file>pages/StatusWalletColorButtonPage.qml</file>
-        <file>pages/StatusWalletColorSelectPage.qml</file>
-        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
         <file>controls/Buttons.qml</file>
         <file>controls/Controls.qml</file>
         <file>controls/Icons.qml</file>
@@ -24,49 +7,78 @@
         <file>controls/ListItems.qml</file>
         <file>controls/Others.qml</file>
         <file>controls/Popups.qml</file>
+        <file>demoapp/data/logo-test-image.png</file>
+        <file>demoapp/data/Models.qml</file>
+        <file>demoapp/data/qmldir</file>
         <file>demoapp/ChatChannelView.qml</file>
         <file>demoapp/CreateChatView.qml</file>
         <file>demoapp/DemoCommunityDetailModal.qml</file>
         <file>demoapp/DemoContactRequestsModal.qml</file>
         <file>demoapp/StatusAppChatView.qml</file>
+        <file>demoapp/StatusAppCommunitiesPortalView.qml</file>
         <file>demoapp/StatusAppCommunityView.qml</file>
         <file>demoapp/StatusAppProfileSettingsView.qml</file>
-        <file>demoapp/data/Models.qml</file>
-        <file>demoapp/data/qmldir</file>
-        <file>demoapp/data/logo-test-image.png</file>
-        <file>DemoApp.qml</file>
-        <file>ThemeSwitch.qml</file>
-        <file>pages/StatusColorSelectorGridPage.qml</file>
-        <file>pages/StatusListPickerPage.qml</file>
-        <file>pages/StatusPinInputPage.qml</file>
-        <file>pages/StatusTagSelectorPage.qml</file>
-        <file>pages/StatusToastMessagePage.qml</file>
-        <file>pages/StatusWizardStepperPage.qml</file>
-        <file>pages/StatusTabBarButtonPage.qml</file>
-        <file>pages/StatusColorSpacePage.qml</file>
+        <file>images/Coinbase.png</file>
+        <file>images/CoinBaseCommunityBanner.png</file>
+        <file>images/CommunityBanner1.png</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/FriendsBenefits.png</file>
+        <file>images/logo-test-image.png</file>
+        <file>images/P2PCrypto.png</file>
+        <file>images/RARI.png</file>
         <file>images/Rarible.png</file>
         <file>images/RaribleCommunityBanner.png</file>
+        <file>images/SNT.png</file>
+        <file>images/Socks.png</file>
         <file>images/Spotify.png</file>
         <file>images/SpotifyCommunityBanner.png</file>
         <file>images/SR.png</file>
+        <file>images/SRToken.png</file>
+        <file>images/StatusPunks.png</file>
         <file>images/SuperRareCommunityBanner.png</file>
+        <file>pages/StatusAccountSelectorPage.qml</file>
+        <file>pages/StatusAddressPage.qml</file>
+        <file>pages/StatusAssetSelectorPage.qml</file>
+        <file>pages/StatusCardPage.qml</file>
+        <file>pages/StatusChatCommandButtonPage.qml</file>
+        <file>pages/StatusChatInfoToolBarPage.qml</file>
+        <file>pages/StatusColorSelectorGridPage.qml</file>
+        <file>pages/StatusColorSelectorPage.qml</file>
+        <file>pages/StatusColorSpacePage.qml</file>
+        <file>pages/StatusCommunityCardPage.qml</file>
+        <file>pages/StatusCommunityTagsPage.qml</file>
+        <file>pages/StatusDialogPage.qml</file>
+        <file>pages/StatusExpandableSettingsItemPage.qml</file>
+        <file>pages/StatusImageCropPanelPage.qml</file>
+        <file>pages/StatusInputPage.qml</file>
+        <file>pages/StatusItemSelectorPage.qml</file>
+        <file>pages/StatusListPickerPage.qml</file>
+        <file>pages/StatusMacNotificationPage.qml</file>
+        <file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
+        <file>pages/StatusPinInputPage.qml</file>
+        <file>pages/StatusPopupMenuPage.qml</file>
+        <file>pages/StatusSelectPage.qml</file>
+        <file>pages/StatusTabBarButtonPage.qml</file>
+        <file>pages/StatusTabBarIconButtonPage.qml</file>
+        <file>pages/StatusTabSwitchPage.qml</file>
+        <file>pages/StatusTagSelectorPage.qml</file>
+        <file>pages/StatusToastMessagePage.qml</file>
+        <file>pages/StatusWalletColorButtonPage.qml</file>
+        <file>pages/StatusWalletColorSelectPage.qml</file>
+        <file>pages/StatusWizardStepperPage.qml</file>
+        <file>DemoApp.qml</file>
+        <file>main.qml</file>
+        <file>ThemeSwitch.qml</file>
+        <file>examples/FilteringSorting.qml</file>
         <file>images/RARI.png</file>
         <file>images/SRToken.png</file>
+        <file>demoapp/data/profile-image-1.jpeg</file>
+        <file>demoapp/data/profile-image-2.jpeg</file>
     </qresource>
 </RCC>

sandbox/sandbox.pro

@@ -1,98 +0,0 @@
-QT += quick svg
-
-CONFIG += c++11 warn_on qtquickcompiler
-CONFIG += resources_big
-
-QML_IMPORT_PATH= $$PWD/../src
-
-DEFINES += QT_DEPRECATED_WARNINGS
-
-QMAKE_LFLAGS += $$(LDFLAGS)
-
-# You can make your code fail to compile if it uses deprecated APIs.
-# In order to do so, uncomment the following line.
-#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
-
-SOURCES += \
-        handler.cpp \
-        main.cpp \
-        sandboxapp.cpp \
-        spellchecker.cpp \
-
-!macx {
-    SOURCES += statuswindow.cpp
-}
-
-TARGET = sandboxapp
-DESTDIR = $$PWD/bin
-
-DESTDIR = $$PWD/bin
-
-macx {
-    CONFIG -= app_bundle
-    OBJECTIVE_SOURCES += \
-        statuswindow_mac.mm
-
-    hunspellTarget.depends = FORCE
-    hunspellTarget.commands = brew install hunspell
-    QMAKE_EXTRA_TARGETS += hunspellTarget
-
-    exists (/usr/local/lib/libhunspell-1.7.a) {
-        LIBS += -L"/usr/local/lib" -lhunspell-1.7
-        INCLUDEPATH += /usr/local/include/hunspell
-        DEFINES += USE_HUNSPELL
-        message("hunspell exists in /usr/local/lib")
-    }
-
-    copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
-    first.depends = $(first) copydata
-    export(first.depends)
-    export(copydata.commands)
-    QMAKE_EXTRA_TARGETS += first copydata
-}
-
-ios {
-   LIBS += -framework UIKit
-
-   QMAKE_TARGET_BUNDLE_PREFIX = "im.status"
-   #QMAKE_XCODE_CODE_SIGN_IDENTITY = "iPhone Developer"
-   MY_DEVELOPMENT_TEAM.name = "STATUS HOLDINGS PTE.LTD"
-   MY_DEVELOPMENT_TEAM.value = "DTX7Z4U3YA"
-   QMAKE_MAC_XCODE_SETTINGS += MY_DEVELOPMENT_TEAM
-
-}
-
-RESOURCES += qml.qrc \
-            $$PWD/../statusq.qrc
-
-# Default rules for deployment.
-qnx: target.path = /tmp/$${TARGET}/bin
-else: unix:!android: target.path = /opt/$${TARGET}/bin
-!isEmpty(target.path): INSTALLS += target
-#OTHER_FILES += $$files($$PWD/../src/*, true)
-
-HEADERS += \
-    handler.h \
-    sandboxapp.h \
-    statuswindow.h \
-    spellchecker.h
-
-OTHER_FILES += $$files($$PWD/../*.qml, true)
-OTHER_FILES += $$files($$PWD/*.qml, true)
-
-android {
-
-DISTFILES += \
-    android/AndroidManifest.xml \
-    android/build.gradle \
-    android/gradle/wrapper/gradle-wrapper.jar \
-    android/gradle/wrapper/gradle-wrapper.properties \
-    android/gradlew \
-    android/gradlew.bat \
-    android/res/values/libs.xml
-
-    contains(ANDROID_TARGET_ARCH,armeabi-v7a) {
-        ANDROID_PACKAGE_SOURCE_DIR = \
-            $$PWD/android
-    }
-}

sandbox/sandboxapp.cpp

@@ -20,7 +20,7 @@ void SandboxApp::startEngine()
     qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");
 
 #ifdef QT_DEBUG
-    const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
+    const QUrl url = QUrl::fromLocalFile(SRC_DIR + QStringLiteral("/main.qml"));
 #else
     const QUrl url(QStringLiteral("qrc:/main.qml"));
 #endif
@@ -29,9 +29,9 @@ void SandboxApp::startEngine()
 
 
 #ifdef QT_DEBUG
-    m_engine.addImportPath(applicationDirPath() + "/../../src");
+    m_engine.addImportPath(SRC_DIR + QStringLiteral("/../src"));
 #else
-    m_engine.addImportPath(QStringLiteral("qrc:/src"));
+    m_engine.addImportPath(QStringLiteral(":/"));
 #endif
     qDebug() << m_engine.importPathList();
     QObject::connect(&m_engine, &QQmlApplicationEngine::objectCreated,

sandbox/scripts/build

@@ -1,10 +1,4 @@
 #!/bin/bash
 
-make clean
-if [[ $OSTYPE == 'darwin'* ]]
-then
-  qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-else
-  qmake sandbox.pro CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
-fi
-make
+cmake -B build
+cmake --build build

sandbox/spellchecker.cpp

@@ -9,7 +9,7 @@
 #include <QLocale>
 
 #include <QRegularExpression>
-#include <QApplication>
+#include <QGuiApplication>
 #include <QDir>
 
 SpellChecker::SpellChecker(QObject *parent)
@@ -53,8 +53,8 @@ void SpellChecker::initHunspell()
         delete m_hunspell;
     }
 
-    QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
-    QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
+    QString dictFile = QGuiApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.dic";
+    QString affixFile = QGuiApplication::applicationDirPath() + "/dictionaries/" + m_lang  + "/index.aff";
     QByteArray dictFilePathBA = dictFile.toLocal8Bit();
     QByteArray affixFilePathBA = affixFile.toLocal8Bit();
     m_hunspell = new Hunspell(affixFilePathBA.constData(),

sandbox/statuswindow.cpp

@@ -1,5 +1,33 @@
 #include "statuswindow.h"
 
+StatusWindow::StatusWindow(QQuickWindow *parent)
+    : QQuickWindow(parent)
+    , m_isFullScreen(false)
+{
+    removeTitleBar();
+
+    connect(this, &QQuickWindow::windowStateChanged, [&](Qt::WindowState windowState) {
+        if (windowState == Qt::WindowNoState) {
+            removeTitleBar();
+            m_isFullScreen = false;
+            emit isFullScreenChanged();
+        } else if (windowState == Qt::WindowFullScreen) {
+            m_isFullScreen = true;
+            emit isFullScreenChanged();
+            showTitleBar();
+        }
+    });
+}
+
+void StatusWindow::updatePosition()
+{
+    auto point = QPoint(screen()->geometry().center().x() - geometry().width() / 2,
+                        screen()->geometry().center().y() - geometry().height() / 2);
+    if (point != this->position()) {
+        this->setPosition(point);
+    }
+}
+
 void StatusWindow::toggleFullScreen()
 {
     if (m_isFullScreen) {
@@ -16,10 +44,26 @@ bool StatusWindow::isFullScreen() const
 
 void StatusWindow::removeTitleBar()
 {
-
+#ifdef Q_OS_WIN
+    removeTitleBarWin();
+#elif defined Q_OS_MACOS
+    removeTitleBarMac();
+#endif
 }
 
 void StatusWindow::showTitleBar()
 {
-
+#ifdef Q_OS_WIN
+    showTitleBarWin();
+#elif defined Q_OS_MACOS
+    showTitleBarMac();
+#endif
 }
+
+#ifdef Q_OS_WIN
+void StatusWindow::removeTitleBarWin()
+{}
+
+void StatusWindow::showTitleBarWin()
+{}
+#endif

sandbox/statuswindow.h

@@ -11,40 +11,11 @@ class StatusWindow: public QQuickWindow
     Q_PROPERTY(bool isFullScreen READ isFullScreen NOTIFY isFullScreenChanged)
 
 public:
-    struct EventCallbacks {
-        std::function<void()> onResize;
-        std::function<void()> willExitFullScreen;
-        std::function<void()> didExitFullScreen;
-    };
-
-    explicit StatusWindow(QWindow *parent = nullptr)
-        : QQuickWindow(parent),
-          m_isFullScreen(false)
-    {
-        removeTitleBar();
-
-        connect(this, &QQuickWindow::windowStateChanged, [&](Qt::WindowState windowState) {
-            if (windowState == Qt::WindowNoState) {
-                removeTitleBar();
-                m_isFullScreen = false;
-                emit isFullScreenChanged();
-            } else if (windowState == Qt::WindowFullScreen) {
-                m_isFullScreen = true;
-                emit isFullScreenChanged();
-                showTitleBar();
-            }
-        });
-
-    }
+    explicit StatusWindow(QQuickWindow *parent = nullptr);
 
     Q_INVOKABLE void toggleFullScreen();
 
-    Q_INVOKABLE void updatePosition() {
-        auto point = QPoint(screen()->geometry().center().x() - geometry().width() / 2, screen()->geometry().center().y() - geometry().height() / 2);
-        if (point != this->position()) {
-            this->setPosition(point);
-        }
-    }
+    Q_INVOKABLE void updatePosition();
 
     bool isFullScreen() const;
 
@@ -54,10 +25,15 @@ signals:
 private:
     void removeTitleBar();
     void showTitleBar();
-    void initCallbacks();
+#ifdef Q_OS_WIN
+    void removeTitleBarWin();
+    void showTitleBarWin();
+#elif defined Q_OS_MACOS
+    void removeTitleBarMac();
+    void showTitleBarMac();
+#endif
 
 private:
-    EventCallbacks m_callbacks;
     bool m_isFullScreen;
 };
 

sandbox/statuswindow_mac.mm

@@ -12,21 +12,7 @@
 #include <AppKit/NSButton.h>
 #include <AppKit/AppKit.h>
 
-void StatusWindow::toggleFullScreen()
-{
-    if (m_isFullScreen) {
-        showNormal();
-    } else {
-        showFullScreen();
-    }
-}
-
-bool StatusWindow::isFullScreen() const
-{
-    return m_isFullScreen;
-}
-
-void StatusWindow::removeTitleBar()
+void StatusWindow::removeTitleBarMac()
 {
     NSView *nsView = reinterpret_cast<NSView*>(this->winId());
     NSWindow *window = [nsView window];
@@ -39,7 +25,7 @@ void StatusWindow::removeTitleBar()
     [titleBarContainerView setHidden:YES];
 }
 
-void StatusWindow::showTitleBar()
+void StatusWindow::showTitleBarMac()
 {
     NSView *nsView = reinterpret_cast<NSView*>(this->winId());
     NSWindow *window = [nsView window];

src/StatusQ/Components/StatusBadge.qml

@@ -30,6 +30,8 @@ Rectangle {
         font.weight: Font.Medium
         color: Theme.palette.statusBadge.foregroundColor
         anchors.centerIn: parent
+        anchors.verticalCenterOffset: statusBadge.border.width/4
+        anchors.horizontalCenterOffset: statusBadge.border.width/4
         text: {
             if (statusBadge.value > 99) {
                 return qsTr("99+");

src/StatusQ/Components/StatusCard.qml

@@ -0,0 +1,498 @@
+import QtQuick 2.13
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusCard
+   \inherits Rectangle
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief This component represents a StatusCard as defined in design under https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=3161%3A171040
+
+   There is an advanced mode available where a StatusInput is provided for the user to be able to change values.
+
+   Example of how the component looks like:
+   \image status_card.png
+
+   Example of how to use it:
+   \qml
+        StatusCard {
+            id: card
+            primaryText: "Mainnet"
+            secondaryText: "75"
+            tertiaryText: "BALANCE: " + 250
+            cardIconName: "status"
+            advancedMode: false
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+
+Rectangle {
+    id: root
+
+    /*!
+       \qmlproperty string StatusCard::disabledText
+       This property is the text to be shown when the card is disabled
+    */
+    property string disabledText: ""
+    /*!
+       \qmlproperty bool StatusCard::disabled
+        This property holds if the card is disbaled
+    */
+    property bool disabled: false
+
+    /*!
+       \qmlproperty bool StatusCard::clickable
+        This property holds if the card is clickable
+    */
+    property bool clickable: true
+
+    /*!
+       \qmlproperty bool StatusCard::advancedMode
+       This property holds if advanced mode is on for the StatusCard component
+    */
+    property bool advancedMode: false
+    /*!
+       \qmlproperty int StatusCard::lockTimeout
+       This property enables user to customise the amount of time given to the user to enter a new value in
+       advanced mode before it locked for any new changes
+    */
+    property int lockTimeout: 1500
+
+    /*!
+       \qmlproperty alias StatusCard::primaryText
+       Used to set Primary text in the StatusCard
+    */
+    property alias primaryText: primaryText.text
+    /*!
+       \qmlproperty string StatusCard::secondaryText
+       Used to set Secondary text in the StatusCard
+    */
+    property string secondaryText: ""
+    /*!
+       \qmlproperty alias StatusCard::tertiaryText
+       Used to set Tertiary text in the StatusCard
+    */
+    property alias tertiaryText: tertiaryText.text
+    /*!
+       \qmlproperty alias StatusCard::advancedInputText
+       Used to set text in the StatusInput in advancedMode
+    */
+    property alias advancedInputText: advancedInput.text
+    /*!
+       \qmlproperty alias StatusCard::errorIconName
+       Used to assign an icon to the error icon in StatusCard
+    */
+    property alias errorIconName: errorIcon.icon
+    /*!
+       \qmlproperty alias StatusCard::cardIconName
+       Used to assign an icon to the card icon in StatusCard
+    */
+    property alias cardIconName: cardIcon.icon
+
+    /*!
+       \qmlproperty alias StatusCard::primaryLabel
+       This property allows user to customize the primary label in the StatusCard
+    */
+    property alias primaryLabel: primaryText
+    /*!
+       \qmlproperty alias StatusCard::secondaryLabel
+       This property allows user to customize the secondary label in the StatusCard
+    */
+    property alias secondaryLabel: secondaryLabel
+    /*!
+       \qmlproperty alias StatusCard::tertiaryLabel
+       This property allows user to customize the tertiary label in the StatusCard
+    */
+    property alias tertiaryLabel: tertiaryText
+    /*!
+       \qmlproperty alias StatusCard::advancedInput
+       This property allows user to customize the StatusInput in advanced mode
+    */
+    property alias advancedInput: advancedInput
+    /*!
+       \qmlproperty alias StatusCard::errorIcon
+       This property allows user to customize the error icon in the StatusCard
+    */
+    property alias errorIcon: errorIcon
+    /*!
+       \qmlproperty alias StatusCard::cardIcon
+       This property allows user to customize the card icon in the StatusCard
+    */
+    property alias cardIcon: cardIcon
+
+    /*!
+        \qmlsignal StatusCard::clicked
+        This signal is emitted when the card is clicked
+    */
+    signal clicked()
+
+    /*!
+       \qmlproperty string StatusCard::state
+       This property holds the states of the StatusCard.
+       Possible values are:
+        \ "default" : Normal state
+        \ "unavailable" : Unavailable state
+        \ "unpreferred": Not preffered state
+        \ "error" : Error state
+    */
+    state: "default"
+
+    implicitHeight: advancedInput.visible ? 90 : 76
+    implicitWidth: 128
+    radius: 8
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton
+        enabled: root.clickable && root.state !== "unavailable"
+        onClicked: {
+            disabled = !disabled
+            root.clicked()
+        }
+    }
+
+    RowLayout {
+        id: layout
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.leftMargin: 8
+        anchors.rightMargin: 8
+        anchors.topMargin: 8
+        ColumnLayout {
+            Layout.maximumWidth: root.width - cardIcon.width - 24
+            StatusBaseText {
+                id: primaryText
+                Layout.maximumWidth: parent.width
+                font.pixelSize: 15
+                font.weight: Font.Medium
+                elide: Text.ElideRight
+            }
+            RowLayout {
+                id: basicInput
+                StatusBaseText {
+                    id: secondaryLabel
+                    font.pixelSize: 13
+                    font.weight: Font.Medium
+                }
+                StatusIcon {
+                    id: errorIcon
+                    width: 14
+                    height: 14
+                    Layout.alignment: Qt.AlignTop
+                    icon: "tiny/warning"
+                    color: Theme.palette.pinColor1
+                }
+            }
+
+            StatusInput {
+                id: advancedInput
+                property bool locked: false
+                implicitWidth: 80
+                maximumHeight: 32
+                topPadding: 0
+                bottomPadding: 0
+                leftPadding: 8
+                rightPadding: 5
+                input.edit.font.pixelSize: 13
+                input.edit.readOnly: locked || disabled
+                input.rightComponent: Row {
+                    width: implicitWidth
+                    spacing: 4
+                    StatusFlatRoundButton {
+                        anchors.verticalCenter: parent.verticalCenter
+                        width: 12
+                        height: 12
+                        icon.name: advancedInput.locked ? "lock" : "unlock"
+                        icon.width: 12
+                        icon.height: 12
+                        icon.color: advancedInput.locked ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
+                        type: StatusFlatRoundButton.Type.Secondary
+                        enabled: !disabled
+                        onClicked: {
+                            advancedInput.locked = !advancedInput.locked
+                            waitTimer.restart()
+                        }
+                    }
+                    StatusFlatRoundButton {
+                        width: 14
+                        height: 14
+                        icon.name: "clear"
+                        icon.width: 14
+                        icon.height: 14
+                        icon.color: Theme.palette.baseColor1
+                        type: StatusFlatRoundButton.Type.Secondary
+                        onClicked: advancedInput.edit.clear()
+                    }
+                }
+                onTextChanged: {
+                    locked = false
+                    waitTimer.restart()
+                }
+                Timer {
+                    id: waitTimer
+                    interval: lockTimeout
+                    onTriggered: {
+                        if(advancedInput.edit.text)
+                            advancedInput.locked = true
+                    }
+                }
+            }
+            StatusBaseText {
+                id: tertiaryText
+                font.pixelSize: 10
+            }
+        }
+        StatusIcon {
+            id: cardIcon
+            Layout.alignment: Qt.AlignTop | Qt.AlignRight
+            Layout.preferredHeight: 32
+            Layout.preferredWidth: 32
+            mipmap: true
+        }
+    }
+
+    states: [
+        State {
+            name: "default"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent" : Theme.palette.primaryColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5: Theme.palette.primaryColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ?  0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "error"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent" : Theme.palette.primaryColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5: Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ?  0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "unpreferred"
+            PropertyChanges {
+                target: root
+                color: disabled ? Theme.palette.baseColor4 : "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: disabled ? "transparent": Theme.palette.pinColor2
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.pinColor1
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: !advancedMode && secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: disabled ? disabledText : secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: disabled ? Theme.palette.directColor5 : Theme.palette.pinColor1
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: disabled ? 0.4 : 1
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: !disabled && !advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: advancedMode
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: !advancedMode
+            }
+        },
+        State {
+            name: "unavailable"
+            PropertyChanges {
+                target: root
+                color: "transparent"
+            }
+            PropertyChanges {
+                target: root
+                border.color: "transparent"
+            }
+            PropertyChanges {
+                target: primaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: primaryText
+                visible: primaryText.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                visible: secondaryLabel.text
+            }
+            PropertyChanges {
+                target: secondaryLabel
+                text: secondaryText
+            }
+            PropertyChanges {
+                target: tertiaryText
+                color: Theme.palette.directColor5
+            }
+            PropertyChanges {
+                target: tertiaryText
+                visible: tertiaryText.text
+            }
+            PropertyChanges {
+                target: cardIcon
+                opacity: 0.4
+            }
+            PropertyChanges {
+                target: errorIcon
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                visible: false
+            }
+            PropertyChanges {
+                target: advancedInput
+                edit.color: Theme.palette.directColor1
+            }
+            PropertyChanges {
+                target: basicInput
+                visible: true
+            }
+        }
+    ]}

src/StatusQ/Components/StatusChatList.qml

@@ -40,7 +40,7 @@ Column {
         model: statusChatList.model
         delegate: Item {
             id: draggable
-            width: statusChatListItem.width
+            width: statusChatList.width
             height: statusChatListItem.height
             property alias chatListItem: statusChatListItem
 
@@ -93,6 +93,7 @@ Column {
                 StatusChatListItem {
                     id: statusChatListItem
 
+                    width: parent.width
                     opacity: dragSensor.active ? 0.0 : 1.0
                     originalOrder: model.position
                     chatId: model.itemId

src/StatusQ/Components/StatusChatListAndCategories.qml

@@ -13,6 +13,8 @@ Item {
     implicitHeight: chatListsAndCategories.height
     implicitWidth: chatListsAndCategories.width
 
+    property alias highlightItem: statusChatList.highlightItem
+
     property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
         text: qsTr("Add channel inside category")
     }

src/StatusQ/Components/StatusChatToolBar.qml

@@ -83,6 +83,7 @@ Item {
 
             StatusFlatRoundButton {
                 id: menuButton
+                objectName: "chatToolbarMoreOptionsButton"
                 width: 32
                 height: 32
                 icon.name: "more"

src/StatusQ/Components/StatusContactVerificationIcons.qml

@@ -6,7 +6,7 @@ import StatusQ.Core.Theme 0.1
 Row {
     id: root
 
-    property bool isMutualContact: false
+    property bool isContact: false
     property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
 
     property StatusIconSettings mutualConnectionIcon: StatusIconSettings {
@@ -51,10 +51,10 @@ Row {
     }
 
     spacing: 4
-    visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
+    visible: root.isContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
 
     StatusRoundIcon {
-        visible: root.isMutualContact
+        visible: root.isContact
         icon.name: root.mutualConnectionIcon.name
         icon.width: root.mutualConnectionIcon.width
         icon.height: root.mutualConnectionIcon.height

src/StatusQ/Components/StatusExpandableItem.qml

@@ -217,12 +217,12 @@ Rectangle {
         Transition {
             from: "COLLAPSED"
             to: "EXPANDED"
-            NumberAnimation { properties: "height"; duration: 200; running: visible }
+            NumberAnimation { properties: "height"; duration: 200;}
         },
         Transition {
             from: "EXPANDED"
             to: "COLLAPSED"
-            NumberAnimation { properties: "height"; duration: 200; running: visible }
+            NumberAnimation { properties: "height"; duration: 200;}
         }
     ]
 }

src/StatusQ/Components/StatusItemSelector.qml

@@ -0,0 +1,227 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.14 as QC
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+
+/*!
+   \qmltype StatusItemSelector
+   \inherits Rectangle
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It allows to add items and display them as a tag item with an image and text. It also allows to store and display logical `and` / `or` operators into the list. Inherits \l{https://doc.qt.io/qt-6/qml-qtquick-rectangle.html}{Item}.
+
+   The \c StatusItemSelector is populated with a data model. The data model is commonly a JavaScript array or a ListModel object with specific expected roles.
+
+   Example of how the component looks like:
+   \image status_item_selector.png
+
+   Example of how to use it:
+   \qml
+        StatusItemSelector {
+            icon: Style.svg("contact_verified")
+            title: qsTr("Who holds")
+            defaultItemText: qsTr("Example: 10 SNT")
+            andOperatorText: qsTr("and")
+            orOperatorText: qsTr("or")
+            popupItem: CustomPopup {
+                id: customPopup
+                onAddItem: {
+                    tokensSelector.addItem(itemText, itemImage, operator)
+                    customPopup.close()
+                }
+            }
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+Rectangle {
+    id: root
+    /*!
+       \qmlproperty string StatusItemSelector::icon
+       This property holds the icon name for the icon represented on top of the component as a title icon.
+    */
+    property string icon
+    /*!
+       \qmlproperty int StatusItemSelector::iconSize
+       This property holds the icon size for the icon represented on top of the component as a title icon.
+    */
+    property int iconSize: 18
+    /*!
+       \qmlproperty string StatusItemSelector::title
+       This property holds the titel shown on top of the component.
+    */
+    property string title
+    /*!
+       \qmlproperty string StatusItemSelector::defaultItemText
+       This property holds the default item text shown when the list of items is empty.
+    */
+    property string defaultItemText
+    /*!
+       \qmlproperty url StatusItemSelector::defaultItemImageSource
+       This property holds the default item icon shown when the list of items is empty.
+    */
+    property url defaultItemImageSource: ""
+    /*!
+       \qmlproperty QC.Popup StatusItemSelector::popupItem
+       This property holds a custom popup item to be opened near the `add` button in order to select new items.
+    */
+    property QC.Popup popupItem
+    /*!
+       \qmlproperty ListModel StatusItemSelector::itemsModel
+       This property holds the data that will be populated in the items selector.
+
+       Here an example of the model roles expected:
+       \qml
+            itemsModel: ListModel {
+            ListElement {
+                text: "Socks"
+                imageSource: "qrc:imports/assets/png/tokens/SOCKS.png"
+                operator: Utils.Operator.None
+            }
+            ListElement {
+                text: "ZRX"
+                imageSource: "qrc:imports/assets/png/tokens/ZRX.png"
+                operator: Utils.Operator.Or
+            }
+        }
+       \endqml
+    */
+    property ListModel itemsModel: ListModel { }
+    /*!
+       \qmlproperty string StatusItemSelector::andOperatorText
+       This property holds the string text representation for an `AND` logical operator.
+    */
+    property string andOperatorText: qsTr("and")
+    /*!
+       \qmlproperty string StatusItemSelector::orOperatorText
+       This property holds the string text representation for an `OR` logical operator.
+    */
+    property string orOperatorText: qsTr("or")
+    /*
+        \qmlmethod StatusItemSelector::addItem()
+        It is used to add new items into the selector control. The expected arguments are:
+        string `text`, url `imageSource` and int `operator` (None = 0, And = 1 and Or = 2)
+    */
+    function addItem(text, imageSource, operator) {
+        itemsModel.insert(itemsModel.count, { "text": text, "imageSource": imageSource.toString(), "operator": operator })
+    }
+
+    QtObject {
+        id: d
+
+        function operatorTextFormat(operator) {
+            switch(operator)
+            {
+            case Utils.Operators.And:
+                return root.andOperatorText
+            case Utils.Operators.Or:
+                return root.orOperatorText
+            case Utils.Operators.None:
+                return ""
+            }
+        }
+    }
+
+    color: Theme.palette.baseColor4
+    implicitHeight: columnLayout.implicitHeight + columnLayout.anchors.topMargin + columnLayout.anchors.bottomMargin
+    implicitWidth: 560
+    radius: 16
+    clip: true
+
+    ColumnLayout {
+        id: columnLayout
+        anchors.top: parent.top
+        anchors.topMargin: 12
+        anchors.bottomMargin: anchors.topMargin
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 16
+        spacing: 12
+        clip: true
+        RowLayout {
+            id: headerRow
+            spacing: 8
+            Image {
+                sourceSize.width: width || undefined
+                sourceSize.height: height || undefined
+                fillMode: Image.PreserveAspectFit
+                mipmap: true
+                antialiasing: true
+                width: root.iconSize
+                height: width
+                source: root.icon
+            }
+            StatusBaseText {
+                Layout.alignment: Qt.AlignVCenter
+                text: root.title
+                color: Theme.palette.directColor1
+                font.pixelSize: 17
+            }
+        }        
+        Flow {
+            id: flow
+            Layout.fillWidth: true
+            spacing: 6
+            StatusListItemTag {
+                visible: itemsModel.count === 0
+                title: root.defaultItemText
+                image.source: root.defaultItemImageSource
+                color: Theme.palette.baseColor2
+                closeButtonVisible: false
+                titleText.color: Theme.palette.baseColor1
+                titleText.font.pixelSize: 15
+            }
+            Repeater {
+                model: itemsModel
+                RowLayout {
+                    spacing: flow.spacing
+                    StatusBaseText {                        
+                        visible: model.operator !== Utils.Operators.None
+                        Layout.alignment: Qt.AlignVCenter
+                        text: d.operatorTextFormat(model.operator)
+                        color: Theme.palette.primaryColor1
+                        font.pixelSize: 17
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: {
+                                // Switch operator
+                                if(model.operator === Utils.Operators.And)
+                                    model.operator = Utils.Operators.Or
+                                else
+                                    model.operator = Utils.Operators.And
+                            }
+                        }
+                    }
+                    StatusListItemTag {
+                        title: model.text
+                        image.source: model.imageSource
+                        color: Theme.palette.primaryColor3
+                        closeButtonVisible: false
+                        titleText.color: Theme.palette.primaryColor1
+                        titleText.font.pixelSize: 15
+                        //onClicked: // TODO: Open remove or edit dialog
+                    }
+                }
+            }
+            StatusRoundButton {
+                id: addItemButton
+                implicitHeight: 32
+                implicitWidth: implicitHeight
+                height: width
+                type: StatusRoundButton.Type.Secondary
+                icon.name: "add"
+                onClicked: {
+                    root.popupItem.x = addItemButton.x + addItemButton.width + 4 * flow.spacing
+                    root.popupItem.y = addItemButton.y + addItemButton.height
+                    root.popupItem.open()
+                }
+            }
+        }
+    }
+}

src/StatusQ/Components/StatusListItem.qml

@@ -20,6 +20,7 @@ Rectangle {
     property string subTitle: ""
     property string tertiaryTitle: ""
     property string label: ""
+    property string titleTextIcon: ""
     property real leftPadding: 16
     property real rightPadding: 16
     property bool enabled: true
@@ -230,6 +231,16 @@ Rectangle {
                     }
                 }
 
+                StatusIcon {
+                    width: visible ? 12 : 0
+                    height: visible ? 12 : 0
+                    visible: !!statusListItem.titleTextIcon
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
+                    anchors.leftMargin: statusListItemTitle.contentWidth + 6
+                    icon: statusListItem.titleTextIcon
+                }
+
                 StatusToolTip {
                     id: statusListItemTitleTooltip
                     text: statusListItemTitle.text

src/StatusQ/Components/StatusListPicker.qml

@@ -238,7 +238,7 @@ Item {
         bgColor: Theme.palette.primaryColor3
         contentColor: Theme.palette.primaryColor1
         text: picker.selectedItemsText
-        textPixelSize: 13
+        font.pixelSize: 13
         type: StatusPickerButton.Type.Down
 
         onClicked: {
@@ -298,9 +298,9 @@ Item {
                 color: Theme.palette.statusPopupMenu.backgroundColor
                 z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
 
-                StatusBaseInput {
+                StatusInput {
                     id: searchInput
-                    implicitHeight: 36
+                    maximumHeight: 36
                     width: content.itemWidth - 2 * 18
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
@@ -308,7 +308,7 @@ Item {
                     bottomPadding: 0
                     placeholderText: root.placeholderSearchText
                     text: root.searchText
-                    icon.name: "search"
+                    input.icon.name: "search"
 
                     onTextChanged: {
                         d.applyFilter(text)

src/StatusQ/Components/StatusMemberListItem.qml

@@ -111,7 +111,7 @@ StatusListItem {
     // root object settings:
     title: (root.nickName === "") ? root.userName : root.nickName
     statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
-        isMutualContact: root.isContact
+        isContact: root.isContact
         trustIndicator: {
             if (root.isVerified) return StatusContactVerificationIcons.TrustedType.Verified
             else if (root.isUntrustworthy) return StatusContactVerificationIcons.TrustedType.Untrustworthy

src/StatusQ/Components/StatusMessage.qml

@@ -100,7 +100,7 @@ Rectangle {
                     displayName: messageDetails.displayName
                     secondaryName: messageDetails.secondaryName
                     tertiaryDetail: messageDetails.chatID
-                    isMutualContact: messageDetails.isMutualContact
+                    isContact: messageDetails.isContact
                     trustIndicator: messageDetails.trustIndicator
                     resendText: statusMessage.resendText
                     showResendButton: messageDetails.hasExpired && messageDetails.amISender

src/StatusQ/Components/StatusMessageDetails.qml

@@ -17,7 +17,7 @@ QtObject {
     property string messageText: ""
     property int contentType: 0
     property string messageContent: ""
-    property bool isMutualContact: false
+    property bool isContact: false
     property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
     property bool hasMention: false
     property bool isPinned: false

src/StatusQ/Components/StatusTagSelector.qml

@@ -177,7 +177,7 @@ Item {
                                        "localNickname": entry.localNickname,
                                        "isVerified": entry.isVerified,
                                        "isUntrustworthy": entry.isUntrustworthy,
-                                       "isContact": entry.isMutualContact,
+                                       "isContact": entry.isContact,
                                        "ringSpecModel": entry.ringSpecModel,
                                        "icon": entry.icon,
                                        "onlineStatus": entry.onlineStatus,
@@ -247,6 +247,7 @@ Item {
             StatusBaseText {
                 Layout.preferredWidth: 22
                 Layout.alignment: Qt.AlignVCenter
+                font.pixelSize: 15
                 color: Theme.palette.baseColor1
                 text: root.toLabelText
                 visible: (parent.width>22)

src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml

@@ -26,7 +26,7 @@ Item {
             // To-Do: Move to StatusChatInput once its moved to StatusQ
             sourceComponent: StatusInput {
                 width: editText.width
-                input.placeholderText: ""
+                placeholderText: ""
                 input.text: msgText
                 input.implicitHeight: 40
             }

src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml

@@ -19,7 +19,7 @@ Item {
     property string tertiaryDetail: ""
     property string resendText: ""
     property bool showResendButton: false
-    property bool isMutualContact: false
+    property bool isContact: false
     property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
 
     signal clicked()
@@ -55,7 +55,7 @@ Item {
             Layout.alignment: Qt.AlignBottom
         }       
         StatusContactVerificationIcons {
-            isMutualContact: statusMessageHeader.isMutualContact
+            isContact: statusMessageHeader.isContact
             trustIndicator: statusMessageHeader.trustIndicator
         }
         StatusBaseText {

src/StatusQ/Components/qmldir

@@ -37,3 +37,5 @@ StatusImageCropPanel 0.1 StatusImageCropPanel.qml
 StatusColorSpace 0.0 StatusColorSpace.qml
 StatusCommunityCard 0.1 StatusCommunityCard.qml
 StatusCommunityTags 0.1 StatusCommunityTags.qml
+StatusItemSelector 0.1 StatusItemSelector.qml
+StatusCard 0.1 StatusCard.qml

src/StatusQ/Controls/StatusActivityCenterButton.qml

@@ -42,20 +42,10 @@ StatusFlatRoundButton {
 
     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
-        }
+        anchors.centerIn: parent
+        anchors.verticalCenterOffset: -(icon.height/2.5)
+        anchors.horizontalCenterOffset: (width/2.5)
         border.width: 2
         border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
     }

src/StatusQ/Controls/StatusAssetSelector.qml

@@ -1,146 +0,0 @@
-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.Core.Utils 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-Item {
-    id: root
-    property var assets
-    property var selectedAsset
-    property string defaultToken: ""
-    property var tokenAssetSourceFn: function (symbol) {
-        return ""
-    }
-    // Define this in the usage to get balance in currency selected by user
-    property var getCurrencyBalanceString: function (currencyBalance) { return "" }
-    implicitWidth: 86
-    implicitHeight: 32
-
-    function resetInternal() {
-        assets = null
-        selectedAsset = null
-    }
-
-    onSelectedAssetChanged: {
-        if (selectedAsset && selectedAsset.symbol) {
-            iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
-            selectedTextField.text = selectedAsset.symbol.toUpperCase()
-        }
-    }
-
-    StatusSelect {
-        id: select
-        width: parent.width
-        bgColor: "transparent"
-        bgColorHover: Theme.palette.directColor8
-        model: root.assets
-        caretRightMargin: 0
-        select.radius: 6
-        select.height: root.height
-        selectMenu.width: 342
-        selectedItemComponent: Item {
-            anchors.fill: parent
-            StatusRoundedImage {
-                id: iconImg
-                anchors.left: parent.left
-                anchors.leftMargin: 4
-                width: 24
-                height: 24
-                anchors.verticalCenter: parent.verticalCenter
-                image.onStatusChanged: {
-                    if (iconImg.image.status === Image.Error) {
-                        iconImg.image.source = defaultToken
-                    }
-                }
-            }
-            StatusBaseText {
-                id: selectedTextField
-                anchors.left: iconImg.right
-                anchors.leftMargin: 4
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
-                verticalAlignment: Text.AlignVCenter
-                color: Theme.palette.directColor1
-            }
-        }
-        selectMenu.delegate: menuItem
-    }
-
-    Component {
-        id: menuItem
-        MenuItem {
-            id: itemContainer
-            property bool isFirstItem: index === 0
-            property bool isLastItem: index === assets.rowCount() - 1
-
-            width: parent.width
-            height: 72
-            StatusRoundedImage {
-                id: iconImg
-                anchors.left: parent.left
-                anchors.leftMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
-                image.onStatusChanged: {
-                    if (iconImg.image.status === Image.Error) {
-                        iconImg.image.source = defaultToken
-                    }
-                }
-            }
-            Column {
-                anchors.left: iconImg.right
-                anchors.leftMargin: 12
-                anchors.verticalCenter: parent.verticalCenter
-
-                StatusBaseText {
-                    text: symbol.toUpperCase()
-                    font.pixelSize: 15
-                    color: Theme.palette.directColor1
-                }
-
-                StatusBaseText {
-                    text: name
-                    color: Theme.palette.baseColor1
-                    font.pixelSize: 15
-                }
-            }
-            Column {
-                anchors.right: parent.right
-                anchors.rightMargin: 16
-                anchors.verticalCenter: parent.verticalCenter
-                StatusBaseText {
-                    font.pixelSize: 15
-                    text: parseFloat(totalBalance).toFixed(4) + " " + symbol
-                }
-                StatusBaseText {
-                    font.pixelSize: 15
-                    anchors.right: parent.right
-                    text: getCurrencyBalanceString(totalCurrencyBalance)
-                    color: Theme.palette.baseColor1
-                }
-            }
-            background: Rectangle {
-                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
-            }
-            Component.onCompleted: {
-                if(index === 0 ) {
-                    selectedAsset = { name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance}
-                }
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: itemContainer
-                onClicked: {
-                    selectedAsset = {name: name, symbol: symbol, totalBalance: totalBalance, totalCurrencyBalance: totalCurrencyBalance}
-                    select.selectMenu.close()
-                }
-            }
-        }
-    }
-}

src/StatusQ/Controls/StatusBanner.qml

@@ -37,7 +37,7 @@ Column {
     */
     property string statusText
     /*!
-       \qmlproperty string StatusBanner::type
+       \qmlproperty int StatusBanner::type
        This property holds type of banner. Possible values are:
        \qml
         enum Type {
@@ -50,12 +50,12 @@ Column {
     */
     property int type: StatusBanner.Type.Info
     /*!
-       \qmlproperty string StatusBanner::textPixels
+       \qmlproperty int StatusBanner::textPixels
        This property holds the pixels size of the text inside the banner.
     */
     property int textPixels: 15
     /*!
-       \qmlproperty string StatusBanner::statusBannerHeight
+       \qmlproperty int StatusBanner::statusBannerHeight
        This property holds the height of the banner rectangle.
     */
     property int statusBannerHeight: 38
@@ -94,9 +94,12 @@ Column {
         StatusBaseText {
             id: statusTxt
             anchors.fill: parent
+            anchors.leftMargin: 8
+            anchors.rightMargin: 8
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
             font.pixelSize: statusBanner.textPixels
+            elide: Text.ElideRight
             text: statusBanner.statusText
             color: d.fontColor
         }

src/StatusQ/Controls/StatusBaseButton.qml

@@ -80,9 +80,9 @@ Rectangle {
 
 
     /// Implementation
+    implicitWidth: layout.width + statusBaseButton.leftPadding + statusBaseButton.rightPadding
+    implicitHeight: layout.height + statusBaseButton.topPadding + statusBaseButton.bottomPadding
 
-    implicitWidth: sensor.width
-    implicitHeight: sensor.height
 
     radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
 
@@ -100,9 +100,7 @@ Rectangle {
 
     MouseArea {
         id: sensor
-        width: layout.width + statusBaseButton.leftPadding + statusBaseButton.rightPadding
-        height: layout.height + statusBaseButton.topPadding + statusBaseButton.bottomPadding
-
+        anchors.fill: parent
         cursorShape: loading ? Qt.ArrowCursor
                              : Qt.PointingHandCursor
 
@@ -110,8 +108,7 @@ Rectangle {
         enabled: !loading && statusBaseButton.enabled
 
         Loader {
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.centerIn: parent
             active: loading
             sourceComponent: StatusLoadingIndicator {
                 color: d.textColor
@@ -120,9 +117,7 @@ Rectangle {
 
         Row {
             id: layout
-            anchors.left: parent.left
-            anchors.leftMargin: statusBaseButton.leftPadding
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.centerIn: parent
             spacing: 4
             StatusIcon {
                 id: statusIcon

src/StatusQ/Controls/StatusBaseInput.qml

@@ -174,17 +174,6 @@ Item {
         This property sets the tab key navigation item.
     */
     property var tabNavItem: null
-
-    /*!
-        \qmlproperty real StatusBaseInput::minimumHeight
-        This property sets the minimum height.
-    */
-    property real minimumHeight: 0
-    /*!
-        \qmlproperty alias StatusBaseInput::maximumHeight
-        This property sets the maximum height.
-    */
-    property real maximumHeight: 0
     /*!
         \qmlproperty int StatusBaseInput::maximumLength
         This property sets the text's maximum length.
@@ -277,20 +266,10 @@ Item {
     */
     signal editClicked()
 
-    implicitWidth: 448
-    implicitHeight: multiline ? Math.min(Math.max(
-                                    (edit.implicitHeight + topPadding + bottomPadding),
-                                    44, root.minimumHeight), root.maximumHeight) : 44
 
     Rectangle {
         id: background
-        width: parent.width
-        height: maximumHeight != 0 ? Math.min(
-                                         minimumHeight
-                                         != 0 ? Math.max(
-                                                    root.implicitHeight,
-                                                    minimumHeight) : root.implicitHeight,
-                                         maximumHeight) : parent.height
+        anchors.fill: parent
         color: root.showBackground ? Theme.palette.baseColor2
                                               : "transparent"
         radius: 8
@@ -324,10 +303,10 @@ Item {
                 root.editClicked()
             }
             RowLayout {
-                spacing: 10
+                spacing: 2
                 anchors {
                     fill: parent
-                    leftMargin: root.leftPadding
+                    leftMargin: root.leftPadding ? root.leftPadding : leftComponentLoader.item ? 6 : 16
                     rightMargin: root.rightPadding
                 }
 
@@ -346,12 +325,10 @@ Item {
 
                 Flickable {
                     id: flick
-
-                    Layout.fillHeight: true
                     Layout.fillWidth: true
+                    Layout.fillHeight: true
                     Layout.topMargin: root.topPadding
                     Layout.bottomMargin: root.bottomPadding
-
                     contentWidth: edit.paintedWidth
                     contentHeight: edit.paintedHeight
                     boundsBehavior: Flickable.StopAtBounds
@@ -374,10 +351,8 @@ Item {
 
                     TextEdit {
                         id: edit
-
                         property string previousText: text
                         property var keyEvent
-
                         width: flick.width
                         height: flick.height
                         verticalAlignment: TextEdit.AlignVCenter
@@ -387,9 +362,8 @@ Item {
                         focus: true
                         font.pixelSize: 15
                         font.family: Theme.palette.baseFont.name
-                        color: Theme.palette.directColor1
+                        color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1 
                         wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
-
                         Keys.onReturnPressed: event.accepted = !multiline && !acceptReturn
                         Keys.onEnterPressed: event.accepted = !multiline && !acceptReturn
                         Keys.forwardTo: [root]
@@ -399,7 +373,6 @@ Item {
                             edit.keyEvent = event.key
                             root.keyPressed(event);
                         }
-
                         onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
                         onActiveFocusChanged: if (root.pristine) root.pristine = false
                         onTextChanged: {

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -114,6 +114,7 @@ Rectangle {
 
             StatusBaseText {
                 id: chatName
+                objectName: "statusChatInfoButtonNameText"
 
                 anchors.left: statusIcon.visible ? statusIcon.right : parent.left
                 anchors.leftMargin: statusIcon.visible ? 1 : 0

src/StatusQ/Controls/StatusCheckBox.qml

@@ -32,6 +32,7 @@ CheckBox {
 
     contentItem: StatusBaseText {
         text: statusCheckBox.text
+        font.pixelSize: statusCheckBox.font.pixelSize
         opacity: enabled ? 1.0 : 0.3
         verticalAlignment: Text.AlignVCenter
         wrapMode: Text.WordWrap

src/StatusQ/Controls/StatusDropdown.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import QtQuick.Controls 2.14 as QC
+
+import StatusQ.Core.Theme 0.1
+
+/*!
+   \qmltype StatusDropdown
+   \inherits Popup
+   \inqmlmodule StatusQ.Popups
+   \since StatusQ.Popups 0.1
+   \brief The StatusDropdown provides a template for creating dropdowns.
+
+   NOTE: Each consumer needs to set the x and y postion of the dropdown.
+
+   Example of how to use it:
+
+   \qml
+        StatusDropdown {
+            x: root.x + margins
+            y: root.y + margins
+            contentItem: ColumnLayout {
+                ...
+            }
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+QC.Popup {
+    dim: false
+    closePolicy: QC.Popup.CloseOnPressOutside | QC.Popup.CloseOnEscape
+    background: Rectangle {
+       id: border
+       color: Theme.palette.statusPopupMenu.backgroundColor
+       radius: 8
+       border.color: "transparent"
+       layer.enabled: true
+       layer.effect: DropShadow {
+           source: border
+           horizontalOffset: 0
+           verticalOffset: 4
+           radius: 12
+           samples: 25
+           spread: 0.2
+           color: Theme.palette.dropShadow
+       }
+    }
+}

src/StatusQ/Controls/StatusFloatingButtonsSelector.qml

@@ -99,6 +99,7 @@ Row {
         height: button.height
         radius: 8
         visible: floatingButtons.model.count > 3
+        color: Theme.palette.statusAppLayout.backgroundColor
         StatusButton {
             id: button
             implicitHeight: 32

src/StatusQ/Controls/StatusIconTextButton.qml

@@ -0,0 +1,83 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+   \qmltype StatusIconTextButton
+   \inherits Item
+   \inqmlmodule StatusQ.Controls
+   \since StatusQ.Controls 0.1
+   \brief It presents an icon + plain text button. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-abstractbutton.html}{AbstractButton}.
+
+   The \c StatusIconTextButton is a clickable icon + text control.
+
+   NOTE: It only contemplates `display` property as `AbstractButton.TextBesideIcon`.
+
+   Example of how the component looks like:
+   \image status_icon_text_button.png
+   Example of how to use it:
+   \qml
+        StatusIconTextButton {
+            spacing: 0
+            statusIcon: "next"
+            iconRotation: 180
+            icon.width: 12
+            icon.height: 12
+            text: qsTr("Back")
+            onClicked: console.log("Clicked!")
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+AbstractButton {
+    id: root
+
+    /*!
+       \qmlproperty string StatusIconTextButton::statusIcon
+       This property holds the status icon name.
+    */
+    property string statusIcon
+    /*!
+       \qmlproperty int StatusIconTextButton::iconRotation
+       This property holds the status icon rotation.
+    */
+    property int iconRotation
+    /*!
+       \qmlproperty color StatusIconTextButton::textColor
+       This property holds the text color.
+    */
+    property color textColor: Theme.palette.primaryColor1
+
+    icon.color: Theme.palette.primaryColor1
+    icon.height: 24
+    icon.width: 24
+    font.pixelSize: 13
+    contentItem: RowLayout {
+         spacing: root.spacing
+         StatusIcon {
+             Layout.alignment: Qt.AlignVCenter
+             icon: root.statusIcon
+             color: root.icon.color
+             width: root.icon.width
+             height: root.icon.height
+             rotation: root.iconRotation
+         }
+         StatusBaseText {
+             Layout.alignment: Qt.AlignVCenter
+             text: root.text
+             color: root.textColor
+             font.pixelSize: root.font.pixelSize
+         }
+     }
+
+    // TODO: To remove when switch to Qt 5.15
+    MouseArea {
+      anchors.fill: parent
+      cursorShape: Qt.PointingHandCursor
+      acceptedButtons: Qt.NoButton
+      hoverEnabled: true
+    }
+}

src/StatusQ/Controls/StatusInput.qml

@@ -22,7 +22,7 @@ import StatusQ.Controls.Validators 0.1
             charLimit: 30
             errorMessage: qsTr("Input doesn't match validator")
             input.clearable: true
-            input.placeholderText: qsTr("Placeholder text")
+            placeholderText: qsTr("Placeholder text")
         }
    \endqml
 
@@ -58,6 +58,21 @@ Item {
         This property holds a reference to the TextEdit's text property.
     */
     property alias text: statusBaseInput.text
+    /*!
+        \qmlproperty alias StatusInput::placeholderText
+        This property holds a reference to the TextEdit's placeholderText property.
+    */
+    property alias placeholderText: statusBaseInput.placeholderText
+    /*!
+        \qmlproperty alias StatusInput::font
+        This property holds a reference to the TextEdit's font property.
+    */
+    property alias font: statusBaseInput.font
+    /*!
+        \qmlproperty alias StatusInput::multiline
+        This property indicates whether the StatusBaseInput allows multiline text. Default value is false.
+    */
+    property alias multiline: statusBaseInput.multiline
 
     /*!
        \qmlproperty errorMessageCmp
@@ -96,15 +111,35 @@ Item {
     */
     property string errorMessage: ""
     /*!
-        \qmlproperty real StatusBaseInput::leftPadding
+        \qmlproperty alias StatusInput::leftPadding
         This property sets the leftComponentLoader's left padding.
     */
-    property real leftPadding: 16
+    property alias leftPadding: statusBaseInput.leftPadding
     /*!
-        \qmlproperty real StatusBaseInput::rightPadding
+        \qmlproperty alias StatusInput::rightPadding
         This property sets the right padding.
     */
-    property real rightPadding: 16
+    property alias rightPadding: statusBaseInput.rightPadding
+    /*!
+        \qmlproperty alias StatusInput::topPadding
+        This property sets the top padding.
+    */
+    property alias topPadding: statusBaseInput.topPadding
+    /*!
+        \qmlproperty alias StatusInput::bottomPadding
+        This property sets the bottom padding.
+    */
+    property alias bottomPadding: statusBaseInput.bottomPadding
+    /*!
+        \qmlproperty real StatusInput::minimumHeight
+        This property sets the minimum height.
+    */
+    property real minimumHeight: 0
+    /*!
+        \qmlproperty alias StatusInput::maximumHeight
+        This property sets the maximum height.
+    */
+    property real maximumHeight: 0
     /*!
         \qmlproperty list StatusBaseInput::validators
         This property sets the list of validators to be considered.
@@ -305,24 +340,32 @@ Item {
         root.valid = Object.values(asyncErrors).length == 0
     }
 
-    implicitWidth: inputLayout.implicitWidth
-    implicitHeight: inputLayout.implicitHeight
-    height: implicitHeight
-    width: implicitWidth
+    QtObject {
+        id: internal
+        readonly property int inputHeight: statusBaseInput.multiline || (root.minimumHeight > 0) || (root.maximumHeight > 0)?
+                                  Math.min(Math.max(statusBaseInput.topPadding + statusBaseInput.bottomPadding, 44,
+                                                    root.minimumHeight), root.maximumHeight) : 44
+    }
 
-    Component.onCompleted: validate()
+    implicitWidth: 448
+    implicitHeight: (internal.inputHeight + topRow.height + errorMessage.height + (2*inputLayout.spacing))
+
+    Component.onCompleted: {
+        validate()
+    }
 
     ColumnLayout {
         id: inputLayout
-
         anchors.fill: parent
-
+        spacing: ((topRow.height > 0) || (errorMessage.height > 0)) ? 8 : 0
         RowLayout {
+            id: topRow
             Layout.fillWidth: true
-
+            Layout.preferredHeight: (!!root.label || !!root.secondaryLabel || root.charLimit > 0) ? 22 :0
             StatusBaseText {
                 id: label
-                visible: !!root.label
+                visible: !!text
+                height: visible ? contentHeight : 0
                 elide: Text.ElideRight
                 text: root.label
                 font.pixelSize: 15
@@ -335,6 +378,7 @@ Item {
                 elide: Text.ElideRight
                 text: root.secondaryLabel
                 font.pixelSize: 15
+                height: visible ? contentHeight : 0
                 color: Theme.palette.baseColor1
             }
 
@@ -344,9 +388,9 @@ Item {
 
             StatusBaseText {
                 id: charLimitLabel
-
+                Layout.alignment: Qt.AlignVCenter
+                height: visible ? contentHeight : 0
                 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
@@ -355,13 +399,10 @@ Item {
 
         StatusBaseInput {
             id: statusBaseInput
-
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
+            implicitWidth: parent.width
+            implicitHeight: internal.inputHeight
             maximumLength: root.charLimit
             onTextChanged: root.validate()
-
             Keys.forwardTo: [root]
             onIconClicked: root.iconClicked()
             onKeyPressed: {
@@ -374,13 +415,11 @@ Item {
 
         StatusBaseText {
             id: errorMessage
-
             visible: !!text && !statusBaseInput.valid
-
+            height: visible ? contentHeight : 0
             font.pixelSize: 12
             color: Theme.palette.dangerColor1
-
-            horizontalAlignment: Text.AlignRight
+            Layout.alignment: Qt.AlignVCenter
             wrapMode: Text.WordWrap
         }
     }

src/StatusQ/Controls/StatusPickerButton.qml

@@ -1,87 +1,83 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
 
 Button {
     id: root
-    implicitWidth: 446
-    implicitHeight: 44
 
     property color bgColor: Theme.palette.baseColor2
     property color contentColor: Theme.palette.baseColor1
     property var type: StatusPickerButton.Type.Next
-    property int lateralMargins: 16
-    property int textPixelSize: 15
+
+    /*!
+       \qmlproperty StatusImageSettings StatusPickerButton::image
+       This property holds the image settings information.
+    */
+    property StatusImageSettings image: StatusImageSettings {
+        width: 20
+        height: 20
+        isIdenticon: false
+    }
 
     enum Type {
         Next,
         Down
     }
 
-    background: Item {
-        anchors.fill: parent
-        Rectangle {
-            id: background
-            anchors.fill: parent
-            radius: 8
-            color: root.bgColor
-        }   
+    implicitWidth: 446
+    implicitHeight: 44
+    font.pixelSize: 15
+    horizontalPadding: 16
+    spacing: 4
+    icon.width: 16
+    icon.height: 16
+    background:Rectangle {
+        radius: 8
+        color: root.bgColor
     }
-
-    contentItem: Item {
-        anchors.fill: parent
-        state: root.type === StatusPickerButton.Type.Next ? "NEXT" : "DOWN"
-
+    contentItem: RowLayout {
+        clip: true
+        spacing: root.spacing
+        StatusIcon {
+            icon: "tiny/chevron-down"
+            visible: root.type === StatusPickerButton.Type.Down
+            Layout.alignment: Qt.AlignVCenter
+            color: !Qt.colorEqual(root.contentColor, Theme.palette.baseColor1) ? root.contentColor : Theme.palette.directColor1
+            width: root.icon.width
+            height: root.icon.height
+        }
+        StatusRoundedImage {
+            visible: root.image.source.toString() !== ""
+            Layout.alignment: Qt.AlignVCenter
+            Layout.preferredWidth: root.image.width
+            Layout.preferredHeight: root.image.height
+            image.source: root.image.source
+        }
         StatusBaseText {
-            id: textLabel
-            anchors.verticalCenter: parent.verticalCenter
-            width: parent.width - icon.width - anchors.rightMargin - anchors.leftMargin - icon.anchors.rightMargin - icon.anchors.leftMargin
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: root.textPixelSize
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+            font.pixelSize: root.font.pixelSize
             color: root.contentColor
             text: root.text
             clip: true
             elide: Text.ElideRight
         }
-
         StatusIcon {
-            id: icon
-            anchors.verticalCenter: parent.verticalCenter
+            icon: "tiny/chevron-right"
+            visible: root.type === StatusPickerButton.Type.Next
+            Layout.alignment: Qt.AlignVCenter
             color: !Qt.colorEqual(root.contentColor, Theme.palette.baseColor1) ? root.contentColor : Theme.palette.directColor1
+            width: root.icon.width
+            height: root.icon.height
         }
-
-        states: [
-            State {
-                name: "NEXT"
-                PropertyChanges {target: icon; icon: "next"}
-                PropertyChanges {target: icon; anchors.left: undefined }
-                PropertyChanges {target: icon; anchors.right: parent.right }
-                PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: textLabel; anchors.left: parent.left }
-                PropertyChanges {target: textLabel; anchors.right: undefined }
-                PropertyChanges {target: textLabel; anchors.rightMargin: undefined }
-                PropertyChanges {target: textLabel; anchors.leftMargin: root.lateralMargins }
-            },
-            State {
-                name: "DOWN"
-                PropertyChanges {target: icon; icon: "chevron-down"}
-                PropertyChanges {target: icon; anchors.left: parent.left }
-                PropertyChanges {target: icon; anchors.right: undefined }
-                PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins }
-                PropertyChanges {target: textLabel; anchors.left: icon.right }
-                PropertyChanges {target: textLabel; anchors.right: undefined }
-                PropertyChanges {target: textLabel; anchors.rightMargin: root.lateralMargins / 2 }
-                PropertyChanges {target: textLabel; anchors.leftMargin: undefined }
-            }
-        ]
     }
 
+    // TODO: To remove when switch to Qt 5.15
     MouseArea {
-        id: mouseArea
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor

src/StatusQ/Controls/StatusPinInput.qml

@@ -110,7 +110,7 @@ Item {
 
         Initializes pin input bringing it to its initial state.
 
-        It is directly called in Component.onCompleted slot and can be called whenever you need resetting it.
+        It can be called whenever you need resetting it.
     */
     function statesInitialization() {
         d.currentPinIndex = 0
@@ -118,12 +118,41 @@ Item {
         for (var i = 1; i < root.pinLen; i++) {
             repeater.itemAt(i).innerState = "EMPTY"
         }
+        inputText.text = ""
     }
 
-    width: (root.circleDiameter + root.circleSpacing) * root.pinLen
-    height: root.circleDiameter
+    /*
+        \qmlmethod StatusPinInput::forceFocus()
 
-    Component.onCompleted: { statesInitialization() }
+        Convenient method to force active focus in case it gets stolen by any other component.
+    */
+    function forceFocus() {
+        inputText.forceActiveFocus()
+        d.activateBlink()
+    }
+
+    /*
+        \qmlmethod StatusPinInput::setPin(pin)
+
+        Sets the pin input, setting state of each digit to "FILLED".
+
+        It won't do anything if pin length is different from the set `pinLen`.
+    */
+    function setPin(pin) {
+        if(pin.length !== root.pinLen)
+            return
+
+        d.currentPinIndex = root.pinLen - 1
+        inputText.text = pin
+
+        for (var i = 0; i < root.pinLen; i++) {
+            const currItem = repeater.itemAt(i)
+            currItem.innerState = "FILLED"
+        }
+    }
+
+    width: (root.circleDiameter + root.circleSpacing) * root.pinLen - root.circleSpacing
+    height: root.circleDiameter
 
     // Pin input data management object:
     TextInput {
@@ -147,7 +176,8 @@ Item {
             else if (text.length <= (d.currentPinIndex + 1)) {
                 if(d.currentPinIndex < root.pinLen)
                     repeater.itemAt(d.currentPinIndex).innerState = "EMPTY"
-                d.currentPinIndex--
+                if(d.currentPinIndex > 0)
+                    d.currentPinIndex--
                 repeater.itemAt(d.currentPinIndex).innerState = "NEXT"
             }
 
@@ -212,8 +242,8 @@ Item {
                          id: blinkingAnimation
                          loops: Animation.Infinite
                          running: visible
-                         NumberAnimation { target: inner; property: "opacity"; to: 0; duration: 800; running: visible }
-                         NumberAnimation { target: inner; property: "opacity"; to: 1; duration: 800; running: visible }
+                         NumberAnimation { target: inner; property: "opacity"; to: 0; duration: 800;}
+                         NumberAnimation { target: inner; property: "opacity"; to: 1; duration: 800;}
                      }
                  }
             }
@@ -226,10 +256,7 @@ Item {
         hoverEnabled: true
 
         // MouseArea behavior:
-        onClicked:  {
-            inputText.forceActiveFocus()
-            d.activateBlink ()
-        }
+        onClicked: forceFocus()
         onContainsMouseChanged: { if(containsMouse) { cursorShape = Qt.PointingHandCursor } }
     }
 }

src/StatusQ/Controls/StatusScrollBar.qml

@@ -0,0 +1,56 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14 as T
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+/*!
+   \qmltype StatusScrollView
+   \inherits ScrollBar
+   \inqmlmodule StatusQ.Core
+   \since StatusQ.Core 0.1
+   \brief Status custom ScrollBar component.
+
+   The \c StatusScrollBar can be used just like a plain ScrollBar. Function resolveVisibility can be used for decoration Flickable based components.
+
+   Example of how to use it:
+
+   \qml
+        ScrollBar.horizontal: StatusScrollBar {
+            policy: ScrollBar.AsNeeded
+            visible: resolveVisibility(policy, root.width, root.contentWidth)
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+T.ScrollBar {
+    id: root
+
+    function resolveVisibility(policy, length, availableLength) {
+        switch (policy) {
+        case T.ScrollBar.AsNeeded:
+            return availableLength > length;
+        case T.ScrollBar.AlwaysOn:
+            return true;
+        case T.ScrollBar.AlwaysOff:
+        default:
+            return false;
+        }
+    }
+
+    // TODO: add this sizes to Theme
+    implicitWidth: 14
+    implicitHeight: 14
+
+    background: null
+
+    contentItem: Rectangle {
+        color: Theme.palette.primaryColor2
+        opacity: enabled && (root.hovered || root.active) ? 1.0 : 0.0
+        radius: Math.min(width, height) / 2
+
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+    }
+}
+

src/StatusQ/Controls/StatusSelect.qml

@@ -21,6 +21,7 @@ Item {
     property alias selectMenu: selectMenu
     property color bgColorHover: bgColor
     property alias selectedItemComponent: selectedItemContainer.children
+    property bool caretVisible: true
     property int caretRightMargin: 16
     property alias select: inputRectangle
     property int menuAlignment: StatusSelect.MenuAlignment.Right
@@ -72,6 +73,7 @@ Item {
             height: 24
             icon: "chevron-down"
             color: Theme.palette.baseColor1
+            visible: caretVisible
         }
     }
 

src/StatusQ/Controls/StatusSwitch.qml

@@ -52,7 +52,7 @@ Switch {
 
             transitions: Transition {
                 reversible: true
-                NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: 120; running: visible }
+                NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: 120}
             }
         }
     }

src/StatusQ/Controls/StatusSwitchTabButton.qml

@@ -8,6 +8,8 @@ import StatusQ.Core.Theme 0.1
 TabButton {
     id: statusSwitchTabButton
 
+    property int fontPixelSize: 15
+
     contentItem: Item {
         height: 36
         MouseArea {
@@ -26,7 +28,7 @@ TabButton {
                     Theme.palette.statusSwitchTab.selectedTextColor :
                     Theme.palette.statusSwitchTab.textColor
                 font.weight: Font.Medium
-                font.pixelSize: 15
+                font.pixelSize: statusSwitchTabButton.fontPixelSize
                 horizontalAlignment: Text.AlignHCenter
                 anchors.centerIn: parent
             }

src/StatusQ/Controls/Validators/StatusFloatValidator.qml

@@ -27,10 +27,10 @@ StatusValidator {
     id: root
 
     /*!
-       \qmlproperty string StatusFloatValidator::bottom
-       This property holds the validator's lowest acceptable value. By default, this property's value is derived from the lowest signed float available (typically -2147483647).
+       \qmlproperty real StatusFloatValidator::bottom
+       This property holds the validator's lowest acceptable value. By default, this property's value is derived from the lowest signed float available.
     */
-    property real bottom
+    property real bottom: qmlDoubleValidator.bottom
 
     /*!
        \qmlproperty string StatusFloatValidator::locale
@@ -39,10 +39,16 @@ StatusValidator {
     property string locale
 
     /*!
-       \qmlproperty string StatusFloatValidator::top
-       This property holds the validator's highest acceptable value. By default, this property's value is derived from the highest float available (typically 2147483647).
+       \qmlproperty real StatusFloatValidator::top
+       This property holds the validator's highest acceptable value. By default, this property's value is derived from the highest float available.
     */
-    property real top
+    property real top: qmlDoubleValidator.top
+
+    /*!
+       \qmlproperty DoubleValidator StatusFloatValidator::qmlDoubleValidator
+       This property holds a default qml double validator instance.
+    */
+    readonly property DoubleValidator qmlDoubleValidator: DoubleValidator {}
 
     name: "floatValidator"
     errorMessage: qsTr("Please enter a valid numeric value.")

src/StatusQ/Controls/Validators/StatusMinLengthValidator.qml

@@ -13,7 +13,7 @@ StatusValidator {
     }
 
     validate: function (value) {
-        return value.length >= minLength ? true : {
+        return value.length >= minLength && value.trim().length > 0 ? true : {
             min: minLength,
             actual: value.length
         }

src/StatusQ/Controls/qmldir

@@ -1,7 +1,6 @@
 module StatusQ.Controls
 
 StatusAccountSelector 0.1 StatusAccountSelector.qml
-StatusAssetSelector 0.1 StatusAssetSelector.qml
 StatusBanner 0.1 StatusBanner.qml
 StatusChatCommandButton 0.1 StatusChatCommandButton.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml
@@ -45,3 +44,6 @@ StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml
 StatusImageCrop 0.1 StatusImageCrop.qml
 StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
 StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
+StatusDropdown 0.1 StatusDropdown.qml
+StatusIconTextButton 0.1 StatusIconTextButton.qml
+StatusScrollBar 0.1 StatusScrollBar.qml

src/StatusQ/Core/StatusFontSettings.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.13
+
+QtObject {
+    id: statusFontSettings
+
+    property bool bold: false
+    property bool italic: false
+    property int pixelSize: 13
+}
+

src/StatusQ/Core/StatusGridView.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusGridView
+   \inherits GridView
+   \inqmlmodule StatusQ.Core
+   \since StatusQ.Core 0.1
+   \brief GridView wrapper with tuned scrolling and custom scrollbars.
+
+   The \c StatusGridView can be used just like a plain GridView.
+
+   Example of how to use it:
+
+   \qml
+        StatusGridView {
+            id: GridView
+            anchors.fill: parent
+            model: someModel
+
+            delegate: DelegateItem {
+                ...
+            }
+        }
+   \endqml
+
+   For a Grid of components available see StatusQ.
+*/
+GridView {
+    id: root
+
+    clip: true
+    boundsBehavior: Flickable.StopAtBounds
+    maximumFlickVelocity: 2000
+    synchronousDrag: true
+}

src/StatusQ/Core/StatusIcon.qml

@@ -8,23 +8,20 @@ Image {
     id: statusIcon
     width: 24
     height: 24
-    sourceSize.width: width
-    sourceSize.height: height
+    // SVGs must have sourceSize, PNGs not; otherwise blurry
+    sourceSize: !!icon ? Qt.size(width, height) : undefined
     fillMode: Image.PreserveAspectFit
 
-    antialiasing: true
-    mipmap: true
-
     onIconChanged: {
         if (icon !== "") {
             source = "../../assets/img/icons/" + icon + ".svg";
+            objectName = icon + "-icon"
         }
     }
 
-    layer.mipmap: true
     layer.smooth: true
     layer.format: ShaderEffectSource.RGBA
-    layer.enabled:!Qt.colorEqual(statusIcon.color, "transparent")
+    layer.enabled: !Qt.colorEqual(statusIcon.color, "transparent")
     layer.effect: ColorOverlay {
         color: statusIcon.color
     }

src/StatusQ/Core/StatusIconBackgroundSettings.qml

@@ -3,9 +3,8 @@ import QtQuick 2.13
 QtObject {
     id: statusIconBackgroundSettings
 
-    property color color
+    property color color: "transparent"
     property real width
     property real height
     property int radius
 }
-

src/StatusQ/Core/StatusListView.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusListView
+   \inherits ListView
+   \inqmlmodule StatusQ.Core
+   \since StatusQ.Core 0.1
+   \brief ListView wrapper with tuned scrolling and custom scrollbars.
+
+   The \c StatusListView can be used just like a plain ListView.
+
+   Example of how to use it:
+
+   \qml
+        StatusListView {
+            id: listView
+            anchors.fill: parent
+            model: someModel
+
+            delegate: DelegateItem {
+                ...
+            }
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+ListView {
+    id: root
+
+    clip: true
+    boundsBehavior: Flickable.StopAtBounds
+    maximumFlickVelocity: 2000
+    synchronousDrag: true
+
+    ScrollBar.horizontal: StatusScrollBar {
+        policy: ScrollBar.AsNeeded
+        visible: resolveVisibility(policy, root.width, root.contentWidth)
+    }
+
+    ScrollBar.vertical: StatusScrollBar {
+        policy: ScrollBar.AsNeeded
+        visible: resolveVisibility(policy, root.height, root.contentHeight)
+    }
+}

src/StatusQ/Core/StatusScrollView.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusScrollView
+   \inherits Flickable
+   \inqmlmodule StatusQ.Core
+   \since StatusQ.Core 0.1
+   \brief ScrollView component based on a Flickable with padding and scrollbars.
+
+   The \c StatusScrollView can be used just like a plain ScrollView but without ability to decarate existing Flickable.
+
+   Example of how to use it:
+
+   \qml
+        StatusScrollView {
+            id: scrollView
+            anchors.fill: parent
+
+            ColumnView {
+                width: scrollView.availableWidth
+            }
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+Flickable {
+    id: root
+
+    // NOTE: this should be replaced with margins since Qt 5.15
+    property int padding: 8
+    property int topPadding: padding
+    property int bottomPadding: padding
+    property int leftPadding: padding
+    property int rightPadding: padding
+
+    property Item background: null
+
+    readonly property int availableWidth: width - leftPadding - rightPadding
+    readonly property int availableHeight: height - topPadding - bottomPadding
+
+    onBackgroundChanged: {
+        if (background) {
+            background.anchors.fill = root;
+        }
+    }
+
+    // NOTE: in Qt6 clip true will be default
+    clip: true
+    topMargin: topPadding
+    bottomMargin: bottomPadding
+    leftMargin: leftPadding
+    rightMargin: rightPadding
+    contentWidth: contentItem.childrenRect.width
+    contentHeight: contentItem.childrenRect.height
+    implicitWidth: contentWidth + leftPadding + rightPadding
+    implicitHeight: contentHeight + topPadding + bottomPadding
+    boundsBehavior: Flickable.StopAtBounds
+    maximumFlickVelocity: 2000
+    synchronousDrag: true
+
+    ScrollBar.horizontal: StatusScrollBar {
+        policy: ScrollBar.AsNeeded
+        visible: resolveVisibility(policy, root.width, root.contentWidth)
+    }
+
+    ScrollBar.vertical: StatusScrollBar {
+        policy: ScrollBar.AsNeeded
+        visible: resolveVisibility(policy, root.height, root.contentHeight)
+    }
+}

src/StatusQ/Core/Utils/Utils.qml

@@ -3,6 +3,14 @@ pragma Singleton
 import QtQuick 2.13
 
 QtObject {
+
+    // Logical operators
+    enum Operators {
+        None,
+        And,
+        Or
+    }
+
     function getAbsolutePosition(node) {
         var returnPos = {};
         returnPos.x = 0;
@@ -75,6 +83,73 @@ QtObject {
     function isHtml(text) {
         return (/<\/?[a-z][\s\S]*>/i.test(text))
     }
+
+    // function to draw arrow
+    function drawArrow(context, fromx, fromy, tox, toy, color) {
+        const dx = tox - fromx;
+        const dy = toy - fromy;
+        const headlen = 10; // length of head in pixels
+        const angle = 0
+        const radius = 5
+
+        context.strokeStyle = color ? color : '#627EEA'
+
+        // straight line
+        if(dy === 0) {
+            // draw semicircle
+            context.beginPath();
+            context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false);
+            context.stroke();
+
+            // draw straightline
+            // context.setLineDash([5]);
+            context.beginPath();
+            context.moveTo(fromx + radius, fromy);
+            context.lineTo(tox, toy);
+            context.stroke();
+
+            // draw arrow
+            context.beginPath();
+            context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
+            context.lineTo(tox, toy );
+            context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
+            context.stroke();
+        }
+        // connecting between 2 different y positions
+        else {
+
+            // draw semicircle
+            context.beginPath();
+            context.arc(fromx, fromy, radius, 3*Math.PI/2, Math.PI/2,false);
+            context.stroke();
+
+            // draw bent line
+            context.beginPath();
+            context.moveTo(fromx + radius, fromy);
+            context.lineTo(fromx + dx / 2, fromy);
+            context.lineTo(fromx + dx / 2, toy - radius);
+            context.stroke();
+
+            // draw connecting circle
+            context.beginPath();
+            context.moveTo(fromx + dx / 2 + radius, toy);
+            context.arc(fromx + dx / 2, toy, radius, 0, 2*Math.PI,false);
+            context.stroke();
+
+            // draw straightline
+            context.beginPath();
+            context.moveTo(fromx + dx / 2 + radius, toy);
+            context.lineTo(tox, toy);
+            context.stroke();
+
+            // draw arrow
+            context.beginPath();
+            context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
+            context.lineTo(tox, toy );
+            context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
+            context.stroke();
+        }
+    }
 }
 
 

src/StatusQ/Core/qmldir

@@ -1,6 +1,7 @@
 module StatusQ.Core
 
 StatusBaseText 0.1 StatusBaseText.qml
+StatusFontSettings 0.1 StatusFontSettings.qml
 StatusIcon 0.1 StatusIcon.qml
 StatusIconSettings 0.1 StatusIconSettings.qml
 StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
@@ -10,3 +11,6 @@ StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 StatusTooltipSettings 0.1 StatusTooltipSettings.qml
 StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml
 StatusAnimatedStack 0.1 StatusAnimatedStack.qml
+StatusScrollView 0.1 StatusScrollView.qml
+StatusListView 0.1 StatusListView.qml
+StatusGridView 0.1 StatusGridView.qml

src/StatusQ/Popups/StatusColorDialog.qml

@@ -33,7 +33,7 @@ StatusModal {
     width: 680
     implicitHeight: 820
 
-    contentItem: ScrollView {
+    contentItem: StatusScrollView {
         id: scroll
         width: parent.width
         topPadding: 30

src/StatusQ/Popups/StatusMenuItem.qml

@@ -22,4 +22,6 @@ Action {
         background: StatusIconBackgroundSettings {}
         color: "transparent"
     }
+
+    property StatusFontSettings fontSettings: StatusFontSettings {}
 }

src/StatusQ/Popups/StatusMenuItemDelegate.qml

@@ -10,6 +10,7 @@ MenuItem {
     id: statusPopupMenuItem
     implicitWidth: parent ? parent.width : 0
     implicitHeight: action.enabled ? 38 : 0
+    objectName: action.objectName
 
     property int subMenuIndex
     property var statusPopupMenu: null
@@ -53,14 +54,13 @@ MenuItem {
                 color: {
                     let c = !!statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.color ||
                             !!statusPopupMenuItem.action && statusPopupMenuItem.action.icon.color
-                      
+
                     if (!Qt.colorEqual(c, "transparent")) {
                         return c
                     }
                     switch (statusPopupMenuItem.action.type) {
                         case StatusMenuItem.Type.Danger:
                           return Theme.palette.dangerColor1
-                          break;
                         default:
                           return Theme.palette.primaryColor1
                     }
@@ -153,12 +153,13 @@ MenuItem {
             switch (statusPopupMenuItem.action.type) {
                 case StatusMenuItem.Type.Danger:
                   return Theme.palette.dangerColor1
-                  break;
                 default:
                   return Theme.palette.directColor1
             }
         }
-        font.pixelSize: 13
+        font.pixelSize: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.pixelSize : 13
+        font.bold: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.bold : false
+        font.italic: !!statusPopupMenuItem.action.fontSettings ? statusPopupMenuItem.action.fontSettings.italic : false
         elide: Text.ElideRight
         visible: statusPopupMenuItem.action.enabled
     }

src/StatusQ/Popups/StatusSearchLocationMenu.qml

@@ -1,4 +1,5 @@
-import QtQuick 2.12
+import QtQuick 2.14
+import QtQml 2.14
 import QtQuick.Controls 2.14
 
 import StatusQ.Core 0.1
@@ -57,13 +58,13 @@ StatusPopupMenu {
                 }
             }
         }
-        onObjectRemoved: { root.removeItem(root.takeItem(index+2)); }
+        onObjectRemoved: { root.removeItem(root.takeItem(index + numDefaultItems)); }
     }
 
     Component {
         id: subMenuItemComponent
         StatusSearchPopupMenuItem {
-            onClicked: {
+            onTriggered: {
                 searchPopup.resetSearchSelection()
                 searchPopup.setSearchSelection(text,
                                                "",

src/StatusQ/Popups/StatusSearchPopup.qml

@@ -12,7 +12,7 @@ import StatusQ.Popups 0.1
 StatusModal {
     id: root
     width: 700
-    height: (!!searchResults && (searchResults.count >= 0) && (searchText !== "")) ? (((searchResults.count < 5)) ? 560 : 770) : 142 //970
+    height: !!searchResults && searchResults.count >= 0 && searchText !== "" ? 560 : 122
     anchors.centerIn: parent
     showHeader: false
     showFooter: false
@@ -68,8 +68,6 @@ StatusModal {
     }
 
     contentItem: Item {
-        width: parent.width
-        height: root.height
         property alias searchText: inputText.text
         property alias searchInput: inputText
 
@@ -91,21 +89,24 @@ StatusModal {
                     color: Theme.palette.baseColor1
                 }
 
-                StatusBaseInput {
+                StatusInput {
                     id: inputText
                     anchors.left: statusIcon.right
-                    anchors.leftMargin: 15
                     anchors.right: parent.right
-                    anchors.rightMargin: 8
                     anchors.verticalCenter: parent.verticalCenter
                     focus: true
                     font.pixelSize: 28
+                    leftPadding: 5
                     topPadding: 5 //smaller padding to handle bigger font
                     bottomPadding: 5
-                    clearable: true
-                    showBackground: false
-                    font.family: Theme.palette.baseFont.name
-                    color: Theme.palette.directColor1
+                    input.clearable: true
+                    input.showBackground: false
+                    input.placeholder {
+                        text: qsTr("Search")
+                        font.pixelSize: 28
+                        color: Theme.palette.directColor9
+                    }
+
                     Keys.onPressed: {
                         if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
                             event.accepted = true
@@ -113,7 +114,7 @@ StatusModal {
                 }
             }
             StatusMenuSeparator {
-                topPadding: 0
+                verticalPadding: 0
                 Layout.fillWidth: true
             }
             Item {
@@ -126,7 +127,6 @@ StatusModal {
                         root.searchSelectionButton = searchOptionsMenuButton
                     }
 
-                    property string prefixText: qsTr("In")
                     property string primaryText: ""
                     property string secondaryText: ""
                     property StatusIconSettings iconSettings: StatusIconSettings {
@@ -175,8 +175,9 @@ StatusModal {
                                 spacing: 2
                                 StatusBaseText {
                                     color: Theme.palette.directColor1
-                                    text: searchOptionsMenuButton.prefixText + ": "
+                                    text: qsTr("In: ")
                                     font.weight: Font.Medium
+                                    font.pixelSize: 15
                                 }
 
                                 StatusSmartIdenticon {
@@ -193,35 +194,39 @@ StatusModal {
                                 }
 
                                 StatusBaseText {
+                                    Layout.alignment: Qt.AlignVCenter
                                     color: Theme.palette.directColor1
                                     text: searchOptionsMenuButton.primaryText
                                     font.weight: Font.Medium
+                                    font.pixelSize: 13
                                 }
                                 StatusIcon {
-                                    Layout.preferredWidth: 14.5
-                                    Layout.preferredHeight: 17.5
+                                    Layout.preferredWidth: 16
+                                    Layout.preferredHeight: 16
                                     Layout.alignment: Qt.AlignVCenter
                                     visible: !!searchOptionsMenuButton.secondaryText
                                     color: Theme.palette.baseColor1
                                     icon: "next"
                                 }
                                 StatusIcon {
-                                    Layout.preferredWidth: 17.5
-                                    Layout.preferredHeight: 17.5
+                                    Layout.preferredWidth: 16
+                                    Layout.preferredHeight: 16
                                     Layout.alignment: Qt.AlignVCenter
                                     visible: !!searchOptionsMenuButton.secondaryText
                                     color: Theme.palette.directColor1
                                     icon: "channel"
                                 }
                                 StatusBaseText {
+                                    Layout.alignment: Qt.AlignVCenter
                                     color: Theme.palette.directColor1
                                     visible: !!searchOptionsMenuButton.secondaryText
                                     text: searchOptionsMenuButton.secondaryText
                                     font.weight: Font.Medium
+                                    font.pixelSize: 13
                                 }
                                 StatusIcon {
-                                    Layout.preferredWidth: 17.5
-                                    Layout.preferredHeight: 14.5
+                                    Layout.preferredWidth: 16
+                                    Layout.preferredHeight: 16
                                     Layout.alignment: Qt.AlignVCenter
                                     icon: "chevron-down"
                                     color: Theme.palette.directColor1
@@ -243,13 +248,14 @@ StatusModal {
                     type: StatusFlatRoundButton.Type.Secondary
                     icon.name: "close"
                     icon.color: Theme.palette.directColor1
-                    icon.width: 20
-                    icon.height: 20
                     onClicked: { root.resetSearchSelection(); }
                 }
             }
-
-            StatusMenuSeparator { Layout.fillWidth: true; visible: (root.height > 142) }
+            StatusMenuSeparator {
+                verticalPadding: 0
+                Layout.fillWidth: true;
+                visible: root.height > 142
+            }
             Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true

src/StatusQ/Popups/StatusStackModal.qml

@@ -16,7 +16,7 @@ StatusModal {
     property alias replaceItem: replaceLoader.sourceComponent
     property alias subHeaderItem: subHeaderLoader.sourceComponent
 
-    readonly property int itemsCount: stackLayout.children.length
+    readonly property int itemsCount: stackLayout.count
     readonly property var currentItem: stackLayout.currentItem
 
     property Item nextButton: StatusButton {
@@ -44,6 +44,7 @@ StatusModal {
         }
     }
 
+    Component.onCompleted: updateRightButtons()
     onCurrentIndexChanged: updateRightButtons()
     onReplaceItemChanged: updateRightButtons()
 
@@ -59,10 +60,15 @@ StatusModal {
         rotation: 180
         visible: replaceItem || stackLayout.currentIndex > 0
         onClicked: {
-            if (replaceItem)
-                replaceItem = null;
-            else
-                stackLayout.currentIndex--;
+            if (replaceItem) {
+              replaceItem = null;
+            } else {
+              let prevAction = stackLayout.currentItem.prevAction
+              stackLayout.currentIndex--;
+              if (typeof(prevAction) == "function") {
+                prevAction()
+              }
+            }
         }
     }
 
@@ -106,4 +112,4 @@ StatusModal {
             }
         }
     }
-}
+}

src/assets/img/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.02006 4.35355C7.21532 4.15829 7.21532 3.84171 7.02006 3.64645C6.82479 3.45118 6.50821 3.45118 6.31295 3.64645L2.31295 7.64645C2.11769 7.84171 2.11769 8.15829 2.31295 8.35355L6.31295 12.3536C6.50821 12.5488 6.82479 12.5488 7.02006 12.3536C7.21532 12.1583 7.21532 11.8417 7.02006 11.6464L4.44265 9.06904C4.23266 8.85905 4.38138 8.5 4.67835 8.5H13.3332C13.6093 8.5 13.8332 8.27614 13.8332 8C13.8332 7.72386 13.6093 7.5 13.3332 7.5H4.67835C4.38138 7.5 4.23266 7.14095 4.44265 6.93096L7.02006 4.35355Z" fill="#4360DF"/>
+</svg>

src/assets/img/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5.5V3.75641C2 1.97326 3.32593 0.5 5 0.5C6.67407 0.5 8 1.97326 8 3.75641V5.5H8.5C9.32843 5.5 10 6.17157 10 7V10C10 10.8284 9.32843 11.5 8.5 11.5H1.5C0.671573 11.5 0 10.8284 0 10V7C0 6.17157 0.671573 5.5 1.5 5.5H2ZM3.38462 5.5H6.61538V3.75641C6.61538 2.70733 5.87494 1.88462 5 1.88462C4.12506 1.88462 3.38462 2.70733 3.38462 3.75641V5.5Z" fill="#4360DF"/>
+</svg>

src/assets/img/icons/pencil-outline.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.79136 1.16389C10.6321 0.323137 11.9952 0.323139 12.836 1.16389C13.6767 2.00463 13.6767 3.36776 12.836 4.2085L5.0015 12.043C4.71671 12.3278 4.36405 12.5353 3.97679 12.6459L1.1717 13.4474C0.996792 13.4973 0.808544 13.4486 0.67992 13.3199C0.551295 13.1913 0.502515 13.0031 0.552487 12.8282L1.35394 10.0231C1.46459 9.63581 1.6721 9.28314 1.95688 8.99836L9.79136 1.16389ZM12.1276 1.87224C11.6781 1.4227 10.9492 1.4227 10.4997 1.87224L2.66524 9.70671C2.50083 9.87111 2.38103 10.0747 2.31716 10.2983C2.07579 11.143 2.85682 11.9241 3.70159 11.6827C3.92515 11.6188 4.12874 11.499 4.29315 11.3346L12.1276 3.50015C12.5772 3.05062 12.5772 2.32177 12.1276 1.87224Z" fill="#4360DF"/>
+</svg>