test docs

feat(StatusQ) Adding qdoc related files
2022-02-10 16:38:33 -05:00 · 2022-02-10 16:37:57 -05:00 · 2022-02-10 22:39:47 +02:00
10377 changed files with 3935 additions and 42089 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,3 @@ Makefile
 *_qml.cpp
 *_qmlcache.qrc
 sandbox/qmlcache_loader.cpp
-doc/html
-CMakeLists.txt.user
-.vscode
-build/
@@ -1,43 +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)
-
-
-#### Features
-
-* **StatusListItem:**  add highlighted property ([5780f183](5780f183))
-* **StatusQ.Components:**  Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
-
-
-
 <a name=""></a>
 ##  Version 0.23.0 (2022-02-08)

@@ -1,5 +0,0 @@
-cmake_minimum_required(VERSION 3.19)
-
-project(StatusQ)
-
-add_subdirectory(tests)
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- StatusBaseText.qml -->
+  <title>List of All Members for StatusBaseText | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">List of All Members for StatusBaseText</h1>
+<p>This is the complete list of members for <a href="qml-statusq-core-statusbasetext.html">StatusBaseText</a>, including inherited members.</p>
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- StatusBaseText.qml -->
+  <title>StatusBaseText QML Type | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<div class="sidebar">
+<div class="toc">
+<h3><a name="toc">Contents</a></h3>
+<ul>
+<li class="level1"><a href="#details">Detailed Description</a></li>
+</ul>
+</div>
+<div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusBaseText QML Type</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusBaseText-brief -->
+<p>Displays multiple lines of text. Inherits <a href="https://doc.qt.io/qt-5/qml-qtquick-text.html">Text</a>. <a href="#details">More...</a></p>
+<!-- @@@StatusBaseText -->
+<div class="table"><table class="alignedsummary">
+<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import StatusQ.Core 0.1</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Since:</td><td class="memItemRight bottomAlign"> StatusQ.Core 0.1</td></tr></table></div><ul>
+<li><a href="qml-statusq-core-statusbasetext-members.html">List of all members, including inherited members</a></li>
+</ul>
+<!-- $$$StatusBaseText-description -->
+<a name="details"></a>
+<h2 id="details">Detailed Description</h2>
+<p>The <code>StatusBaseText</code> item displays text. For example:</p>
+<pre class="qml"><span class="type"><a href="qml-statusq-core-statusbasetext.html">StatusBaseText</a></span> {
+    <span class="name">width</span>: <span class="number">240</span>
+    <span class="name">text</span>: <span class="string">&quot;Hello World!&quot;</span>
+    <span class="name">font</span>.pixelSize: <span class="number">24</span>
+    <span class="name">color</span>: <span class="name">Theme</span>.<span class="name">pallete</span>.<span class="name">directColor1</span>
+}</pre>
+<p class="centerAlign"><img src="images/status_base_text.png" alt="" /></p><p>For a list of components available see <a href="statusq-index.html">StatusQ</a>.</p>
+<!-- @@@StatusBaseText -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqcomponents.qdoc -->
+  <title>StatusQ Components | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Components</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Components</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Components-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Components components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusAddress</li>
+<li>StatusBadge</li>
+<li>StatusChatInfoToolBar</li>
+<li>StatusChatList</li>
+<li>StatusChatListItem</li>
+<li>StatusImageSettings</li>
+<li>StatusChatListCategory</li>
+<li>StatusChatListCategoryItem</li>
+<li>StatusChatListAndCategories</li>
+<li>StatusChatToolBar</li>
+<li>StatusContactRequestsIndicatorListItem</li>
+<li>StatusDescriptionListItem</li>
+<li>StatusLetterIdenticon</li>
+<li>StatusListItem</li>
+<li>StatusListSectionHeadline</li>
+<li>StatusLoadingIndicator</li>
+<li>StatusMemberListItem</li>
+<li>StatusNavigationListItem</li>
+<li>StatusNavigationPanelHeadline</li>
+<li>StatusRoundIcon</li>
+<li>StatusRoundedImage</li>
+<li>StatusMacWindowButtons</li>
+<li>StatusListItemBadge</li>
+<li>StatusExpandableItem</li>
+<li>StatusSmartIdenticon</li>
+<li>StatusMessage</li>
+<li>StatusMessageDetails</li>
+<li>StatusTagSelector</li>
+<li>StatusToastMessage</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Components -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqcontrols.qdoc -->
+  <title>StatusQ Controls | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Controls</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Controls</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Controls-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Controls components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusAccountSelector</li>
+<li>StatusAssetSelector</li>
+<li>StatusBanner</li>
+<li>StatusChatCommandButton</li>
+<li>StatusChatInfoButton</li>
+<li>StatusChatListCategoryItemButton</li>
+<li>StatusColorSelector</li>
+<li>StatusIconTabButton</li>
+<li>StatusNavBarTabButton</li>
+<li>StatusTabBarIconButton</li>
+<li>StatusToolTip</li>
+<li>StatusBaseButton</li>
+<li>StatusButton</li>
+<li>StatusFlatButton</li>
+<li>StatusRoundButton</li>
+<li>StatusFlatRoundButton</li>
+<li>StatusSwitch</li>
+<li>StatusRadioButton</li>
+<li>StatusCheckBox</li>
+<li>StatusSlider</li>
+<li>StatusSelect</li>
+<li>StatusBaseInput</li>
+<li>StatusInput</li>
+<li>StatusPickerButton</li>
+<li>StatusProgressBar</li>
+<li>StatusPasswordStrengthIndicator</li>
+<li>StatusSwitchTabButton</li>
+<li>StatusSwitchTabBar</li>
+<li>StatusSelectableText</li>
+<li>StatusWalletColorButton</li>
+<li>StatusWalletColorSelect</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Controls -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqcore.qdoc -->
+  <title>StatusQ Core | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Core</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Core</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Core-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Core components. These files are available for general import and they are based off the <a href="https://doc.qt.io/qt-5/qtquick-qmlmodule.html">Qt Quick Primitives</a> and <a href="https://doc.qt.io/archives/qt-5.11/qtquick-controls2-qmlmodule.html">Qt Quick Controls 2</a>.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusAppNavBarFilterModel</li>
+<li><a href="qml-statusq-core-statusbasetext.html">StatusBaseText</a></li>
+<li>StatusIcon</li>
+<li>StatusIconBackgroundSettings</li>
+<li>StatusIconSettings</li>
+<li>StatusImageSettings</li>
+<li>StatusModalHeaderSettings</li>
+<li>StatusTooltipSettings</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Core -->
+<div class="table"><table class="annotated">
+<tr class="odd topAlign"><td class="tblName"><p><a href="qml-statusq-core-statusbasetext.html">StatusBaseText</a></p></td><td class="tblDescr"><p>Displays multiple lines of text. Inherits Text</p></td></tr>
+</table></div>
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusq-overview.qdoc -->
+  <title>StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ</h1>
+<span class="subtitle"></span>
+<!-- $$$statusq-index.html-description -->
+<div class="descr"> <a name="details"></a>
+<p><a href="statusq-index.html">StatusQ</a> provides a collection of components..&#x2e;&#x2e;</p>
+<p><a href="statusq-index.html">StatusQ</a> - Components and Interfaces</p>
+<ul>
+<li><a href="statusq-components-qmlmodule.html">Components</a></li>
+<li><a href="statusq-controls-qmlmodule.html">Controls</a></li>
+<li><a href="statusq-core-qmlmodule.html">Core</a></li>
+<li><a href="statusq-layout-qmlmodule.html">Layout</a></li>
+<li><a href="statusq-platform-qmlmodule.html">Platform</a></li>
+<li><a href="statusq-popups-qmlmodule.html">Popups</a></li>
+</ul>
+</div>
+<!-- @@@statusq-index.html -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqlayout.qdoc -->
+  <title>StatusQ Layout | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Layout</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Layout</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Layout-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Layout components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusAppLayout</li>
+<li>StatusAppNavBar</li>
+<li>StatusAppTwoPanelLayout</li>
+<li>StatusAppThreePanelLayout</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Layout -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqplatform.qdoc -->
+  <title>StatusQ Platform | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Platform</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Platform</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Platform-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Platform components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusMacTrafficLights</li>
+<li>StatusMacNotification</li>
+<li>StatusWindowsTitleBar</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Platform -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqpopups.qdoc -->
+  <title>StatusQ Popups | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Popups</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Popups</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Popups-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Popups components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusMenuSeparator</li>
+<li>StatusPopupMenu</li>
+<li>StatusMenuItem</li>
+<li>StatusMenuItemDelegate</li>
+<li>StatusModal</li>
+<li>StatusSearchPopup</li>
+<li>StatusModalDivider</li>
+<li>StatusSearchPopupMenuItem</li>
+<li>StatusSearchLocationMenu</li>
+<li>StatusSpellcheckingMenuItems</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Popups -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -14,9 +14,9 @@ import "demoapp/data" 1.0

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

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

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

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

 Item {
    id: themeSwitchWrapper
    signal checkedChanged()

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

@@ -20,29 +17,28 @@ Item {

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

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

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

                StatusToolTip {
                    text: "Toggle Theme"
                    visible: sensor.containsMouse
                    orientation: StatusToolTip.Orientation.Bottom
-                    y: themeSwitchWrapper.y + Theme.dp(16)
+                    y: themeSwitchWrapper.y + 16
                }
            }

            Text {
                text: "🌙"
-                font.pixelSize: Theme.dp(15)
+                font.pixelSize: 15
                anchors.verticalCenter: parent.verticalCenter
            }
        }
@@ -3,17 +3,16 @@ 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: Theme.dp(10)
+    spacing: 10
    Grid {
        id: buttonGridWidth
-        columns: Theme.dp(3)
-        columnSpacing: Theme.dp(38)
-        rowSpacing: Theme.dp(10)
+        columns: 3
+        columnSpacing: 38
+        rowSpacing: 10

        horizontalItemAlignment: Grid.AlignHCenter

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

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

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

            icon.name: "info"
        }

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

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

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

            icon.name: "info"
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                popupMenu: StatusPopupMenu {

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

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

                popupMenu: StatusPopupMenu {

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

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

                popupMenu: StatusPopupMenu {

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

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

                popupMenu: StatusPopupMenu {

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

@@ -4,12 +4,11 @@ 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

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

    StatusNavigationListItem {
        title: "Menu Item"
@@ -26,7 +25,7 @@ GridLayout {
        badge.value: 1
    }
    StatusNavigationListItem {
-        title: "Menu Item (selected) with very long text"
+        title: "Menu Item (selected)"
        selected: true
        icon.name: "info"
        badge.value: 1
@@ -65,12 +64,6 @@ GridLayout {
        type: StatusChatListItem.Type.CommunityChat
    }

-    StatusChatListItem {
-        name: "community-channel-emoji"
-        type: StatusChatListItem.Type.CommunityChat
-        icon.emoji: "😁"
-    }
-
    StatusChatListItem {
        name: "community-channel-with-image"
        image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
@@ -156,7 +149,7 @@ GridLayout {
        subTitle: "Subtitle"
        tertiaryTitle: "Tertiary title"

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

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

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

@@ -329,43 +322,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        badge.icon.isLetterIdenticon: true
    }

-    StatusListItem {
-        title: "List Item with Tags"
-        icon.isLetterIdenticon: true
-        bottomModel: 3
-        bottomDelegate: StatusListItemTag {
-            title: "tag"
-            icon.isLetterIdenticon: true
-        }
-    }
-
-    StatusListItem {
-        title: "List Item with Inline Tags"
-        icon.isLetterIdenticon: true
-        tagsModel : 2
-        tagsDelegate: StatusListItemTag {
-            color: "blue"
-            height: Theme.dp(24)
-            radius: Theme.dp(6)
-            closeButtonVisible: false
-            icon.emoji: "😁"
-            icon.emojiSize: Emoji.size.verySmall
-            icon.isLetterIdenticon: true
-            title: "helloworld.eth"
-            titleText.font.pixelSize: Theme.dp(12)
-            titleText.color: Theme.palette.indirectColor1
-        }
-    }
-
-    StatusListItem {
-        title: "List Item with Emoji"
-        subTitle: "Emoji"
-        icon.emoji: "😁"
-        icon.color: "yellow"
-        icon.letterSize: Theme.dp(14)
-        icon.isLetterIdenticon: true
-    }
-
    StatusDescriptionListItem {
        title: "Title"
        subTitle: "Subtitle"
@@ -394,84 +350,34 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    StatusMemberListItem {
        nickName: "This is an example"
        userName: "annabelle"
-        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isVerified: true
-        isContact: true
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        trustIndicator: StatusMemberListItem.TrustedType.Verified
+        isMutualContact: true
        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
        image.isIdenticon: true
-        status: 1 // FIXME: use enum
-        ringSettings.ringSpecModel:
-            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}
-            }
-        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+        isOnline: true
    }

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

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

    StatusMemberListItem {
        nickName: "Mark Cuban"
        userName: "annabelle"
-        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isContact: true
+        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isMutualContact: true
        image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
        image.isIdenticon: true
    }
-
-    StatusMemberListItem {
-        nickName: "admin.guy"
-        isAdmin: true
-        isUntrustworthy: true
-    }
-
-    StatusBaseText {
-        Layout.fillWidth: true
-        Layout.topMargin: 16
-        text: "Loading features:"
-        font.pixelSize: 17
-    }
-
-    StatusListItem {
-        title: "Nokia 3310"
-        subTitle: "Incoming device"
-        label: "loading: true"
-        icon.emoji: "😁"
-        icon.color: "hotpink"
-        icon.letterSize: 14
-        icon.isLetterIdenticon: true
-        loading: true
-    }
-
-    StatusListItem {
-        title: "Nokia 3310"
-        subTitle: "Device"
-        label: "loadingFailed: true"
-        icon.emoji: "😁"
-        icon.color: "hotpink"
-        icon.letterSize: 14
-        icon.isLetterIdenticon: true
-        loadingFailed: true
-    }
 }
@@ -4,58 +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: Theme.dp(5)
-        rowSpacing: Theme.dp(5)
-
-        StatusLoadingIndicator {
-            color: Theme.palette.directColor4
-        }
-
-        StatusLetterIdenticon {
-            name: "#status"
-        }
-
-        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"
-        }
+    StatusLoadingIndicator {
+        color: Theme.palette.directColor4
    }

-    Flow {
-        Layout.fillWidth: true
-        spacing: 4
+    StatusLetterIdenticon {
+        name: "#status"
+    }

-        Repeater {
-            model: 12
-            StatusLetterIdenticon {
-                name: "A"
-                color: Theme.palette.userCustomizationColors[index]
-                letterSize: Theme.dp(16)
-            }
-        }
+    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,12 +4,9 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-import StatusQ.Components 0.1
-import StatusQ.Popups 0.1
-import StatusQ.Core.Utils 0.1

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

    StatusButton {
        text: "Simple modal"
@@ -81,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
@@ -144,11 +130,11 @@ Column {

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

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

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

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

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

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

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

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

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

@@ -367,93 +353,10 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        header.editable: true
    }

-    StatusModal {
-        id: advancedHeaderFooterModal
-        anchors.centerIn: parent
-        showHeader: false
-        showFooter: false
-        showAdvancedHeader: true
-        showAdvancedFooter: true
-        height: Theme.dp(200)
-        advancedHeaderComponent: Rectangle {
-            width: parent.width
-            height: Theme.dp(50)
-            color: Theme.palette.baseColor1
-            border.width: Theme.dp(1)
-            StatusBaseText {
-                anchors.centerIn: parent
-                text: "Add any header here"
-                font.pixelSize: Theme.dp(15)
-                color: Theme.palette.directColor1
-            }
-
-        }
-        advancedFooterComponent: Rectangle {
-            width: parent.width
-            height: Theme.dp(50)
-            color: Theme.palette.baseColor1
-            border.width: Theme.dp(1)
-            StatusBaseText {
-                anchors.centerIn: parent
-                text: "Add any footer here"
-                font.pixelSize: Theme.dp(15)
-                color: Theme.palette.directColor1
-            }
-
-        }
-    }
-
-    StatusModal {
-        id: floatingHeaderModal
-        anchors.centerIn: parent
-        height: Theme.dp(200)
-        showHeader: false
-        showFooter: false
-        showAdvancedHeader: true
-        hasFloatingButtons: true
-        advancedHeaderComponent: StatusFloatingButtonsSelector {
-            id: floatingHeader
-            model: dummyAccountsModel
-            delegate: Rectangle {
-                width: button.width
-                height: button.height
-                radius: Theme.dp(8)
-                visible: visibleIndices.includes(index)
-                StatusButton {
-                    id: button
-                    topPadding: Theme.dp(8)
-                    bottomPadding: 0
-                    implicitHeight: Theme.dp(32)
-                    defaultLeftPadding: Theme.dp(4)
-                    text: name
-                    icon.emoji: !!emoji ? emoji: ""
-                    icon.emojiSize: Emoji.size.middle
-                    icon.name: !emoji ? "filled-account": ""
-                    normalColor: "transparent"
-                    highlighted: index === floatingHeader.currentIndex
-                    onClicked: {
-                        floatingHeader.currentIndex = index
-                    }
-                }
-            }
-            popupMenuDelegate: StatusListItem {
-                implicitWidth: Theme.dp(272)
-                title: name
-                onClicked: floatingHeader.itemSelected(index)
-                visible: !visibleIndices.includes(index)
-            }
-        }
-    }
-
    ListModel {
        id: dummyAccountsModel
-        ListElement{name: "Account 1"; iconName: "filled-account"; 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 {
@@ -12,7 +12,7 @@ import StatusQ.Core.Theme 0.1
 ListView {
    id: messageList
    anchors.fill: parent
-    anchors.margins: Theme.dp(15)
+    anchors.margins: 15
    clip: true
    delegate: StatusMessage {
        id: delegate
@@ -34,15 +34,14 @@ ListView {
            secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
            chatID: model.chatKey
            profileImage: StatusImageSettings {
-                width: Theme.dp(40)
-                height: Theme.dp(40)
+                width: 40
+                height: 40
                source: model.profileImage
                isIdenticon: model.isIdenticon
            }
            messageText: model.message
            hasMention: model.hasMention
-            isMutualContact: model.isMutualContact
-            trustIndicator: model.trustIndicator
+            contactType: model.contactType
            isPinned: model.isPinned
            pinnedBy: model.pinnedBy
            hasExpired: model.hasExpired
@@ -55,8 +54,8 @@ ListView {
            amISender:  model.isReply ? model.replyAmISender : ""
            displayName:  model.isReply ? model.replySenderName: ""
            profileImage: StatusImageSettings {
-                width: Theme.dp(20)
-                height: Theme.dp(20)
+                width: 20
+                height: 20
                source:  model.isReply ? model.replyProfileImage: ""
                isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
            }
@@ -67,23 +66,23 @@ ListView {
        quickActions: [
            StatusFlatRoundButton {
                id: emojiBtn
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                icon.name: "reaction-b"
                type: StatusFlatRoundButton.Type.Tertiary
                tooltip.text: "Add reaction"
            },
            StatusFlatRoundButton {
                id: replyBtn
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                icon.name: "reply"
                type: StatusFlatRoundButton.Type.Tertiary
                tooltip.text: "Reply"
            },
            StatusFlatRoundButton {
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                icon.name: "tiny/edit"
                type: StatusFlatRoundButton.Type.Tertiary
                tooltip.text: "Edit"
@@ -93,8 +92,8 @@ ListView {
            },
            StatusFlatRoundButton {
                id: otherBtn
-                width: Theme.dp(32)
-                height: Theme.dp(32)
+                width: 32
+                height: 32
                icon.name: "more"
                type: StatusFlatRoundButton.Type.Tertiary
                tooltip.text: "More"
@@ -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
@@ -10,7 +12,7 @@ import StatusQ.Core.Theme 0.1
 Page {
    id: root
    anchors.fill: parent
-    anchors.margins: Theme.dp(16)
+    anchors.margins: 16
    property ListModel contactsModel: null
    background: null

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

        StatusTagSelector {
            id: tagSelector
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            Layout.leftMargin: Theme.dp(17)
-            maxHeight: root.height
+            Layout.leftMargin: 17
+            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 {
-            implicitHeight: Theme.dp(44)
-            Layout.alignment: Qt.AlignTop
+            implicitHeight: 44
            enabled: (tagSelector.namesModel.count > 0)
            text: "Confirm"
        }
@@ -82,14 +62,162 @@ Page {

    contentItem: Item {
        anchors.fill: parent
-        anchors.topMargin: Theme.dp(68)
+        anchors.topMargin: headerRow.height + 16
+
+        Item {
+            anchors.fill: parent
+            visible: (contactsModel.count > 0)
+
+            StatusBaseText {
+                id: contactsLabel
+                font.pixelSize: 15
+                color: Theme.palette.baseColor1
+                text: "Contacts"
+            }
+            Control {
+                width: 360
+                anchors {
+                    top: contactsLabel.bottom
+                    topMargin: 8//Style.current.padding
+                    bottom: parent.bottom
+                    bottomMargin: 20//Style.current.bigPadding
+                }
+                background: Rectangle {
+                    id: statusPopupMenuBackgroundContent
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    height: (userListView.height + 8)
+                    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.left: parent.left
+                    anchors.right: parent.right
+                    height: (count * 64) > parent.height ? parent.height : (count * 64)
+                    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.topMargin: 8
+                            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
+                        }
+
+                        StatusBadge {
+                            id: statusBadge
+                            width: 15
+                            height: 15
+                            anchors.left: contactImage.right
+                            anchors.leftMargin: -8
+                            anchors.bottom: contactImage.bottom
+                            border.width: 3
+                            border.color: Theme.palette.statusAppNavBar.backgroundColor
+                            color: {
+                                if (model.onlineStatus === 1)
+                                    return Theme.palette.successColor1;
+                                else if (model.onlineStatus === 2)
+                                    return Theme.palette.pinColor1;
+                                else if (model.onlineStatus === 3)
+                                    return Theme.palette.dangerColor1;
+
+                                return "transparent"
+                            }
+                        }
+
+                        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 {
            visible: (contactsModel.count === 0)
            anchors.centerIn: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: Theme.dp(15)
+            font.pixelSize: 15
            color: Theme.palette.baseColor1
            text: qsTr("You can only send direct messages to your Contacts. \n\n
 Send a contact request to the person you would like to chat with, you will be\n able to
@@ -19,24 +19,24 @@ StatusModal {
        width: root.width

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            StatusContactRequestsIndicatorListItem {
                anchors.horizontalCenter: parent.horizontalCenter
@@ -70,8 +72,8 @@ StatusAppThreePanelLayout {
            }

            StatusChatList {
+                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);
@@ -126,18 +128,19 @@ StatusAppThreePanelLayout {
    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
        }
    }

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

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

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

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

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

+            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,
@@ -181,18 +184,6 @@ StatusAppThreePanelLayout {
            onMembersButtonClicked: {
                root.showRightPanel = !root.showRightPanel;
            }
-
-            Component {
-                id: statusChatInfoButton
-
-                StatusChatInfoButton {
-                   width: Math.min(implicitWidth, parent.width)
-                   title: "general"
-                   subTitle: "Community Chat"
-                   icon.color: Theme.palette.miscColor6
-                   type: StatusChatInfoButton.Type.CommunityChat
-                }
-            }
        }

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

        ListView {
            anchors.top: titleText.bottom
-            anchors.topMargin: Theme.dp(16)
+            anchors.topMargin: 16
            anchors.left: parent.left
-            anchors.leftMargin: Theme.dp(8)
+            anchors.leftMargin: 8
            anchors.right: parent.right
-            anchors.rightMargin: Theme.dp(8)
+            anchors.rightMargin: 8
            anchors.bottom: parent.bottom
-            anchors.bottomMargin: Theme.dp(16)
+            anchors.bottomMargin: 16
            boundsBehavior: Flickable.StopAtBounds
            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
-                image.source: model.icon
-                image.isIdenticon: 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
            }
        }
    }
@@ -16,14 +16,14 @@ StatusAppTwoPanelLayout {
        StatusNavigationPanelHeadline {
            id: profileHeadline
            anchors.top: parent.top
-            anchors.topMargin: Theme.dp(16)
+            anchors.topMargin: 16
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Profile"
        }

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

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

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

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

@@ -4,15 +4,65 @@ import StatusQ.Components 0.1

 QtObject {

+    property ListModel dummyContactsModel: ListModel {
+        ListElement {
+            publicId: "0x0"
+            name: "Maria"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x1"
+            name: "James"
+            icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            isIdenticon: false
+            onlineStatus: 1
+        }
+        ListElement {
+            publicId: "0x2"
+            name: "Paul"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 2
+        }
+        ListElement {
+            publicId: "0x3"
+            name: "Tracy"
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            isIdenticon: true
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x4"
+            name: "Nick"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+        ListElement {
+            publicId: "0x5"
+            name: "Steven"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 2
+        }
+        ListElement {
+            publicId: "0x6"
+            name: "Helen"
+            icon: ""
+            isIdenticon: false
+            onlineStatus: 3
+        }
+    }
+
    property var demoChatListItems: ListModel {
        id: demoChatListItems
        ListElement {
            itemId: "x012340000"
            name: "#status"
            icon: ""
-            emoji: ""
            isIdenticon: false
-            colorHash: []
            color: "blue"
            description: ""
            type: StatusChatListItem.Type.PublicChat
@@ -28,9 +78,7 @@ QtObject {
            itemId: "x012340001"
            name: "status-desktop"
            icon: ""
-            emoji: ""
            isIdenticon: false
-            colorHash: []
            color: "red"
            description: ""
            type: StatusChatListItem.Type.PublicChat
@@ -47,9 +95,7 @@ QtObject {
            name: "Amazing Funny Squirrel"
            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            emoji: ""
            isIdenticon: true
-            colorHash: []
            color: "green"
            description: ""
            type: StatusChatListItem.Type.OneToOneChat
@@ -65,9 +111,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            itemId: "x012340003"
            name: "Black Ops"
            icon: ""
-            emoji: ""
            isIdenticon: false
-            colorHash: []
            color: "purple"
            description: ""
            type: StatusChatListItem.Type.OneToOneChat
@@ -83,9 +127,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            itemId: "x012340004"
            name: "Spectacular Growing Otter"
            icon: ""
-            emoji: ""
            isIdenticon: false
-            colorHash: []
            color: "orange"
            description: ""
            type: StatusChatListItem.Type.OneToOneChat
@@ -101,9 +143,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            itemId: "x012340005"
            name: "channel-with-a-super-duper-long-name"
            icon: ""
-            emoji: ""
            isIdenticon: false
-            colorHash: []
            color: "green"
            description: ""
            type: StatusChatListItem.Type.PublicChat
@@ -357,6 +397,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            imageSource: ""
            iconName: "chat"
            iconColor: ""
+            isIdenticon: false
            subItems: [
                ListElement {
                    value: "sub_item_1_1"
@@ -364,6 +405,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
                    iconName: ""
                    iconColor: ""
+                    isIdenticon: false
                },
                ListElement {
                    value: "sub_item_1_2"
@@ -371,6 +413,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
                    iconName: ""
                    iconColor: ""
+                    isIdenticon: true
                }]}
        ListElement {
            value: "item_2"
@@ -378,6 +421,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
            iconName: ""
            iconColor: ""
+            isIdenticon: false
            subItems: [
                ListElement {
                    value: "sub_item_2_1"
@@ -385,6 +429,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    imageSource: ""
                    iconName: "channel"
                    iconColor: ""
+                    isIdenticon: false
                },
                ListElement {
                    value: "sub_item_2_2"
@@ -392,6 +437,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    imageSource: ""
                    iconName: "channel"
                    iconColor: ""
+                    isIdenticon: false
                },
                ListElement {
                    value: "sub_item_2_3"
@@ -399,6 +445,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    imageSource: ""
                    iconName: "channel"
                    iconColor: ""
+                    isIdenticon: false
                }]}
        ListElement {
            value: "item_3"
@@ -406,6 +453,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            imageSource: "";
            iconName: "info"
            iconColor: ""
+            isIdenticon: false
            subItems: [
                ListElement {
                    value: "sub_item_3_1"
@@ -413,6 +461,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    imageSource: ""
                    iconName: "channel"
                    iconColor: ""
+                    isIdenticon: false
                }]}
        ListElement {
            value: "item_4"
@@ -420,6 +469,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            imageSource: "";
            iconName: ""
            iconColor: "red"
+            isIdenticon: false
            subItems: [
                ListElement {
                    value: "sub_item_4_1"
@@ -427,6 +477,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                    imageSource: ""
                    iconName: "channel"
                    iconColor: ""
+                    isIdenticon: false
                }]}
    }

@@ -446,8 +497,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f5789"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            contactType: 2
            hasMention: false
            editMode: false
            isReply: false
@@ -475,8 +525,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
 CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+            contactType: 3
            hasMention: false
            editMode: false
            isReply: false
@@ -503,8 +552,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAkUlEQVR4nOzYwQmDQBQG4SSkl3SQyizDyuzAavTi0cPK8sPwM9/Rw8rw4KH7eZUwhMYQGkNoDKGpCfmmDl63/bh7vvx/78T7aiZiCI0hNMMbJL2FZs+vmYghNIbQTG+cp9smtf1qJmIIjSEKqZmIITSG0Azfa6W/qfxDvBhCY4hCaiZiCI0hNIbQGEJzBgAA///3pSBjX42sYAAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+            contactType: 3
            hasMention: false
            editMode: false
            isReply: false
@@ -531,8 +579,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage:  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f6789"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 4
            hasMention: false
            editMode: false
            isReply: false
@@ -560,8 +607,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: false
@@ -589,8 +635,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: false
@@ -618,8 +663,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
            hasMention: true
            editMode: false
            isReply: false
@@ -648,8 +692,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: true
@@ -678,8 +721,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: true
@@ -708,8 +750,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: true
@@ -738,8 +779,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: true
@@ -767,8 +807,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: false
-            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: false
@@ -795,8 +834,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: false
@@ -823,8 +861,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
            chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            isMutualContact: true
-            trustIndicator: StatusContactVerificationIcons.TrustedType.None
+            contactType: 0
            hasMention: false
            editMode: false
            isReply: false
@@ -843,50 +880,47 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
    property var membersListModel: ListModel {
        id: membersList
        ListElement {
-            localNickname: "This is an example"
-            displayName: "Maria"
-            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            isVerified: true
-            isUntrustworthy: false
-            isContact: true
-            onlineStatus: 1
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+            nickName: "This is an example"
+            userName: "annabelle"
+            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            trustIndicator: StatusMemberListItem.TrustedType.Verified
+            isMutualContact: true
+            isOnline: true
+            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                            nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isAdmin: false
+            isIdenticon: true
        }
        ListElement {
-            localNickname: ""
-            displayName: "carmen.eth"
-            pubKey: "0x043a7ed78362567894688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            isVerified: false
-            isUntrustworthy: true
-            isContact: false
-            onlineStatus: 0
-            icon: ""
-            isAdmin: false
+            nickName: "carmen.eth"
+            userName: ""
+            chatKey: ""
+            trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
+            isMutualContact: false
+            isOnline: false
+            source: ""
+            isIdenticon: false
        }
        ListElement {
-            localNickname: "This girl I know from work"
-            displayName: "annabelle"
-            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486dsfkjghyu2cf04"
-            isVerified: false
-            isUntrustworthy: false
-            isContact: false
-            onlineStatus: 1
-            isAdmin: false
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
+            nickName: "This girl I know from work"
+            userName:  "annabelle"
+            chatKey: ""
+            trustIndicator: StatusMemberListItem.TrustedType.None
+            isMutualContact: false
+            isOnline: true
+            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
                     ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
+            isIdenticon: true
        }
        ListElement {
-            localNickname: "Mark Cuban"
-            displayName: "mark.eth"
-            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc79872cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            isVerified: false
-            isUntrustworthy: true
-            isContact: true
-            onlineStatus: 0
-            icon: ""
-            isAdmin: false
+            nickName: "Mark Cuban"
+            userName: "annabelle"
+            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
+            isMutualContact: true
+            isOnline: false
+            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+                     nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            isIdenticon: true
        }
    }

@@ -948,20 +982,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            hasNotification: false
            notificationsCount: 0
        }
-        ListElement {
-            sectionId: "communitiesPortal"
-            sectionType: 2
-            name: "Communities Portal"
-            active: false
-            image: ""
-            icon: "communities"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
        ListElement {
            sectionId: "wallet"
-            sectionType: 3
+            sectionType: 2
            name: "Wallet"
            active: false
            image: ""
@@ -972,7 +995,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        }
        ListElement {
            sectionId: "browser"
-            sectionType: 4
+            sectionType: 3
            name: "Browser"
            active: false
            image: ""
@@ -993,491 +1016,4 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            notificationsCount: 0
        }
    }
-
-    property ListModel currencyPickerModel: ListModel {
-        ListElement {
-            key: 0
-            name: "United States Dollar"
-            shortName: "USD"
-            symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 1
-            name: "British Pound"
-            shortName: "GBP"
-            symbol: "£"
-            imageSource: "../../assets/twemoji/26x26/1f4b5.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 2
-            name: "Euro"
-            shortName: "EUR"
-            symbol: "€"
-            imageSource: "../../assets/twemoji/26x26/1f4b6.png"
-            category: ""
-            selected: true
-        }
-        ListElement {
-            key: 3
-            name: "Shout Korean Won"
-            shortName: "KRW"
-            symbol: "₩"
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 4
-            name: "Ethereum"
-            shortName: "ETH"
-            symbol: "Ξ"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
-            category: "Tokens"
-            selected: true
-        }
-        ListElement {
-            key: 5
-            name: "Bitcoin"
-            shortName: "BTC"
-            symbol: "฿"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Tokens"
-            selected: false
-        }
-        ListElement {
-            key: 6
-            name: "Status Network Token"
-            shortName: "SNT"
-            symbol: ""
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
-            category: "Tokens"
-            selected: false
-        }
-
-        ListElement {
-            key: 7
-            name: "Emirati Dirham"
-            shortName: "AED"
-            symbol: "د.إ"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Other Fiat"
-            selected: false
-        }
-        ListElement {
-            key: 8
-            name: "Afghani"
-            shortName: "AFN"
-            symbol: "؋"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
-            category: "Other Fiat"
-            selected: false
-        }
-        ListElement {
-            key: 9
-            name: "Argentine Peso"
-            shortName: "AFN"
-            symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Other Fiat"
-            selected: false
-        }
-    }
-
-    property ListModel currencyPickerModel2: ListModel {
-        ListElement {
-            key: 0
-            name: "United States Dollar"
-            shortName: "USD"
-            symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 1
-            name: "British Pound"
-            shortName: "GBP"
-            symbol: "£"
-            imageSource: "../../assets/twemoji/26x26/1f4b5.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 2
-            name: "Euro"
-            shortName: "EUR"
-            symbol: "€"
-            imageSource: "../../assets/twemoji/26x26/1f4b6.png"
-            category: ""
-            selected: true
-        }
-        ListElement {
-            key: 3
-            name: "Shout Korean Won"
-            shortName: "KRW"
-            symbol: "₩"
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 4
-            name: "Ethereum"
-            shortName: "ETH"
-            symbol: "Ξ"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
-            category: "Tokens"
-            selected: true
-        }
-        ListElement {
-            key: 5
-            name: "Bitcoin"
-            shortName: "BTC"
-            symbol: "฿"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Tokens"
-            selected: false
-        }
-        ListElement {
-            key: 6
-            name: "Status Network Token"
-            shortName: "SNT"
-            symbol: ""
-            imageSource: "../../assets/twemoji/26x26/1f4b8.png"
-            category: "Tokens"
-            selected: false
-        }
-
-        ListElement {
-            key: 7
-            name: "Emirati Dirham"
-            shortName: "AED"
-            symbol: "د.إ"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Other Fiat"
-            selected: false
-        }
-        ListElement {
-            key: 8
-            name: "Afghani"
-            shortName: "AFN"
-            symbol: "؋"
-            imageSource: "../../assets/twemoji/26x26/1f4b7.png"
-            category: "Other Fiat"
-            selected: false
-        }
-        ListElement {
-            key: 9
-            name: "Argentine Peso"
-            shortName: "AFN"
-            symbol: "$"
-            imageSource: "../../assets/twemoji/26x26/1f4b4.png"
-            category: "Other Fiat"
-            selected: false
-        }
-    }
-
-    property ListModel languagePickerModel: ListModel {
-        ListElement {
-            key: 0
-            name: "English"
-            shortName: "English"
-            imageSource: "../../assets/twemoji/26x26/1f1ec-1f1e7.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 1
-            name: "Korean"
-            shortName: "한국어"
-            imageSource: "../../assets/twemoji/26x26/1f1f0-1f1f7.png"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 2
-            name: "Portuguese (Brazilian)"
-            shortName: "Português"
-            imageSource: "../../assets/twemoji/26x26/1f1e7-1f1f7.png"
-            category: ""
-            selected: true
-        }
-        ListElement {
-            key: 3
-            name: "Dutch"
-            shortName: "Nederlands"
-            imageSource: "../../assets/twemoji/26x26/1f1f3-1f1f1.png"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 4
-            name: "Indonesian"
-            shortName: "Bahasa Indonesia"
-            imageSource: "../../assets/twemoji/26x26/1f1ee-1f1e9.png"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 5
-            name: "Spanish"
-            shortName: "Español"
-            imageSource: "../../assets/twemoji/26x26/1f1ea-1f1e6.png"
-            category: "Beta Languages"
-            selected: false
-        }
-    }
-
-    property ListModel languageNoImagePickerModel: ListModel {
-        ListElement {
-            key: 0
-            name: "Chinese (Mainland China)"
-            shortName: "普通话"
-            category: ""
-            selected: true
-        }
-        ListElement {
-            key: 1
-            name: "Russian"
-            shortName: "Русский Язык"
-            category: ""
-            selected: false
-        }
-        ListElement {
-            key: 2
-            name: "Arabic"
-            shortName: "اَلْعَرَبِيَّةُ"
-            category: "Beta Languages"
-            selected: true
-        }
-        ListElement {
-            key: 3
-            name: "Chinese (Taiwan)"
-            shortName: "臺灣華語"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 4
-            name: "Filipino"
-            shortName: "Wikang Filipino"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 5
-            name: "French"
-            shortName: "Français"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 6
-            name: "Italian"
-            shortName: "Italiano"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 7
-            name: "Turkish"
-            shortName: "Türkçe"
-            category: "Beta Languages"
-            selected: false
-        }
-        ListElement {
-            key: 8
-            name: "Urdu"
-            shortName: "اُردُو"
-            category: "Beta Languages"
-            selected: false
-        }
-    }
-
-    property ListModel featuredCommunitiesModel : ListModel {
-        ListElement {
-            name: "CryptoKitties";
-            description: "A community of cat lovers, meow!";
-            logo:"qrc:/images/CryptoKitties.png";
-            members: 1045;
-            categories: [];
-            communityId: "341";
-            available: true;
-            popularity: 1;
-            communityColor: "pink"
-        }
-        ListElement {
-            name: "Friends with Benefits";
-            description: "A group chat full of out favorite thinkers and creators.";
-            logo:"qrc:/images/FriendsBenefits.png";
-            members: 452;
-            categories: [];
-            communityId: "232";
-            available: true;
-            popularity: 2;
-            communityColor: "grey"
-        }
-        ListElement {
-            name: "Status Hi!!";
-            description: "A new community description with long long long and repetitive repetitive repetitive repetitive explanation!!";
-            logo:"qrc:/images/SNT.png";
-            members: 89;
-            categories: [];
-            communityId: "223";
-            available: true;
-            popularity: 3
-            communityColor: "blue"
-        }
-    }
-
-    property ListModel curatedCommunitiesModel : ListModel {
-        ListElement {
-            name: "Status.im";
-            description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
-            logo: "qrc:/images/SNT.png";
-            banner: "qrc:/images/CommunityBanner1.png";
-            members: 299500;
-            activeUsers: 71400;
-            categories: [];
-            communityId: "1";
-            available: true;
-            popularity: 1
-            isPrivate: true
-            tokenLogo: "qrc:/images/SNT.png";
-        }
-        ListElement {
-            name: "SuperRare";
-            description: "The future of CryptoArt markets—a network governed by artists, collectors and curators.";
-            logo:"qrc:/images/SR.png";
-            banner: "qrc:/images/SuperRareCommunityBanner.png";
-            members: 299500;
-            activeUsers: 71400;
-            categories: [];
-            communityId: "2";
-            available: true;
-            popularity: 2
-            isPrivate: true
-            tokenLogo: "qrc:/images/SRToken.png";
-        }
-        ListElement {
-            name: "Coinbase";
-            description: "Jump start your crypto portfolio with the easiest place to buy and sell crypto. ";
-            logo:"qrc:/images/Coinbase.png";
-            banner: "qrc:/images/CoinBaseCommunityBanner.png";
-            members: 4900000;
-            activeUsers: 245600;
-            categories: [];
-            communityId: "3";
-            available: true;
-            popularity: 3
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "Rarible";
-            description: "Multichain community-centric NFT marketplace. Create, sell and collect NFTs.";
-            logo:"qrc:/images/Rarible.png";
-            banner: "qrc:/images/RaribleCommunityBanner.png";
-            members: 629200;
-            activeUsers: 112100;
-            categories: [];
-            communityId: "4";
-            available: true;
-            popularity: 4
-            isPrivate: true
-            tokenLogo: "qrc:/images/RARI.png";
-        }
-        ListElement {
-            name: "Spotify";
-            description: "Listening is everything";
-            logo:"qrc:/images/Spotify.png";
-            banner: "qrc:/images/SpotifyCommunityBanner.png";
-            members: 207500;
-            activeUsers: 52200;
-            categories: [];
-            communityId: "5";
-            available: true;
-            popularity: 5
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "Dribbble";
-            description: "Open source platform to write and distribute decentralized applications..";
-            logo:"qrc:/images/Fluff.png";
-            banner: "qrc:/images/DribbbleCommunityBanner.png";
-            members: 2300000;
-            activeUsers: 112100;
-            categories: [];
-            communityId: "6";
-            available: true;
-            popularity: 6
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "Status.im";
-            description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
-            logo:"qrc:/images/SNT.png";
-            banner: ""
-            members: 299500;
-            activeUsers: 71400;
-            categories: [];
-            communityId: "7";
-            available: true;
-            popularity: 1
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "CryptoPunks";
-            description: "Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here.";
-            logo:"qrc:/images/CryptoPunks.png";
-            banner: "";
-            members: 4900;
-            activeUsers: 245600;
-            categories: [];
-            communityId: "8";
-            available: false;
-            popularity: 8
-            isPrivate: false
-            tokenLogo: "";
-        }
-        ListElement {
-            name: "Socks";
-            description: "Community description goes here.";
-            logo:"qrc:/images/Socks.png";
-            banner: "";
-            members: 4900;
-            activeUsers: 245600;
-            categories: [];
-            communityId: "9";
-            available: false;
-            popularity: 9
-            isPrivate: false
-            tokenLogo: "";
-        }
-    }
-
-    property ListModel tagsModel : ListModel {
-        ListElement { name: "gaming"; emoji: "🎮"}
-        ListElement { name: "art"; emoji: "🖼️️"}
-        ListElement { name: "crypto"; emoji: "💸"}
-        ListElement { name: "nsfw"; emoji: "🍆"}
-        ListElement { name: "markets"; emoji: "💎"}
-        ListElement { name: "defi"; emoji: "📈"}
-        ListElement { name: "travel"; emoji: "🚁"}
-        ListElement { name: "web3"; emoji: "🗺"}
-        ListElement { name: "sport"; emoji: "🎾"}
-        ListElement { name: "food"; emoji: "🥑"}
-        ListElement { name: "enviroment"; emoji: "☠️"}
-        ListElement { name: "privacy"; emoji: "👻"}
-    }
-
-    property var communityTags :{"Activism":"✊","Art":"🎨","Blockchain":"🔗","Books & blogs":"📚","Career":"💼","Collaboration":"🤝","Commerce":"🛒","Crypto":"Ξ","Culture":"🎎","DAO":"🚀","DIY":"🔨","DeFi":"📈","Design":"🧩","Education":"🎒","Entertainment":"🍿","Environment":"🌿","Event":"🗓","Fantasy":"🧙‍♂️","Fashion":"🧦","Food":"🌶","Gaming":"🎮","Global":"🌍","Health":"🧠","Hobby":"📐","Innovation":"🧪","Language":"📜","Lifestyle":"✨","Local":"📍","Love":"❤️","Markets":"💎","Movies & TV":"🎞","Music":"🎶","NFT":"🖼","NSFW":"🍆","News":"🗞","Non-profit":"🙏","Org":"🏢","Pets":"🐶","Play":"🎲","Podcast":"🎙️","Politics":"🗳️","Privacy":"👻","Product":"🍱","Psyche":"🍁","Security":"🔒","Social":"☕","Software dev":"👩‍💻","Sports":"⚽️","Tech":"📱","Travel":"🗺","Vehicles":"🚕","Web3":"🌐"}
 }
@@ -22,7 +22,6 @@
       \li \l{StatusDescriptionListItem}
       \li \l{StatusLetterIdenticon}
       \li \l{StatusListItem}
-       \li \l{StatusListPicker}
       \li \l{StatusListSectionHeadline}
       \li \l{StatusLoadingIndicator}
       \li \l{StatusMemberListItem}
@@ -38,6 +37,5 @@
       \li \l{StatusMessageDetails}
       \li \l{StatusTagSelector}
       \li \l{StatusToastMessage}
-       \li \l{StatusWizardStepper}
   \endlist
 */
@@ -30,11 +30,8 @@
       \li \l{StatusSlider}
       \li \l{StatusSelect}
       \li \l{StatusBaseInput}
-       \li \l{StatusIdenticonRing}
       \li \l{StatusInput}
-       \li \l{StatusItemPicker}
       \li \l{StatusPickerButton}
-       \li \l{StatusPinInput}
       \li \l{StatusProgressBar}
       \li \l{StatusPasswordStrengthIndicator}
       \li \l{StatusSwitchTabButton}
@@ -42,8 +39,5 @@
       \li \l{StatusSelectableText}
       \li \l{StatusWalletColorButton}
       \li \l{StatusWalletColorSelect}
-       \li \l{StatusRegularExpressionValidator}
-       \li \l{StatusIntValidator}
-       \li \l{StatusSeedPhraseInput}
   \endlist
 */
@@ -15,7 +15,6 @@
       \li \l{StatusIcon}
       \li \l{StatusIconBackgroundSettings}
       \li \l{StatusIconSettings}
-       \li \l{StatusIdenticonRingSettings}
       \li \l{StatusImageSettings}
       \li \l{StatusModalHeaderSettings}
       \li \l{StatusTooltipSettings}
@@ -5,16 +5,16 @@ url     = https://github.com/status-im/StatusQ

 #These are set implictly by qdoc as well, but only with these the module header can be found
 includepaths = -I . \
-               -I $PWD/../src/StatusQ
+               -I $PWD/../../src/StatusQ

 imagedirs = src/images
 sourcedirs += src \
-              $PWD/../src/StatusQ/Components \
-              $PWD/../src/StatusQ/Controls \
-              $PWD/../src/StatusQ/Core \
-              $PWD/../src/StatusQ/Layout \
-              $PWD/../src/StatusQ/Platform \
-              $PWD/../src/StatusQ/Popups \
+              $PWD/../../src/StatusQ/Components \
+              $PWD/../../src/StatusQ/Controls \
+              $PWD/../../src/StatusQ/Core \
+              $PWD/../../src/StatusQ/Layout \
+              $PWD/../../src/StatusQ/Platform \
+              $PWD/../../src/StatusQ/Popups \

 sources.fileextensions = "*.cpp *.qdoc *.qml"

@@ -0,0 +1,41 @@
+body {
+   font-family: "Verdana";
+   font-size: 14px;
+   max-width: 80%;
+   margin: auto;
+}
+
+h1, h2, h3 {
+   color: #4360DF;
+}
+
+div.sidebar {
+    float: right;
+}
+
+pre {
+    padding: 15px;
+}
+div.qmlproto {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+pre, div.qmlproto {
+    font-family: "Courier New";
+    font-size: 20px;
+    margin-left: 2em;
+    background-color: #F0F2F5;
+}
+
+hr {
+    margin-top: 2em;
+    margin-bottom: 2em;
+}
+
+p.header {
+    margin-bottom: -1em;
+}
+p.footer {
+    text-align: right;
+    margin-top: -1em;
+}
@@ -11,11 +11,6 @@ int main(int argc, char *argv[])
 #endif

    SandboxApp app(argc, argv);
-
-    app.setOrganizationName("Status");
-    app.setOrganizationDomain("status.im");
-    app.setApplicationName("Sandbox");
-
    app.startEngine();

    return app.exec();
@@ -2,8 +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 Sandbox 0.1

@@ -13,14 +11,15 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
-import StatusQ.Core.Utils 0.1

 import "demoapp/data" 1.0

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

@@ -32,7 +31,10 @@ StatusWindow {

    property real factor: 1.0

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

    QtObject {
        id: appSectionType
@@ -58,11 +60,6 @@ StatusWindow {
        }
    }

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

        ThemeSwitch {
            anchors.top: parent.top
-            anchors.topMargin: Theme.dp(32)
+            anchors.topMargin: 32
            anchors.right: parent.right
-            anchors.rightMargin: Theme.dp(32)
-            lightThemeEnabled: storeSettings.lightTheme
-            onLightThemeEnabledChanged: {
-                Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
-                storeSettings.lightTheme = lightThemeEnabled
+            anchors.rightMargin: 32
+            onCheckedChanged: {
+                if (Theme.palette === rootWindow.lightTheme) {
+                    Theme.palette = rootWindow.darkTheme
+                } else {
+                    Theme.palette = rootWindow.lightTheme
+                }
            }
        }
    }
@@ -127,13 +126,11 @@ StatusWindow {
        StatusAppTwoPanelLayout {
            id: mainPageView

-            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: Item {
@@ -142,92 +139,87 @@ StatusWindow {
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + Theme.dp(56)
+                    contentHeight: navigation.height + 56
                    contentWidth: navigation.width
                    clip: true
                    Column {
                        id: navigation
                        anchors.top: parent.top
-                        anchors.topMargin: Theme.dp(48)
+                        anchors.topMargin: 48
                        anchors.horizontalCenter: parent.horizontalCenter
                        spacing: 0

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

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

                        StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "Buttons"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.control(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusSwitchTab"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page("StatusTabSwitch");
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusChatCommandButton"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "Controls"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.control(title);
                        }
-                        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 {
+                        StatusNavigationListItem { 
                            title: "StatusInput"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusSelect"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusAccountSelector"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusAssetSelector"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusColorSelector"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusWalletColorButton"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusWalletColorSelect"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
@@ -237,28 +229,23 @@ StatusWindow {
                            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 {
+                        StatusNavigationListItem { 
                            title: "StatusAddress"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "List Items"
                            selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
                            onClicked: mainPageView.control(title.replace(/\s+/g, ''));
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusChatInfoToolBar"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "Others"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.control(title);
@@ -283,23 +270,8 @@ StatusWindow {
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
-                        StatusNavigationListItem {
-                            title: "StatusListPicker"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusCommunityCard"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
-                        StatusNavigationListItem {
-                            title: "StatusCommunityTags"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
                        StatusListSectionHeadline { text: "StatusQ.Popup" }
-                        StatusNavigationListItem {
+                        StatusNavigationListItem { 
                            title: "StatusPopupMenu"
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
@@ -316,21 +288,6 @@ StatusWindow {
                            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);
-                        }
                    }
                }
            }
@@ -338,11 +295,8 @@ StatusWindow {
            rightPanel: Item {
                id: rightPanel
                anchors.fill: parent
-
                ScrollView {
-                    visible: !storeSettings.fillPage
                    anchors.fill: parent
-                    anchors.topMargin: Theme.dp(64)
                    contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                    contentWidth: (pageWrapper.width * rootWindow.factor)
                    clip: true
@@ -351,16 +305,14 @@ StatusWindow {
                        id: pageWrapper
                        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;
                                }
@@ -368,15 +320,6 @@ StatusWindow {
                        }
                    }
                }
-                Loader {
-                    active: storeSettings.fillPage
-                    anchors.fill: parent
-                    anchors.topMargin: Theme.dp(64)
-                    visible: storeSettings.fillPage
-                    clip: true
-
-                    source: viewLoader.source
-                }
            }
        }
    }
@@ -415,12 +358,12 @@ StatusWindow {
                id: platformSwitch
                anchors.left: demoApp.left
                anchors.bottom: demoApp.top
-                anchors.bottomMargin: Theme.dp(20)
-                spacing: Theme.dp(2)
+                anchors.bottomMargin: 20
+                spacing: 2

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

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

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

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

@@ -494,11 +437,4 @@ StatusWindow {
            rootWindow.toggleFullScreen()
        }
    }
-
-    Settings {
-        id: storeSettings
-        property string selected: ""
-        property bool lightTheme: true
-        property bool fillPage: false
-    }
 }
@@ -7,10 +7,10 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-import StatusQ.Core.Utils 0.1
+

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

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

-import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1

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

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

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

    StatusChatInfoToolBar {
        chatInfoButton.title: "Cryptokitties"        
@@ -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: Theme.dp(800)
-    height: Theme.dp(100)
-
-    Row {
-        id: selectedColor
-        anchors.top: parent.top
-        anchors.left: colorSelectionGrid.left
-        spacing: Theme.dp(10)
-        StatusBaseText {
-            text: "SelectedColor is"
-        }
-        Rectangle {
-            width: Theme.dp(100)
-            height: Theme.dp(20)
-            radius: width/2
-            color: colorSelectionGrid.selectedColor
-        }
-    }
-
-    StatusColorSelectorGrid {
-        id: colorSelectionGrid
-        anchors.top: selectedColor.bottom
-        anchors.topMargin: Theme.dp(10)
-        anchors.horizontalCenter: parent.horizontalCenter
-        titleText: "COLOR"
-        selectedColorIndex: 2
-    }
-}
@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1

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

    StatusColorSelector {
        model: ["red", "blue", "green"]
@@ -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: Theme.dp(48)
-            radius: Theme.dp(10)
-            Layout.fillWidth: true
-
-            StatusBaseText {
-                anchors.centerIn: parent
-                color: Theme.palette.white
-                font.pixelSize: Theme.dp(15)
-                text: "Quick brown fox jumps over the lazy dog"
-            }
-        }
-
-        StatusButton {
-            text: "Randomize"
-            onPressed: colorSpace.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
-        }
-    }
-}
@@ -1,48 +0,0 @@
-import QtQuick 2.0
-import QtQuick.Layouts 1.13
-
-import StatusQ.Components 0.1
-import StatusQ.Core.Theme 0.1
-
-import "../demoapp/data" 1.0
-
-GridLayout {
-
-    QtObject {
-        id: d
-
-        function navigateToCommunity(communityID) {
-            console.log("Clicked community: " + communityID)
-        }
-    }
-
-    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-    columns: 2
-    columnSpacing: Theme.dp(28)
-    rowSpacing: Theme.dp(28)
-
-    Repeater {
-        model: Models.curatedCommunitiesModel
-        delegate: StatusCommunityCard {
-            locale: "en"
-            communityId: model.communityId
-            loaded: model.available
-            logo: model.logo
-            banner: model.banner
-            name: model.name
-            description: model.description
-            members: model.members
-            activeUsers: model.activeUsers
-            popularity: model.popularity
-            isPrivate: model.isPrivate
-            tokenLogo: model.tokenLogo
-            categories: ListModel {
-                ListElement { name: "Crypto"; emoji: "🔗"}
-                ListElement { name: "Privacy"; emoji: "👻"}
-                ListElement { name: "Social"; emoji: "☕"}
-            }
-
-            onClicked: { d.navigateToCommunity(communityId) }
-        }
-    }
-}
@@ -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: Theme.dp(600)
-        height: Theme.dp(500)
-        spacing: Theme.dp(20)
-
-        StatusInput {
-            id: tagsFilter
-            leftPadding: 0
-            rightPadding: 0
-            label: qsTr("Select tags that will fit your Community")
-            input.icon.name: "search"
-            input.placeholderText: qsTr("Search tags")
-            Layout.fillWidth: true
-        }
-
-        StatusCommunityTags {
-            filterString: tagsFilter.text
-            model: tagsModel
-            enabled: cntSelectedTags < maxSelectedTags
-            onClicked: {
-                cntSelectedTags++;
-                item.selected = true;
-            }
-            Layout.fillWidth: true
-        }
-
-        RowLayout {
-            StatusBaseText {
-                text: qsTr("Selected tags")
-                font.pixelSize: Theme.dp(15)
-                Layout.fillWidth: true
-            }
-
-            StatusBaseText {
-                text: cntSelectedTags + "/" + maxSelectedTags
-                color: Theme.palette.baseColor1
-                font.pixelSize: Theme.dp(13)
-            }
-        }
-
-        StatusCommunityTags {
-            model: tagsModel
-            showOnlySelected: true
-            onClicked: {
-                cntSelectedTags--;
-                item.selected = false;
-            }
-            Layout.fillWidth: true
-        }
-
-        Item {
-            Layout.fillHeight: true
-        }
-    }
-}
@@ -5,15 +5,15 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1

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

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

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

    Rectangle {
        width: parent.width
-        height: Theme.dp(30)
+        height: 30
        color:  Theme.palette.baseColor2
        StatusBaseText {
            anchors.verticalCenter: parent.verticalCenter
@@ -134,15 +134,15 @@ Column {
        id: notImplemented
        Rectangle {
            anchors.centerIn: parent
-            width: Theme.dp(654)
+            width: 654
            height: infoText.implicitHeight
            color: Theme.palette.baseColor5
            StatusBaseText {
                id: infoText
                anchors.centerIn: parent
                color: Theme.palette.directColor4
-                font.pixelSize: Theme.dp(15)
-                lineHeight: Theme.dp(22)
+                font.pixelSize: 15
+                lineHeight: 22
                lineHeightMode: Text.FixedHeight
                font.weight: Font.Medium
                text: qsTr("Not Implemented")
@@ -1,94 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-
-import QtGraphicalEffects 1.14
-
-Item {
-    id: root
-
-    implicitWidth: mainLayout.implicitWidth
-    implicitHeight: mainLayout.implicitHeight
-
-    property var testControls: [ctrl1, ctrl2, ctrl3]
-
-    property bool globalStylePreferRound: true
-
-    ColumnLayout {
-        id: mainLayout
-
-        anchors.fill: parent
-
-        RowLayout {
-            ColumnLayout {
-                Text {
-                    text: `AR: ${ctrl1.aspectRatio.toFixed(2)}`
-                }
-
-                StatusImageCropPanel {
-                    id: ctrl1
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: "qrc:/demoapp/data/logo-test-image.png"
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                }
-                Text {
-                    text: `AR: ${ctrl2.aspectRatio.toFixed(2)}`
-                }
-                StatusImageCropPanel {
-                    id: ctrl2
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: "qrc:/demoapp/data/logo-test-image.png"
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rectangular : StatusImageCrop.WindowStyle.Rounded
-                    aspectRatio: 16/9
-                    enableCheckers: true
-                }
-            }
-            ColumnLayout {
-                Text {
-                    text: `AR: ${ctrl3.aspectRatio.toFixed(2)}`
-                }
-                StatusImageCropPanel {
-                    id: ctrl3
-
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    source: "qrc:/demoapp/data/logo-test-image.png"
-                    windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
-                    aspectRatio: 0.8
-                }
-            }
-        }
-
-        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
-        }
-    }
-}
@@ -9,7 +9,7 @@ import StatusQ.Controls.Validators 0.1
 import Sandbox 0.1

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

    StatusInput {
        input.placeholderText: "Placeholder"
@@ -57,38 +57,11 @@ Column {
        input.clearable: true
    }

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

    StatusInput {
@@ -129,26 +102,12 @@ Column {
        ]
    }

-    StatusInput {
-        label: "Input with <i>StatusRegularExpressionValidator</i>"
-        charLimit: 30
-        input.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"
        input.placeholderText: "Input width component (right side)"
-        input.rightComponent: StatusIcon {
+        input.component: StatusIcon {
            icon: "cancel"
-            height: Theme.dp(16)
+            height: 16
            color: Theme.palette.dangerColor1
        }
    }
@@ -162,55 +121,13 @@ Column {
    StatusInput {
        input.multiline: true
        input.placeholderText: "Multiline with static height"
-        input.implicitHeight: Theme.dp(100)
+        input.implicitHeight: 100
    }

    StatusInput {
        input.multiline: true
        input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: Theme.dp(80)
-        input.maximumHeight: Theme.dp(200)
-    }
-
-    StatusInput {
-        property bool toggled: true
-        label: "Input with emoji icon"
-        input.placeholderText: "Enter Name"
-        input.icon.emoji: toggled ? "😁" : "🧸"
-        input.icon.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.icon.emoji: ""
-        input.icon.name: toggled ? "filled-account" : "image"
-        input.icon.color: "blue"
-        input.isIconSelectable: true
-        onIconClicked: {
-            toggled = !toggled
-        }
-    }
-
-    StatusInput {
-        label: "Input with inline token selector"
-        input.leftComponent: StatusTokenInlineSelector {
-            anchors.verticalCenter: parent.verticalCenter
-            tokens: [{amount: 0.1, token: "ETH"},
-                     {amount: 10, token: "SNT"},
-                     {amount: 15, token: "MANA"}]
-
-            StatusToolTip {
-                id: toolTip
-                text: "posted"
-            }
-            onTriggered: toolTip.visible = true
-        }
-        input.edit.readOnly: true
+        input.minimumHeight: 80
+        input.maximumHeight: 200
    }
 }
@@ -1,81 +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: Theme.dp(150)
-
-    GridLayout {
-        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-        rows: 4
-        columns: 2
-        rowSpacing: Theme.dp(170)
-        columnSpacing: Theme.dp(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
-        }
-
-        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: Theme.dp(100)
-        width: Theme.dp(500)
-        text: "4 different configurations for the `StatusListPicker` component:\n
-    * Single selection. \n
-    * Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
-    * Multiple selection.\n
-    * Multiple selection and displayed name is the symbol + shortName\n"
-        color: Theme.palette.baseColor1
-        font.pixelSize: Theme.dp(15)
-    }
-
-    // Outsite area
-    MouseArea {
-        height: root.height
-        width: root.width
-        onClicked: {
-            languagePicker.close()
-            languagePicker2.close()
-            currencyPicker.close()
-            currencyPicker2.close()
-        }
-    }
-}
@@ -3,12 +3,11 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14

 import StatusQ.Platform 0.1
-import StatusQ.Core.Theme 0.1

 import Sandbox 0.1

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

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

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

    StatusPasswordStrengthIndicator {
        id: veryweakPw
--- a/Show More
+++ b/Show More