fix(Components/StatusTagSelector): Updates and fixes in the component

Moved `remove` function below remove contact signal also removed online status badge from CreateChatView Fixed as well name tags to be adapting on parent's width and scrolling the list to the end when this is bigger than the available width. Switcehd to use nameCountLimit property where needed
2022-02-21 23:37:46 +02:00
10430 changed files with 4396 additions and 70944 deletions
@@ -1,17 +0,0 @@
-### Checklist
-
- [ ] follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
-  - the scope should be the component's name e.g: `feat(StatusListItem): ... `
-  - when adding new components, the scope is the module e.g: `feat(StatusQ.Controls): ...`
- [ ] add documentation if necessary (new component, new feature)
- [ ] update sandbox app
-  - in case of new component, add new component page
-  - in case of new features, add variation to existing component page
-  - nice to have: add it to the demo application as well
- [ ] test changes in both light and dark theme?
- [ ] is this a breaking change?
-    - [ ] use the dedicated `BREAKING CHANGE` commit message section
-    - [ ] resolve breaking changes in [status-desktop](https://github.com/status-im/status-desktop)
-        - [ ] (pre-merge) adapt code to breaking changes
-        - [ ] (post-merge) update StatusQ submodule pointer
- [ ] test changes in [status-desktop](https://github.com/status-im/status-desktop)
@@ -13,7 +13,4 @@ Makefile
 *_qml.cpp
 *_qmlcache.qrc
 sandbox/qmlcache_loader.cpp
-doc/html
-CMakeLists.txt.user
-.vscode
-build/
+doc/html
@@ -1,3 +0,0 @@
-[submodule "vendor/SortFilterProxyModel"]
-	path = vendor/SortFilterProxyModel
-	url = https://github.com/status-im/SortFilterProxyModel.git
@@ -1,32 +1,3 @@
-<a name=""></a>
-##  0.25.0 (2022-03-07)
-
-
-#### Bug Fixes
-
-* **@StatusListItem:**  fix left padding ([f574e390](f574e390))
-* **StatusListItem:**  add propagateTitleClicks property to StatusListItem ([8495fae8](8495fae8))
-* **StatusQ.Popups:**  removed overlay setting (#557) ([665141f8](665141f8))
-* **StatusTagSelector:**  Updates and fixes in the component ([07a5dc09](07a5dc09))
-* **build:**  fix linux build ([9d06aae1](9d06aae1), closes [#413](413))
-* **sandbox:**  Fix results popup component position ([cdf51fef](cdf51fef))
-
-#### Features
-
-* **@StatusListItem:**  add option for tags ([381150a7](381150a7))
-* **StatusChatList:**  Highlight chat item at creation time ([9e6fbe95](9e6fbe95))
-* **StatusChatListItem:**  enable assigning emoji to chat item ([5fac8774](5fac8774))
-* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
-* **StatusQ:**  Moving docs outside sandbox ([825999b1](825999b1))
-* **StatusQ.Core:**  add new arrow-left icon ([e9f20be1](e9f20be1))
-* **StatusSmartIdenticon:**  Add support for color rings in StatusSmartIdenticon (#553) ([3b86d13a](3b86d13a), closes [#517](517))
-
-#### Breaking Changes
-
-* **StatusContactVerificationIcons:**  Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
-
-
-
 <a name=""></a>
 ##  0.24.0 (2022-02-14)

@@ -1,23 +0,0 @@
-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)
@@ -2,9 +2,6 @@

 > An emerging reusable QML UI component library for Status applications.

-:bangbang: | This repository is set to read-only. `StatusQ` library is further developed in the [status-desktop](https://github.com/status-im/status-desktop) repository.
-:---: | :---
-
 ## Usage

 StatusQ introduces a module namespace that semantically groups components so they can be easily imported.
@@ -39,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 `CMakeLists.txt` file using Qt Creator.
+The easiest way to run the sandbox application is to simply open the provided `sandbox.pro` file using Qt Creator.

 ### Using command line interface

@@ -47,13 +44,14 @@ To run the sandbox from within a command line interface, run the following comma

 ```
 $ git clone https://github.com/status-im/StatusQ
-$ cd StatusQ
-$ git submodule update --init
-$ ./sandbox/scripts/build
+$ cd StatusQ/sandbox
+$ ./scripts/build
 ```

 Once that is done, the sandbox can be started with the generated executable:

 ```
-$ ./build/sandbox/Sandbox
+$ ./bin/sandbox
 ```
+
+More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)
@@ -20,10 +20,8 @@
       \li \l{StatusChatToolBar}
       \li \l{StatusContactRequestsIndicatorListItem}
       \li \l{StatusDescriptionListItem}
-       \li \l{StatusItemSelector}
       \li \l{StatusLetterIdenticon}
       \li \l{StatusListItem}
-       \li \l{StatusListPicker}
       \li \l{StatusListSectionHeadline}
       \li \l{StatusLoadingIndicator}
       \li \l{StatusMemberListItem}
@@ -39,6 +37,5 @@
       \li \l{StatusMessageDetails}
       \li \l{StatusTagSelector}
       \li \l{StatusToastMessage}
-       \li \l{StatusWizardStepper}
   \endlist
 */
@@ -15,7 +15,6 @@
       \li \l{StatusChatInfoButton}
       \li \l{StatusChatListCategoryItemButton}
       \li \l{StatusColorSelector}
-       \li \l{StatusDropdown}
       \li \l{StatusIconTabButton}
       \li \l{StatusNavBarTabButton}
       \li \l{StatusTabBarIconButton}
@@ -31,10 +30,8 @@
       \li \l{StatusSlider}
       \li \l{StatusSelect}
       \li \l{StatusBaseInput}
-       \li \l{StatusIconTextButton}
       \li \l{StatusIdenticonRing}
       \li \l{StatusInput}
-       \li \l{StatusItemPicker}
       \li \l{StatusPickerButton}
       \li \l{StatusPinInput}
       \li \l{StatusProgressBar}
@@ -46,6 +43,5 @@
       \li \l{StatusWalletColorSelect}
       \li \l{StatusRegularExpressionValidator}
       \li \l{StatusIntValidator}
-       \li \l{StatusSeedPhraseInput}
   \endlist
 */
@@ -12,7 +12,6 @@
   \list
       \li \l{StatusAppNavBarFilterModel}
       \li \l{StatusBaseText}
-       \li \l{StatusFontSettings}
       \li \l{StatusIcon}
       \li \l{StatusIconBackgroundSettings}
       \li \l{StatusIconSettings}
@@ -1,38 +0,0 @@
-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()
@@ -25,11 +25,10 @@ Rectangle {
        id: appSectionType
        readonly property int chat: 0
        readonly property int community: 1
-        readonly property int communitiesPortal: 2
-        readonly property int wallet: 3
+        readonly property int wallet: 2
        readonly property int browser: 3
-        readonly property int nodeManagement: 5
-        readonly property int profileSettings: 6
+        readonly property int nodeManagement: 4
+        readonly property int profileSettings: 5
        readonly property int apiDocumentation: 100
        readonly property int demoApp: 101
    }
@@ -63,7 +62,7 @@ Rectangle {
        visible: titleStyle === "windows"
    }

-    StatusMainLayout {
+    StatusAppLayout {
        id: statusAppLayout
        anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
        anchors.left: demoApp.left
@@ -73,7 +72,7 @@ Rectangle {
        height: demoApp.height - demoApp.border.width * 2
        width: demoApp.width - demoApp.border.width * 2

-        leftPanel: StatusAppNavBar {
+        appNavBar: StatusAppNavBar {

            id: navBar

@@ -119,11 +118,6 @@ Rectangle {
                        appView.sourceComponent = statusAppChatView
                        demoApp.setActiveItem(model.sectionId)
                    }
-                    else if(model.sectionType === appSectionType.communitiesPortal)
-                    {
-                        appView.sourceComponent = statusCommunityPortalView
-                        demoApp.setActiveItem(model.sectionId)
-                    }
                    else if(model.sectionType === appSectionType.profileSettings)
                    {
                        appView.sourceComponent = statusAppProfileSettingsView
@@ -174,14 +168,16 @@ Rectangle {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
            }
        }

-        rightPanel: Loader {
+        appView: Loader {
            id: appView
            anchors.fill: parent
            sourceComponent: statusAppChatView
@@ -197,7 +193,7 @@ Rectangle {
        id: statusAppCommunityView
        StatusAppCommunityView {
            communityDetailModalTitle: demoCommunityDetailModal.header.title
-            communityDetailModalImage: demoCommunityDetailModal.header.asset.name
+            communityDetailModalImage: demoCommunityDetailModal.header.image.source
            onChatInfoButtonClicked: {
                demoCommunityDetailModal.open();
            }
@@ -209,11 +205,6 @@ Rectangle {
        StatusAppProfileSettingsView { }
    }

-    Component {
-        id: statusCommunityPortalView
-        StatusAppCommunitiesPortalView { }
-    }
-
    DemoContactRequestsModal {
        id: demoContactRequestsModal
        anchors.centerIn: parent
@@ -7,8 +7,6 @@ Item {
    id: themeSwitchWrapper
    signal checkedChanged()

-    property alias lightThemeEnabled: switchControl.checked
-
    width: themeSwitch.width
    height: themeSwitch.height

@@ -28,7 +26,6 @@ Item {
            }

            StatusSwitch {
-                id: switchControl
                onCheckedChanged: themeSwitchWrapper.checkedChanged()

                StatusToolTip {
@@ -3,10 +3,9 @@ import QtQuick.Layouts 1.14
 import QtQuick.Dialogs 1.3

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

+
 Column {
    spacing: 10
    Grid {
@@ -17,43 +16,6 @@ Column {

        horizontalItemAlignment: Grid.AlignHCenter

-        // Primary
-        StatusButton {
-            text: "Button"
-            type: StatusBaseButton.Type.Primary
-
-            StatusToolTip {
-                visible: parent.hovered
-                text: "Look I'm a tooltip on a button!"
-            }
-            onClicked: console.warn("Primary button clicked")
-            onPressed: console.warn("Primary button pressed")
-        }
-
-        StatusButton {
-            text: "Button"
-            enabled: false
-            type: StatusBaseButton.Type.Primary
-
-            StatusToolTip {
-                visible: parent.hovered
-                text: "Tooltip on a disabled button, should not be visible!"
-            }
-            onClicked: console.warn("Primary disabled button clicked, this should not happen !!!")
-        }
-
-        StatusButton {
-            text: "Button"
-            loading: true
-            type: StatusBaseButton.Type.Primary
-
-            StatusToolTip {
-                visible: parent.hovered
-                text: "Look I'm a tooltip on a loading button!"
-            }
-            onClicked: console.warn("Primary loading button clicked, this should not happen !!!")
-        }
-
        // Large
        StatusButton {
            text: "Button"
@@ -69,25 +31,6 @@ Column {
            loading: true
        }

-        // Large + Icon
-        StatusButton {
-            text: "Button"
-            icon.name: "info"
-        }
-
-        StatusButton {
-            text: "Button"
-            enabled: false
-            icon.name: "info"
-        }
-
-        StatusButton {
-            text: "Button"
-            loading: true
-            icon.name: "info"
-        }
-
-        // Danger
        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
@@ -105,7 +48,6 @@ Column {
            type: StatusBaseButton.Type.Danger
        }

-        // Flat
        StatusFlatButton {
            text: "Button"
        }
@@ -113,6 +55,7 @@ Column {
        StatusFlatButton {
            text: "Button"
            enabled: false
+
        }

        StatusFlatButton {
@@ -120,7 +63,6 @@ Column {
            loading: true
        }

-        // Flat + Danger
        StatusFlatButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
@@ -156,7 +98,6 @@ Column {
            loading: true
        }

-        // Small + danger
        StatusButton {
            text: "Button"
            type: StatusBaseButton.Type.Danger
@@ -177,7 +118,6 @@ Column {
            loading: true
        }

-        // Flat + small
        StatusFlatButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
@@ -233,25 +173,6 @@ Column {
            loading: true
        }

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

        StatusFlatRoundButton {
@@ -386,47 +307,12 @@ Column {
        onClicked: {
            colorDialog.open();
        }
-    }
-
-    StatusColorDialog {
-        id: colorDialog
-        anchors.centerIn: parent
-        property bool colorSelected: false
-        onAccepted: {
-            colorSelected = true;
-        }
-    }
-
-    // Button with emoji
-    StatusButton {
-        text: "Button with Emoji"
-        asset.emoji: "🖼️️"
-    }
-
-    StatusButton {
-        width: parent.width
-        text: "wide"
-    }
-
-    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
+        ColorDialog {
+            id: colorDialog
+            property bool colorSelected: false
+            onAccepted: {
+                colorSelected = true;
+            }
        }
    }
 }
@@ -32,14 +32,14 @@ GridLayout {
    }

    StatusIconTabButton {
-        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    }

    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://httpstat.us/404"
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
        name: "Pascal"
    }

@@ -86,7 +86,7 @@ GridLayout {
    }

    StatusNavBarTabButton {
-        icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        tooltip.text: "Some Community"
    }

@@ -113,33 +113,18 @@ GridLayout {
    StatusSwitch {

    }
-    StatusSwitch {
-        text: "Switch with text"
-    }

    StatusRadioButton {
-        text: "Radio button 1"
-        checked: true
-    }
-    StatusRadioButton {
-        text: "Radio button 2 (clicking on this text will uncheck the above)"
-    }
-    StatusRadioButton {
-        LayoutMirroring.enabled : true
-        text: "Radio button 3 (forced right-to-left)"
+        text: "i'm radio!"
    }

    StatusCheckBox {}
-    StatusCheckBox { checkState: Qt.Checked}
-    StatusCheckBox { text: "Check me on left side"}
-    StatusCheckBox { text: "Check me on right side"; leftSide: false}

    StatusChatInfoButton {
        title: "Iuri Matias"
        subTitle: "Contact"
-        asset.color: Theme.palette.miscColor7
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        icon.color: Theme.palette.miscColor7
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        type: StatusChatInfoButton.Type.OneToOneChat
        muted: true
        pinnedMessagesCount: 1
@@ -150,13 +135,12 @@ GridLayout {
        implicitHeight: 48
        StatusChatInfoButton {
            title: "Iuri Matias elided"
-            subTitle: "Very long subtitle should elide as well"
-            asset.color: Theme.palette.miscColor7
-            asset.isImage: true
-            asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            type: StatusChatInfoButton.Type.OneToOneChat
            muted: true
-            pinnedMessagesCount: 10
+            pinnedMessagesCount: 1
            width: 100
        }
    }
@@ -167,9 +151,8 @@ GridLayout {
        StatusChatInfoButton {
            title: "Iuri Matias big not elided"
            subTitle: "Contact"
-            asset.color: Theme.palette.miscColor7
-            asset.isImage: true
-            asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            type: StatusChatInfoButton.Type.OneToOneChat
            muted: true
            pinnedMessagesCount: 1
@@ -181,32 +164,24 @@ GridLayout {
        title: "group"
        subTitle: "Group Chat"
        pinnedMessagesCount: 1
-        asset.color: Theme.palette.miscColor7
+        icon.color: Theme.palette.miscColor7
        type: StatusChatInfoButton.Type.GroupChat
    }

    StatusChatInfoButton {
        title: "public-chat"
        subTitle: "Public Chat"
-        asset.color: Theme.palette.miscColor7
+        icon.color: Theme.palette.miscColor7
        type: StatusChatInfoButton.Type.PublicChat
    }

    StatusChatInfoButton {
        title: "community-channel"
        subTitle: "Community Chat"
-        asset.color: Theme.palette.miscColor7
+        icon.color: Theme.palette.miscColor7
        type: StatusChatInfoButton.Type.CommunityChat
    }

-    StatusChatInfoButton {
-        title: "community-channel"
-        subTitle: "Some very long description text to see how the whole item wraps or elides"
-        asset.color: Theme.palette.miscColor7
-        type: StatusChatInfoButton.Type.CommunityChat
-        pinnedMessagesCount: 3
-    }
-
    StatusSlider {
        width: 360
        from: 0
@@ -214,16 +189,6 @@ GridLayout {
        value: 40
    }

-    StatusLabeledSlider {
-        width: 360
-        model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
-    }
-
-    StatusLabeledSlider {
-        width: 360
-        model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
-    }
-
    StatusBanner {
        id: banner
        width: 360
@@ -233,7 +198,7 @@ GridLayout {
    }

    StatusProgressBar {
-        id: progressBar
+        id: progressBar        
        text: "Weak"
        value: 0.5
        fillColor : Theme.palette.pinColor1
@@ -10,97 +10,31 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1

 Column {
-    spacing: 10
+    spacing: 5

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

-    StatusToolBar {
-        width: 518
-
-        headerContent: StatusChatInfoButton {
-            width: Math.min(implicitWidth, parent.width)
-            title: "Muted public chat"
-            subTitle: "Some subtitle"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.PublicChat
-            pinnedMessagesCount: 1
-            muted: true
-        }
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
+        chatInfoButton.pinnedMessagesCount: 1
+        chatInfoButton.muted: true
    }

-
-    StatusToolBar {
+    StatusChatToolBar {
+        chatInfoButton.title: "Some contact"        
+        chatInfoButton.subTitle: "Contact"
+        chatInfoButton.icon.color: Theme.palette.miscColor7
+        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        chatInfoButton.pinnedMessagesCount: 1
        notificationCount: 1
-        width: 518
-
-        headerContent: StatusChatInfoButton {
-            width: Math.min(implicitWidth, parent.width)
-            title: "Group chat"
-            subTitle: "Group chat subtitle"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.GroupChat
-            pinnedMessagesCount: 1
-        }
-    }
-
-    StatusToolBar {
-        width: 518
-
-        headerContent: StatusChatInfoButton {
-            title: "Community chat"
-            subTitle: "Some very long description text to see how the whole item wraps or ellides"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.CommunityChat
-            pinnedMessagesCount: 3
-        }
-    }
-
-    StatusToolBar {
-        headerContent: StatusChatInfoButton {
-            title: "Very long chat name"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.CommunityChat
-            pinnedMessagesCount: 1234567891
-        }
-    }
-
-    StatusToolBar {
-        notificationCount: 1
-        width: 518
-
-        StatusTagSelector {
-            namesModel: ListModel {
-                ListElement {
-                    publicId: "0x0"
-                    name: "Maria"
-                    icon: ""
-                    isIdenticon: false
-                    onlineStatus: 3
-                    isReadonly: true
-                    tagIcon: "crown"
-                }
-                ListElement {
-                    publicId: "0x1"
-                    name: "James"
-                    icon: ""
-                    isIdenticon: false
-                    onlineStatus: 1
-                    isReadonly: false
-                    tagIcon: ""
-                }
-            }
-            toLabelText: qsTr("To: ")
-            warningText: qsTr("USER LIMIT REACHED")
-        }
    }

    Row {
@@ -224,7 +158,9 @@ Column {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
@@ -307,7 +243,9 @@ Column {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
@@ -395,7 +333,9 @@ Column {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
@@ -488,11 +428,16 @@ Column {

                    StatusMenuItem {
                        text: qsTr("Leave Community")
-                        icon.name: "arrow-left"
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
                        type: StatusMenuItem.Type.Danger
                    }
                }
            }
        }
+
+
    }
 }
+
@@ -1,15 +1,14 @@
 import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQml.Models 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

-ColumnLayout {
-    spacing: 5
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5

    StatusNavigationListItem {
        title: "Menu Item"
@@ -17,18 +16,18 @@ ColumnLayout {

    StatusNavigationListItem {
        title: "Menu Item"
-        asset.name: "info"
+        icon.name: "info"
    }

    StatusNavigationListItem {
        title: "Menu Item"
-        asset.name: "info"
+        icon.name: "info"
        badge.value: 1
    }
    StatusNavigationListItem {
-        title: "Menu Item (selected) with very long text"
+        title: "Menu Item (selected)"
        selected: true
-        asset.name: "info"
+        icon.name: "info"
        badge.value: 1
    }

@@ -55,59 +54,6 @@ ColumnLayout {
        opened: true
    }

-    StatusChatListCategoryItem {
-        id: categoryItemInteractive
-        title: "Chat category interactive"
-        showActionButtons: true
-        onAddButtonClicked: testEventsList.eventTriggered("Add button clicked")
-        onMenuButtonClicked: testEventsList.eventTriggered("Menu button clicked")
-        onToggleButtonClicked: {
-            opened = !opened
-            testEventsList.eventTriggered("Toggle button clicked")
-        }
-        onTitleClicked: {
-            testEventsList.eventTriggered("Title clicked")
-        }
-        onClicked: {
-            opened = !opened
-            testEventsList.eventTriggered("Item clicked", itemId)
-        }
-    }
-
-    ListView {
-        id: testEventsList
-
-        Layout.fillWidth: true
-        Layout.preferredHeight: categoryItemInteractive.opened ? 20 * count : 0
-
-        clip: true
-
-        function eventTriggered(message) {
-            let obj = eventDelegateComponent.createObject()
-            obj.text = message
-            model.insert(0, obj)
-        }
-
-        Component {
-            id: eventDelegateComponent
-
-            ItemDelegate {
-                implicitHeight: 20
-
-                property int index: ObjectModel.index
-
-                Timer {
-                    interval: 5000; running: true
-                    onTriggered: testObjectModel.remove(index)
-                }
-            }
-        }
-
-        model: ObjectModel {
-            id: testObjectModel
-        }
-    }
-
    StatusChatListItem {
        name: "group-chat"
        type: StatusChatListItem.Type.GroupChat
@@ -118,23 +64,15 @@ ColumnLayout {
        type: StatusChatListItem.Type.CommunityChat
    }

-    StatusChatListItem {
-        name: "community-channel-emoji"
-        type: StatusChatListItem.Type.CommunityChat
-        asset.emoji: "😁"
-    }
-
    StatusChatListItem {
        name: "community-channel-with-image"
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        type: StatusChatListItem.Type.CommunityChat
    }

    StatusChatListItem {
        name: "Weird Crazy Otter"
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        type: StatusChatListItem.Type.OneToOneChat
    }

@@ -219,7 +157,7 @@ ColumnLayout {
        title: "Title"
        subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves."
        tertiaryTitle: "Tertiary title"
-        asset.name: "info"
+        icon.name: "info"

        statusListItemTitle.font.pixelSize: 17
        statusListItemTitle.font.weight: Font.Bold
@@ -228,29 +166,27 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.isImage: true
-        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        asset.imgIsIdenticon: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        image.isIdenticon: true
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        components: [StatusButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
@@ -260,35 +196,35 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        components: [StatusSwitch {}]
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        components: [StatusRadioButton {}]
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        components: [StatusCheckBox {}]
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
    }

    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [
            StatusButton {
@@ -301,7 +237,7 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [StatusSwitch {}]
    }
@@ -309,7 +245,7 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [
          StatusRadioButton {}
@@ -319,7 +255,7 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [StatusCheckBox {}]
    }
@@ -327,7 +263,7 @@ ColumnLayout {
    StatusListItem {
        title: "Title"
        subTitle: "Subtitle"
-        asset.name: "info"
+        icon.name: "info"
        label: "Text"
        components: [
            StatusBadge {
@@ -344,14 +280,14 @@ ColumnLayout {

    StatusListItem {
        title: "Title"
-        asset.name: "info"
+        icon.name: "info"
        type: StatusListItem.Type.Secondary
    }

    StatusListItem {
        title: "Title"
-        asset.isLetterIdenticon: true
-        asset.color: "orange"
+        icon.isLetterIdenticon: true
+        icon.color: "orange"
    }

    StatusListItem {
@@ -361,19 +297,17 @@ ColumnLayout {

    StatusListItem {
        title: "Title"
-        asset.name: "delete"
+        icon.name: "delete"
        type: StatusListItem.Type.Danger
    }

    StatusListItem {
        title: "List Item with Badge"
        subTitle: "Subtitle"
-        asset.isImage: true
-        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        asset.imgIsIdenticon: true
-        badge.asset.isImage: true
-        badge.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        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.primaryText: "CryptoKitties"
        badge.secondaryText: "#test"
    }
@@ -381,69 +315,11 @@ ColumnLayout {
    StatusListItem {
        title: "List Item with Badge 2"
        subTitle: "Subtitle"
-        asset.isLetterIdenticon: true
+        icon.isLetterIdenticon: true
        badge.primaryText: "CryptoKitties"
        badge.secondaryText: "#test"
-        badge.asset.color: "orange"
-        badge.asset.isLetterIdenticon: true
-    }
-
-    StatusListItem {
-        title: "List Item with Tags"
-        asset.isLetterIdenticon: true
-        bottomModel: 3
-        bottomDelegate: StatusListItemTag {
-            title: "tag"
-            asset.isLetterIdenticon: true
-        }
-    }
-
-    StatusListItem {
-        title: "List Item with Inline Tags"
-        asset.isLetterIdenticon: true
-        tagsModel: ListModel{
-            ListElement {
-                name: "helloworld.eth"
-                emoji: "😁"
-            }
-            ListElement {
-                name: "account1"
-                emoji: "😁"
-            }
-            ListElement {
-                name: "account2"
-                emoji: "😁"
-            }
-            ListElement {
-                name: "account3"
-                emoji: "😁"
-            }
-            ListElement {
-                name: "account4"
-                emoji: "😁"
-            }
-        }
-        tagsDelegate: StatusListItemTag {
-            color: "blue"
-            height: 24
-            radius: 6
-            closeButtonVisible: false
-            asset.emoji: model.emoji
-            asset.emojiSize: Emoji.size.verySmall
-            asset.isLetterIdenticon: true
-            title: model.name
-            titleText.font.pixelSize: 12
-            titleText.color: Theme.palette.indirectColor1
-        }
-    }
-
-    StatusListItem {
-        title: "List Item with Emoji"
-        subTitle: "Emoji"
-        asset.emoji: "😁"
-        asset.color: "yellow"
-        asset.letterSize: 14
-        asset.isLetterIdenticon: true
+        badge.icon.color: "orange"
+        badge.icon.isLetterIdenticon: true
    }

    StatusDescriptionListItem {
@@ -462,7 +338,7 @@ ColumnLayout {
        title: "Title"
        subTitle: "Subtitle"
        tooltip.text: "Tooltip"
-        asset.name: "info"
+        icon.name: "info"
        iconButton.onClicked: tooltip.visible = !tooltip.visible
    }

@@ -474,14 +350,13 @@ ColumnLayout {
    StatusMemberListItem {
        nickName: "This is an example"
        userName: "annabelle"
-        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isVerified: true
-        isContact: true
-        asset.isImage: true
-        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+        isMutualContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        asset.imgIsIdenticon: true
-        status: 1 // FIXME: use enum
+        image.isIdenticon: true
+        isOnline: true
        ringSettings.ringSpecModel:
            ListModel {
                ListElement {colorId: 13; segmentLength: 5}
@@ -493,125 +368,28 @@ ColumnLayout {
                ListElement {colorId: 28; segmentLength: 3}
            }
        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+        ringSettings.totalRingUnits: 25
    }

    StatusMemberListItem {
        nickName: "carmen.eth"
-        isUntrustworthy: true
-        asset.isLetterIdenticon: true
-    }
-
-    StatusMemberListItem {
-        nickName: "very-long-annoying-nickname.eth"
-        isUntrustworthy: true
-        asset.isLetterIdenticon: true
-    }
-
-    StatusMemberListItem {
-        nickName: "untrusted-admin.eth"
-        asset.isLetterIdenticon: true
-        isUntrustworthy: true
-        isAdmin: true
-        isContact: true
+        isOnline: false
+        trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
    }

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

    StatusMemberListItem {
        nickName: "Mark Cuban"
        userName: "annabelle"
-        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isContact: true
-        asset.isImage: true
-        asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isMutualContact: true
+        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        asset.imgIsIdenticon: true
-    }
-
-    StatusMemberListItem {
-        nickName: "admin.guy"
-        userName: "adguy"
-        isAdmin: true
-        asset.isLetterIdenticon: true
-        isUntrustworthy: true
-        Component.onCompleted: {
-            print(asset.name, asset.isImage, asset.isLetterIdenticon)
-        }
-    }
-
-    StatusBaseText {
-        Layout.fillWidth: true
-        Layout.topMargin: 16
-        text: "Loading features:"
-        font.pixelSize: 17
-    }
-
-    StatusListItem {
-        title: "Nokia 3310"
-        subTitle: "Incoming device"
-        label: "loading: true"
-        asset.width: 40
-        asset.height: 40
-        asset.emoji: "😁"
-        asset.color: "hotpink"
-        asset.letterSize: 14
-        asset.isLetterIdenticon: true
-        loading: true
-    }
-
-    StatusListItem {
-        title: "Nokia 3310"
-        subTitle: "Device"
-        label: "loadingFailed: true"
-        asset.width: 40
-        asset.height: 40
-        asset.emoji: "😁"
-        asset.color: "hotpink"
-        asset.letterSize: 14
-        asset.isLetterIdenticon: true
-        loadingFailed: true
-    }
-
-    StatusListItem {
-        implicitWidth: 600
-        title: "List Item with Tags"
-        subTitle: "03:32"
-        asset.isLetterIdenticon: true
-        inlineTagModel: 6
-        inlineTagDelegate: StatusListItemTag {
-            height: 24
-            title: "tag"
-            asset.isLetterIdenticon: true
-        }
-        components: [
-            ColumnLayout {
-                Row {
-                    Layout.alignment: Qt.AlignRight
-                    spacing: 4
-                    StatusIcon {
-                        color:  Theme.palette.successColor1
-                        icon: "arrow-up"
-                        rotation: 135
-                        height: 18
-                    }
-                    StatusBaseText {
-                        text: "0.0000015 ETH"
-                        font.pixelSize: 15
-                        color: Theme.palette.directColor1
-                    }
-                }
-                StatusBaseText {
-                    Layout.alignment: Qt.AlignRight
-                    text: "1201.10 USD"
-                    font.pixelSize: 15
-                    color: Theme.palette.baseColor1
-                }
-            }
-        ]
+        image.isIdenticon: true
    }
 }
@@ -4,61 +4,38 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1

-ColumnLayout {
-    GridLayout {
-        Layout.fillWidth: true
-        Layout.fillHeight: true
+GridLayout {
+    columns: 6
+    columnSpacing: 5
+    rowSpacing: 5

-        columns: 6
-        columnSpacing: 5
-        rowSpacing: 5
-
-        StatusLoadingIndicator {
-            color: Theme.palette.directColor4
-        }
-
-        StatusLetterIdenticon {
-            name: "#status"
-        }
-
-        StatusRoundedImage {
-            image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
-        }
-
-        StatusBadge {}
-
-        StatusBadge {
-            value: 1
-        }
-
-        StatusBadge {
-            value: 10
-        }
-
-        StatusBadge {
-            value: 100
-        }
-
-        StatusRoundIcon {
-            asset.name: "info"
-        }
+    StatusLoadingIndicator {
+        color: Theme.palette.directColor4
    }

-    Flow {
-        Layout.fillWidth: true
-        spacing: 4
-
-        Repeater {
-            model: 12
-            StatusLetterIdenticon {
-                name: "A"
-                color: Theme.palette.userCustomizationColors[index]
-                letterSize: 16
-            }
-        }
+    StatusLetterIdenticon {
+        name: "#status"
    }

-    StatusDatePicker {
-        label: "Select date"
+    StatusRoundedImage {
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+    }
+
+    StatusBadge {}
+
+    StatusBadge {
+        value: 1
+    }
+
+    StatusBadge {
+        value: 10
+    }
+
+    StatusBadge {
+        value: 100
+    }
+
+    StatusRoundIcon {
+        icon.name: "info"
    }
 }
@@ -4,8 +4,6 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-import StatusQ.Components 0.1
-import StatusQ.Core.Utils 0.1

 Column {
    spacing: 20
@@ -80,17 +78,6 @@ Column {
        onClicked: editTitleModal.open()
    }

-    StatusButton {
-        text: "Modal with Advanced Header/Footer"
-        onClicked: advancedHeaderFooterModal.open()
-    }
-
-
-    StatusButton {
-        text: "Modal with Floating header Buttons"
-        onClicked: floatingHeaderModal.open()
-    }
-
    StatusModal {
        id: simpleModal
        anchors.centerIn: parent
@@ -109,8 +96,7 @@ Column {
        anchors.centerIn: parent
        header.title: "Some Title"
        header.subTitle: "Subtitle"
-        header.asset.isImage: true
-        header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    }

    StatusModal {
@@ -118,10 +104,12 @@ Column {
        anchors.centerIn: parent
        header.title: "Some Title"
        header.subTitle: "Subtitle"
-        header.asset.isImage: true
-        header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        leftButtons: [
-            StatusBackButton { }
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
        ]
        rightButtons: [
            StatusButton {
@@ -138,8 +126,7 @@ Column {
        anchors.centerIn: parent
        header.title: "Some Title"
        header.subTitle: "Subtitle"
-        header.asset.isImage: true
-        header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"

        headerActionButton: StatusFlatRoundButton {
            type: StatusFlatRoundButton.Type.Secondary
@@ -152,7 +139,10 @@ Column {
        }

        leftButtons: [
-            StatusBackButton { }
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
        ]
        rightButtons: [
            StatusButton {
@@ -167,8 +157,7 @@ Column {
    StatusModal {
        id: modalExample
        anchors.centerIn: parent
-        header.asset.isImage: true
-        header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        header.title: "Header"
        header.subTitle: "SubTitle"
        rightButtons: [
@@ -181,7 +170,10 @@ Column {
        ]

        leftButtons: [
-            StatusBackButton { }
+            StatusRoundButton {
+                icon.name: "arrow-right"
+                rotation: 180
+            }
        ]

        contentItem: StatusBaseText {
@@ -231,8 +223,8 @@ Column {
        anchors.centerIn: parent
        header.title: "Header"
        header.subTitle: "SubTitle"
-        header.asset.isLetterIdenticon: true
-        header.asset.bgColor: "red"
+        header.icon.isLetterIdenticon: true
+        header.icon.background.color: "red"

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -256,9 +248,9 @@ Column {
        anchors.centerIn: parent
        header.title: "Header"
        header.subTitle: "SubTitle"
-        header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        header.asset.imgIsIdenticon: true
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -283,9 +275,9 @@ Column {
        header.title: "Header"
        header.subTitle: "SubTitle"
        header.headerImageEditable: true
-        header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        header.asset.imgIsIdenticon: true
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -310,9 +302,9 @@ Column {
        header.title: "Some super long text here that exceeds the available space"
        header.subTitle: "Some super long text here that exceeds the available space"
        header.subTitleElide: Text.ElideMiddle
-        header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-        header.asset.imgIsIdenticon: true
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true

        contentItem: StatusBaseText {
            anchors.centerIn: parent
@@ -344,7 +336,7 @@ Column {
                    sourceComponent: popupMenu.delegate
                    onLoaded: {
                        item.action.text = model.name
-                        item.action.assetSettings.name = model.iconName
+                        item.action.iconSettings.name = model.iconName
                    }
                }
            }
@@ -361,94 +353,10 @@ Column {
        header.editable: true
    }

-    StatusModal {
-        id: advancedHeaderFooterModal
-        anchors.centerIn: parent
-        showHeader: false
-        showFooter: false
-        showAdvancedHeader: true
-        showAdvancedFooter: true
-        height: 200
-        advancedHeaderComponent: Rectangle {
-            width: parent.width
-            height: 50
-            color: Theme.palette.baseColor1
-            border.width: 1
-            StatusBaseText {
-                anchors.centerIn: parent
-                text: "Add any header here"
-                font.pixelSize: 15
-                color: Theme.palette.directColor1
-            }
-
-        }
-        advancedFooterComponent: Rectangle {
-            width: parent.width
-            height: 50
-            color: Theme.palette.baseColor1
-            border.width: 1
-            StatusBaseText {
-                anchors.centerIn: parent
-                text: "Add any footer here"
-                font.pixelSize: 15
-                color: Theme.palette.directColor1
-            }
-
-        }
-    }
-
-    StatusModal {
-        id: floatingHeaderModal
-        anchors.centerIn: parent
-        height: 200
-        showHeader: false
-        showFooter: false
-        showAdvancedHeader: true
-        hasFloatingButtons: true
-        advancedHeaderComponent: StatusFloatingButtonsSelector {
-            id: floatingHeader
-            model: dummyAccountsModel
-            delegate: Rectangle {
-                width: button.width
-                height: button.height
-                radius: 8
-                visible: visibleIndices.includes(index)
-                color: Theme.palette.statusAppLayout.backgroundColor
-                StatusButton {
-                    id: button
-                    topPadding: 8
-                    bottomPadding: 0
-                    implicitHeight: 32
-                    leftPadding: 4
-                    text: name
-                    asset.emoji: !!emoji ? emoji: ""
-                    asset.emojiSize: Emoji.size.middle
-                    asset.name: !emoji ? "filled-account": ""
-                    normalColor: "transparent"
-                    highlighted: index === floatingHeader.currentIndex
-                    onClicked: {
-                        floatingHeader.currentIndex = index
-                    }
-                }
-            }
-            popupMenuDelegate: StatusListItem {
-                implicitWidth: 272
-                title: name
-                onClicked: floatingHeader.itemSelected(index)
-                visible: !visibleIndices.includes(index)
-            }
-        }
-    }
-
    ListModel {
        id: dummyAccountsModel
-        ListElement{name: "Account 1"; iconName: "filled-account"; emoji:  "🥑"}
+        ListElement{name: "Account 1"; iconName: "filled-account"}
        ListElement{name: "Account 2"; iconName: "filled-account"}
-        ListElement{name: "Account 3"; iconName: "filled-account"}
-        ListElement{name: "Account 4"; iconName: "filled-account"}
-        ListElement{name: "Account 5"; iconName: "filled-account"}
-        ListElement{name: "Account 6"; iconName: "filled-account"}
-        ListElement{name: "Account 7"; iconName: "filled-account"}
    }

    StatusSpellcheckingMenuItems {
@@ -14,10 +14,9 @@ ListView {
    anchors.fill: parent
    anchors.margins: 15
    clip: true
-
    delegate: StatusMessage {
        id: delegate
-        width: ListView.view.width
+        width: parent.width

        audioMessageInfoText: "Audio Message"
        cancelButtonText: "Cancel"
@@ -27,69 +26,44 @@ ListView {
        resendText: "Resend"
        pinnedMsgInfoText: "Pinned by"

-        timestamp: model.timestamp
-        isAReply: model.isReply
-        hasMention: model.hasMention
-        isPinned: model.isPinned
-        pinnedBy: model.pinnedBy
-        hasExpired: model.hasExpired
-        reactionsModel: model.reactions || []
-
        messageDetails: StatusMessageDetails {
            contentType: model.contentType
            messageContent: model.messageContent
            amISender: model.amIsender
-            sender.id: model.senderId
-            sender.displayName: model.senderDisplayName
-            sender.secondaryName: model.senderOptionalName
-            sender.isContact: model.isContact
-            sender.trustIndicator: model.trustIndicator
-            sender.profileImage: StatusProfileImageSettings {
+            displayName: model.userName
+            secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
+            chatID: model.chatKey
+            profileImage: StatusImageSettings {
                width: 40
                height: 40
-                pubkey: model.senderId
-                name: model.profileImage || ""
-                colorId: 1
-                colorHash: ListModel {
-                    ListElement { colorId: 13; segmentLength: 5 }
-                    ListElement { colorId: 31; segmentLength: 5 }
-                    ListElement { colorId: 10; segmentLength: 1 }
-                    ListElement { colorId: 2; segmentLength: 5 }
-                    ListElement { colorId: 26; segmentLength: 2 }
-                    ListElement { colorId: 19; segmentLength: 4 }
-                    ListElement { colorId: 28; segmentLength: 3 }
-                }
+                source: model.profileImage
+                isIdenticon: model.isIdenticon
            }
-
            messageText: model.message
+            hasMention: model.hasMention
+            isMutualContact: model.isMutualContact
+            trustIndicator: model.trustIndicator
+            isPinned: model.isPinned
+            pinnedBy: model.pinnedBy
+            hasExpired: model.hasExpired
        }
-
+        timestamp.text: "10:00 am"
+        timestamp.tooltip.text: "10:01 am"
+        // reply related data
+        isAReply: model.isReply
        replyDetails: StatusMessageDetails {
-            amISender:  model.isReply && model.replyAmISender
-            sender.id: model.replySenderId || ""
-            sender.displayName:  model.isReply ? model.replySenderName: ""
-            sender.secondaryName: model.isReply ? model.replySenderEnsName : ""
-            sender.profileImage: StatusProfileImageSettings {
+            amISender:  model.isReply ? model.replyAmISender : ""
+            displayName:  model.isReply ? model.replySenderName: ""
+            profileImage: StatusImageSettings {
                width: 20
                height: 20
-                name: model.isReply ? model.replyProfileImage: ""
-                pubkey: model.replySenderId
-                colorId: 1
-                colorHash: ListModel {
-                    ListElement { colorId: 13; segmentLength: 5 }
-                    ListElement { colorId: 31; segmentLength: 5 }
-                    ListElement { colorId: 10; segmentLength: 1 }
-                    ListElement { colorId: 2; segmentLength: 5 }
-                    ListElement { colorId: 26; segmentLength: 2 }
-                    ListElement { colorId: 19; segmentLength: 4 }
-                    ListElement { colorId: 28; segmentLength: 3 }
-                }
+                source:  model.isReply ? model.replyProfileImage: ""
+                isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
            }
            messageText:  model.isReply ? model.replyMessageText: ""
            contentType: model.replyContentType
            messageContent: model.replyMessageContent
        }
-
        quickActions: [
            StatusFlatRoundButton {
                id: emojiBtn
@@ -1,6 +1,8 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
+import QtQml.Models 2.2
+import QtGraphicalEffects 1.0

 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
@@ -20,96 +22,189 @@ Page {
        height: tagSelector.height
        anchors.right: parent.right
        anchors.rightMargin: 8
-        spacing: 16

        StatusTagSelector {
            id: tagSelector
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
            Layout.leftMargin: 17
-            maxHeight: root.height
+            implicitHeight: 44
            toLabelText: qsTr("To: ")
-            warningText: qsTr("USER LIMIT REACHED")
-            listLabel: qsTr("Contacts")
-            ringSpecModelGetter: function(pubKey) {
-                //for simulation purposes only, in real app
-                //this would be Utils.getColorHashAsJson(pubKey)
-                var index = -1;
-                if (!!contactsModel) {
-                    for (var i = 0; i < contactsModel.count; i++) {
-                        if (contactsModel.get(i).pubKey === pubKey) {
-                            index = i;
+            warningText: qsTr("5 USER LIMIT REACHED")
+            //simulate model filtering, TODO this
+            //makes more sense to be provided by the backend
+            //figure how real implementation should look like
+            property ListModel sortedList: ListModel { }
+            onTextChanged: {
+                sortedList.clear();
+                if (text !== "") {
+                    for (var i = 0; i < contactsModel.count; i++ ) {
+                        var entry = contactsModel.get(i);
+                        if (entry.name.toLowerCase().includes(text.toLowerCase())) {
+                            sortedList.insert(sortedList.count, {"publicId": entry.publicId, "name": entry.name,
+                                                  "icon": entry.icon, "isIdenticon": entry.isIdenticon,
+                                                  "onlineStatus": entry.onlineStatus});
+                            userListView.model = sortedList;
                        }
                    }
-                    return contactsModel.get(index).ringSpecModel;
                } else {
-                    return null;
+                    userListView.model = contactsModel;
                }
            }
-            compressedKeyGetter: function(pubKey) {
-                //for simulation purposes only, in real app
-                //this would be Utils.getCompressedPk(pubKey);
-                var possibleCharacters = pubKey.split('');
-                var randomStringLength = 12; // assuming you want random strings of 12 characters
-                var randomString = [];
-                for (var i=0; i<randomStringLength; ++i) {
-                    var index = (Math.random() * possibleCharacters.length).toFixed(0);
-                    var nextChar = possibleCharacters[index];
-                    randomString.push(nextChar);
-                }
-                return randomString.join().toString().replace(/,/g, '');
-            }
-            colorIdForPubkeyGetter: function (pubKey) {
-                //for simulation purposes only, in real app
-                //this would be Utils.colorIdForPubkey(pubKey);
-                return Math.floor(Math.random() * 10);
-            }
-            onTextChanged: {
-                sortModel(root.contactsModel);
-            }
-            Component.onCompleted: {
-                textEdit.forceActiveFocus();
-                sortModel(root.contactsModel);
-            }
        }

        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: headerRow.height + 16
+
+        Item {
+            anchors.fill: parent
+            visible: (contactsModel.count > 0)
+
+            StatusBaseText {
+                id: contactsLabel
+                font.pixelSize: 15
+                anchors.left: parent.left
+                anchors.leftMargin: 8
+                color: Theme.palette.baseColor1
+                text: qsTr("Contacts")
+            }
+            Control {
+                width: 360
+                anchors {
+                    top: contactsLabel.bottom
+                    topMargin: 8//Style.current.padding
+                    bottom: !statusPopupMenuBackgroundContent.visible ?  parent.bottom : undefined
+                    bottomMargin: 20//Style.current.bigPadding
+                }
+                height: 16 + (!statusPopupMenuBackgroundContent.visible ? parent.height :
+                        (((userListView.count * 64) > parent.height) ? parent.height : (userListView.count * 64)))
+                x: (statusPopupMenuBackgroundContent.visible && (tagSelector.namesModel.count > 0) &&
+                   ((tagSelector.textEdit.x + 24 + statusPopupMenuBackgroundContent.width) < parent.width))
+                   ? (tagSelector.textEdit.x + 24) : 0
+                background: Rectangle {
+                    id: statusPopupMenuBackgroundContent
+                    anchors.fill: parent
+                    visible: (tagSelector.sortedList.count > 0)
+                    color: Theme.palette.statusPopupMenu.backgroundColor
+                    radius: 8
+                    layer.enabled: true
+                    layer.effect: DropShadow {
+                        width: statusPopupMenuBackgroundContent.width
+                        height: statusPopupMenuBackgroundContent.height
+                        x: statusPopupMenuBackgroundContent.x
+                        visible: statusPopupMenuBackgroundContent.visible
+                        source: statusPopupMenuBackgroundContent
+                        horizontalOffset: 0
+                        verticalOffset: 4
+                        radius: 12
+                        samples: 25
+                        spread: 0.2
+                        color: Theme.palette.dropShadow
+                    }
+                }
+                contentItem: ListView {
+                    id: userListView
+                    anchors.fill: parent
+                    anchors.topMargin: 8
+                    anchors.bottomMargin: 8
+                    clip: true
+                    model: contactsModel
+                    ScrollBar.vertical: ScrollBar {
+                        policy: ScrollBar.AsNeeded
+                    }
+                    boundsBehavior: Flickable.StopAtBounds
+                    delegate: Item {
+                        id: wrapper
+                        anchors.right: parent.right
+                        anchors.left: parent.left
+                        height: 64
+                        property bool hovered: false
+                        Rectangle {
+                            id: rectangle
+                            anchors.fill: parent
+                            anchors.rightMargin: 8
+                            anchors.leftMargin: 8
+                            radius: 8
+                            visible: (tagSelector.sortedList.count > 0)
+                            color: (wrapper.hovered) ? Theme.palette.baseColor2 : "transparent"
+                        }
+
+                        StatusSmartIdenticon {
+                            id: contactImage
+                            anchors.left: parent.left
+                            anchors.leftMargin: 16//Style.current.padding
+                            anchors.verticalCenter: parent.verticalCenter
+                            name: model.name
+                            icon: StatusIconSettings {
+                                width: 28
+                                height: 28
+                                letterSize: 15
+                            }
+                            image: StatusImageSettings {
+                                width: 28
+                                height: 28
+                                source: model.icon
+                                isIdenticon: model.isIdenticon
+                            }
+                        }
+
+                        StatusBaseText {
+                            id: contactInfo
+                            text: model.name
+                            anchors.right: parent.right
+                            anchors.rightMargin: 8
+                            anchors.left: contactImage.right
+                            anchors.leftMargin: 16
+                            anchors.verticalCenter: parent.verticalCenter
+                            elide: Text.ElideRight
+                            color: Theme.palette.directColor1
+                            font.weight: Font.Medium
+                            font.pixelSize: 15
+                        }
+
+                        MouseArea {
+                            cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+                            acceptedButtons: Qt.LeftButton | Qt.RightButton
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            onEntered: {
+                                wrapper.hovered = true;
+                            }
+                            onExited: {
+                                wrapper.hovered = false;
+                            }
+                            onClicked: {
+                                tagSelector.insertTag(model.name, model.publicId);
+                            }
+                        }
+                    }
+                }
+            }
+            Component.onCompleted: {
+                if (visible) {
+                    tagSelector.textEdit.forceActiveFocus();
+                }
+            }
+        }

        StatusBaseText {
-            width: Math.min(553, parent.width - 32)
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenterOffset: -(headerRow.height/2)
+            visible: (contactsModel.count === 0)
+            anchors.centerIn: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
-            visible: contactsModel.count === 0
-            wrapMode: Text.WordWrap
            font.pixelSize: 15
            color: Theme.palette.baseColor1
-            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.")
+            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.")
            Component.onCompleted: {
                if (visible) {
                    tagSelector.enabled = false;
@@ -13,8 +13,7 @@ StatusModal {

    header.title: "Cryptokitties"
    header.subTitle: "Public Community"
-    header.asset.isImage: true
-    header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+    header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"

    contentItem: Column {
        width: root.width
@@ -44,7 +43,7 @@ StatusModal {
            title: "Share community"
            subTitle: "https://join.status.im/u/0x04...45f19"
            tooltip.text: "Copy to clipboard"
-            asset.name: "copy"
+            icon.name: "copy"
            iconButton.onClicked: tooltip.visible = !tooltip.visible
            width: parent.width
        }
@@ -58,7 +57,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Members"
-            asset.name: "group-chat"
+            icon.name: "group-chat"
            label: "184"
            components: [
                StatusIcon {
@@ -73,7 +72,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Notifications"
-            asset.name: "notification"
+            icon.name: "notification"
            components: [
                StatusSwitch {}
            ]
@@ -88,7 +87,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Edit community"
-            asset.name: "edit"
+            icon.name: "edit"
            type: StatusListItem.Type.Secondary
        }

@@ -96,7 +95,7 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Transfer ownership"
-            asset.name: "exchange"
+            icon.name: "exchange"
            type: StatusListItem.Type.Secondary
        }

@@ -104,7 +103,8 @@ StatusModal {
            anchors.horizontalCenter: parent.horizontalCenter
            statusListItemTitle.font.pixelSize: 17
            title: "Leave community"
-            asset.name: "arrow-left"
+            icon.name: "arrow-right"
+            icon.rotation: 180
            type: StatusListItem.Type.Secondary
        }
    }
@@ -10,197 +10,70 @@ import StatusQ.Core.Theme 0.1

 import "data" 1.0

-StatusSectionLayout {
+StatusAppThreePanelLayout {
    id: root
    property bool createChat: false

-    notificationCount: 1
-    onNotificationButtonClicked: { notificationCount = 0; }
-    showHeader: !root.createChat
-
-    headerContent: RowLayout {
-        id: chatHeader
-
-        signal chatInfoButtonClicked()
-        signal menuButtonClicked()
-        signal membersButtonClicked()
-        signal searchButtonClicked()
-
-        StatusChatInfoButton {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            Layout.alignment: Qt.AlignLeft
-            Layout.leftMargin: padding
-            title: "Amazing Funny Squirrel"
-            subTitle: "Contact"
-            asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.OneToOneChat
-            pinnedMessagesCount: 1
-        }
-
-        RowLayout {
-            id: actionButtons
-            Layout.alignment: Qt.AlignRight
-            Layout.rightMargin: padding
-            spacing: 8
-
-            StatusFlatRoundButton {
-                id: menuButton
-                objectName: "chatToolbarMoreOptionsButton"
-                width: 32
-                height: 32
-                icon.name: "more"
-                type: StatusFlatRoundButton.Type.Secondary
-
-                // initializing the tooltip
-                tooltip.visible: !!tooltip.text && menuButton.hovered && !contextMenu.open
-                tooltip.text: qsTr("More")
-                tooltip.orientation: StatusToolTip.Orientation.Bottom
-                tooltip.y: parent.height + 12
-
-                property bool showMoreMenu: false
-                onClicked: {
-                    menuButton.highlighted = true
-
-                    let originalOpenHandler = contextMenu.openHandler
-                    let originalCloseHandler = contextMenu.closeHandler
-
-                    contextMenu.openHandler = function () {
-                        if (!!originalOpenHandler) {
-                            originalOpenHandler()
-                        }
-                    }
-
-                    contextMenu.closeHandler = function () {
-                        menuButton.highlighted = false
-                        if (!!originalCloseHandler) {
-                            originalCloseHandler()
-                        }
-                    }
-
-                    contextMenu.openHandler = originalOpenHandler
-                    contextMenu.popup(-contextMenu.width + menuButton.width, menuButton.height + 4)
-                }
-                StatusPopupMenu {
-                    id: contextMenu
-
-                    StatusMenuItem {
-                        text: "Mute Chat"
-                        icon.name: "notification"
-                    }
-                    StatusMenuItem {
-                        text: "Mark as Read"
-                        icon.name: "checkmark-circle"
-                    }
-                    StatusMenuItem {
-                        text: "Clear History"
-                        icon.name: "close-circle"
-                    }
-
-                    StatusMenuSeparator {}
-
-                    StatusMenuItem {
-                        text: "Leave Chat"
-                        icon.name: "arrow-left"
-                        type: StatusMenuItem.Type.Danger
-                    }
-                }
-            }
-
-            Rectangle {
-                width: 1
-                height: 24
-                color: Theme.palette.directColor7
-                Layout.alignment: Qt.AlignVCenter
-                visible: (notificationButton.visible && menuButton.visible)
-            }
-        }
-    }
-
    leftPanel: Item {
        anchors.fill: parent
-        anchors.margins: 16
+
+        StatusNavigationPanelHeadline {
+            id: headline
+            anchors.top: parent.top
+            anchors.topMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Chat"
+        }
+
        RowLayout {
            id: searchInputWrapper
            width: parent.width
+            height: searchInput.height
+            anchors.top: headline.bottom
+            anchors.topMargin: 16
+            anchors.right: parent.right
+            anchors.rightMargin: 8

-            StatusNavigationPanelHeadline {
-                id: headline
-                Layout.alignment: Qt.AlignVCenter
-                text: "Chat"
-            }
-
-            Item {
+            StatusBaseInput {
+                id: searchInput
                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                Layout.leftMargin: 17
+                implicitHeight: 36
+                topPadding: 8
+                bottomPadding: 0
+                placeholderText: "Search"
+                icon.name: "search"
            }

-
-            StatusRoundButton {
-                Layout.alignment: Qt.AlignVCenter
+            StatusIconTabButton {
                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
-                }
            }
        }

-        StatusInput {
-            id: searchInput
-            anchors.top: searchInputWrapper.bottom
-            anchors.topMargin: 16
-            width: parent.width
-            maximumHeight: 36
-            topPadding: 8
-            bottomPadding: 8
-            placeholderText: "Search"
-            input.asset.name: "search"
-        }
-
        Column {
-            width: parent.width
-            anchors.top: searchInput.bottom
+            anchors.top: searchInputWrapper.bottom
            anchors.topMargin: 16
-            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width
            spacing: 8

            StatusContactRequestsIndicatorListItem {
-                width: parent.width
                anchors.horizontalCenter: parent.horizontalCenter
                title: "Contact requests"
                requestsCount: 3
-                onClicked: demoContactRequestsModal.open()
+                sensor.onClicked: demoContactRequestsModal.open()
            }

            StatusChatList {
-                width: parent.width
+                anchors.horizontalCenter: parent.horizontalCenter
                model: Models.demoChatListItems
-                highlightItem: !root.createChat
                onChatItemUnmuted: {
                    for (var i = 0; i < Models.demoChatListItems.count; i++) {
                        let item = Models.demoChatListItems.get(i);
@@ -255,17 +128,66 @@ StatusSectionLayout {
    centerPanel: Loader {
        anchors.fill: parent
        sourceComponent: root.createChat ? createChatView : chatChannelView
-        Component {
-            id: createChatView
-            CreateChatView {
-                contactsModel: Models.membersListModel
-            }
-        }
+    }

-        Component {
-            id: chatChannelView
-            ChatChannelView {
-                model: Models.chatMessagesModel
+    Component {
+        id: createChatView
+        CreateChatView {
+            contactsModel: Models.dummyContactsModel
+        }
+    }
+
+    Component {
+        id: chatChannelView
+        ChatChannelView {
+            model: Models.chatMessagesModel
+        }
+    }
+
+    rightPanel: Item {
+        anchors.fill: parent
+
+        StatusChatToolBar {
+            anchors.top: parent.top
+            width: parent.width
+
+            chatInfoButton.title: "Amazing Funny Squirrel"
+            chatInfoButton.subTitle: "Contact"
+            chatInfoButton.icon.color: Theme.palette.miscColor7
+            chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+            chatInfoButton.pinnedMessagesCount: 1
+
+            searchButton.visible: false
+            membersButton.visible: false
+            notificationCount: 1
+
+            onNotificationButtonClicked: notificationCount = 0
+
+            popupMenu: StatusPopupMenu {
+                id: contextMenu
+
+                StatusMenuItem {
+                    text: "Mute Chat"
+                    icon.name: "notification"
+                }
+                StatusMenuItem {
+                    text: "Mark as Read"
+                    icon.name: "checkmark-circle"
+                }
+                StatusMenuItem {
+                    text: "Clear History"
+                    icon.name: "close-circle"
+                }
+
+                StatusMenuSeparator {}
+
+                StatusMenuItem {
+                    text: "Leave Chat"
+                    icon.name: "arrow-right"
+                    icon.width: 14
+                    iconRotation: 180
+                    type: StatusMenuItem.Type.Danger
+                }
            }
        }
    }
@@ -1,159 +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.Controls 0.1
-import StatusQ.Layout 0.1
-import StatusQ.Components 0.1
-
-import "../demoapp/data" 1.0
-
-StatusSectionLayout {
-    id: root
-
-    QtObject {
-        id: d
-
-        property ListModel featuredCommunitiesModel: Models.featuredCommunitiesModel
-        property ListModel popularCommunitiesModel: Models.curatedCommunitiesModel
-        property ListModel tagsModel: Models.tagsModel
-
-        property string searchText: ""
-        property int layoutVMargin: 70
-        property int layoutHMargin: 64
-        property int titlePixelSize: 28
-        property int subtitlePixelSize: 17
-        property int stylePadding: 16
-
-        function navigateToCommunity(communityId) {
-            console.info("Clicked community ID: " + communityId)
-        }
-    }
-    centerPanel: Item {
-        anchors.fill: parent
-        clip: true
-        StatusScrollView {
-            anchors.fill: parent
-            contentHeight: column.height + d.layoutVMargin
-            contentWidth: column.width + d.layoutHMargin
-
-            ColumnLayout {
-                id: column
-                spacing: 18
-
-                StatusBaseText {
-                    text: qsTr("Find community")
-                    font.weight: Font.Bold
-                    font.pixelSize: d.titlePixelSize
-                    color: Theme.palette.directColor1
-                }
-
-                // Tags definition - Now hidden - Out of scope
-                // TODO: Replace by `StatusListItemTagRow`
-                Row {
-                    visible: d.tagsModel.count > 0
-                    Layout.leftMargin: d.layoutHMargin
-                    Layout.rightMargin: d.layoutHMargin
-                    width: 1234 // by design
-                    spacing: d.stylePadding/2
-
-                    Repeater {
-                        model: d.tagsModel
-                        delegate: StatusListItemTag {
-                            border.color: Theme.palette.baseColor2
-                            color: "transparent"
-                            height: 32
-                            radius: 36
-                            closeButtonVisible: false
-                            asset.emoji: model.emoji
-                            asset.height: 32
-                            asset.width: asset.height
-                            asset.color: "transparent"
-                            asset.isLetterIdenticon: true
-                            title: model.name
-                            titleText.font.pixelSize: 15
-                            titleText.color: Theme.palette.primaryColor1
-                        }
-                    }
-                }
-
-                StatusBaseText {
-                    Layout.leftMargin: d.layoutHMargin
-                    Layout.topMargin: 20
-                    text: qsTr("Featured")
-                    font.weight: Font.Bold
-                    font.pixelSize: d.subtitlePixelSize
-                    color: Theme.palette.directColor1
-                }
-
-                GridLayout {
-                    id: featuredGrid
-                    Layout.leftMargin: d.layoutHMargin
-                    columns: 3
-                    columnSpacing: d.stylePadding
-                    rowSpacing: d.stylePadding
-
-                    Repeater {
-                        model: d.featuredCommunitiesModel
-                        delegate: StatusCommunityCard {
-                            locale: "es"
-                            communityId: model.communityId
-                            loaded: model.available
-                            logo: model.logo
-                            name: model.name
-                            description: model.description
-                            members: model.members
-                            popularity: model.popularity
-                            communityColor: model.communityColor
-                            categories: ListModel {
-                                ListElement { name: "sport"; emoji: "🎾"}
-                                ListElement { name: "food"; emoji: "🥑"}
-                                ListElement { name: "privacy"; emoji: "👻"}
-                            }
-
-                            onClicked: { d.navigateToCommunity(communityId) }
-                        }
-                    }
-                }
-
-                StatusBaseText {
-                    Layout.leftMargin: d.layoutHMargin
-                    Layout.topMargin: 20
-                    text: qsTr("Popular")
-                    font.weight: Font.Bold
-                    font.pixelSize: d.subtitlePixelSize
-                    color: Theme.palette.directColor1
-                }
-
-                GridLayout {
-                    Layout.leftMargin: d.layoutHMargin
-                    columns: 3
-                    columnSpacing: d.stylePadding
-                    rowSpacing: d.stylePadding
-
-                    Repeater {
-                        model: d.popularCommunitiesModel
-                        delegate: StatusCommunityCard {
-                            locale: "es"
-                            communityId: model.communityId
-                            loaded: model.available
-                            logo: model.logo
-                            name: model.name
-                            description: model.description
-                            members: model.members
-                            activeUsers: model.activeUsers
-                            popularity: model.popularity
-                            tokenLogo: model.tokenLogo
-                            isPrivate: model.isPrivate
-                            banner: model.banner
-
-                            onClicked: { d.navigateToCommunity(communityId) }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
@@ -1,6 +1,5 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.12

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

 import "data" 1.0

-StatusSectionLayout {
+StatusAppThreePanelLayout {
    id: root

    property string communityDetailModalTitle: ""
@@ -23,101 +22,6 @@ StatusSectionLayout {
        color: SplitHandle.pressed ? Theme.palette.baseColor2
                                   : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
    }
-
-    headerContent: RowLayout {
-        id: statusToolBar
-
-        StatusFlatRoundButton {
-            id: searchButton
-            Layout.alignment: Qt.AlignLeft
-            Layout.leftMargin: padding
-            icon.name: "search"
-            type: StatusFlatRoundButton.Type.Secondary
-            // initializing the tooltip
-            tooltip.text: qsTr("Search")
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-            onClicked: {
-                searchButton.highlighted = !searchButton.highlighted;
-                searchPopup.setSearchSelection(communityDetailModalTitle,
-                                               "",
-                                               communityDetailModalImage);
-                searchPopup.open();
-            }
-        }
-
-        StatusChatInfoButton {
-            Layout.preferredWidth: Math.min(implicitWidth, parent.width)
-            Layout.fillHeight: true
-            title: "general"
-            subTitle: "Community Chat"
-            asset.color: Theme.palette.miscColor6
-            type: StatusChatInfoButton.Type.CommunityChat
-        }
-
-        Item {
-            Layout.fillWidth: true
-        }
-
-        StatusFlatRoundButton {
-            id: membersButton
-            icon.name: "group-chat"
-            type: StatusFlatRoundButton.Type.Secondary
-            // initializing the tooltip
-            tooltip.text: qsTr("Members")
-            tooltip.orientation: StatusToolTip.Orientation.Bottom
-            tooltip.y: parent.height + 12
-            onClicked: {
-                membersButton.highlighted = !membersButton.highlighted;
-                root.showRightPanel = !root.showRightPanel;
-            }
-        }
-
-        StatusSearchPopup {
-            id: searchPopup
-            searchOptionsPopupMenu: searchPopupMenu
-            onAboutToHide: {
-                if (searchPopupMenu.visible) {
-                    searchPopupMenu.close();
-                }
-                //clear menu
-                for (var i = 2; i < searchPopupMenu.count; i++) {
-                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
-                }
-            }
-            onClosed: {
-                statusToolBar.searchButton.highlighted = false
-                searchPopupMenu.dismiss();
-            }
-            onSearchTextChanged: {
-                if (searchPopup.searchText !== "") {
-                    searchPopup.loading = true;
-                    searchModelSimTimer.start();
-                } else {
-                    searchPopup.searchResults = [];
-                    searchModelSimTimer.stop();
-                }
-            }
-            Timer {
-                id: searchModelSimTimer
-                interval: 500
-                onTriggered: {
-                    if (searchPopup.searchText.startsWith("c")) {
-                        searchPopup.searchResults = Models.searchResultsA;
-                    } else {
-                        searchPopup.searchResults = Models.searchResultsB;
-                    }
-                    searchPopup.loading = false;
-                }
-            }
-        }
-        StatusSearchLocationMenu {
-            id: searchPopupMenu
-            searchPopup: searchPopup
-            locationModel: Models.optionsModel
-        }
-    }
-
    leftPanel: Item {
        id: leftPanel

@@ -129,9 +33,8 @@ StatusSectionLayout {

            chatInfoButton.title: "CryptoKitties"
            chatInfoButton.subTitle: "128 Members"
-            chatInfoButton.asset.isImage: true
-            chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
-            chatInfoButton.asset.color: Theme.palette.miscColor6
+            chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            chatInfoButton.icon.color: Theme.palette.miscColor6
            chatInfoButton.onClicked:  { chatInfoButtonClicked(); }

            popupMenu: StatusPopupMenu {
@@ -156,7 +59,7 @@ StatusSectionLayout {
            }
        }

-        StatusScrollView {
+        ScrollView {
            id: scrollView

            anchors.top: statusChatInfoToolBar.bottom
@@ -261,11 +164,70 @@ StatusSectionLayout {
    }

    centerPanel: Item {
-        anchors.fill: parent
-        StatusBaseText {
-            anchors.centerIn: parent
-            font.pixelSize: 15
-            text: qsTr("Community content here")
+        StatusChatToolBar {
+            id: statusChatToolBar
+            anchors.top: parent.top
+            width: parent.width
+
+            chatInfoButton.title: "general"
+            chatInfoButton.subTitle: "Community Chat"
+            chatInfoButton.icon.color: Theme.palette.miscColor6
+            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+            onSearchButtonClicked: {
+                searchButton.highlighted = !searchButton.highlighted;
+                searchPopup.setSearchSelection(communityDetailModalTitle,
+                                               "",
+                                               communityDetailModalImage);
+                searchPopup.open();
+            }
+            membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+            onMembersButtonClicked: {
+                root.showRightPanel = !root.showRightPanel;
+            }
+        }
+
+        StatusSearchPopup {
+            id: searchPopup
+            searchOptionsPopupMenu: searchPopupMenu
+            onAboutToHide: {
+                if (searchPopupMenu.visible) {
+                    searchPopupMenu.close();
+                }
+                //clear menu
+                for (var i = 2; i < searchPopupMenu.count; i++) {
+                    searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
+                }
+            }
+            onClosed: {
+                statusChatToolBar.searchButton.highlighted = false
+                searchPopupMenu.dismiss();
+            }
+            onSearchTextChanged: {
+                if (searchPopup.searchText !== "") {
+                    searchPopup.loading = true;
+                    searchModelSimTimer.start();
+                } else {
+                    searchPopup.searchResults = [];
+                    searchModelSimTimer.stop();
+                }
+            }
+            Timer {
+                id: searchModelSimTimer
+                interval: 500
+                onTriggered: {
+                    if (searchPopup.searchText.startsWith("c")) {
+                        searchPopup.searchResults = Models.searchResultsA;
+                    } else {
+                        searchPopup.searchResults = Models.searchResultsB;
+                    }
+                    searchPopup.loading = false;
+                }
+            }
+        }
+        StatusSearchLocationMenu {
+            id: searchPopupMenu
+            searchPopup: searchPopup
+            locationModel: Models.optionsModel
        }
    }

@@ -296,17 +258,17 @@ StatusSectionLayout {
            model: Models.membersListModel
            delegate: StatusMemberListItem {
                implicitWidth: parent.width
-                nickName: model.localNickname
-                userName: model.displayName
-                pubKey: model.pubKey
-                isVerified: model.isVerified
-                isUntrustworthy: model.isUntrustworthy
-                isContact: model.isContact
-                asset.name: model.icon
-                asset.isImage: (asset.name !== "")
-                asset.isLetterIdenticon: (asset.name === "")
-                asset.imgIsIdenticon: false
-                status: model.onlineStatus
+                nickName: model.nickName
+                userName: model.userName
+                chatKey: model.chatKey
+                trustIndicator: model.trustIndicator
+                isMutualContact: model.isMutualContact
+                image.source: model.source
+                image.isIdenticon: model.isIdenticon
+                isOnline: model.isOnline
+                ringSettings.ringSpecModel: model.ringSpecModel
+                ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+                ringSettings.totalRingUnits: model.totalRingUnits
            }
        }
    }
@@ -3,12 +3,11 @@ 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

-StatusSectionLayout {
+StatusAppTwoPanelLayout {
    id: root

    leftPanel: Item {
@@ -22,7 +21,7 @@ StatusSectionLayout {
            text: "Profile"
        }

-        StatusScrollView {
+        ScrollView {
            anchors.top: profileHeadline.bottom
            anchors.topMargin: 16
            anchors.bottom: parent.bottom
@@ -41,7 +40,7 @@ StatusSectionLayout {
                    model: Models.demoProfileGeneralMenuItems
                    delegate: StatusNavigationListItem {
                        title: model.title
-                        asset.name: model.icon
+                        icon.name: model.icon
                    }
                }

@@ -51,7 +50,7 @@ StatusSectionLayout {
                    model: Models.demoProfileSettingsMenuItems
                    delegate: StatusNavigationListItem {
                        title: model.title
-                        asset.name: model.icon
+                        icon.name: model.icon
                    }
                }

@@ -65,7 +64,7 @@ StatusSectionLayout {
                    model: Models.demoProfileOtherMenuItems
                    delegate: StatusNavigationListItem {
                        title: model.title
-                        asset.name: model.icon
+                        icon.name: model.icon
                    }
                }
            }
@@ -1,155 +0,0 @@
-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.asset.name: "search"
-            placeholderText: "nickname.."
-        }
-
-        StatusIconTabButton {
-            id: contactBtn
-
-            icon.name: "tiny/tiny-contact"
-            identicon.asset.color: Theme.palette.primaryColor1
-            onClicked: highlighted = !highlighted
-        }
-
-        StatusIconTabButton {
-            id: verifiedBtn
-
-            icon.name: "tiny/tiny-checkmark"
-            identicon.asset.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
-            asset.isLetterIdenticon: true
-        }
-    }
-
-    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
-            }
-        }
-    }
-}
@@ -0,0 +1,6 @@
+#include "handler.h"
+
+Handler::Handler(QObject *parent) : QObject(parent)
+{
+
+}
@@ -0,0 +1,16 @@
+#ifndef HANDLER_H
+#define HANDLER_H
+
+#include <QObject>
+
+class Handler : public QObject
+{
+    Q_OBJECT
+public:
+    explicit Handler(QObject *parent = nullptr);
+
+signals:
+    void restartQml();
+};
+
+#endif // HANDLER_H
@@ -4,8 +4,6 @@

 #include "sandboxapp.h"

-#include <qqmlsortfilterproxymodeltypes.h>
-
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
@@ -13,15 +11,6 @@ int main(int argc, char *argv[])
 #endif

    SandboxApp app(argc, argv);
-
-    qqsfpm::registerTypes();
-
-    qputenv("QT_QUICK_CONTROLS_HOVER_ENABLED", QByteArrayLiteral("1"));
-
-    app.setOrganizationName("Status");
-    app.setOrganizationDomain("status.im");
-    app.setApplicationName("Sandbox");
-
    app.startEngine();

    return app.exec();
@@ -2,9 +2,6 @@ import QtQuick 2.14
 import QtQuick.Window 2.14
 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

@@ -15,8 +12,6 @@ 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 {
@@ -36,7 +31,10 @@ StatusWindow {

    property real factor: 1.0

-    Component.onCompleted: rootWindow.updatePosition()
+    Component.onCompleted: {
+        Theme.palette = lightTheme
+        rootWindow.updatePosition();
+    }

    QtObject {
        id: appSectionType
@@ -47,8 +45,7 @@ StatusWindow {
        readonly property int nodeManagement: 4
        readonly property int profileSettings: 5
        readonly property int apiDocumentation: 100
-        readonly property int examples: 101
-        readonly property int demoApp: 102
+        readonly property int demoApp: 101
    }

    function setActiveItem(sectionId) {
@@ -63,11 +60,11 @@ StatusWindow {
        }
    }

-    StatusMainLayout {
+    StatusAppLayout {
        id: appLayout
        anchors.fill: parent

-        leftPanel: StatusAppNavBar {
+        appNavBar: StatusAppNavBar {
            height: rootWindow.height

            communityTypeRole: "sectionType"
@@ -91,298 +88,236 @@ StatusWindow {
                    if(model.sectionType === appSectionType.apiDocumentation)
                    {
                        stackView.push(libraryDocumentationCmp)
-                    }
-                    else if(model.sectionType === appSectionType.examples)
-                    {
-                        stackView.push(examplesCmp)
+                        rootWindow.setActiveItem(sectionId)
                    }
                    else if(model.sectionType === appSectionType.demoApp)
                    {
                        stackView.push(demoAppCmp)
+                        rootWindow.setActiveItem(model.sectionId)
                    }
-                    rootWindow.setActiveItem(model.sectionId)
                }
            }
        }

-        rightPanel: Item {
+        appView: StackView {
+            id: stackView
            anchors.fill: parent
-            StackView {
-                id: stackView
-                anchors.fill: parent
-                initialItem: libraryDocumentationCmp
-            }
-            ThemeSwitch {
-                anchors.top: parent.top
-                anchors.topMargin: 32
-                anchors.right: parent.right
-                anchors.rightMargin: 32
-                lightThemeEnabled: storeSettings.lightTheme
-                onLightThemeEnabledChanged: {
-                    Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
-                    storeSettings.lightTheme = lightThemeEnabled
+            initialItem: libraryDocumentationCmp
+        }
+
+        ThemeSwitch {
+            anchors.top: parent.top
+            anchors.topMargin: 32
+            anchors.right: parent.right
+            anchors.rightMargin: 32
+            onCheckedChanged: {
+                if (Theme.palette === rootWindow.lightTheme) {
+                    Theme.palette = rootWindow.darkTheme
+                } else {
+                    Theme.palette = rootWindow.lightTheme
                }
            }
        }
-
    }

    Component {
        id: libraryDocumentationCmp

-        StatusSectionLayout {
+        StatusAppTwoPanelLayout {
            id: mainPageView
-            showHeader: false

-            function page(name, fillPage) {
-                storeSettings.fillPage = fillPage ? true : false
+            function page(name) {
                viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
            }
            function control(name) {
                viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
-                storeSettings.fillPage = false
            }

-            leftPanel: StatusScrollView {
+            leftPanel: Item {
                anchors.fill: parent
-                anchors.topMargin: 48
+                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

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

-                    StatusListSectionHeadline { text: "StatusQ.Core" }
-                    StatusNavigationListItem {
-                        title: "Icons"
-                        selected: viewLoader.source.toString().includes(title)
-                        onClicked: mainPageView.control(title);
-                    }
+                        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.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: "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);
+                        }
+                        StatusListSectionHeadline { text: "StatusQ.Popup" }
+                        StatusNavigationListItem { 
+                            title: "StatusPopupMenu"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(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: "StatusTextArea"
-                        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: "StatusComboBox"
-                        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);
-                    }
-                    StatusNavigationListItem {
-                        title: "StatusItemSelector"
-                        selected: viewLoader.source.toString().includes(title)
-                        onClicked: mainPageView.page(title, true);
-                    }
-                    StatusNavigationListItem {
-                        title: "StatusChartPanel"
-                        selected: viewLoader.source.toString().includes(title)
-                        onClicked: mainPageView.page(title, true);
-                    }
-                    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);
+                        StatusNavigationListItem {
+                            title: "StatusModal"
+                            selected: viewLoader.source.toString().includes("Popups")
+                            onClicked: mainPageView.control("Popups");
+                        }
+                        StatusListSectionHeadline { text: "StatusQ.Platform" }
+                        StatusNavigationListItem {
+                            title: "StatusMacNotification"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                    }
                }
            }

-            centerPanel: Item {
-                id: centerPanel
+            rightPanel: Item {
+                id: rightPanel
                anchors.fill: parent
-
-                StatusScrollView {
-                    visible: !storeSettings.fillPage
+                ScrollView {
                    anchors.fill: parent
-                    anchors.topMargin: 64
                    contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                    contentWidth: (pageWrapper.width * rootWindow.factor)
                    clip: true

                    Item {
                        id: pageWrapper
-                        width: centerPanel.width
+                        width: rightPanel.width
                        anchors.top: parent.top
+                        anchors.topMargin: 64
                        height: Math.max(rootWindow.height, viewLoader.height + 128)
                        scale: rootWindow.factor
-
                        Loader {
                            id: viewLoader
-                            active: !storeSettings.fillPage
                            anchors.centerIn: parent
-                            source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
+                            source: mainPageView.control("Icons")
                            onSourceChanged: {
-                                storeSettings.selected = viewLoader.source
                                if (source.toString().includes("Icons")) {
                                    item.iconColor = Theme.palette.primaryColor1;
                                }
@@ -390,15 +325,6 @@ StatusWindow {
                        }
                    }
                }
-                Loader {
-                    active: storeSettings.fillPage
-                    anchors.fill: parent
-                    anchors.topMargin: 64
-                    visible: storeSettings.fillPage
-                    clip: true
-
-                    source: viewLoader.source
-                }
            }
        }
    }
@@ -426,57 +352,6 @@ StatusWindow {
        }
    }

-    Component {
-        id: examplesCmp
-
-        StatusSectionLayout {
-            id: examplesView
-            showHeader: false
-
-            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)
-                    }
-                }
-            }
-
-            centerPanel: Item {
-                anchors.fill: parent
-                StatusScrollView {
-                    id: examplesCenterPanel
-                    anchors.fill: parent
-                    anchors.margins: 64
-                    anchors.topMargin: anchors.margins + 32
-
-                    Loader {
-                        id: examplesLoader
-                        width: examplesCenterPanel.availableWidth
-                        source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
-                    }
-                }
-            }
-        }
-    }
-
    Component {
        id: demoAppCmp

@@ -567,12 +442,4 @@ StatusWindow {
            rootWindow.toggleFullScreen()
        }
    }
-
-    Settings {
-        id: storeSettings
-        property string selected: ""
-        property string selectedExample: ""
-        property bool lightTheme: true
-        property bool fillPage: false
-    }
 }
@@ -8,61 +8,57 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1

+
 Column {
    spacing: 8

    StatusAccountSelector {
-        id: selector1
-        width: 300
-        accounts: accountsModel
-    }
-
-    ListModel {
-        id: accountsModel
-
-        ListElement {
-            name: "Pascal"
-            address: "0x1234567891011"
-            path: ""
-            color: "red"
-            publicKey: ""
-            walletType: "generated"
-            isChat: ""
-            currencyBalance:  "1199.02"
-            assets: []
-        }
-        ListElement {
-            name: "Boris"
-            address: "0x123"
-            path: ""
-            color: "red"
-            publicKey: ""
-            walletType: "generated"
-            isChat: ""
-            currencyBalance:  "42.42"
-            assets: []
-        }
-        ListElement {
-            name: "Alexandra"
-            address: "0x123"
-            path: ""
-            color: "yellow"
-            publicKey: ""
-            walletType: "generated"
-            isChat: ""
-            currencyBalance:  "0"
-            assets: []
-        }
-        ListElement {
-            name: "Khushboo"
-            address: "0x123"
-            path: ""
-            color: "blue"
-            publicKey: ""
-            walletType: "watch" // Will be automatically filtered by StatusAccountSelector
-            isChat: ""
-            currencyBalance:  "0"
-            assets: []
+        id: accountSelector
+        accounts: ListModel {
+            ListElement {
+                name: "Pascal"
+                address: "0x1234567891011"
+                path: ""
+                color: "red"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "1199.02"
+                assets: []
+            }
+            ListElement {
+                name: "Boris"
+                address: "0x123"
+                path: ""
+                color: "red"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
+            ListElement {
+                name: "Alexandra"
+                address: "0x123"
+                path: ""
+                color: "yellow"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
+            ListElement {
+                name: "Khushboo"
+                address: "0x123"
+                path: ""
+                color: "blue"
+                publicKey: ""
+                walletType: "generated"
+                isChat: ""
+                currencyBalance:  "0"
+                assets: []
+            }
        }
    }
 }
@@ -2,97 +2,24 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14

-import StatusQ.Core 0.1
 import StatusQ.Components 0.1

 import Sandbox 0.1

-Item {
-    id: root
+Column {
+    spacing: 8

-    implicitWidth: mainLayout.implicitWidth
-    implicitHeight: mainLayout.implicitHeight
+    StatusAddress {
+        text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
+    }

-    GridLayout {
-        id: mainLayout
-
-        columns: 2
-
-        anchors.fill: parent
-
-        columnSpacing: 15
-        rowSpacing: 8
-
-        StatusBaseText { text: "StatusAddress\nsimple" }
+    Item {
+        width: 200
+        height: childrenRect.height
        StatusAddress {
            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
-        }
-
-        StatusBaseText { text: "StatusAddress\nclick-expandable" }
-        StatusAddress {
-            text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
-
-            Layout.preferredWidth: 200
-
            expandable: true
-        }
-
-        StatusBaseText { text: `StatusAddressPanel\nfont.pixelSize: 13, copyable, no frame`}
-        StatusAddressPanel {
-            address: "0xDC2c4826f6C56F61C1b9cC6Bb531d0Fe45402fC9"
-
-            font.pixelSize: 13
-            font.weight: Font.Normal
-
-            showFrame: false
-
-            onDoCopy: copyAction.text = address
-        }
-
-        StatusBaseText { text: `StatusAddressPanel\ncompact; width ${simpleAddressPanel.width}px ${simpleAddressPanel.height}px`}
-        StatusAddressPanel {
-            id: simpleAddressPanel
-            address: "0xd8593DEACe2f44dF35dd23fD2BAFC2daeC2ae033"
-            showCopy: false
-            expanded: false
-            onDoCopy: copyAction.text = address
-            expandable: true
-        }
-
-        StatusBaseText { text: "StatusAddressPanel\ncopy-icon, non-expandable" }
-        StatusAddressPanel {
-            address: "0xDd5A0755e99D66a583253372B569231968A6CF7b"
-            onDoCopy: copyAction.text = address
-        }
-
-        StatusBaseText { text: "StatusAddressPanel\ncopy hiden" }
-        StatusAddressPanel {
-            address: "0xd2D44C2A1E78975506e474Ecdc7E4F272D7e9A6c"
-            autHideCopyIcon: true
-            onDoCopy: copyAction.text = address
-            expandable: true
-        }
-        StatusBaseText { text: "StatusAddressPanel\ncopy hiden, non-expandable" }
-        StatusAddressPanel {
-            address: "0xd2a44BA31E78975506e474Ecdc7E4F272D7F3BC5"
-            autHideCopyIcon: true
-            expanded: false
-            onDoCopy: copyAction.text = address
-        }
-
-        Rectangle {
-            color: "lightblue"
-
-            Layout.fillWidth: true
-            Layout.columnSpan: mainLayout.columns
-            Layout.preferredHeight: 2
-        }
-
-        StatusBaseText {
-            text: qsTr("Copy Action: ")
-        }
-        StatusBaseText {
-            id: copyAction
+            width: parent.width
        }
    }
 }
@@ -0,0 +1,40 @@
+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
+            }
+        }
+    }
+}
+
@@ -1,239 +0,0 @@
-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 {
-            Layout.fillWidth: true
-
-            StatusCard {
-                id: card
-                Layout.alignment: Qt.AlignVCenter
-                primaryText: "Mainnet"
-                secondaryText: state === "unavailable" ? "No Gas" : "75"
-                tertiaryText: state === "unpreferred"  ? "UNPREFERRED" : "BALANCE: " + 250
-                cardIconName: "status"
-                advancedInputText: "75"
-                disabledText: "Disabled"
-            }
-
-            StatusComboBox {
-                Layout.alignment: Qt.AlignVCenter
-                Layout.maximumWidth: 200
-                label: "Card State"
-                onCurrentValueChanged: card.state = currentValue
-                model: ListModel {
-                    ListElement {
-                        name: "default"
-                    }
-                    ListElement {
-                        name: "unavailable"
-                    }
-                    ListElement {
-                        name: "error"
-                    }
-                    ListElement {
-                        name: "unpreferred"
-                    }
-                }
-            }
-
-            StatusCheckBox {
-                Layout.alignment: Qt.AlignVCenter
-                text: "advancedMode"
-                font.family: Theme.palette.monoFont.name
-                onClicked: {
-                    card.advancedMode = checked
-                }
-            }
-        }
-
-        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
-        }
-    }
-}
@@ -1,193 +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.Components 0.1
-
-import Sandbox 0.1
-
-Item {
-
-    QtObject {
-        id: d
-        //dummy data
-        property real stepSize: 1000
-        property real minStep: 12000
-        property real maxStep: 22000
-
-        property var graphTabsModel: [{text: "Price", enabled: true}, {text: "Balance", enabled: false}]
-        property var timeRangeTabsModel: [{text: "1H", enabled: true},
-                {text: "1D", enabled: true},{text: "7D", enabled: true},
-                {text: "1M", enabled: true}, {text: "6M", enabled: true},
-                {text: "1Y", enabled: true}, {text: "ALL", enabled: true}]
-
-        property var simTimer: Timer {
-            running: true
-            interval: 3000
-            repeat: true
-            onTriggered: {
-                d.generateData();
-            }
-        }
-
-        function minutes(minutes = 0) {
-            var newMinute = new Date(new Date().getTime() - (minutes * 60 * 1000)).toString();
-            if (newMinute.slice(10,12) === "00") {
-                var dateToday = new Date(Date.now()).toString();
-                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
-            }
-            return newMinute.slice(10,16);
-        }
-
-        function hour(hours = 0) {
-            var newHour = new Date(new Date().getTime() - (hours * 60 * 60 * 1000)).toString();
-            if (newHour.slice(10,12) === "00") {
-                var dateToday = new Date(Date.now()).toString();
-                return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
-            }
-            return newHour.slice(10,16);
-        }
-
-        function day(before = 0) {
-            var newDay = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
-            return newDay.slice(4,7) + " " + newDay.slice(8,10);
-        }
-
-        function month(before = 0) {
-            var newMonth = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
-            return newMonth.slice(4,7) + " '" + newMonth.slice(newMonth.indexOf("G")-3, newMonth.indexOf("G")-1);
-        }
-
-        property var timeRange: [
-            {'1H': [minutes(60), minutes(55), minutes(50), minutes(45), minutes(40), minutes(35), minutes(30), minutes(25), minutes(20), minutes(15), minutes(10), minutes(5), minutes()]},
-            {'1D': [hour(24), hour(23), hour(22), hour(21), hour(20), hour(19), hour(18), hour(17), hour(16), hour(15), hour(14), hour(13),
-                    hour(12), hour(11), hour(10), hour(9), hour(8), hour(7), hour(6), hour(5), hour(4), hour(3), hour(2), hour(1), hour()]},
-            {'7D': [day(6), day(5), day(4), day(3), day(2), day(1), day()]},
-            {'1M': [day(30), day(28), day(26), day(24), day(22), day(20), day(18), day(16), day(14), day(12), day(10), day(8), day(6), day(4), day()]},
-            {'6M': [month(150), month(120), month(90), month(60), month(30), month()]},
-            {'1Y': [month(330), month(300), month(270), month(240), month(210), month(180), month(150), month(120), month(90), month(60), month(30), month()]},
-            {'ALL': ['2016', '2017', '2018', '2019', '2020', '2021', '2022']}
-        ]
-
-        function generateData() {
-            var result = [];
-            for (var i = 0; i < timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange].length; ++i) {
-                result[i] = Math.random() * (maxStep - minStep) + minStep;
-            }
-            graphDetail.chart.chartData.datasets[0].data = result;
-            graphDetail.chart.animateToNewData();
-        }
-    }
-
-    StatusChartPanel {
-        id: graphDetail
-        height: 290
-        anchors.left: parent.left
-        anchors.leftMargin: 24
-        anchors.right: parent.right
-        anchors.rightMargin: 24
-        anchors.verticalCenter: parent.verticalCenter
-        graphsModel: d.graphTabsModel
-        timeRangeModel: d.timeRangeTabsModel
-        onHeaderTabClicked: {
-            //TODO
-            //if time range tab
-            d.generateData();
-            //if graph bar
-            //switch graph
-        }
-        chart.chartType: 'line'
-        chart.chartData: {
-            return {
-                labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange],
-                datasets: [{
-                    label: 'Price',
-                    xAxisId: 'x-axis-1',
-                    yAxisId: 'y-axis-1',
-                    backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
-                    borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
-                    borderWidth: 3,
-                    pointRadius: 0,
-                    //data: d.generateData()
-                }]
-            }
-        }
-
-        chart.chartOptions: {
-            return {
-                maintainAspectRatio: false,
-                responsive: true,
-                legend: {
-                    display: false
-                },
-                //TODO enable zoom
-//                zoom: {
-//                    enabled: true,
-//                    drag: true,
-//                    speed: 0.1,
-//                    threshold: 2
-//                },
-//                pan:{enabled:true,mode:'x'},
-                tooltips: {
-                    intersect: false,
-                    displayColors: false,
-                    callbacks: {
-                        footer: function(tooltipItem, data) { return 'Vol: $43,042,678,876'; },
-                        label: function(tooltipItem, data) {
-                          let label = data.datasets[tooltipItem.datasetIndex].label || '';
-                            if (label) {
-                                label += ': ';
-                            }
-                            label += tooltipItem.yLabel.toFixed(2);
-                            return label.slice(0,label.indexOf(":")+1)+ " $"+label.slice(label.indexOf(":")+2, label.length);
-                       }
-                    }
-                },
-                scales: {
-                    xAxes: [{
-                       id: 'x-axis-1',
-                       position: 'bottom',
-                       gridLines: {
-                           drawOnChartArea: false,
-                           drawBorder: false,
-                           drawTicks: false,
-                       },
-                       ticks: {
-                           fontSize: 10,
-                           fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
-                           padding: 16
-                       }
-                    }],
-                    yAxes: [{
-                       position: 'left',
-                       id: 'y-axis-1',
-                       gridLines: {
-                          borderDash: [8, 4],
-                          drawBorder: false,
-                          drawTicks: false,
-                          color: (Theme.palette.name === "dark") ? '#909090' : '#939BA1'
-                       },
-                       beforeDataLimits: (axis) => {
-                          axis.paddingTop = 25;
-                          axis.paddingBottom = 0;
-                        },
-                       ticks: {
-                          fontSize: 10,
-                          fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
-                          padding: 8,
-                          min: d.minStep,
-                          max: d.maxStep,
-                          stepSize: d.stepSize,
-                          callback: function(value, index, ticks) {
-                                return '$' + value;
-                          },
-                       }
-                    }]
-                }
-            }
-        }
-    }
-}
@@ -14,9 +14,8 @@ GridLayout {
    StatusChatInfoToolBar {
        chatInfoButton.title: "Cryptokitties"        
        chatInfoButton.subTitle: "128 Members"
-        chatInfoButton.asset.isImage: true
-        chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
-        chatInfoButton.asset.color: Theme.palette.miscColor6
+        chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        chatInfoButton.icon.color: Theme.palette.miscColor6

        popupMenu: StatusPopupMenu {

@@ -1,36 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Item {
-    id: root
-    width: 800
-    height: 100
-
-    Row {
-        id: selectedColor
-        anchors.top: parent.top
-        anchors.left: colorSelectionGrid.left
-        spacing: 10
-        StatusBaseText {
-            text: "SelectedColor is"
-        }
-        Rectangle {
-            width: 100
-            height: 20
-            radius: width/2
-            color: colorSelectionGrid.selectedColor
-        }
-    }
-
-    StatusColorSelectorGrid {
-        id: colorSelectionGrid
-        anchors.top: selectedColor.bottom
-        anchors.topMargin: 10
-        anchors.horizontalCenter: parent.horizontalCenter
-        titleText: "COLOR"
-        selectedColorIndex: 2
-    }
-}
@@ -8,7 +8,7 @@ import StatusQ.Controls 0.1

 import Sandbox 0.1

-Row {
+Column {
    spacing: 8

    StatusColorSelector {
@@ -1,110 +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.Components 0.1
-
-import Sandbox 0.1
-
-Item {
-
-    ColumnLayout {
-        anchors.centerIn: parent
-
-        StatusBaseText {
-            text: qsTr("Thickness")
-        }
-
-        StatusSlider {
-            id: thicknessSlider
-            from: colorSpace.width / 8
-            to: colorSpace.width / 16
-            value: colorSpace.width / 10
-            Layout.fillWidth: true
-        }
-
-        StatusBaseText {
-            text: qsTr("Min saturate: ") + colorSpace.minSaturate.toFixed(2)
-        }
-
-        StatusSlider {
-            id: minSatSlider
-            from: 0
-            to: 0.5
-            value: 0
-            Layout.fillWidth: true
-        }
-
-        StatusBaseText {
-            text: qsTr("Max saturate: ") + colorSpace.maxSaturate.toFixed(2)
-        }
-
-        StatusSlider {
-            id: maxSatSlider
-            from: 0.51
-            to: 1.0
-            value: 1.0
-            Layout.fillWidth: true
-        }
-
-        StatusBaseText {
-            text: qsTr("Min value: ") + colorSpace.minValue.toFixed(2)
-        }
-
-        StatusSlider {
-            id: minValSlider
-            from: 0
-            to: 0.5
-            value: 0
-            Layout.fillWidth: true
-        }
-
-        StatusBaseText {
-            text: qsTr("Max value: ") + colorSpace.maxValue.toFixed(2)
-        }
-
-        StatusSlider {
-            id: maxValSlider
-            from: 0.51
-            to: 1.0
-            value: 1.0
-            Layout.fillWidth: true
-        }
-
-        StatusColorSpace {
-            id: colorSpace
-            color: "#ed77eb"
-            thickness: thicknessSlider.value
-            minSaturate: minSatSlider.value
-            maxSaturate: maxSatSlider.value
-            minValue: minValSlider.value
-            maxValue: maxValSlider.value
-        }
-
-        StatusBaseText {
-            text: qsTr("Color") + ": " + colorSpace.color
-        }
-
-        Rectangle {
-            color: colorSpace.color
-            implicitHeight: 48
-            radius: 10
-            Layout.fillWidth: true
-
-            StatusBaseText {
-                anchors.centerIn: parent
-                color: Theme.palette.white
-                font.pixelSize: 15
-                text: "Quick brown fox jumps over the lazy dog"
-            }
-        }
-
-        StatusButton {
-            text: "Randomize"
-            onPressed: colorSpace.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
-        }
-    }
-}
@@ -1,72 +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: 20
-
-    ListModel {
-        id: commmonModel
-        ListElement {
-            name: "Pascal"
-        }
-        ListElement {
-            name: "Khushboo"
-        }
-        ListElement {
-            name: "Alexandra"
-        }
-        ListElement {
-            name: "Eric"
-        }
-    }
-
-    StatusComboBox {
-        id: combobox
-        label: "ComboBox"
-        model: commmonModel
-    }
-
-    StatusComboBox {
-        id: comboBox1
-        label: "ComboBox with custom delegate"
-        model: commmonModel
-        delegate: StatusItemDelegate {
-            width: comboBox1.control.width
-            highlighted: comboBox1.control.highlightedIndex === index
-            text: modelData
-            font: comboBox1.control.font
-            icon {
-                name: "filled-account"
-                color: Theme.palette.primaryColor1
-            }
-            enabled: index != 2
-        }
-    }
-
-    StatusComboBox {
-        model: commmonModel
-        label: "Disabled ComboBox"
-        enabled: false
-    }
-
-    StatusComboBox {
-        model: commmonModel
-        label: "ComboBox with validation error"
-        validationError: "Validation failed example"
-    }
-
-    StatusComboBox {
-        model: commmonModel
-        label: "Mirrored ComboBox"
-        LayoutMirroring.enabled: true
-    }
-}
-
@@ -1,47 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.13
-
-import StatusQ.Components 0.1
-
-import "../demoapp/data" 1.0
-
-GridLayout {
-
-    QtObject {
-        id: d
-
-        function navigateToCommunity(communityID) {
-            console.log("Clicked community: " + communityID)
-        }
-    }
-
-    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-    columns: 2
-    columnSpacing: 28
-    rowSpacing: 28
-
-    Repeater {
-        model: Models.curatedCommunitiesModel
-        delegate: StatusCommunityCard {
-            locale: "en"
-            communityId: model.communityId
-            loaded: model.available
-            logo: model.logo
-            banner: model.banner
-            name: model.name
-            description: model.description
-            members: model.members
-            activeUsers: model.activeUsers
-            popularity: model.popularity
-            isPrivate: model.isPrivate
-            tokenLogo: model.tokenLogo
-            categories: ListModel {
-                ListElement { name: "Crypto"; emoji: "🔗"}
-                ListElement { name: "Privacy"; emoji: "👻"}
-                ListElement { name: "Social"; emoji: "☕"}
-            }
-
-            onClicked: { d.navigateToCommunity(communityId) }
-        }
-    }
-}
@@ -1,83 +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.Components 0.1
-
-import Sandbox 0.1
-
-import "../demoapp/data" 1.0
-
-Item {
-
-    property int cntSelectedTags: 0
-    property int maxSelectedTags: 4
-    property ListModel tagsModel: ListModel {}
-
-    Component.onCompleted: {
-        tagsModel.clear();
-        for (const key of Object.keys(Models.communityTags)) {
-            tagsModel.append({ name: key, emoji: Models.communityTags[key], selected: false });
-        }
-    }
-
-    ColumnLayout {
-        id: column
-        anchors.centerIn: parent
-        width: 600
-        height: 500
-        spacing: 20
-
-        StatusInput {
-            id: tagsFilter
-            leftPadding: 0
-            rightPadding: 0
-            label: qsTr("Select tags that will fit your Community")
-            input.asset.name: "search"
-            placeholderText: qsTr("Search tags")
-            Layout.fillWidth: true
-        }
-
-        StatusCommunityTags {
-            filterString: tagsFilter.text
-            model: tagsModel
-            enabled: cntSelectedTags < maxSelectedTags
-            onClicked: {
-                cntSelectedTags++;
-                item.selected = true;
-            }
-            Layout.fillWidth: true
-        }
-
-        RowLayout {
-            StatusBaseText {
-                text: qsTr("Selected tags")
-                font.pixelSize: 15
-                Layout.fillWidth: true
-            }
-
-            StatusBaseText {
-                text: cntSelectedTags + "/" + maxSelectedTags
-                color: Theme.palette.baseColor1
-                font.pixelSize: 13
-            }
-        }
-
-        StatusCommunityTags {
-            model: tagsModel
-            showOnlySelected: true
-            onClicked: {
-                cntSelectedTags--;
-                item.selected = false;
-            }
-            Layout.fillWidth: true
-        }
-
-        Item {
-            Layout.fillHeight: true
-        }
-    }
-}
@@ -1,282 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-import QtQml.Models 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups.Dialog 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-ColumnLayout {
-    id: root
-
-    StatusButton {
-        text: "Content"
-        onClicked: contentDialog.open()
-
-        StatusDialog {
-            id: contentDialog
-
-            standardButtons: Dialog.ApplyRole
-
-            StatusBaseText {
-                anchors.fill: parent
-                text: "Content"
-            }
-        }
-    }
-
-    StatusButton {
-        text: "Title and content"
-        onClicked: titleContentDialog.open()
-
-        StatusDialog {
-            id: titleContentDialog
-            title: "Title"
-
-            StatusBaseText {
-                anchors.fill: parent
-                text: "Content"
-            }
-        }
-    }
-
-    StatusButton {
-        text: "No buttons"
-        onClicked: noButtonsDialog.open()
-
-        StatusDialog {
-            id: noButtonsDialog
-            title: "No buttons"
-
-            standardButtons: Dialog.NoButton
-
-            StatusBaseText {
-                anchors.fill: parent
-                text: "Content"
-            }
-        }
-    }
-
-    StatusButton {
-        text: "Long title"
-        onClicked: longTitleDialog.open()
-
-        StatusDialog {
-            id: longTitleDialog
-            title: "Long title long title Long title long title Long title long title"
-
-            StatusBaseText {
-                anchors.fill: parent
-                text: "Content"
-            }
-        }
-    }
-
-    StatusButton {
-        text: "Long title elided"
-        onClicked: longTitleElidedDialog.open()
-
-        StatusDialog {
-            id: longTitleElidedDialog
-            title: "Long title long title Long title long title Long title long title"
-
-            width: 400
-
-            StatusBaseText {
-                anchors.fill: parent
-                text: "Content"
-            }
-        }
-    }
-
-    StatusButton {
-        text: "Title subtitle"
-        onClicked: titleSubtitleDialog.open()
-
-        StatusDialog {
-            id: titleSubtitleDialog
-            title: "This title will be ignored"
-
-            header: StatusDialogHeader {
-                headline.title: "Title"
-                headline.subtitle: "Subtitle"
-
-                actions.closeButton.onClicked: titleSubtitleDialog.close()
-            }
-
-            StatusBaseText {
-                anchors.fill: parent
-                text: "Content"
-            }
-        }
-    }
-
-    StatusButton {
-        text: "Auto adjustable"
-        onClicked: autoAdjustableDialog.open()
-
-        StatusDialog {
-            id: autoAdjustableDialog
-
-            header: StatusDialogHeader {
-                headline.title: "Dialog size will auto adapt"
-                headline.subtitle: "To conent size"
-
-                actions.closeButton.onClicked: autoAdjustableDialog.close()
-            }
-
-            footer: StatusDialogFooter {
-                leftButtons: ObjectModel {
-                    StatusRoundButton {
-                        icon.name: "arrow-left"
-                        onClicked: autoAdjustableDialogContent.implicitWidth -= 100
-                    }
-                    StatusRoundButton {
-                        icon.name: "arrow-right"
-                        onClicked: autoAdjustableDialogContent.implicitWidth += 100
-                    }
-                }
-                rightButtons: ObjectModel {
-                    StatusRoundButton {
-                        icon.name: "arrow-down"
-                        onClicked: autoAdjustableDialogContent.implicitHeight -= 100
-                    }
-                    StatusRoundButton {
-                        icon.name: "arrow-up"
-                        onClicked: autoAdjustableDialogContent.implicitHeight += 100
-                    }
-                }
-            }
-
-            Rectangle {
-                id: autoAdjustableDialogContent
-
-                anchors.fill: parent
-
-                implicitWidth: 200
-                implicitHeight: 200
-
-                color: Theme.palette.primaryColor3
-
-                StatusBaseText {
-                    anchors.centerIn: parent
-                    text: "W: %1 H: %2\nIW: %3 IH: %4".arg(parent.width).arg(parent.height).arg(parent.implicitWidth).arg(parent.implicitHeight)
-                }
-            }
-        }
-    }
-
-    StatusButton {
-        text: "Complex dialog"
-        onClicked: complexDialog.open()
-
-        StatusDialog {
-            id: complexDialog
-
-            header: StatusDialogHeader {
-                id: dialogHeader
-
-                headline.title: "Complex dialog"
-                headline.subtitle: "identicon, title subtitle, custom actions"
-
-                leftComponent: StatusLetterIdenticon {
-                    name: dialogHeader.headline.title
-                }
-
-                actions {
-                    infoButton.visible: true
-
-                    customButtons: ObjectModel {
-                        StatusFlatRoundButton {
-                            icon.name: "warning"
-                            icon.width: 20
-                            icon.height: 20
-                        }
-                    }
-
-                    closeButton.onClicked: complexDialog.close()
-                }
-            }
-
-            footer: StatusDialogFooter {
-                leftButtons: ObjectModel {
-                    StatusRoundButton {
-                        icon.name: "arrow-left"
-                    }
-                }
-                rightButtons: ObjectModel {
-                    StatusButton {
-                        text: "Custom cancel action"
-                        type: StatusButton.Danger
-                    }
-                    StatusButton {
-                        text: "Custom approve action"
-                    }
-                }
-            }
-
-            ColumnLayout {
-                anchors.fill: parent
-
-                StatusBaseText {
-                    text: "Content A"
-                }
-
-                StatusBaseText {
-                    text: "Content B"
-                }
-
-                StatusBaseText {
-                    text: "Content C"
-                }
-            }
-        }
-    }
-
-    StatusButton {
-        text: "Custom header/footer"
-        onClicked: customHeaderAndFooter.open()
-
-        StatusDialog {
-            id: customHeaderAndFooter
-            title: "No buttons"
-
-            header: Rectangle {
-                implicitHeight: customHeaderText.height * 2
-                implicitWidth: customHeaderText.width * 2
-
-                border.width: 2
-                color: Theme.palette.statusPopupMenu.hoverBackgroundColor
-
-                StatusBaseText {
-                    id: customHeaderText
-                    anchors.centerIn: parent
-                    text: "Custom header"
-                }
-            }
-
-            footer: Rectangle {
-                implicitHeight: customHeaderText.height * 2
-                implicitWidth: customHeaderText.width * 2
-
-                border.width: 2
-                color: Theme.palette.statusPopupMenu.hoverBackgroundColor
-
-                StatusBaseText {
-                    id: customFooter
-                    anchors.centerIn: parent
-                    text: "Custom footer"
-                }
-            }
-
-
-            StatusBaseText {
-                anchors.fill: parent
-                text: "Content"
-            }
-        }
-    }
-}
@@ -26,7 +26,7 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter

        expandable: false
-        asset.name: "seed-phrase"
+        icon.name: "seed-phrase"
        primaryText: "Back up seed phrase"
        secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD"
        button.text: qsTr("Back up seed phrase")
@@ -36,7 +36,7 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter

        expandable: true
-        asset.name: "secret"
+        icon.name: "secret"
        primaryText: "Account signing phrase"
        secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed."
        expandableComponent: notImplemented
@@ -46,7 +46,7 @@ Column {
        anchors.horizontalCenter: parent.horizontalCenter

        expandable: true
-        asset.name: "seed-phrase"
+        icon.name: "seed-phrase"
        primaryText: "View private key"
        secondaryText: "Back up your seed phrase now to secure this account"
        expandableComponent: notImplemented
@@ -74,8 +74,7 @@ Column {

        type: StatusExpandableItem.Type.Secondary
        expandable: true
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        primaryText: "CryptoKitties"
        additionalText: "1456 USD"
        expandableComponent: notImplemented
@@ -86,8 +85,7 @@ Column {

        type: StatusExpandableItem.Type.Secondary
        expandable: true
-        asset.isImage: true
-        asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
        primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
        additionalText: "564.90 USD"
        expandableComponent: notImplemented
@@ -1,259 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-import QtQuick.Dialogs 1.3
-import QtQml 2.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-import QtGraphicalEffects 1.14
-
-import StatusQ.Components 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Popups 0.1
-
-Item {
-    id: root
-
-    implicitWidth: mainLayout.implicitWidth
-    implicitHeight: mainLayout.implicitHeight
-
-    property var testControls: [ctrl1, ctrl2, ctrl3]
-
-    property bool globalStylePreferRound: true
-    property var testImageList: ["qrc:/demoapp/data/logo-test-image.png",
-                                 "qrc:/demoapp/data/profile-image-2.jpeg",
-                                 "qrc:/demoapp/data/profile-image-1.jpeg"]
-    property int testImageIndex: 0
-    property int testSpacing: 0
-    property int testFrameMargins: 10
-
-    ColumnLayout {
-        id: mainLayout
-
-        anchors.fill: parent
-
-        RowLayout {
-            spacing: root.testSpacing
-
-            ColumnLayout {
-                spacing: root.testSpacing
-                Layout.margins: root.testSpacing
-
-                Text {
-                    text: `AR: ${ctrl1.aspectRatio.toFixed(2)}`
-                }
-
-                StatusImageCropPanel {
-                    id: ctrl1
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: root.testImageList[root.testImageIndex]
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                    margins: root.testFrameMargins
-                }
-                Text {
-                    text: `AR: ${ctrl2.aspectRatio.toFixed(2)}`
-                }
-                StatusImageCropPanel {
-                    id: ctrl2
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: root.testImageList[root.testImageIndex]
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rectangular : StatusImageCrop.WindowStyle.Rounded
-                    aspectRatio: 16/9
-                    enableCheckers: true
-                    margins: root.testFrameMargins + 2
-                }
-            }
-            ColumnLayout {
-                Layout.margins: root.testSpacing
-                Text {
-                    text: `AR: ${ctrl3.aspectRatio.toFixed(2)}`
-                }
-                StatusImageCropPanel {
-                    id: ctrl3
-
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: root.testImageList[root.testImageIndex]
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                    aspectRatio: 0.8
-
-                    margins: root.testFrameMargins + 5.3
-                }
-            }
-        }
-        RowLayout {
-            StatusButton {
-                text: qsTr("Cycle image")
-                onClicked: {
-                    let newIndex = root.testImageIndex
-                    newIndex++
-                    if(newIndex >= root.testImageList.length)
-                        newIndex = 0
-                    root.testImageIndex = newIndex
-                }
-            }
-            StatusButton {
-                text: qsTr("Cycle spacing")
-                onClicked: {
-                    root.testSpacing += (root.testSpacing/2) + 1
-                    if(root.testSpacing > 35)
-                        root.testSpacing = 0
-                }
-            }
-            StatusButton {
-                text: qsTr("Cycle frame margins")
-                onClicked: {
-                    root.testFrameMargins += (root.testFrameMargins/2) + 1
-                    if(root.testFrameMargins > 50)
-                        root.testFrameMargins = 0
-                }
-            }
-            StatusButton {
-                text: qsTr("Load external image")
-                onClicked: workflowLoader.active = true
-            }
-        }
-    }
-
-    Loader {
-        id: workflowLoader
-
-        sourceComponent: workflowComponent
-        active: false
-        onStatusChanged: {
-            if(status === Loader.Ready) {
-                item.imageFileDialogTitle = qsTr("Test Title")
-                item.title = "Test popup"
-                item.acceptButtonText = "Load Custom Image"
-                item.chooseImageToCrop()
-            }
-        }
-
-        Connections {
-            target: workflowLoader.item
-            function onImageCropped(image, cropRect) {
-                ctrl1.source = image
-                ctrl2.source = image
-                ctrl3.source = image
-            }
-            function onCanceled() {
-                workflowLoader.active = false
-            }
-        }
-    }
-
-    Component {
-        id: workflowComponent
-
-        Item {
-            id: workflowItem
-
-            property alias aspectRatio: imageCropper.aspectRatio
-            property alias windowStyle: imageCropper.windowStyle
-            /*required*/ property string imageFileDialogTitle: ""
-            /*required*/ property string title: ""
-            /*required*/ property string acceptButtonText: ""
-            property bool roundedImage: true
-
-            signal imageCropped(var image, var cropRect)
-            signal canceled()
-
-            function chooseImageToCrop() {
-                fileDialog.open()
-            }
-
-            FileDialog {
-                id: fileDialog
-
-                title: workflowItem.imageFileDialogTitle
-                folder: workflowItem.userSelectedImage ? imageCropper.source.substr(0, imageCropper.source.lastIndexOf("/")) : shortcuts.pictures
-                nameFilters: [qsTr("Supported image formats (%1)").arg("*.jpg *.jpeg *.jfif *.webp *.png *.heif")]
-                onAccepted: {
-                    if (fileDialog.fileUrls.length > 0) {
-                        imageCropper.source = fileDialog.fileUrls[0]
-                        imageCropperModal.open()
-                    }
-                }
-                onRejected: workflowItem.canceled()
-            } // FileDialog
-
-            StatusModal {
-                id: imageCropperModal
-
-                header.title: workflowItem.title
-
-                anchors.centerIn: Overlay.overlay
-
-                width: workflowItem.roundedImage ? 480 : 580
-
-                onClosed: workflowItem.canceled()
-
-                StatusImageCropPanel {
-                    id: imageCropper
-
-                    implicitHeight: workflowItem.roundedImage ? 350 : 370
-
-                    anchors {
-                         fill: parent
-                         leftMargin: 10 * 2
-                         rightMargin: 10 * 2
-                         topMargin: 15
-                         bottomMargin: 15
-                    }
-
-                    margins: workflowItem.roundedImage ? 10 : 20
-                    windowStyle: workflowItem.roundedImage ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                    enableCheckers: true
-                }
-
-                rightButtons: [
-                    StatusButton {
-                        text: workflowItem.acceptButtonText
-
-                        enabled: imageCropper.sourceSize.width > 0 && imageCropper.sourceSize.height > 0
-
-                        onClicked: {
-                            workflowItem.imageCropped(imageCropper.source, imageCropper.cropRect)
-                            imageCropperModal.close()
-                        }
-                    }
-                ]
-            } // StatusModal
-        } // Item
-    }
-
-
-    Shortcut {
-        sequence: StandardKey.ZoomIn
-        onActivated: {
-            for(let i in testControls) {
-                const c = testControls[i]
-                c.setCropRect(ctrl1.inflateRectBy(c.cropRect, -0.05))
-            }
-        }
-    }
-
-    Shortcut {
-        sequence: StandardKey.ZoomOut
-        onActivated: {
-            for(let i in testControls) {
-                const c = testControls[i]
-                c.setCropRect(ctrl1.inflateRectBy(c.cropRect, 0.05))
-            }
-        }
-    }
-
-    Shortcut {
-        sequences: ["Ctrl+W"]
-        onActivated: globalStylePreferRound = !globalStylePreferRound
-    }
-}
@@ -12,133 +12,82 @@ Column {
    spacing: 8

    StatusInput {
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
    }

    StatusInput {
        label: "Label"
-        placeholderText: "Disabled"
+        input.placeholderText: "Disabled"
        input.enabled: false
    }

    StatusInput {
-        placeholderText: "Clearable"
+        input.placeholderText: "Clearable"
        input.clearable: true
    }

    StatusInput {
-        placeholderText: "Invalid"
+        input.placeholderText: "Invalid"
        input.valid: false
    }

    StatusInput {
        label: "Label"
-        input.asset.name: "search"
+
+        input.icon.name: "search"
        input.placeholderText: "Input with icon"
    }

    StatusInput {
        label: "Label"
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
        input.clearable: true
    }

    StatusInput {
        charLimit: 30
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
        input.clearable: true
    }

    StatusInput {
        label: "Label"
        charLimit: 30
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
        input.clearable: true
    }

-    StatusPasswordInput {
-        placeholderText: "Password"
-    }
-
-    StatusPasswordInput {
-        signingPhrase: "orange hello cygnet"
-        placeholderText: "Password"
-    }
-
-    Item {
-        implicitWidth: 480
-        implicitHeight: 82
-        z: 100000
-        StatusSeedPhraseInput {
-            id: statusSeedInput
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: parent.height
-            textEdit.input.anchors.leftMargin: 16
-            textEdit.input.anchors.rightMargin: 16
-            textEdit.input.anchors.topMargin: 11
-            textEdit.label: "Input with drop down selection list" + (insertedWord ? ` (${insertedWord})` : "")
-            leftComponentText: "1"
-            inputList: ListModel {
-                ListElement {
-                    seedWord: "add"
-                }
-                ListElement {
-                    seedWord: "address"
-                }
-                ListElement {
-                    seedWord: "panda"
-                }
-                ListElement {
-                    seedWord: "posible"
-                }
-                ListElement {
-                    seedWord: "win"
-                }
-                ListElement {
-                    seedWord: "wine"
-                }
-                ListElement {
-                    seedWord: "wing"
-                }
-            }
-
-            property string insertedWord: ""
-            onDoneInsertingWord: insertedWord = word
-        }
-    }
-
    StatusInput {
        label: "Label"
        charLimit: 30
        errorMessage: "Error message"
+
        input.clearable: true
        input.valid: false
-        placeholderText: "Placeholder"
+        input.placeholderText: "Placeholder"
    }

    StatusInput {
        label: "StatusInput"
        secondaryLabel: "with right icon"
-        input.asset.width: 15
-        input.asset.height: 11
-        input.asset.name: text !== "" ? "checkmark" : ""
+        input.icon.width: 15
+        input.icon.height: 11
+        input.icon.name: text !== "" ? "checkmark" : ""
        input.leftIcon: false
    }

    StatusInput {
        label: "Label"
        secondaryLabel: "secondary label"
-        placeholderText: "Placeholder"
-        minimumHeight: 56
-        maximumHeight: 56
+        input.placeholderText: "Placeholder"
+        input.implicitHeight: 56
    }

    StatusInput {
        id: input
        label: "Label"
        charLimit: 30
-        placeholderText: "Input with validator"
+        input.placeholderText: "Input with validator"

        validators: [
            StatusMinLengthValidator {
@@ -153,24 +102,10 @@ Column {
        ]
    }

-    StatusInput {
-        label: "Input with <i>StatusRegularExpressionValidator</i>"
-        charLimit: 30
-        placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
-        validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
-
-        validators: [
-            StatusRegularExpressionValidator {
-                regularExpression: /^[0-9A-Za-z_\$-\s]*$/
-                errorMessage: "Bad input!"
-            }
-        ]
-    }
-
    StatusInput {
        label: "Label"
-        placeholderText: "Input width component (right side)"
-        input.rightComponent: StatusIcon {
+        input.placeholderText: "Input width component (right side)"
+        input.component: StatusIcon {
            icon: "cancel"
            height: 16
            color: Theme.palette.dangerColor1
@@ -180,61 +115,19 @@ Column {

    StatusInput {
        input.multiline: true
-        placeholderText: "Multiline"
+        input.placeholderText: "Multiline"
    }

    StatusInput {
        input.multiline: true
-        placeholderText: "Multiline with static height"
-        minimumHeight: 100
-        maximumHeight: 100
+        input.placeholderText: "Multiline with static height"
+        input.implicitHeight: 100
    }

    StatusInput {
        input.multiline: true
-        placeholderText: "Multiline with max/min"
-        minimumHeight: 80
-        maximumHeight: 200
-    }
-
-    StatusInput {
-        property bool toggled: true
-        label: "Input with emoji icon"
-        input.placeholderText: "Enter Name"
-        input.asset.emoji: toggled ? "😁" : "🧸"
-        input.asset.color: "blue"
-        input.isIconSelectable: true
-        onIconClicked: {
-            toggled = !toggled
-        }
-    }
-
-    StatusInput {
-        property bool toggled: true
-        label: "Input with selectable icon which is not an emoji"
-        input.placeholderText: "Enter Name"
-        input.asset.emoji: ""
-        input.asset.name: toggled ? "filled-account" : "image"
-        input.asset.color: "blue"
-        input.isIconSelectable: true
-        onIconClicked: {
-            toggled = !toggled
-        }
-    }
-
-    StatusInput {
-        label: "Input with inline token selector"
-        input.leftComponent: StatusTokenInlineSelector {
-            tokens: [{amount: 0.1, token: "ETH"},
-                     {amount: 10, token: "SNT"},
-                     {amount: 15, token: "MANA"}]
-
-            StatusToolTip {
-                id: toolTip
-                text: "posted"
-            }
-            onTriggered: toolTip.visible = true
-        }
-        input.edit.readOnly: true
+        input.placeholderText: "Multiline with max/min"
+        input.minimumHeight: 80
+        input.maximumHeight: 200
    }
 }
@@ -1,63 +0,0 @@
-import QtQuick 2.14
-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"
-
-        itemsModel: ListModel {
-            id: model
-        }
-
-        StatusDropdown {
-            id: dropdown
-
-            parent: selector.addButton
-            width: 200
-            contentItem: ColumnLayout {
-                spacing: 10
-                StatusInput {
-                    id: input
-                    text: "Sample"
-                    Layout.fillWidth: true
-                }
-                StatusButton {
-                    Layout.alignment: Qt.AlignHCenter
-                    text: "Add element"
-                    onClicked: {
-                        model.append({
-                            text: input.text,
-                            imageSource: "qrc:/images/SNT.png",
-                            operator: model.count > 0 ? Utils.Operators.Or : Utils.Operators.None
-                        })
-
-                        dropdown.close()
-                    }
-                }
-            }
-        }
-
-        addButton.onClicked: {
-            dropdown.x = mouse.x
-            dropdown.y = mouse.y
-            dropdown.open()
-        }
-    }
-
-    StatusButton {
-        Layout.alignment: Qt.AlignHCenter
-        text: "Clear list"
-        onClicked: { selector.itemsModel.clear() }
-    }
-}
@@ -1,82 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Core 0.1
-
-import "../demoapp/data" 1.0
-
-GridLayout {
-    id: root
-    columns: 1
-    rowSpacing: 150
-
-    GridLayout {
-        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        rows: 4
-        columns: 2
-        rowSpacing: 170
-        columnSpacing: 150
-        z: 100
-        StatusListPicker {
-            id: languagePicker
-            z: 100
-            inputList: Models.languagePickerModel
-            placeholderSearchText: qsTr("Search Languages")
-            menuAlignment: StatusListPicker.MenuAlignment.Left
-        }
-
-        StatusListPicker {
-            id: languagePicker2
-            z: 100
-            inputList: Models.languageNoImagePickerModel
-            placeholderSearchText: qsTr("Search Languages")
-            menuAlignment: StatusListPicker.MenuAlignment.Center
-            multiSelection: true
-        }
-
-        StatusListPicker {
-            id: currencyPicker
-            inputList: Models.currencyPickerModel
-            placeholderSearchText: qsTr("Search Currencies")
-            multiSelection: true
-        }
-
-        StatusListPicker {
-            id: currencyPicker2
-            inputList: Models.currencyPickerModel2
-            placeholderSearchText: qsTr("Search Currencies")
-            multiSelection: true
-            printSymbol: true
-            enableSelectableItem: false
-        }
-    }
-
-    StatusBaseText {
-        id: pageDesc
-        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        height: 100
-        width: 500
-        text: "4 different configurations for the `StatusListPicker` component:\n
-    * Single selection. \n
-    * Multiple selection without images.\n
-    * Multiple selection.\n
-    * Multiple selection and displayed name is the symbol + shortName\n"
-        color: Theme.palette.baseColor1
-        font.pixelSize: 15
-    }
-
-    // Outsite area
-    MouseArea {
-        height: root.height
-        width: root.width
-        onClicked: {
-            languagePicker.close()
-            languagePicker2.close()
-            currencyPicker.close()
-            currencyPicker2.close()
-        }
-    }
-}
@@ -72,73 +72,4 @@ Column {
        text: "Introduced PIN: " + regexPinInput.pinInput
        font.pixelSize: 12
    }
-
-    // PUK input that accepts only numbers
-    StatusBaseText {
-        topPadding: 100
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Enter Keycard PUK"
-        font.pixelSize: 30
-        font.bold: true
-    }
-
-    StatusPinInput {
-        id: numbersPukInput
-        anchors.horizontalCenter: parent.horizontalCenter
-        validator: StatusRegularExpressionValidator { regularExpression: /[0-9]+/ }
-        pinLen: 12
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.dangerColor1
-        text: "Only numbers allowed"
-        font.pixelSize: 16
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Introduced PUK: " + numbersPukInput.pinInput
-        font.pixelSize: 12
-    }
-
-    // PUK input that accepts only numbers
-    StatusBaseText {
-        topPadding: 100
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Enter Keycard PUK"
-        font.pixelSize: 30
-        font.bold: true
-    }
-
-    StatusPinInput {
-        id: numbersPukInputWithSpacing
-        anchors.horizontalCenter: parent.horizontalCenter
-        validator: StatusRegularExpressionValidator { regularExpression: /[0-9]+/ }
-        pinLen: 12
-        additionalSpacing: 32
-        additionalSpacingOnEveryNItems: 4
-
-        Component.onCompleted: {
-            numbersPukInputWithSpacing.statesInitialization()
-            numbersPukInputWithSpacing.forceFocus()
-        }
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.dangerColor1
-        text: "Only numbers allowed"
-        font.pixelSize: 16
-    }
-
-    StatusBaseText {
-        anchors.horizontalCenter: parent.horizontalCenter
-        color: Theme.palette.directColor1
-        text: "Introduced PUK: " + numbersPukInputWithSpacing.pinInput
-        font.pixelSize: 12
-    }
 }
@@ -28,11 +28,6 @@ GridLayout {
        onClicked: customMenu.popup()
    }

-    StatusButton {
-        text: "Menu with custom font settings"
-        onClicked: differentFontMenu.popup()
-    }
-

    StatusPopupMenu {
        id: simpleMenu
@@ -55,30 +50,30 @@ GridLayout {

        StatusMenuItem { 
            text: "One" 
-            assetSettings.name: "info"
+            iconSettings.name: "info"
        }

        StatusMenuSeparator {}

        StatusMenuItem { 
            text: "Two"
-            assetSettings.name: "info"
+            iconSettings.name: "info"
        }

        StatusMenuItem { 
            text: "Three"
-            assetSettings.name: "info"
+            iconSettings.name: "info"
        }

        StatusPopupMenu {
            title: "Four"
            StatusMenuItem { 
                text: "One"
-                assetSettings.name: "info"
+                iconSettings.name: "info"
            }
            StatusMenuItem { 
                text: "Three"
-                assetSettings.name: "info"
+                iconSettings.name: "info"
            }
        }
    }
@@ -89,7 +84,7 @@ GridLayout {
        subMenuItemIcons: [
            { icon: "chat" },
            { 
-                source: "qrc:/demoapp/data/profile-image-1.jpeg"
+                source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" 
            },
            { 
                isLetterIdenticon: true, 
@@ -108,16 +103,14 @@ GridLayout {

            StatusMenuItem { 
                text: "vitalik.eth"
-                assetSettings.isImage: true
-                assetSettings.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+                image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-                assetSettings.imgIsIdenticon: true
+                image.isIdenticon: true
            }

            StatusMenuItem { 
                text: "Pascal"
-                assetSettings.isImage: true
-                assetSettings.name: "qrc:/demoapp/data/profile-image-1.jpeg"
+                image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            }
        }

@@ -126,21 +119,21 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

            StatusMenuItem { 
                text: "welcome" 
-                assetSettings.name: "channel"
-                assetSettings.color: Theme.palette.directColor1
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
            }
            StatusMenuItem { 
                text: "support" 
-                assetSettings.name: "channel"
-                assetSettings.color: Theme.palette.directColor1
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
            }

            StatusMenuHeadline { text: "Public" }

            StatusMenuItem { 
                text: "news" 
-                assetSettings.name: "channel"
-                assetSettings.color: Theme.palette.directColor1
+                iconSettings.name: "channel"
+                iconSettings.color: Theme.palette.directColor1
            }
        }

@@ -149,27 +142,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I

            StatusMenuItem { 
                text: "welcome" 
-                assetSettings.isLetterIdenticon: true
-                assetSettings.bgColor: "red"
+                iconSettings.isLetterIdenticon: true
+                iconSettings.background.color: "red"
            }
        }
    }
-
-    StatusPopupMenu {
-        id: differentFontMenu
-        StatusMenuItem {
-            text: "Bold"
-            fontSettings.bold: true
-        }
-
-        StatusMenuItem {
-            text: "Italic"
-            fontSettings.italic: true
-        }
-
-        StatusMenuItem {
-            text: "16px"
-            fontSettings.pixelSize: 16
-        }
-    }
 }
@@ -8,49 +8,36 @@ import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1

 import Sandbox 0.1
-
 Column {
-    spacing: 20
-
-    ListModel {
-        id: commmonModel
-        ListElement {
-            name: "Pascal"
-        }
-        ListElement {
-            name: "Khushboo"
-        }
-        ListElement {
-            name: "Alexandra"
-        }
-        ListElement {
-            name: "Eric"
-        }
-    }
-
-    StatusBaseText {
-        font.pixelSize: 16
-        color: Theme.palette.dangerColor1
-        text: "This component should no longer be used.<br />Please, use `StatusComboBox` instead."
-        textFormat: Text.MarkdownText
-    }
+    spacing: 8

    StatusSelect {
        id: select
        label: "Some label"
-        model: commmonModel
-
+        model: ListModel {
+            ListElement {
+                name: "Pascal"
+            }
+            ListElement {
+                name: "Khushboo"
+            }
+            ListElement {
+                name: "Alexandra"
+            }
+            ListElement {
+                name: "Eric"
+            }
+        }
        selectMenu.delegate: StatusMenuItemDelegate {
            statusPopupMenu: select
            action: StatusMenuItem {
-                assetSettings.name: "filled-account"
+                iconSettings.name: "filled-account"
                text: name
                onTriggered: {
                    selectedItem.text = name
                }
            }
        }
-
        selectedItemComponent: Item {
            id: selectedItem
            anchors.fill: parent
@@ -1,27 +0,0 @@
-import QtQuick 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-
-import Sandbox 0.1
-
-Column {
-    spacing: 8
-
-    StatusTabBar {
-        StatusTabButton {
-            width: implicitWidth
-            text: "Button 1"
-        }
-        StatusTabButton {
-            width: implicitWidth
-            text: "Button 2"
-        }
-        StatusTabButton {
-            width: implicitWidth
-            text: "Button 3"
-            badge.value: 42
-        }
-    }
-}
@@ -9,21 +9,17 @@ Item {
    property ListModel asortedContacts: ListModel {
        ListElement {
            publicId: "0x0"
-            name: "emily.eth"
+            name: "Maria"
            icon: ""
            isIdenticon: false
            onlineStatus: 3
-            isReadonly: false
-            tagIcon: ""
        }
        ListElement {
            publicId: "0x1"
-            name: "vitalikbuterin"
-            icon: "qrc:/demoapp/data/profile-image-1.jpeg"
+            name: "James"
+            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            isIdenticon: false
            onlineStatus: 1
-            isReadonly: false
-            tagIcon: ""
        }
        ListElement {
            publicId: "0x2"
@@ -31,17 +27,13 @@ Item {
            icon: ""
            isIdenticon: false
            onlineStatus: 2
-            isReadonly: false
-            tagIcon: ""
        }
        ListElement {
            publicId: "0x3"
-            name: "carmen.eth"
+            name: "Tracy"
            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
            isIdenticon: true
            onlineStatus: 3
-            isReadonly: true
-            tagIcon: "crown"
        }
        ListElement {
            publicId: "0x4"
@@ -49,8 +41,6 @@ Item {
            icon: ""
            isIdenticon: false
            onlineStatus: 3
-            isReadonly: false
-            tagIcon: ""
        }
    }

@@ -61,6 +51,6 @@ Item {
        anchors.centerIn: parent
        namesModel: root.asortedContacts
        toLabelText: qsTr("To: ")
-        warningText: qsTr("USER LIMIT REACHED")
+        warningText: qsTr("5 USER LIMIT REACHED")
    }
 }
@@ -1,61 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-
-Column {
-    id: root
-
-    spacing: 8
-
-    Component.onCompleted: {
-        focusedTextArea.forceActiveFocus()
-    }
-
-    StatusTextArea {
-        id: focusedTextArea
-        width: parent.width
-        placeholderText: "Initially focused text area"
-        KeyNavigation.tab: unfocusedTextArea
-    }
-
-    StatusTextArea {
-        id: unfocusedTextArea
-        width: parent.width
-        placeholderText: "Unfocused text area (hover me to see the color change)"
-        KeyNavigation.tab: invalidTextArea
-    }
-
-    StatusTextArea {
-        id: invalidTextArea
-        width: parent.width
-        valid: false
-        placeholderText: "Invalid text area, should display red border"
-        KeyNavigation.tab: longTextArea
-    }
-
-    StatusScrollView {
-        padding: 0 // use our own (StatusTextArea) padding
-        width: parent.width
-        height: 120
-        TextArea.flickable: longTextArea
-        StatusTextArea {
-            id: longTextArea
-            text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet lectus quis justo. Sed vel lectus. \
-            Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Morbi scelerisque luctus velit. Nunc auctor. Nullam at \
-            arcu a est sollicitudin euismod. Cras elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, \
-            per inceptos hymenaeos. Fusce aliquam vestibulum ipsum. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. \
-            Nullam sit amet magna in magna gravida vehicula. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nullam faucibus \
-            mi quis velit. Nam sed tellus id magna elementum tincidunt. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, \
-            eget facilisis enim ipsum id lacus. Maecenas aliquet accumsan leo. Aliquam erat volutpat."
-            KeyNavigation.tab: focusedTextArea
-        }
-    }
-
-    StatusTextArea {
-        enabled: false
-        placeholderText: "Disabled text area"
-    }
-}
@@ -15,11 +15,10 @@ Item {
            width: parent.width
            height: childrenRect.height
            model: [
-                {"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":"", "duration":0},
-                {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
-                {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com", "duration":0},
-                {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
-                {"title":"Test User", "subTitle":"Hello message...", "icon":"", "loading":false, "type":0,"url":"", "duration":4000}
+                {"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":""},
+                {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""},
+                {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com"},
+                {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""}
            ]
            delegate: StatusToastMessage {
                primaryText: modelData.title
@@ -28,15 +27,12 @@ Item {
                loading: modelData.loading
                type: modelData.type
                linkUrl: modelData.url
-                duration: modelData.duration
                onLinkActivated: {
                    Qt.openUrlExternally(link);
                }
-                onClose: {
-                    console.warn("toast closed: ", modelData.title)
-                }
-                onClicked: {
-                    console.warn("toast clicked")
+                //simulate open
+                Component.onCompleted: {
+                    open = true;
                }
            }
        }
--- a/Show More
+++ b/Show More