feat(StatusQ): Making UI components resizable

Needed for: https://github.com/status-im/status-desktop/issues/6071

.github/pull_request_template.md

@@ -0,0 +1,17 @@
+### 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)

.gitignore

@@ -13,3 +13,7 @@ Makefile
 *_qml.cpp
 *_qmlcache.qrc
 sandbox/qmlcache_loader.cpp
+doc/html
+CMakeLists.txt.user
+.vscode
+build/

CHANGELOG.md

@@ -1,3 +1,43 @@
+<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)
 

CMakeLists.txt

@@ -0,0 +1,5 @@
+cmake_minimum_required(VERSION 3.19)
+
+project(StatusQ)
+
+add_subdirectory(tests)

doc/src/statusqcomponents.qdoc

@@ -22,6 +22,7 @@
        \li \l{StatusDescriptionListItem}
        \li \l{StatusLetterIdenticon}
        \li \l{StatusListItem}
+       \li \l{StatusListPicker}
        \li \l{StatusListSectionHeadline}
        \li \l{StatusLoadingIndicator}
        \li \l{StatusMemberListItem}
@@ -37,5 +38,6 @@
        \li \l{StatusMessageDetails}
        \li \l{StatusTagSelector}
        \li \l{StatusToastMessage}
+       \li \l{StatusWizardStepper}
    \endlist
 */

doc/src/statusqcontrols.qdoc

@@ -30,8 +30,11 @@
        \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}
@@ -39,5 +42,8 @@
        \li \l{StatusSelectableText}
        \li \l{StatusWalletColorButton}
        \li \l{StatusWalletColorSelect}
+       \li \l{StatusRegularExpressionValidator}
+       \li \l{StatusIntValidator}
+       \li \l{StatusSeedPhraseInput}
    \endlist
 */

doc/src/statusqcore.qdoc

@@ -15,6 +15,7 @@
        \li \l{StatusIcon}
        \li \l{StatusIconBackgroundSettings}
        \li \l{StatusIconSettings}
+       \li \l{StatusIdenticonRingSettings}
        \li \l{StatusImageSettings}
        \li \l{StatusModalHeaderSettings}
        \li \l{StatusTooltipSettings}

doc/statusq.qdocconf

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

docs/qml-statusq-core-statusbasetext-members.html

@@ -1,15 +0,0 @@
-<!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>

docs/qml-statusq-core-statusbasetext.html

@@ -1,41 +0,0 @@
-<!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>

docs/statusq-components-qmlmodule.html

@@ -1,53 +0,0 @@
-<!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>

docs/statusq-controls-qmlmodule.html

@@ -1,55 +0,0 @@
-<!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>

docs/statusq-core-qmlmodule.html

@@ -1,35 +0,0 @@
-<!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>

docs/statusq-index.html

@@ -1,28 +0,0 @@
-<!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>

docs/statusq-layout-qmlmodule.html

@@ -1,28 +0,0 @@
-<!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>

docs/statusq-platform-qmlmodule.html

@@ -1,27 +0,0 @@
-<!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>

docs/statusq-popups-qmlmodule.html

@@ -1,34 +0,0 @@
-<!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>

sandbox/DemoApp.qml

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

sandbox/ThemeSwitch.qml

@@ -2,11 +2,14 @@ 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
 
@@ -17,28 +20,29 @@ Item {
 
         Row {
             id: themeSwitch
-            spacing: 2
+            spacing: Theme.dp(2)
 
             Text {
                 text: "🌤"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(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 + 16
+                    y: themeSwitchWrapper.y + Theme.dp(16)
                 }
             }
 
             Text {
                 text: "🌙"
-                font.pixelSize: 15
+                font.pixelSize: Theme.dp(15)
                 anchors.verticalCenter: parent.verticalCenter
             }
         }

sandbox/controls/Buttons.qml

@@ -3,16 +3,17 @@ import QtQuick.Layouts 1.14
 import QtQuick.Dialogs 1.3
 
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
-
 Column {
-    spacing: 10
+    spacing: Theme.dp(10)
     Grid {
         id: buttonGridWidth
-        columns: 3
-        columnSpacing: 38
-        rowSpacing: 10
+        columns: Theme.dp(3)
+        columnSpacing: Theme.dp(38)
+        rowSpacing: Theme.dp(10)
 
         horizontalItemAlignment: Grid.AlignHCenter
 
@@ -173,25 +174,44 @@ Column {
             loading: true
         }
 
+        // transparent
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            enabled: false
+        }
+
+        StatusRoundButton {
+            type: StatusRoundButton.Type.Tertiary
+            icon.name: "info"
+            loading: true
+        }
+
         // Rounded blue
 
         StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
 
             icon.name: "info"
         }
 
         StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
             icon.name: "info"
             enabled: false
         }
 
         StatusFlatRoundButton {
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
             icon.name: "info"
             loading: true
         }
@@ -200,24 +220,24 @@ Column {
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
 
             icon.name: "info"
         }
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
             icon.name: "info"
             enabled: false
         }
 
         StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 44
-            height: 44
+            width: Theme.dp(44)
+            height: Theme.dp(44)
             icon.name: "info"
             loading: true
         }
@@ -307,12 +327,20 @@ Column {
         onClicked: {
             colorDialog.open();
         }
-        ColorDialog {
-            id: colorDialog
-            property bool colorSelected: false
-            onAccepted: {
-                colorSelected = true;
-            }
+    }
+
+    StatusColorDialog {
+        id: colorDialog
+        anchors.centerIn: parent
+        property bool colorSelected: false
+        onAccepted: {
+            colorSelected = true;
         }
     }
+
+    // Button with emoji
+    StatusButton {
+        text: "Button with Emoji"
+        icon.emoji: "🖼️️"
+    }
 }

sandbox/controls/Controls.qml

@@ -9,22 +9,22 @@ import Sandbox 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusSelectableText {
         color: Theme.palette.baseColor1
         text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
-        font.pixelSize: 15
-        width: 300
+        font.pixelSize: Theme.dp(15)
+        width: Theme.dp(300)
         multiline: true
     }
 
     StatusSelectableText {
         color: Theme.palette.baseColor1
         text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
-        font.pixelSize: 15
-        width: 200
+        font.pixelSize: Theme.dp(15)
+        width: Theme.dp(200)
     }
 
     StatusIconTabButton {
@@ -57,21 +57,21 @@ GridLayout {
             visible: parent.hovered
             text: "Right"
             orientation: StatusToolTip.Orientation.Right
-            x: parent.width + 16
+            x: parent.width + Theme.dp(16)
             y: parent.height / 2 - height / 2 + 4
         }
         StatusToolTip {
             visible: parent.hovered
             text: "Bottom"
             orientation: StatusToolTip.Orientation.Bottom
-            y: parent.height + 12
+            y: parent.height + Theme.dp(12)
         }
         StatusToolTip {
             visible: parent.hovered
             text: "Left"
             orientation: StatusToolTip.Orientation.Left
-            x: -parent.width /2 -8
-            y: parent.height / 2 - height / 2 + 4
+            x: -parent.width /2 - Theme.dp(8)
+            y: parent.height / 2 - height / 2 + Theme.dp(4)
         }
     }
 
@@ -95,7 +95,7 @@ GridLayout {
         tooltip.text: "Profile"
         badge.value: 0
         badge.visible: true
-        badge.anchors.leftMargin:-16
+        badge.anchors.leftMargin:-Theme.dp(16)
     }
 
     StatusNavBarTabButton {
@@ -131,8 +131,8 @@ GridLayout {
     }
 
     Item {
-        implicitWidth: 100
-        implicitHeight: 48
+        implicitWidth: Theme.dp(100)
+        implicitHeight: Theme.dp(48)
         StatusChatInfoButton {
             title: "Iuri Matias elided"
             subTitle: "Contact"
@@ -141,13 +141,13 @@ GridLayout {
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
-            width: 100
+            width: Theme.dp(100)
         }
     }
 
     Item {
-        implicitWidth: 100
-        implicitHeight: 48
+        implicitWidth: Theme.dp(100)
+        implicitHeight: Theme.dp(48)
         StatusChatInfoButton {
             title: "Iuri Matias big not elided"
             subTitle: "Contact"
@@ -156,7 +156,7 @@ GridLayout {
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 1
-            width: 400
+            width: Theme.dp(400)
         }
     }
 
@@ -183,22 +183,32 @@ GridLayout {
     }
 
     StatusSlider {
-        width: 360
+        width: Theme.dp(360)
         from: 0
         to: 100
         value: 40
     }
 
+    StatusLabeledSlider {
+        width: Theme.dp(360)
+        model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
+    }
+
+    StatusLabeledSlider {
+        width: Theme.dp(360)
+        model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
+    }
+
     StatusBanner {
         id: banner
-        width: 360
-        topPadding: 20
+        width: Theme.dp(360)
+        topPadding: Theme.dp(20)
         type: StatusBanner.Type.Danger
         statusText: "Banner"
     }
 
     StatusProgressBar {
-        id: progressBar        
+        id: progressBar
         text: "Weak"
         value: 0.5
         fillColor : Theme.palette.pinColor1

sandbox/controls/Icons.qml

@@ -1,11 +1,12 @@
 import QtQuick 2.14
 import QtQuick.Layouts 1.14
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
 
 GridLayout {
     columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
     property color iconColor
 
     Repeater {

sandbox/controls/Layout.qml

@@ -10,31 +10,96 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 
 Column {
-    spacing: 5
+    spacing: Theme.dp(10)
 
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
+        toolbarComponent: chatInfoButton1
+        width: Theme.dp(518)
+
+        Component {
+            id: chatInfoButton1
+
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.OneToOneChat
+             }
+        }
     }
 
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
-        chatInfoButton.pinnedMessagesCount: 1
-        chatInfoButton.muted: true
+        toolbarComponent: chatInfoButton2
+        width: Theme.dp(518)
+
+        Component {
+            id: chatInfoButton2
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.PublicChat
+                pinnedMessagesCount: 1
+                muted: true
+             }
+        }
     }
 
+
     StatusChatToolBar {
-        chatInfoButton.title: "Some contact"        
-        chatInfoButton.subTitle: "Contact"
-        chatInfoButton.icon.color: Theme.palette.miscColor7
-        chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-        chatInfoButton.pinnedMessagesCount: 1
         notificationCount: 1
+        toolbarComponent: chatInfoButton3
+        width: Theme.dp(518)
+
+        Component {
+            id: chatInfoButton3
+
+            StatusChatInfoButton {
+                width: Math.min(implicitWidth, parent.width)
+                title: "Some contact"
+                subTitle: "Contact"
+                icon.color: Theme.palette.miscColor7
+                type: StatusChatInfoButton.Type.OneToOneChat
+                pinnedMessagesCount: 1
+             }
+        }
+    }
+
+    StatusChatToolBar {
+        notificationCount: 1
+        toolbarComponent: tagSelector
+        width: Theme.dp(518)
+
+        Component {
+            id: tagSelector
+
+            StatusTagSelector {
+                namesModel: ListModel {
+                    ListElement {
+                        publicId: "0x0"
+                        name: "Maria"
+                        icon: ""
+                        isIdenticon: false
+                        onlineStatus: 3
+                        isReadonly: true
+                        tagIcon: "crown"
+                    }
+                    ListElement {
+                        publicId: "0x1"
+                        name: "James"
+                        icon: ""
+                        isIdenticon: false
+                        onlineStatus: 1
+                        isReadonly: false
+                        tagIcon: ""
+                    }
+                }
+                toLabelText: qsTr("To: ")
+                warningText: qsTr("USER LIMIT REACHED")
+            }
+        }
     }
 
     Row {
@@ -42,6 +107,8 @@ Column {
         Button {
             id: btn
             text: "Append"
+            width: Theme.dp(100)
+            height: Theme.dp(40)
             onClicked: {
                 buttons.append({
                     name: "Test community",
@@ -77,7 +144,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
         }
 
@@ -120,7 +187,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -134,7 +201,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
 
                 popupMenu: StatusPopupMenu {
 
@@ -159,7 +226,7 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
+                        icon.width: Theme.dp(14)
                         iconRotation: 180
                         type: StatusMenuItem.Type.Danger
                     }
@@ -205,7 +272,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -219,7 +286,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
 
                 popupMenu: StatusPopupMenu {
 
@@ -244,8 +311,8 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                         type: StatusMenuItem.Type.Danger
                     }
                 }
@@ -295,7 +362,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -309,7 +376,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
 
                 popupMenu: StatusPopupMenu {
 
@@ -334,8 +401,8 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                         type: StatusMenuItem.Type.Danger
                     }
                 }
@@ -390,7 +457,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
             }
 
             communityNavBarButton: StatusNavBarTabButton {
@@ -404,7 +471,7 @@ Column {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
 
                 popupMenu: StatusPopupMenu {
 
@@ -429,15 +496,13 @@ Column {
                     StatusMenuItem {
                         text: qsTr("Leave Community")
                         icon.name: "arrow-right"
-                        icon.width: 14
-                        iconRotation: 180
+                        icon.width: Theme.dp(14)
+                        iconRotation: Theme.dp(180)
                         type: StatusMenuItem.Type.Danger
                     }
                 }
             }
         }
-
-
     }
 }
 

sandbox/controls/ListItems.qml

@@ -4,11 +4,12 @@ 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: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusNavigationListItem {
         title: "Menu Item"
@@ -25,7 +26,7 @@ GridLayout {
         badge.value: 1
     }
     StatusNavigationListItem {
-        title: "Menu Item (selected)"
+        title: "Menu Item (selected) with very long text"
         selected: true
         icon.name: "info"
         badge.value: 1
@@ -64,6 +65,12 @@ 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"
@@ -149,7 +156,7 @@ GridLayout {
         subTitle: "Subtitle"
         tertiaryTitle: "Tertiary title"
 
-        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.pixelSize: Theme.dp(17)
         statusListItemTitle.font.weight: Font.Bold
     }
 
@@ -159,7 +166,7 @@ GridLayout {
         tertiaryTitle: "Tertiary title"
         icon.name: "info"
 
-        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.pixelSize: Theme.dp(17)
         statusListItemTitle.font.weight: Font.Bold
     }
 
@@ -322,6 +329,43 @@ 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"
@@ -350,34 +394,84 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     StatusMemberListItem {
         nickName: "This is an example"
         userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        trustIndicator: StatusMemberListItem.TrustedType.Verified
-        isMutualContact: true
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isVerified: true
+        isContact: true
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                       nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
-        isOnline: true
+        status: 1 // FIXME: use enum
+        ringSettings.ringSpecModel:
+            ListModel {
+                ListElement {colorId: 13; segmentLength: 5}
+                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
     }
 
     StatusMemberListItem {
         nickName: "carmen.eth"
-        isOnline: false
-        trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
+        isUntrustworthy: true
+    }
+
+    StatusMemberListItem {
+        nickName: "very-long-annoying-nickname.eth"
+        isUntrustworthy: true
     }
 
     StatusMemberListItem {
         nickName: "This girl I know from work"
         userName: "annabelle"
-        isOnline: true        
+        status: 1 // FIXME: use enum
     }
 
     StatusMemberListItem {
         nickName: "Mark Cuban"
         userName: "annabelle"
-        chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-        isMutualContact: true
+        pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+        isContact: true
         image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                        nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
         image.isIdenticon: true
     }
+
+    StatusMemberListItem {
+        nickName: "admin.guy"
+        isAdmin: true
+        isUntrustworthy: true
+    }
+
+    StatusBaseText {
+        Layout.fillWidth: true
+        Layout.topMargin: 16
+        text: "Loading features:"
+        font.pixelSize: 17
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Incoming device"
+        label: "loading: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loading: true
+    }
+
+    StatusListItem {
+        title: "Nokia 3310"
+        subTitle: "Device"
+        label: "loadingFailed: true"
+        icon.emoji: "😁"
+        icon.color: "hotpink"
+        icon.letterSize: 14
+        icon.isLetterIdenticon: true
+        loadingFailed: true
+    }
 }

sandbox/controls/Others.qml

@@ -4,38 +4,58 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 5
+ColumnLayout {
+    GridLayout {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
 
-    StatusLoadingIndicator {
-        color: Theme.palette.directColor4
+        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"
+        }
     }
 
-    StatusLetterIdenticon {
-        name: "#status"
-    }
+    Flow {
+        Layout.fillWidth: true
+        spacing: 4
 
-    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"
+        Repeater {
+            model: 12
+            StatusLetterIdenticon {
+                name: "A"
+                color: Theme.palette.userCustomizationColors[index]
+                letterSize: Theme.dp(16)
+            }
+        }
     }
 }
+

sandbox/controls/Popups.qml

@@ -4,9 +4,12 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core.Utils 0.1
 
 Column {
-    spacing: 20
+    spacing: Theme.dp(20)
 
     StatusButton {
         text: "Simple modal"
@@ -78,6 +81,17 @@ 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
@@ -130,11 +144,11 @@ Column {
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)
 
-            icon.width: 20
-            icon.height: 20
+            icon.width: Theme.dp(20)
+            icon.height: Theme.dp(20)
             icon.name: "info"
         }
 
@@ -179,17 +193,17 @@ Column {
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
         headerActionButton: StatusFlatRoundButton {
             type: StatusFlatRoundButton.Type.Secondary
-            width: 32
-            height: 32
+            width: Theme.dp(32)
+            height: Theme.dp(32)
 
-            icon.width: 20
-            icon.height: 20
+            icon.width: Theme.dp(20)
+            icon.height: Theme.dp(20)
             icon.name: "info"
         }
     }
@@ -204,7 +218,7 @@ Column {
             id: text
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -229,7 +243,7 @@ Column {
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -255,7 +269,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -282,7 +296,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -309,7 +323,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         contentItem: StatusBaseText {
             anchors.centerIn: parent
             text: "Some text content"
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.directColor1
         }
 
@@ -353,10 +367,93 @@ 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"}
+        ListElement{name: "Account 1"; iconName: "filled-account"; emoji:  "🥑"}
         ListElement{name: "Account 2"; iconName: "filled-account"}
+        ListElement{name: "Account 3"; iconName: "filled-account"}
+        ListElement{name: "Account 4"; iconName: "filled-account"}
+        ListElement{name: "Account 5"; iconName: "filled-account"}
+        ListElement{name: "Account 6"; iconName: "filled-account"}
+        ListElement{name: "Account 7"; iconName: "filled-account"}
     }
 
     StatusSpellcheckingMenuItems {

sandbox/demoapp/ChatChannelView.qml

@@ -12,7 +12,7 @@ import StatusQ.Core.Theme 0.1
 ListView {
     id: messageList
     anchors.fill: parent
-    anchors.margins: 15
+    anchors.margins: Theme.dp(15)
     clip: true
     delegate: StatusMessage {
         id: delegate
@@ -34,14 +34,15 @@ ListView {
             secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
             chatID: model.chatKey
             profileImage: StatusImageSettings {
-                width: 40
-                height: 40
+                width: Theme.dp(40)
+                height: Theme.dp(40)
                 source: model.profileImage
                 isIdenticon: model.isIdenticon
             }
             messageText: model.message
             hasMention: model.hasMention
-            contactType: model.contactType
+            isMutualContact: model.isMutualContact
+            trustIndicator: model.trustIndicator
             isPinned: model.isPinned
             pinnedBy: model.pinnedBy
             hasExpired: model.hasExpired
@@ -54,8 +55,8 @@ ListView {
             amISender:  model.isReply ? model.replyAmISender : ""
             displayName:  model.isReply ? model.replySenderName: ""
             profileImage: StatusImageSettings {
-                width: 20
-                height: 20
+                width: Theme.dp(20)
+                height: Theme.dp(20)
                 source:  model.isReply ? model.replyProfileImage: ""
                 isIdenticon:  model.isReply ? model.replyIsIdenticon: ""
             }
@@ -66,23 +67,23 @@ ListView {
         quickActions: [
             StatusFlatRoundButton {
                 id: emojiBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "reaction-b"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Add reaction"
             },
             StatusFlatRoundButton {
                 id: replyBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "reply"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Reply"
             },
             StatusFlatRoundButton {
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "tiny/edit"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "Edit"
@@ -92,8 +93,8 @@ ListView {
             },
             StatusFlatRoundButton {
                 id: otherBtn
-                width: 32
-                height: 32
+                width: Theme.dp(32)
+                height: Theme.dp(32)
                 icon.name: "more"
                 type: StatusFlatRoundButton.Type.Tertiary
                 tooltip.text: "More"

sandbox/demoapp/CreateChatView.qml

@@ -1,8 +1,6 @@
 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
@@ -12,7 +10,7 @@ import StatusQ.Core.Theme 0.1
 Page {
     id: root
     anchors.fill: parent
-    anchors.margins: 16
+    anchors.margins: Theme.dp(16)
     property ListModel contactsModel: null
     background: null
 
@@ -21,40 +19,62 @@ Page {
         width: parent.width
         height: tagSelector.height
         anchors.right: parent.right
-        anchors.rightMargin: 8
+        anchors.rightMargin: Theme.dp(8)
 
         StatusTagSelector {
             id: tagSelector
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-            Layout.leftMargin: 17
-            implicitHeight: 44
+            Layout.leftMargin: Theme.dp(17)
+            maxHeight: root.height
             toLabelText: qsTr("To: ")
-            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;
+            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;
                         }
                     }
+                    return contactsModel.get(index).ringSpecModel;
                 } else {
-                    userListView.model = contactsModel;
+                    return null;
                 }
             }
+            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: 44
+            implicitHeight: Theme.dp(44)
+            Layout.alignment: Qt.AlignTop
             enabled: (tagSelector.namesModel.count > 0)
             text: "Confirm"
         }
@@ -62,162 +82,14 @@ Page {
 
     contentItem: Item {
         anchors.fill: parent
-        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();
-                }
-            }
-        }
+        anchors.topMargin: Theme.dp(68)
 
         StatusBaseText {
             visible: (contactsModel.count === 0)
             anchors.centerIn: parent
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             color: Theme.palette.baseColor1
             text: qsTr("You can only send direct messages to your Contacts. \n\n
 Send a contact request to the person you would like to chat with, you will be\n able to

sandbox/demoapp/DemoCommunityDetailModal.qml

@@ -19,24 +19,24 @@ StatusModal {
         width: root.width
 
         StatusModalDivider {
-            bottomPadding: 8
+            bottomPadding: Theme.dp(8)
         }
 
         StatusBaseText {
             text: "A community of cat lovers, meow!"
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
-            height: 46
+            font.pixelSize: Theme.dp(15)
+            height: Theme.dp(46)
             color: Theme.palette.directColor1
             anchors.left: parent.left
             anchors.right: parent.right
-            anchors.leftMargin: 16
-            anchors.rightMargin: 16
+            anchors.leftMargin: Theme.dp(16)
+            anchors.rightMargin: Theme.dp(16)
         }
 
         StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
         }
 
         StatusDescriptionListItem {
@@ -49,13 +49,13 @@ StatusModal {
         }
 
         StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
         }
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
             title: "Members"
             icon.name: "group-chat"
             label: "184"
@@ -79,13 +79,13 @@ StatusModal {
         }
 
         StatusModalDivider {
-            topPadding: 8
-            bottomPadding: 8
+            topPadding: Theme.dp(8)
+            bottomPadding: Theme.dp(8)
         }
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
             title: "Edit community"
             icon.name: "edit"
             type: StatusListItem.Type.Secondary
@@ -93,7 +93,7 @@ StatusModal {
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
             title: "Transfer ownership"
             icon.name: "exchange"
             type: StatusListItem.Type.Secondary
@@ -101,7 +101,7 @@ StatusModal {
 
         StatusListItem {
             anchors.horizontalCenter: parent.horizontalCenter
-            statusListItemTitle.font.pixelSize: 17
+            statusListItemTitle.font.pixelSize: Theme.dp(17)
             title: "Leave community"
             icon.name: "arrow-right"
             icon.rotation: 180

sandbox/demoapp/DemoContactRequestsModal.qml

@@ -11,18 +11,18 @@ StatusModal {
     header.title: "Contact Requests"
     headerActionButton: StatusFlatRoundButton {
         type: StatusFlatRoundButton.Type.Secondary
-        width: 32
-        height: 32
+        width: Theme.dp(32)
+        height: Theme.dp(32)
 
-        icon.width: 20
-        icon.height: 20
+        icon.width: Theme.dp(20)
+        icon.height: Theme.dp(20)
         icon.name: "notification"
     }
 
     contentItem: StatusBaseText {
         anchors.centerIn: parent
         text: "Contact request will be shown here"
-        font.pixelSize: 15
+        font.pixelSize: Theme.dp(15)
         color: Theme.palette.directColor1
     }
 

sandbox/demoapp/StatusAppChatView.qml

@@ -20,28 +20,26 @@ StatusAppThreePanelLayout {
         StatusNavigationPanelHeadline {
             id: headline
             anchors.top: parent.top
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.horizontalCenter: parent.horizontalCenter
             text: "Chat"
         }
 
         RowLayout {
             id: searchInputWrapper
-            width: parent.width
+            width: Theme.dp(288)
             height: searchInput.height
             anchors.top: headline.bottom
-            anchors.topMargin: 16
-            anchors.right: parent.right
-            anchors.rightMargin: 8
+            anchors.topMargin: Theme.dp(16)
+            anchors.horizontalCenter: parent.horizontalCenter
 
             StatusBaseInput {
                 id: searchInput
                 Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                Layout.leftMargin: 17
-                implicitHeight: 36
-                topPadding: 8
-                bottomPadding: 0
+                Layout.alignment: Qt.AlignVCenter
+                implicitHeight: Theme.dp(36)
+                topPadding: Theme.dp(8)
+                bottomPadding: Theme.dp(8)
                 placeholderText: "Search"
                 icon.name: "search"
             }
@@ -60,9 +58,9 @@ StatusAppThreePanelLayout {
 
         Column {
             anchors.top: searchInputWrapper.bottom
-            anchors.topMargin: 16
-            width: parent.width
-            spacing: 8
+            anchors.topMargin: Theme.dp(16)
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: Theme.dp(8)
 
             StatusContactRequestsIndicatorListItem {
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -72,8 +70,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);
@@ -128,19 +126,18 @@ StatusAppThreePanelLayout {
     centerPanel: Loader {
         anchors.fill: parent
         sourceComponent: root.createChat ? createChatView : chatChannelView
-    }
-
-    Component {
-        id: createChatView
-        CreateChatView {
-            contactsModel: Models.dummyContactsModel
+        Component {
+            id: createChatView
+            CreateChatView {
+                contactsModel: Models.membersListModel
+            }
         }
-    }
 
-    Component {
-        id: chatChannelView
-        ChatChannelView {
-            model: Models.chatMessagesModel
+        Component {
+            id: chatChannelView
+            ChatChannelView {
+                model: Models.chatMessagesModel
+            }
         }
     }
 
@@ -148,15 +145,8 @@ StatusAppThreePanelLayout {
         anchors.fill: parent
 
         StatusChatToolBar {
-            anchors.top: parent.top
             width: parent.width
-
-            chatInfoButton.title: "Amazing Funny Squirrel"
-            chatInfoButton.subTitle: "Contact"
-            chatInfoButton.icon.color: Theme.palette.miscColor7
-            chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
-            chatInfoButton.pinnedMessagesCount: 1
-
+            toolbarComponent: statusChatInfoButton
             searchButton.visible: false
             membersButton.visible: false
             notificationCount: 1
@@ -184,11 +174,24 @@ StatusAppThreePanelLayout {
                 StatusMenuItem {
                     text: "Leave Chat"
                     icon.name: "arrow-right"
-                    icon.width: 14
+                    icon.width: Theme.dp(14)
                     iconRotation: 180
                     type: StatusMenuItem.Type.Danger
                 }
             }
+
+            Component {
+                id: statusChatInfoButton
+
+                StatusChatInfoButton {
+                   width: Math.min(implicitWidth, parent.width)
+                   title: "Amazing Funny Squirrel"
+                   subTitle: "Contact"
+                   icon.color: Theme.palette.miscColor7
+                   type: StatusChatInfoButton.Type.OneToOneChat
+                   pinnedMessagesCount: 1
+                }
+            }
         }
     }
 }

sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -0,0 +1,156 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import "../demoapp/data" 1.0
+
+
+ScrollView {
+    id: root
+
+    QtObject {
+        id: d
+
+        property ListModel featuredCommunitiesModel: Models.featuredCommunitiesModel
+        property ListModel popularCommunitiesModel: Models.curatedCommunitiesModel
+        property ListModel tagsModel: Models.tagsModel
+
+        property string searchText: ""
+        property int layoutVMargin: 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) }
+                }
+            }
+        }
+    }
+}

sandbox/demoapp/StatusAppCommunityView.qml

@@ -63,7 +63,7 @@ StatusAppThreePanelLayout {
             id: scrollView
 
             anchors.top: statusChatInfoToolBar.bottom
-            anchors.topMargin: 8
+            anchors.topMargin: Theme.dp(8)
             anchors.bottom: parent.bottom
             width: leftPanel.width
 
@@ -73,7 +73,7 @@ StatusAppThreePanelLayout {
             StatusChatListAndCategories {
                 id: communityCategories
                 width: leftPanel.width
-                height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
+                height: implicitHeight > (leftPanel.height - Theme.dp(64)) ? implicitHeight + Theme.dp(8) : leftPanel.height - Theme.dp(64)
 
                 draggableItems: true
                 draggableCategories: false
@@ -166,13 +166,10 @@ StatusAppThreePanelLayout {
     centerPanel: Item {
         StatusChatToolBar {
             id: statusChatToolBar
-            anchors.top: parent.top
-            width: parent.width
 
-            chatInfoButton.title: "general"
-            chatInfoButton.subTitle: "Community Chat"
-            chatInfoButton.icon.color: Theme.palette.miscColor6
-            chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
+            width: parent.width
+            toolbarComponent: statusChatInfoButton
+
             onSearchButtonClicked: {
                 searchButton.highlighted = !searchButton.highlighted;
                 searchPopup.setSearchSelection(communityDetailModalTitle,
@@ -184,6 +181,18 @@ StatusAppThreePanelLayout {
             onMembersButtonClicked: {
                 root.showRightPanel = !root.showRightPanel;
             }
+
+            Component {
+                id: statusChatInfoButton
+
+                StatusChatInfoButton {
+                   width: Math.min(implicitWidth, parent.width)
+                   title: "general"
+                   subTitle: "Community Chat"
+                   icon.color: Theme.palette.miscColor6
+                   type: StatusChatInfoButton.Type.CommunityChat
+                }
+            }
         }
 
         StatusSearchPopup {
@@ -239,33 +248,34 @@ StatusAppThreePanelLayout {
             anchors.topMargin:16
             anchors.left: parent.left
             anchors.leftMargin: 16
-            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+            opacity: (rightPanel.width > Theme.dp(50)) ? 1.0 : 0.0
             visible: (opacity > 0.1)
-            font.pixelSize: 15
+            font.pixelSize: Theme.dp(15)
             text: qsTr("Members")
         }
 
         ListView {
             anchors.top: titleText.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.left: parent.left
-            anchors.leftMargin: 8
+            anchors.leftMargin: Theme.dp(8)
             anchors.right: parent.right
-            anchors.rightMargin: 8
+            anchors.rightMargin: Theme.dp(8)
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 16
+            anchors.bottomMargin: Theme.dp(16)
             boundsBehavior: Flickable.StopAtBounds
             model: Models.membersListModel
             delegate: StatusMemberListItem {
                 implicitWidth: parent.width
-                nickName: model.nickName
-                userName: model.userName
-                chatKey: model.chatKey
-                trustIndicator: model.trustIndicator
-                isMutualContact: model.isMutualContact
-                image.source: model.source
-                image.isIdenticon: model.isIdenticon
-                isOnline: model.isOnline
+                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
             }
         }
     }

sandbox/demoapp/StatusAppProfileSettingsView.qml

@@ -16,14 +16,14 @@ StatusAppTwoPanelLayout {
         StatusNavigationPanelHeadline {
             id: profileHeadline
             anchors.top: parent.top
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.horizontalCenter: parent.horizontalCenter
             text: "Profile"
         }
 
         ScrollView {
             anchors.top: profileHeadline.bottom
-            anchors.topMargin: 16
+            anchors.topMargin: Theme.dp(16)
             anchors.bottom: parent.bottom
             width: parent.width
 
@@ -34,7 +34,7 @@ StatusAppTwoPanelLayout {
             Column {
                 id: profileMenuItems
                 anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 4
+                spacing: Theme.dp(4)
 
                 Repeater {
                     model: Models.demoProfileGeneralMenuItems
@@ -56,7 +56,7 @@ StatusAppTwoPanelLayout {
 
                 Item {
                     id: invisibleSeparator
-                    height: 16
+                    height: Theme.dp(16)
                     width: parent.width
                 }
 

sandbox/demoapp/data/Models.qml

@@ -4,65 +4,15 @@ 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
@@ -78,7 +28,9 @@ QtObject {
             itemId: "x012340001"
             name: "status-desktop"
             icon: ""
+            emoji: ""
             isIdenticon: false
+            colorHash: []
             color: "red"
             description: ""
             type: StatusChatListItem.Type.PublicChat
@@ -95,7 +47,9 @@ 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
@@ -111,7 +65,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             itemId: "x012340003"
             name: "Black Ops"
             icon: ""
+            emoji: ""
             isIdenticon: false
+            colorHash: []
             color: "purple"
             description: ""
             type: StatusChatListItem.Type.OneToOneChat
@@ -127,7 +83,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             itemId: "x012340004"
             name: "Spectacular Growing Otter"
             icon: ""
+            emoji: ""
             isIdenticon: false
+            colorHash: []
             color: "orange"
             description: ""
             type: StatusChatListItem.Type.OneToOneChat
@@ -143,7 +101,9 @@ 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
@@ -397,7 +357,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: ""
             iconName: "chat"
             iconColor: ""
-            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_1_1"
@@ -405,7 +364,6 @@ 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"
@@ -413,7 +371,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
                     iconName: ""
                     iconColor: ""
-                    isIdenticon: true
                 }]}
         ListElement {
             value: "item_2"
@@ -421,7 +378,6 @@ 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"
@@ -429,7 +385,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 },
                 ListElement {
                     value: "sub_item_2_2"
@@ -437,7 +392,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 },
                 ListElement {
                     value: "sub_item_2_3"
@@ -445,7 +399,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 }]}
         ListElement {
             value: "item_3"
@@ -453,7 +406,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: "";
             iconName: "info"
             iconColor: ""
-            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_3_1"
@@ -461,7 +413,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 }]}
         ListElement {
             value: "item_4"
@@ -469,7 +420,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             imageSource: "";
             iconName: ""
             iconColor: "red"
-            isIdenticon: false
             subItems: [
                 ListElement {
                     value: "sub_item_4_1"
@@ -477,7 +427,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                     imageSource: ""
                     iconName: "channel"
                     iconColor: ""
-                    isIdenticon: false
                 }]}
     }
 
@@ -497,7 +446,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f5789"
-            contactType: 2
+            isMutualContact: true
+            trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
             isReply: false
@@ -525,7 +475,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
  CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            contactType: 3
+            isMutualContact: true
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
             isReply: false
@@ -552,7 +503,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAkUlEQVR4nOzYwQmDQBQG4SSkl3SQyizDyuzAavTi0cPK8sPwM9/Rw8rw4KH7eZUwhMYQGkNoDKGpCfmmDl63/bh7vvx/78T7aiZiCI0hNMMbJL2FZs+vmYghNIbQTG+cp9smtf1qJmIIjSEKqZmIITSG0Azfa6W/qfxDvBhCY4hCaiZiCI0hNIbQGEJzBgAA///3pSBjX42sYAAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f2333"
-            contactType: 3
+            isMutualContact: true
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
             isReply: false
@@ -579,7 +531,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage:  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f6789"
-            contactType: 4
+            isMutualContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
             isReply: false
@@ -607,7 +560,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: true
+            trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
             isReply: false
@@ -635,7 +589,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
             isReply: false
@@ -663,7 +618,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: true
             editMode: false
             isReply: false
@@ -692,7 +648,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
             isReply: true
@@ -721,7 +678,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
             isReply: true
@@ -750,7 +708,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
             isReply: true
@@ -779,7 +738,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
             hasMention: false
             editMode: false
             isReply: true
@@ -807,7 +767,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: false
+            trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
             hasMention: false
             editMode: false
             isReply: false
@@ -834,7 +795,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: true
+            trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
             isReply: false
@@ -861,7 +823,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDKExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
             isIdenticon: true
             chatKey: "0x04d1bed19c523299cbd07ddec7b8949ad7dd923819a68e0b733c9c0bc38cde276bd256f098e755f8f028395c2c91f438a22adaff6caded060b7cc0ef3f470f1234"
-            contactType: 0
+            isMutualContact: true
+            trustIndicator: StatusContactVerificationIcons.TrustedType.None
             hasMention: false
             editMode: false
             isReply: false
@@ -880,47 +843,50 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     property var membersListModel: ListModel {
         id: membersList
         ListElement {
-            nickName: "This is an example"
-            userName: "annabelle"
-            chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
-            trustIndicator: StatusMemberListItem.TrustedType.Verified
-            isMutualContact: true
-            isOnline: true
-            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
+            localNickname: "This is an example"
+            displayName: "Maria"
+            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: true
+            isUntrustworthy: false
+            isContact: true
+            onlineStatus: 1
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                             nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
+            isAdmin: false
         }
         ListElement {
-            nickName: "carmen.eth"
-            userName: ""
-            chatKey: ""
-            trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
-            isMutualContact: false
-            isOnline: false
-            source: ""
-            isIdenticon: false
+            localNickname: ""
+            displayName: "carmen.eth"
+            pubKey: "0x043a7ed78362567894688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: false
+            isUntrustworthy: true
+            isContact: false
+            onlineStatus: 0
+            icon: ""
+            isAdmin: false
         }
         ListElement {
-            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
+            localNickname: "This girl I know from work"
+            displayName: "annabelle"
+            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486dsfkjghyu2cf04"
+            isVerified: false
+            isUntrustworthy: false
+            isContact: false
+            onlineStatus: 1
+            isAdmin: false
+            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
                      ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
-            isIdenticon: true
         }
         ListElement {
-            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
+            localNickname: "Mark Cuban"
+            displayName: "mark.eth"
+            pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc79872cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
+            isVerified: false
+            isUntrustworthy: true
+            isContact: true
+            onlineStatus: 0
+            icon: ""
+            isAdmin: false
         }
     }
 
@@ -983,8 +949,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
             notificationsCount: 0
         }
         ListElement {
-            sectionId: "wallet"
+            sectionId: "communitiesPortal"
             sectionType: 2
+            name: "Communities Portal"
+            active: false
+            image: ""
+            icon: "communities"
+            color: ""
+            hasNotification: false
+            notificationsCount: 0
+        }
+        ListElement {
+            sectionId: "wallet"
+            sectionType: 3
             name: "Wallet"
             active: false
             image: ""
@@ -995,7 +972,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         }
         ListElement {
             sectionId: "browser"
-            sectionType: 3
+            sectionType: 4
             name: "Browser"
             active: false
             image: ""
@@ -1016,4 +993,491 @@ 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":"🌐"}
 }

sandbox/doc/style.css

@@ -1,41 +0,0 @@
-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;
-}

sandbox/main.cpp

@@ -11,6 +11,11 @@ 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();

sandbox/main.qml

@@ -2,6 +2,8 @@ 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
 
@@ -11,15 +13,14 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Platform 0.1
+import StatusQ.Core.Utils 0.1
 
 import "demoapp/data" 1.0
 
 StatusWindow {
     id: rootWindow
-    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
-                                                                  :  1224
-    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
-                                                                   :840
+    width: Theme.screenWidth
+    height: Theme.screenHeight
     visible: true
     title: qsTr("StatusQ Documentation App")
 
@@ -31,10 +32,7 @@ StatusWindow {
 
     property real factor: 1.0
 
-    Component.onCompleted: {
-        Theme.palette = lightTheme
-        rootWindow.updatePosition();
-    }
+    Component.onCompleted: rootWindow.updatePosition()
 
     QtObject {
         id: appSectionType
@@ -60,6 +58,11 @@ StatusWindow {
         }
     }
 
+    readonly property real scaleRatio: Math.min(rootWindow.width / Theme.screenWidth, rootWindow.height / Theme.screenHeight)
+    onScaleRatioChanged: {
+        Theme.scaleFactor = scaleRatio;
+    }
+
     StatusAppLayout {
         id: appLayout
         anchors.fill: parent
@@ -82,7 +85,7 @@ StatusWindow {
                 badge.value: model.notificationsCount
                 badge.visible: model.hasNotification
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
-                badge.border.width: 2
+                badge.border.width: Theme.dp(2)
                 onClicked: {
                     stackView.clear()
                     if(model.sectionType === appSectionType.apiDocumentation)
@@ -107,15 +110,13 @@ StatusWindow {
 
         ThemeSwitch {
             anchors.top: parent.top
-            anchors.topMargin: 32
+            anchors.topMargin: Theme.dp(32)
             anchors.right: parent.right
-            anchors.rightMargin: 32
-            onCheckedChanged: {
-                if (Theme.palette === rootWindow.lightTheme) {
-                    Theme.palette = rootWindow.darkTheme
-                } else {
-                    Theme.palette = rootWindow.lightTheme
-                }
+            anchors.rightMargin: Theme.dp(32)
+            lightThemeEnabled: storeSettings.lightTheme
+            onLightThemeEnabledChanged: {
+                Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
+                storeSettings.lightTheme = lightThemeEnabled
             }
         }
     }
@@ -126,11 +127,13 @@ StatusWindow {
         StatusAppTwoPanelLayout {
             id: mainPageView
 
-            function page(name) {
+            function page(name, fillPage) {
+                storeSettings.fillPage = fillPage ? true : false
                 viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
             }
             function control(name) {
                 viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
+                storeSettings.fillPage = false
             }
 
             leftPanel: Item {
@@ -139,87 +142,92 @@ StatusWindow {
                     anchors.top: parent.top
                     anchors.bottom: parent.bottom
                     anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + 56
+                    contentHeight: navigation.height + Theme.dp(56)
                     contentWidth: navigation.width
                     clip: true
                     Column {
                         id: navigation
                         anchors.top: parent.top
-                        anchors.topMargin: 48
+                        anchors.topMargin: Theme.dp(48)
                         anchors.horizontalCenter: parent.horizontalCenter
                         spacing: 0
 
                         StatusListSectionHeadline { text: "StatusQ.Core" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Icons"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Layout" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Layouts"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title.substring(0, title.length - 1));
                         }
 
                         StatusListSectionHeadline { text: "StatusQ.Controls" }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Buttons"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusSwitchTab"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page("StatusTabSwitch");
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "StatusChatCommandButton"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
-                        StatusNavigationListItem { 
+                        StatusNavigationListItem {
                             title: "Controls"
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.control(title);
                         }
+                        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);
@@ -229,23 +237,28 @@ 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);
@@ -270,8 +283,23 @@ 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);
@@ -288,6 +316,21 @@ 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);
+                        }
                     }
                 }
             }
@@ -295,8 +338,11 @@ 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
@@ -305,14 +351,16 @@ 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: mainPageView.control("Icons")
+                            source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
                             onSourceChanged: {
+                                storeSettings.selected = viewLoader.source
                                 if (source.toString().includes("Icons")) {
                                     item.iconColor = Theme.palette.primaryColor1;
                                 }
@@ -320,6 +368,15 @@ StatusWindow {
                         }
                     }
                 }
+                Loader {
+                    active: storeSettings.fillPage
+                    anchors.fill: parent
+                    anchors.topMargin: Theme.dp(64)
+                    visible: storeSettings.fillPage
+                    clip: true
+
+                    source: viewLoader.source
+                }
             }
         }
     }
@@ -358,12 +415,12 @@ StatusWindow {
                 id: platformSwitch
                 anchors.left: demoApp.left
                 anchors.bottom: demoApp.top
-                anchors.bottomMargin: 20
-                spacing: 2
+                anchors.bottomMargin: Theme.dp(20)
+                spacing: Theme.dp(2)
 
                 Text {
                     text: "OSX"
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
@@ -379,7 +436,7 @@ StatusWindow {
 
                 Text {
                     text: "Win"
-                    font.pixelSize: 15
+                    font.pixelSize: Theme.dp(15)
                     anchors.verticalCenter: parent.verticalCenter
                 }
             }
@@ -391,8 +448,8 @@ StatusWindow {
                 anchors.fill: demoApp
                 source: demoApp
                 horizontalOffset: 0
-                verticalOffset: 5
-                radius: 20
+                verticalOffset: Theme.dp(5)
+                radius: Theme.dp(20)
                 samples: 20
                 color: "#22000000"
             }
@@ -402,7 +459,7 @@ StatusWindow {
     StatusMacTrafficLights {
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.margins: 13
+        anchors.margins: Theme.dp(13)
 
         visible: Qt.platform.os == "osx"
 
@@ -437,4 +494,11 @@ StatusWindow {
             rootWindow.toggleFullScreen()
         }
     }
+
+    Settings {
+        id: storeSettings
+        property string selected: ""
+        property bool lightTheme: true
+        property bool fillPage: false
+    }
 }

sandbox/pages/StatusAccountSelectorPage.qml

@@ -7,10 +7,10 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
-
+import StatusQ.Core.Utils 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusAccountSelector {
         id: accountSelector

sandbox/pages/StatusAddressPage.qml

@@ -2,6 +2,7 @@ import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
+import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
 import Sandbox 0.1
@@ -14,7 +15,7 @@ Column {
     }
 
     Item {
-        width: 200
+        width: Theme.dp(200)
         height: childrenRect.height
         StatusAddress {
             text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"

sandbox/pages/StatusChatInfoToolBarPage.qml

@@ -8,8 +8,8 @@ import StatusQ.Popups 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusChatInfoToolBar {
         chatInfoButton.title: "Cryptokitties"        

sandbox/pages/StatusColorSelectorGridPage.qml

@@ -0,0 +1,36 @@
+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
+    }
+}

sandbox/pages/StatusColorSelectorPage.qml

@@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusColorSelector {
         model: ["red", "blue", "green"]

sandbox/pages/StatusColorSpacePage.qml

@@ -0,0 +1,110 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+Item {
+
+    ColumnLayout {
+        anchors.centerIn: parent
+
+        StatusBaseText {
+            text: qsTr("Thickness")
+        }
+
+        StatusSlider {
+            id: thicknessSlider
+            from: colorSpace.width / 8
+            to: colorSpace.width / 16
+            value: colorSpace.width / 10
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Min saturate: ") + colorSpace.minSaturate.toFixed(2)
+        }
+
+        StatusSlider {
+            id: minSatSlider
+            from: 0
+            to: 0.5
+            value: 0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Max saturate: ") + colorSpace.maxSaturate.toFixed(2)
+        }
+
+        StatusSlider {
+            id: maxSatSlider
+            from: 0.51
+            to: 1.0
+            value: 1.0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Min value: ") + colorSpace.minValue.toFixed(2)
+        }
+
+        StatusSlider {
+            id: minValSlider
+            from: 0
+            to: 0.5
+            value: 0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Max value: ") + colorSpace.maxValue.toFixed(2)
+        }
+
+        StatusSlider {
+            id: maxValSlider
+            from: 0.51
+            to: 1.0
+            value: 1.0
+            Layout.fillWidth: true
+        }
+
+        StatusColorSpace {
+            id: colorSpace
+            color: "#ed77eb"
+            thickness: thicknessSlider.value
+            minSaturate: minSatSlider.value
+            maxSaturate: maxSatSlider.value
+            minValue: minValSlider.value
+            maxValue: maxValSlider.value
+        }
+
+        StatusBaseText {
+            text: qsTr("Color") + ": " + colorSpace.color
+        }
+
+        Rectangle {
+            color: colorSpace.color
+            implicitHeight: 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)
+        }
+    }
+}

sandbox/pages/StatusCommunityCardPage.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.13
+
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+import "../demoapp/data" 1.0
+
+GridLayout {
+
+    QtObject {
+        id: d
+
+        function navigateToCommunity(communityID) {
+            console.log("Clicked community: " + communityID)
+        }
+    }
+
+    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    columns: 2
+    columnSpacing: Theme.dp(28)
+    rowSpacing: Theme.dp(28)
+
+    Repeater {
+        model: Models.curatedCommunitiesModel
+        delegate: StatusCommunityCard {
+            locale: "en"
+            communityId: model.communityId
+            loaded: model.available
+            logo: model.logo
+            banner: model.banner
+            name: model.name
+            description: model.description
+            members: model.members
+            activeUsers: model.activeUsers
+            popularity: model.popularity
+            isPrivate: model.isPrivate
+            tokenLogo: model.tokenLogo
+            categories: ListModel {
+                ListElement { name: "Crypto"; emoji: "🔗"}
+                ListElement { name: "Privacy"; emoji: "👻"}
+                ListElement { name: "Social"; emoji: "☕"}
+            }
+
+            onClicked: { d.navigateToCommunity(communityId) }
+        }
+    }
+}

sandbox/pages/StatusCommunityTagsPage.qml

@@ -0,0 +1,83 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+import "../demoapp/data" 1.0
+
+Item {
+
+    property int cntSelectedTags: 0
+    property int maxSelectedTags: 4
+    property ListModel tagsModel: ListModel {}
+
+    Component.onCompleted: {
+        tagsModel.clear();
+        for (const key of Object.keys(Models.communityTags)) {
+            tagsModel.append({ name: key, emoji: Models.communityTags[key], selected: false });
+        }
+    }
+
+    ColumnLayout {
+        id: column
+        anchors.centerIn: parent
+        width: Theme.dp(600)
+        height: Theme.dp(500)
+        spacing: Theme.dp(20)
+
+        StatusInput {
+            id: tagsFilter
+            leftPadding: 0
+            rightPadding: 0
+            label: qsTr("Select tags that will fit your Community")
+            input.icon.name: "search"
+            input.placeholderText: qsTr("Search tags")
+            Layout.fillWidth: true
+        }
+
+        StatusCommunityTags {
+            filterString: tagsFilter.text
+            model: tagsModel
+            enabled: cntSelectedTags < maxSelectedTags
+            onClicked: {
+                cntSelectedTags++;
+                item.selected = true;
+            }
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            StatusBaseText {
+                text: qsTr("Selected tags")
+                font.pixelSize: Theme.dp(15)
+                Layout.fillWidth: true
+            }
+
+            StatusBaseText {
+                text: cntSelectedTags + "/" + maxSelectedTags
+                color: Theme.palette.baseColor1
+                font.pixelSize: Theme.dp(13)
+            }
+        }
+
+        StatusCommunityTags {
+            model: tagsModel
+            showOnlySelected: true
+            onClicked: {
+                cntSelectedTags--;
+                item.selected = false;
+            }
+            Layout.fillWidth: true
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}

sandbox/pages/StatusExpandableSettingsItemPage.qml

@@ -5,15 +5,15 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 
 Column {
-    spacing: 12
-    width: 800
+    spacing: Theme.dp(12)
+    width: Theme.dp(800)
     anchors.top:parent.top
-    leftPadding: 20
-    rightPadding: 20
+    leftPadding: Theme.dp(20)
+    rightPadding: Theme.dp(20)
 
     Rectangle {
         width: parent.width
-        height: 30
+        height: Theme.dp(30)
         color: Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -60,7 +60,7 @@ Column {
 
     Rectangle {
         width: parent.width
-        height: 30
+        height: Theme.dp(30)
         color:  Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -103,7 +103,7 @@ Column {
 
     Rectangle {
         width: parent.width
-        height: 30
+        height: Theme.dp(30)
         color:  Theme.palette.baseColor2
         StatusBaseText {
             anchors.verticalCenter: parent.verticalCenter
@@ -134,15 +134,15 @@ Column {
         id: notImplemented
         Rectangle {
             anchors.centerIn: parent
-            width: 654
+            width: Theme.dp(654)
             height: infoText.implicitHeight
             color: Theme.palette.baseColor5
             StatusBaseText {
                 id: infoText
                 anchors.centerIn: parent
                 color: Theme.palette.directColor4
-                font.pixelSize: 15
-                lineHeight: 22
+                font.pixelSize: Theme.dp(15)
+                lineHeight: Theme.dp(22)
                 lineHeightMode: Text.FixedHeight
                 font.weight: Font.Medium
                 text: qsTr("Not Implemented")

sandbox/pages/StatusImageCropPanelPage.qml

@@ -0,0 +1,94 @@
+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
+        }
+    }
+}

sandbox/pages/StatusInputPage.qml

@@ -9,7 +9,7 @@ import StatusQ.Controls.Validators 0.1
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusInput {
         input.placeholderText: "Placeholder"
@@ -57,11 +57,38 @@ 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"
@@ -70,8 +97,8 @@ Column {
     StatusInput {
         label: "StatusInput"
         secondaryLabel: "with right icon"
-        input.icon.width: 15
-        input.icon.height: 11
+        input.icon.width: Theme.dp(15)
+        input.icon.height: Theme.dp(11)
         input.icon.name: text !== "" ? "checkmark" : ""
         input.leftIcon: false
     }
@@ -80,7 +107,7 @@ Column {
         label: "Label"
         secondaryLabel: "secondary label"
         input.placeholderText: "Placeholder"
-        input.implicitHeight: 56
+        input.implicitHeight: Theme.dp(56)
     }
 
     StatusInput {
@@ -102,12 +129,26 @@ 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.component: StatusIcon {
+        input.rightComponent: StatusIcon {
             icon: "cancel"
-            height: 16
+            height: Theme.dp(16)
             color: Theme.palette.dangerColor1
         }
     }
@@ -121,13 +162,55 @@ Column {
     StatusInput {
         input.multiline: true
         input.placeholderText: "Multiline with static height"
-        input.implicitHeight: 100
+        input.implicitHeight: Theme.dp(100)
     }
 
     StatusInput {
         input.multiline: true
         input.placeholderText: "Multiline with max/min"
-        input.minimumHeight: 80
-        input.maximumHeight: 200
+        input.minimumHeight: Theme.dp(80)
+        input.maximumHeight: Theme.dp(200)
+    }
+
+    StatusInput {
+        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
     }
 }

sandbox/pages/StatusListPickerPage.qml

@@ -0,0 +1,81 @@
+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()
+        }
+    }
+}

sandbox/pages/StatusMacNotificationPage.qml

@@ -3,11 +3,12 @@ import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
 
 import StatusQ.Platform 0.1
+import StatusQ.Core.Theme 0.1
 
 import Sandbox 0.1
 
 Column {
-    spacing: 8
+    spacing: Theme.dp(8)
 
     StatusMacNotification {
         name: "Some name"

sandbox/pages/StatusPasswordStrengthIndicatorPage.qml

@@ -1,10 +1,11 @@
 import QtQuick.Layouts 1.14
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
 
 GridLayout {
     columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
+    columnSpacing: Theme.dp(5)
+    rowSpacing: Theme.dp(5)
 
     StatusPasswordStrengthIndicator {
         id: veryweakPw